Navigation list view: use smaller lock icon #46578
Merged
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
MaggieCabrera
changed the title
MaggieCabrera
added
[Block] Navigation
MaggieCabrera
requested review from
jasmussen,
scruffian,
draganescu,
getdave and
ajlende
|
Size Change: +151 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
|
This is an interesting approach. The way I had envisioned it working was that if a block is locked/controlled then all of the blocks that are locked beneath it would use the smaller icon. I'm not sure which idea is better now :) |
I would vote for:
Also can we add some accessible semantics to these icons so they are perceivable? 🙏 |
draganescu
approved these changes
Dec 15, 2022
|
Thanks for the PR! A couple of quick thoughts, none of which are blocking:
Nice work. |
Ok, so then if I understand correctly: we want the small lock for bost page list and page list items on both list and inspector views, and then we use the bigger lock icon for other locked blocks? I'm not sure about the suggestion of changing the opacity of the icons, I don't think we do that anywhere else |
My take is that we don't actually want to use the big lock icon in very many places at all. It's appropriate for the block toolbar of a locked block, so it has some oomph there. But in the list view, where it's repeated in many places, it can be small across the board. |
MaggieCabrera
force-pushed
the
update/lock-icon
branch
from
ddc365b
to
791fa2f
Compare
|
Ok, this now looks like so:
Thanks for all the feedback! |
scruffian
reviewed
Dec 16, 2022
| @@ -319,11 +319,16 @@ | |||
|
|
|||
| .block-editor-list-view-block-select-button__lock { | |||
| line-height: 0; | |||
| width: 24px; | |||
| width: 16px; | |||
| min-width: 24px; | |||
There was a problem hiding this comment.
Should we change this too?
There was a problem hiding this comment.
no, that makes them look tiny! we are respecting the space of the container because the SVG is still 24px wide. I'm following Joen's codepen of CSS magic for this :D
scruffian
approved these changes
Dec 16, 2022
82 tasks
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.
What?
This PR reduces the size of the lock icon on the off canvas list view
I believe this closes #46191
Why?
The right sidebar has less space and everything was looking very cramped when we have a menu with multiple nesting levels. This helps alleviate that while we keep improving the styles for the menu on the off canvas list view.
How?
Testing Instructions
Insert a navigation block
Add a page list to it in case it doesn't already have it
Check the icons of the page list items on the list view and the right sidebar. They should be small on the later, and bigger on the former.
Screenshots or screencast