Reduce quick toolbar silhuette #2359
Conversation
This compacts the quick toolbar, and softens the shadow. It is a new version of #2151, but is essentially the same code. The purpose of this is to visually simplify the quick toolbar so it doesn't feel so heavy. It also unifies the look from mobile to desktop, and frees up some space. The feedback on the previous PR still stands — there's an extra div here. But even after sleeping on it, I can't think of a better way to do this. The thing is, we are moving the drop shadow from each of the three groups into a single group that wraps them all. This has to be an inline-block so it's no wider than the toolbars themselves, but the parent element has to be block so it can have position sticky. Props to @paaljoachim for actually suggesting this a long time ago. 💖
| border-top: 1px solid $light-gray-500; | ||
| border-bottom: 1px solid $light-gray-500; | ||
|
|
||
| > * { |
|
Some more screenshots:
It looks like there's now a z-index issue when linking images, but from the DOM surgery I was able to perform I can't tell if this issue is as a result of this branch or not. @youknowriad any idea if it's a separate issue? |
Codecov Report
@@ Coverage Diff @@
## master #2359 +/- ##
=========================================
+ Coverage 24.76% 24.8% +0.03%
=========================================
Files 152 153 +1
Lines 4744 4750 +6
Branches 800 800
=========================================
+ Hits 1175 1178 +3
- Misses 3015 3018 +3
Partials 554 554
Continue to review full report at Codecov.
|
| icon="ellipsis" | ||
| /> | ||
| </Toolbar> | ||
| <div className="editor-visual-editor__group"> |
There was a problem hiding this comment.
Why do we need two divs: editor-visual-editor__block-controls and editor-visual-editor__group?
There was a problem hiding this comment.
But even after sleeping on it, I can't think of a better way to do this. The thing is, we are moving the drop shadow from each of the three groups into a single group that wraps them all. This has to be an inline-block so it's no wider than the toolbars themselves, but the parent element has to be block so it can have position sticky.
There was a problem hiding this comment.
I missed it too and asked him the same :D
|
Very nice! I'm starting to like the toolbar more and more. The 'itch' for me is mostly the place where we show it. Leaving aside how it half-covers two blocks vertically, I wonder if it wouldn't feel better if it was horizontally aligned to the block margin, which is a little further to the left? Then the text on the first button will also align with the text margin that way. |
I did try this in mockups (though completely open to new mockups, nothing is off the table, and thank you for your comments). When left aligned in the mockups, it felt wrong that the toolbar did not align to the text. Because although it is not the case now, in the future the block boundary will represent the HTML element itself — i.e. the space between boundary and text represents the padding. |
|
Ahh yes that makes sense, thanks for clarifying, I love hearing all the design decisions that have already been thought about :) |
|
Really appreciate your contributions. Please always feel free to reach out in DM also if there's some question I can answer, I think we're in the same timezone. |
This compacts the quick toolbar, and softens the shadow. It is a new version of #2151, but is essentially the same code.
The purpose of this is to visually simplify the quick toolbar so it doesn't feel so heavy. It also unifies the look from mobile to desktop, and frees up some space.
The feedback on the previous PR still stands — there's an extra div here. But even after sleeping on it, I can't think of a better way to do this. The thing is, we are moving the drop shadow from each of the three groups into a single group that wraps them all. This has to be an inline-block so it's no wider than the toolbars themselves, but the parent element has to be block so it can have position sticky.
Screenshot:
Props to @paaljoachim for actually suggesting this a long time ago. 💖