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

Consider moving cog and trash to quick toolbar #2156

Open
jasmussen opened this Issue Aug 2, 2017 · 6 comments

Comments

Projects
None yet
5 participants
Collaborator

jasmussen commented Aug 2, 2017

Right now the cog and trash button float to the right of the block for two reasons:

  1. to free up space in the quick toolbar
  2. to be available on hover

1 is spurious as we've had to move the cog and trash buttons (as well as the mover) into an ellipsis on mobile regardless.

  1. is what we should discuss. There's been discussion recently about the weight of the block UI. And completely granted, it's a complex silhuette for just writing text.

Recent PRs all take stabs at improving this:

  • Fixed toolbar: #2148
  • Combined Quick Toolbar: #2151
  • Lightweight block hover design: #2155

While these all improve things, it seems like it's still a heavy silhuette with floating buttons left and right of a button. By moving the cog and trash buttons to the quick toolbar, we can both get closer to the mobile UI, and we can reducie the silhuette, all at the cost of having to click a block before you can delete it. Since multi select makes it easy to delete blocks, and since backspacing in an empty block deletes them, this feels like a fair tradeoff to me. Compare:

screen shot 2017-08-02 at 13 52 14

screen shot 2017-08-02 at 13 52 20

(Those screenshots assume the ligthweight block hover design gets merged)

CC: @mtias @melchoyce

Collaborator

afercia commented Aug 2, 2017

+1 for trying this, as it would also improve the current focus order. That always puzzles me: move up, move down, cog, trash, and then the toolbar.

Collaborator

jasmussen commented Aug 2, 2017

Here's a mockup that collapses the toolbar, and adds the trash and cog to it also:

screen shot 2017-08-02 at 14 35 38

Here's a before and after for text:

before

after

StaggerLeee commented Aug 2, 2017 edited

Move sorting arrows to the block toolbar too ? You can have them as separate toolbar group with few pixels margin.

I wrote once here, padding at left for all blocks, and no padding at the right is bad visual solution.
Those 2 buttons at the right just made good visual balance.

I know you can solve it for all devices. because just this padding will give You about much enough place in toolbar.

Problem is sorting arrows needed hover over, toolbar needs click on block. (Arrows toolbar group showed on hover, other toolbar buttons on click ?) Do not know how it could be solved. Know only I dont like this ugly spacing at the left of all blocks.

Maybe to follow this logic:

  • When blocks are hovered show only toolbar with sorting arrows, centered.
  • When block is clicked you can assume User IS NOT interested for sorting, but editing. Hide sorting toolbar arrow, show normal toolbar.
Member

karmatosed commented Aug 2, 2017 edited

+1 to having this. I would caution though putting everything there. I am not convinced adding the sorting makes as much sense. My thinking is that isn't to do with the block itself as much as the placement within the document.

Contributor

mtias commented Aug 2, 2017

Thanks for exploring. I don't like bundling things in the toolbar very much (I wish we could find another place for the block switcher) as it makes the toolbar feel heavier to me, and it's not clear the level of abstractions that the various item groups reside on. As mentioned in another issue, I'd like us to focus on improving the writing interactions first before trying to make larger changes to the UI of blocks, because I think a lot of the issues at the moment come from seeing any UI when you would rather see none (because you are writing).

Collaborator

jasmussen commented Aug 4, 2017

See also discussion here: #2155 (comment)

Another option is to move the cog to the quick toolbar, and leave the trash button where it is. I agree this is lower priority than the text interactions and milestones. But it feels like it would help solve a hierarchy issue: block position and state actions on the side (and available on hover), block content options grouped in the quick toolbar.

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