Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dataZoom): change moveHandler cursor icon to move #20304

Merged
merged 4 commits into from
Sep 4, 2024

Conversation

ribeirompl
Copy link

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

Change cursor icon to more intuitive 'move', for dataZoom slider moveHandle

Fixed issues

Details

Before: What was the problem?

The Move/Drag icon is not intuitive, and it makes it difficult to know whether you're busy resizing or dragging, when the mouse is nearby the edge.

Original Move/Drag icon New Move/Drag icon
bad_move suggested_move

Document Info

One of the following should be checked.

  • This PR doesn't relate to document changes
  • The document should be updated later
  • The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

  • This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

  • Please squash the commits into a single one when merging.

Other information

Copy link

echarts-bot bot commented Aug 28, 2024

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The old one was correct because this is the cursor for single directional (vertical or horizontal). 'move' means it can move in both directions, but in fact it can only move in one.

@ribeirompl
Copy link
Author

ribeirompl commented Aug 30, 2024

I did some more research, and it appears that the main icon used for movement in a restricted container is the 'default' icon.

The main examples are scrollbars, in browser windows or other applications:

Example scrollbar in Excel Example scrollbar in VSCode
scrollbar_example1 scrollbar_example2

My main issue with the current icon, is for the case below:
bad_case

It is not obvious from a UX perspective, whether the mouse is going to resize or move the view. In the image above it will actually move the container, but if you shift the cursor 1 pixel down it will resize. But that slight movement has no visual changes/indication to the user as to what will happen.

Therefore I propose to change the movement cursor to the 'default' cursor, as used in scrollbars.

@Ovilia Ovilia changed the base branch from master to v6 September 4, 2024 08:49
Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you made a great point, especially with the research of other apps. But this may cause break change so I'd like to include it in the next major release v6.0.0. It's expected to be released earlier next year.

Copy link
Contributor

github-actions bot commented Sep 4, 2024

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20304@7fe6fa2

@Ovilia Ovilia merged commit ce7c122 into apache:v6 Sep 4, 2024
2 checks passed
Copy link

echarts-bot bot commented Sep 4, 2024

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

@Ovilia Ovilia added this to the 6.0.0 milestone Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants