Skip to content

Replace the fullscreen "x" icon with a back arrow#9838

Merged
kjellr merged 3 commits into
masterfrom
update/full-screen-close-icon
Sep 19, 2018
Merged

Replace the fullscreen "x" icon with a back arrow#9838
kjellr merged 3 commits into
masterfrom
update/full-screen-close-icon

Conversation

@kjellr
Copy link
Copy Markdown
Contributor

@kjellr kjellr commented Sep 12, 2018

As per comments by @SNaushadS and others in #9567, the x icon in the upper left corner of fullscreen mode could be misinterpreted as a button for exiting out of full screen mode. Since the button takes you "back" to the All Posts screen, a back arrow may make more sense here.

Current:

screen shot 2018-09-12 at 12 36 02 pm

New:

screen shot 2018-09-12 at 12 35 18 pm

As per comments in #9567. The `x` icon to close the editor while in fullscreen mode could be misconstrued as a button for exiting out of full screen mode. Since the button actually takes you back to the All Posts screen, a back arrow may make more sense here.
@kjellr kjellr added the Needs Design Feedback Needs general design feedback. label Sep 12, 2018
@kjellr kjellr self-assigned this Sep 12, 2018
@chrisvanpatten
Copy link
Copy Markdown
Contributor

Would this also be a good candidate for a tooltip?

@youknowriad
Copy link
Copy Markdown
Contributor

@chrisvanpatten I think there's already a tooltip

@kjellr
Copy link
Copy Markdown
Contributor Author

kjellr commented Sep 12, 2018

I think there's already a tooltip

That's right. Currently:

screen shot 2018-09-12 at 12 52 52 pm

I figured we'd keep the tooltip the same:

screen-shot-2018-09-12-at-12 52 52-pm

@chrisvanpatten
Copy link
Copy Markdown
Contributor

My bad! 🙈

@aduth
Copy link
Copy Markdown
Member

aduth commented Sep 12, 2018

I find the arrow to be an improvement over the "X", for reasons expanded upon in Slack (link requires registration).

For me, it's a bit of the difference between "exit out of ..." (X) vs. "return to ..." (left arrow), where the expectation of "exit out of" would be to close full screen mode. This might be particularly true when one is simply clicking around and happens to find themselves stumbled upon the full screen mode, and then needs an escape route (as was my scenario). I think "exit out of" could work, if we were to use an icon more associated with leaving vs. closing an intermediary (full screen as a mode). I've seen "Exit" icons like these before, for example:

image

https://thenounproject.com/search/?q=exit&i=1920857

@aduth aduth mentioned this pull request Sep 12, 2018
@jasmussen
Copy link
Copy Markdown
Contributor

Love this, and love Andrews suggestion also.

jasmussen pushed a commit to WordPress/dashicons that referenced this pull request Sep 19, 2018
This adds an "Exit" icon, which is used to exit fullscreen mode in Gutenberg.

See discussion in WordPress/gutenberg#9838 (comment).
@jasmussen
Copy link
Copy Markdown
Contributor

Added the icon to Dashicons: WordPress/dashicons#321

Added the sprite to Gutenberg in #10025

CC: @kjellr

@kjellr kjellr requested review from aduth and jasmussen September 19, 2018 17:20
@kjellr
Copy link
Copy Markdown
Contributor Author

kjellr commented Sep 19, 2018

@jasmussen You are the absolute best. Looks great:

screen shot 2018-09-19 at 1 17 50 pm

screen shot 2018-09-19 at 1 18 08 pm

Would someone mind giving this a review?

Copy link
Copy Markdown
Member

@aduth aduth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code-wise this is 👍

@jasmussen
Copy link
Copy Markdown
Contributor

Ship it!

@kjellr kjellr added this to the 4.0 milestone Sep 19, 2018
@kjellr kjellr merged commit d5bbd81 into master Sep 19, 2018
@kjellr kjellr deleted the update/full-screen-close-icon branch September 19, 2018 17:59
@kjellr
Copy link
Copy Markdown
Contributor Author

kjellr commented Sep 19, 2018

🎉 Thanks, all!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs Design Feedback Needs general design feedback.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants