List view: add drag cursor to draggable list items #57493
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ramonjd
added
[Type] Enhancement
|
Size Change: +23 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
In Chrome I noticed a bug where the cursor doesn't appear randomly for the navigation list view (in the left hand "view" sidebar). Now I can't reproduce 😄 |
apeatling
approved these changes
Jan 3, 2024
There was a problem hiding this comment.
Everything checked out. The only thing that bothered me slightly was the grab cursor still appears on the Navigation view when hovering over the expand/contract chevron. It would look better with a pointer. You can still drag the whole thing from that chevron, so not a huge deal.
✅ LGTM
|
Thanks for testing.
That's a fair point. I can do a follow up and tighten up the CSS selectors. |
andrewserong
reviewed
Jan 3, 2024
There was a problem hiding this comment.
Very cool, I like this, I think the grabbing cursor makes a big difference 👍
One thing I noticed is that the cursor jumps a bit for me as I hover between list view items. I think there might be a tiny gap vertically between list view items where the cursor reverts back to a pointer, so it jumps / flickers a bit for me. It's hard to show in a video, but I'm wondering if one way to resolve it could be to move cursor: grab further up the hierarchy, and then set cursor: pointer or cursor: auto for those elements where we want the pointer, such as the block settings menu and the expand / collapse button?
Here's a video of the cursor jumping a little between list view items:
2024-01-04.09.24.35.mp4
What do you think?
I'll look at this in the follow up too. Thank you! 👍🏻 I noticed there was some padding, internal to the |
Ah, good call! Yeah, sounds like a Out of curiosity, why is the |
Because I just type things, and when they kinda work I push the code and wait for you to tell me to make it better. It worked again! Seriously, we don't - the original plan was to show/hide a dragHandle icon onHover and I left the rules in there without reverting. Thanks for picking up on that 💟 @apeatling and @andrewserong - I think I've addressed the pointer cursor over the expander icon, and also the jittery mouse in this PR. |
andrewserong
approved these changes
Jan 4, 2024
There was a problem hiding this comment.
Nice one, thanks for the follow-ups!
✅ No jumps between blocks anymore
✅ Pointer is used on the expander and block settings menu buttons
✅ When a block is set to have movement disabled, the pointer is used
I noticed that after moving a block, sometimes the cursor in Chrome defaults back to the regular mouse cursor. However moving the mouse cursor out of the list view and back to it restores the grabby hand cursor. It's a very minor thing, and doesn't appear to happen in Safari, so doesn't feel like a blocker for this PR IMO.
2024-01-04.11.06.36.mp4
LGTM! ✨
I also saw this! But it came and went for me, and the I'll keep an eye on it. Thank you! |
25 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Perhaps resolves #33686
What?
When hovering over a list item that can be moved, change the cursor from
pointertograb.Hovering over the list item's ellipsis menu will continue to show the
pointercursor.Why?
The intention is to make it a little more obvious to mouse users that the list item is draggable.
How?
Classnames + CSS
Testing Instructions
List view (post and site editor)
2024-01-03.15.11.34.mp4
Navigation
Check in other browsers, e.g., Firefox, Safari, Edge
2024-01-03.15.22.17.mp4
2024-01-03.15.15.33.mp4