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

Already on GitHub? Sign in to your account

Try hiding block toolbar under ellipsis #2248

Open
wants to merge 1 commit into
from

Conversation

Projects
None yet
3 participants
Member

iseulde commented Aug 6, 2017 edited

This is an alternative to #2148 and tries to address the blocky feel/noisy UI feedback.

I'm not proposing to merge this, it's just a proof of concept.

Think of it a bit as the right-click of Gutenberg.

Here are the states:

  • Hover and select. We could still trim down the hover state if needed, or just design it better.

screenshot 2017-08-06 16 03 49

  • Revealed toolbar state. Maybe I'd also move the right icons under the toolbar for a cleaner look.

screenshot 2017-08-06 16 04 47

  • Typing state. Moving the mouse brings you back to the selected state, which happens to be the same as hover. :)

screenshot 2017-08-06 16 06 26

  • Text selection state. Selecting some usually text implies a formatting action, so we should show the toolbar. It hides again when you remove the selection.

screenshot 2017-08-06 16 08 15

Things I like about this:

  • Keyboard users are less likely to need the UI, so it's not there.
  • When you're in the process of writing, you don't really need the toolbar. You only need it for editing (usually after you're done writing). So when you click around while writing (non heavy keyboard users), the toolbar doesn't pop in your face all the time. If you move the mouse, it's the same state as hover.
  • When you are in an editing flow and need to move around text, format it, etc., you don't really need any more clicks. You can open the toolbar immediately from hovering the block. Formatting options become available as soon as you select some text, if you're a heavy mouse user.

Things I don't like about this:

  • Hover state still feel strange to me, in general. Maybe it just needs a better design.

Maybe we need block setting for "object-like" blocks such as images. There it would make sense to show the toolbar all the time, though I don't mind it when I think about it as right-click for Gutenberg. It makes it feel less heavy overall.

@iseulde iseulde Try hiding block toolbar under ellipsis
1e54e12

@iseulde iseulde added the Design label Aug 6, 2017

@iseulde iseulde requested review from karmatosed, mtias, jasmussen, and melchoyce Aug 6, 2017

@iseulde iseulde deleted a comment from codecov bot Aug 6, 2017

@iseulde iseulde deleted a comment from codecov bot Aug 6, 2017

Collaborator

jasmussen commented Aug 7, 2017

While I do love how this looks, I'm not convinced that it's a good solution. It hides a lot of important stuff behind a small touch target, and adds friction. While not as good looking or contextual, I think the fixed toolbar (#2148) is a better "plan b" if we can't get the current system to feel lightweight enough.

Member

iseulde commented Aug 7, 2017

Collaborator

jasmussen commented Aug 7, 2017

Sure. Right now you click the block itself to surface the quick toolbar. This is a big and easy touch target. Although I love the visual minimalism of the little ellipsis, it's a smaller touch target.

Member

iseulde commented Aug 7, 2017

If the touch target is too small, we could always make it bigger.

Anyway, it was worth a try. :)

Collaborator

jasmussen commented Aug 7, 2017

No exploration is wasted. Everything becomes part of the whole picture. If an avenue was explored and abandoned, it's an avenue cauterized, and intentionally not chosen. That has great value too.

@melchoyce

While I think this is a cool exploration, I agree with @jasmussen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment