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.

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

Update/ui controls focus style #1414

Merged
merged 3 commits into from
Jul 24, 2017
Merged

Conversation

afercia
Copy link
Contributor

@afercia afercia commented Jun 23, 2017

This PR is a first pass to add a focus style to some elements that still miss it. Changes proposed here can be certainly improved and refined, also because some of these controls could change in further iterations.

Also to note, the mode switcher select looked different across browsers and platforms (see screenshots on the related issue); select elements are a bit tricky to style, but thanks to the fact WordPress has dropped support for old IEs, it is possible to use some decently solid CSS rules to have some simple styling.

  • adds focus style to:
    • the mode switcher select (focus style similar to the other controls in the toolbar)
    • the Save button
    • the Move to trash button
  • makes the Move to trash button red, for consistency with the WordPress conventions
  • makes the mode switcher select styled also in IE 11 and Firefox!
  • adds a label to the mode switcher select

Notes:

  • maybe consider to increase the Save button clickable area
  • I haven't touched the "switch toggles" mentioned in the issue, since those would require some specific design feedback

Screenshot with some elements in a "focused" state:

screen shot 2017-06-23 at 19 08 42

Fixes #1376

@afercia afercia force-pushed the update/ui-controls-focus-style branch from 7e83f29 to 5465e6f Compare July 19, 2017 14:39
@afercia
Copy link
Contributor Author

afercia commented Jul 19, 2017

Rebased to solve conflicts. Note:

  • the trash is still red, but uses the button-link button-link-delete WP classes so it's now underlined
  • to test (I've tested, some more testing would be nice): the mode switcher select is now styled also in IE 11 and Firefox

screen shot 2017-07-19 at 16 45 18

@jasmussen
Copy link
Contributor

Seems good at a glance, but if you need a review I can offer it Monday.

@afercia
Copy link
Contributor Author

afercia commented Jul 21, 2017

I try to always ask for a review to be respectful :) Unless you say me to merge it anyways and we cal always iterate later.

@afercia
Copy link
Contributor Author

afercia commented Jul 22, 2017

The last commit improves the horizontal alignment of the Undo/Redo dashicons: all the IconButtons use some right margin on their dashicon:

screen shot 2017-07-22 at 11 10 29

and in this case, it needs to be reset.

@jasmussen
Copy link
Contributor

I love this! Thanks for working on it. Thumbs up from me! 👍 👍

@afercia
Copy link
Contributor Author

afercia commented Jul 24, 2017

@jasmussen thanks!

@afercia afercia merged commit d8b2134 into master Jul 24, 2017
@afercia afercia deleted the update/ui-controls-focus-style branch July 24, 2017 08:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants