Skip to content
New issue

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

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refine the up/down arrows to balance visibility with usability better #5400

Closed
jasmussen opened this issue Mar 5, 2018 · 3 comments · Fixed by #6141
Closed

Refine the up/down arrows to balance visibility with usability better #5400

jasmussen opened this issue Mar 5, 2018 · 3 comments · Fixed by #6141
Assignees
@jasmussen

Comments

@jasmussen
Copy link
Contributor

The side-UI and the inserter interfaces have been iterated a lot over the past few releases, but they are stabilizing, which is a good time to refine.

The movers — the side-UI with up and down arrows to move one or multiple blocks around on the page — were made smaller as part of one of the iterations. Perhaps too small.

Let's revisit those arrow icons, and try to refine them with an eye towards balancing their visual size, their clickable hit-area, and their utility.
@jasmussen jasmussen self-assigned this Mar 5, 2018
@karmatosed
Copy link
Member

I would +1 for increasing size and/or hit area size.

This was referenced Mar 6, 2018
Closed
Closed
Merged
@jasmussen jasmussen mentioned this issue Mar 16, 2018
Merged
@jasmussen
Copy link
Contributor Author

Work on this is ongoing in two PRs, a general refactor and bigger hit areas in #5658 and bigger icons in a separate branch that's not yet PR'ed.

@ZebulanStanphill ZebulanStanphill mentioned this issue Mar 29, 2018
Closed
jasmussen pushed a commit that referenced this issue Apr 6, 2018
Polish side UI, make arrows bigger.
2c5b301 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
@jasmussen
Copy link
Contributor Author

Closing this in favor of #4223 as this is mostly a duplicate, with the added addition that I mean to change the icons to be visibly larger as well.

jasmussen pushed a commit that referenced this issue Apr 12, 2018
Polish side UI, make arrows bigger.
7d30510 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
@jasmussen jasmussen mentioned this issue Apr 12, 2018
Merged
jasmussen pushed a commit that referenced this issue Apr 13, 2018
Polish side UI, make arrows bigger.
33be101 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
gziolo pushed a commit that referenced this issue Apr 13, 2018
@gziolo
Polish side UI, make arrows bigger.
954a6c6 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
jasmussen added a commit that referenced this issue Apr 18, 2018
@jasmussen
Refine side UI (#6141)
e50e200 
* Polish side UI, make arrows bigger.

This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.

* Refine mobile block UI, and responsive hover labels.

* Add trash button to right side UI.

More to come.

* Enhance situation in wide blocks.

* Remove role from Remove button, and remove Trash from menu.

* Editor: Fix Eslint issues in BlockSettingsMenu

* Refine collapsing margins hack, fix flickering.

* Add some clearance between side UI and block.

* Fix z-index issue.

* Fix block settings dropdown menu
nuzzio pushed a commit to nuzzio/gutenberg that referenced this issue Apr 25, 2018
@jasmussen @nuzzio
Refine side UI (WordPress#6141)
07f6505 
* Polish side UI, make arrows bigger.

This is initial work to improve the side UI. It fixes WordPress#5400 and WordPress#4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.

* Refine mobile block UI, and responsive hover labels.

* Add trash button to right side UI.

More to come.

* Enhance situation in wide blocks.

* Remove role from Remove button, and remove Trash from menu.

* Editor: Fix Eslint issues in BlockSettingsMenu

* Refine collapsing margins hack, fix flickering.

* Add some clearance between side UI and block.

* Fix z-index issue.

* Fix block settings dropdown menu
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jasmussen jasmussen

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Refine side UI WordPress/gutenberg
2 participants
@karmatosed @jasmussen