Polish quick toolbar #2151
Closed
Polish quick toolbar #2151
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
Codecov Report
@@ Coverage Diff @@
## master #2151 +/- ##
==========================================
- Coverage 20.33% 20.28% -0.05%
==========================================
Files 136 136
Lines 4274 4283 +9
Branches 724 728 +4
==========================================
Hits 869 869
- Misses 2872 2877 +5
- Partials 533 537 +4
Continue to review full report at Codecov.
|
This fixes #1742.
There have been legitimate concerns about the quick toolbar being too visually heavy. This commit chunks all the toolbar groups snugly together, and reduces the visual silhuette with a softer drop shadow. Let's discuss this.
Put that in a separate PR.
jasmussen
force-pushed
the
polish/tables-quick-toolbar
branch
from
a1e7857
to
bf9f8c0
Compare
|
Reverted the table CSS, moved to a separate PR, #2152, and rebased. |
jasmussen
added
[Status] In Progress
jasmussen
changed the title
ellatrix
reviewed
Aug 2, 2017
| label={ __( 'Toggle extra controls' ) } | ||
| icon="ellipsis" | ||
| /> | ||
| <div className="editor-visual-editor__group"> |
There was a problem hiding this comment.
Do we need an extra div for this? From the screenshot it seems we can just remove some margins? Or am I missing something?
There was a problem hiding this comment.
I moved the drop shadow to a parent container, and that container has to wrap inline-block, and not be full width like the block controls container is.
But I agree it's not super elegant. I'll think about how this can be improved.
aduth
reviewed
Aug 3, 2017
| @@ -1,7 +1,7 @@ | |||
| .components-toolbar { | |||
| margin: 0; | |||
| border: 1px solid $light-gray-500; | |||
| box-shadow: $shadow-popover; | |||
| //box-shadow: $shadow-toolbar; | |||
jasmussen
added a commit
that referenced
this pull request
Aug 11, 2017
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. 💖
|
Closing this in favor of #2359. This was too hard to rebase. |
Tug
pushed a commit
that referenced
this pull request
May 12, 2020
…lipped-on-oneplus Update Gutenberg ref to point to text-clipping fix attempt
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.
This PR bunches together all the quick toolbar groups, and softens the drop shadow:
I liked the separate groups before. It made it very clear, for example, that alignments were a group where if you toggled one, the other was untoggled. But at the same time this benefit may largely be theoretical, and they are still grouped — separated by a vertical line. By grouping them together, aside from getting a little more space, we simplify the visual silhuette, which has been brought up a number of times.
Thoughts?
Edit: reverted a table aspect of this PR and made it separate.