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

Move the block movers to the block toolbar #18685

Draft
wants to merge 1 commit into
base: master
from

Conversation

@youknowriad
Copy link
Contributor

youknowriad commented Nov 22, 2019

Related #18667 #18632

This PR moves the block movers to the block toolbar consistently.

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Nov 22, 2019

Can we also combine with #17352 for the horizontal variant to see how it'd look code-wise?

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Nov 22, 2019

It's nice to see the reduction in code, this should help us maintain and have more consistent interactions :)

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Nov 24, 2019

There seems to be this weird bug that happens now. Try creating a columns block and dragging a block in one of the columns to the other column. Suddenly the selected block gets stuck in this weird state where its toolbar is gone and its content is invisible. This does not happen in master.

image

Aside from that issue, everything else seems to be working fine. I think the drag handle size could be reduced, especially if the move buttons also doubled as drag handles.

I think it would be helpful if the toolbar could extend to the left of the block border in tight situations like this one:

image

However, that's probably out of the scope of this PR.

@youknowriad youknowriad force-pushed the try/move-movers-to-toolbar branch from f3c561a to afc50e8 Nov 26, 2019
@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Nov 26, 2019

@ZebulanStanphill

I think it would be helpful if the toolbar could extend to the left of the block border in tight situations like this one:

Yes, hard to get right though in a generic way.

--
I pushed a fix for the reported bug.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Nov 26, 2019

I've confirmed that the dragging bug is fixed.

Something else I just noticed is that mobile now uses the same sibling inserter as the desktop. Also, the toolbar now overlaps the block below on mobile.

master:
image

This PR:
image

I think something needs to be done about the sibling inserter. I also prefer the no-overlap behavior of the master mobile toolbar.

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Nov 26, 2019

Thanks for the feedback @ZebulanStanphill

I actually didn't touch the sibling inserter at all, I believe you can still trigger it in master as well. I do think the in-between inserter is not that useful in mobile especially because the inserter is always accessible easily (top of the screen) and has the same behavior but I'm not going to touch these in this particular PR.

I'll have to check where the extra padding was added for the toolbar before and restore it.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Nov 26, 2019

Ah, I had forgotten about the add button in the top toolbar. Good point.

@youknowriad youknowriad force-pushed the try/move-movers-to-toolbar branch from afc50e8 to 6421619 Dec 6, 2019
@youknowriad youknowriad force-pushed the try/move-movers-to-toolbar branch from 6421619 to b907f0e Dec 6, 2019
@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Dec 6, 2019

With the recent changes to the mobile toolbar, everything seems to be working fine in this branch now.

@ItsJonQ

This comment has been minimized.

Copy link
Contributor

ItsJonQ commented Dec 6, 2019

@youknowriad Hallooo!

I tested your update :). I've also been actively testing interactions via prototypes from @mtias 's post on Advancing the Block Interface.

I'm not 100% certain about moving the movers to the top bar (yet).
I feel like the primary actions of the toolbar should be on the leftest side.

After playing around a bit...

I have an alternative interaction pattern idea that tried to lighten the UI re: movers.

Screen Capture on 2019-12-06 at 12-20-18

(I don't know if this was tried previously).

The idea came from playing around with Notion (they don't use arrows in their mover though).

If this isn't the right thread to post this, please let me know!

These are my initial thoughts :)

As always, thank you!

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Dec 6, 2019

@ItsJonQ The idea of this PR is to try to move towards the direction of #18667 where the block movers are in the toolbar but hidden under a hover effect.

Your proposal is a good alternative but it seems to move us into a different direction than the one suggested in #18667 so maybe we should figure out the path forward there?

@ItsJonQ

This comment has been minimized.

Copy link
Contributor

ItsJonQ commented Dec 6, 2019

so maybe we should figure out the path forward there?

Makes sense! I'll repost my comment there :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.