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

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

Merged
merged 3 commits into from Sep 19, 2018

Conversation

Projects
None yet
5 participants
@kjellr
Contributor

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

Replace the fullscreen X icon with a back arrow.
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 self-assigned this Sep 12, 2018

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Sep 12, 2018

Contributor

Would this also be a good candidate for a tooltip?

Contributor

chrisvanpatten commented Sep 12, 2018

Would this also be a good candidate for a tooltip?

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 12, 2018

Contributor

@chrisvanpatten I think there's already a tooltip

Contributor

youknowriad commented Sep 12, 2018

@chrisvanpatten I think there's already a tooltip

@kjellr

This comment has been minimized.

Show comment
Hide comment
@kjellr

kjellr Sep 12, 2018

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Sep 12, 2018

Contributor

My bad! 🙈

Contributor

chrisvanpatten commented Sep 12, 2018

My bad! 🙈

@aduth

This comment has been minimized.

Show comment
Hide comment
@aduth

aduth Sep 12, 2018

Member

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

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 referenced this pull request Sep 12, 2018

Merged

UI: Add a fullscreen mode #9567

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 12, 2018

Contributor

Love this, and love Andrews suggestion also.

Contributor

jasmussen commented Sep 12, 2018

Love this, and love Andrews suggestion also.

jasmussen added a commit to WordPress/dashicons that referenced this pull request Sep 19, 2018

Add Exit icon.
This adds an "Exit" icon, which is used to exit fullscreen mode in Gutenberg.

See discussion in WordPress/gutenberg#9838 (comment).

@jasmussen jasmussen referenced this pull request Sep 19, 2018

Merged

Add Exit icon. #321

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 19, 2018

Contributor

Added the icon to Dashicons: WordPress/dashicons#321

Added the sprite to Gutenberg in #10025

CC: @kjellr

Contributor

jasmussen commented Sep 19, 2018

Added the icon to Dashicons: WordPress/dashicons#321

Added the sprite to Gutenberg in #10025

CC: @kjellr

@kjellr kjellr requested review from jasmussen and aduth Sep 19, 2018

@kjellr

This comment has been minimized.

Show comment
Hide comment
@kjellr

kjellr Sep 19, 2018

Contributor

@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?

Contributor

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?

@aduth

aduth approved these changes Sep 19, 2018

Code-wise this is 👍

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 19, 2018

Contributor

Ship it!

Contributor

jasmussen commented Sep 19, 2018

Ship it!

@kjellr kjellr added this to the 4.0 milestone Sep 19, 2018

@kjellr kjellr merged commit d5bbd81 into master Sep 19, 2018

2 checks passed

codecov/project 48.68% remains the same compared to 31497c2
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@kjellr kjellr deleted the update/full-screen-close-icon branch Sep 19, 2018

@kjellr

This comment has been minimized.

Show comment
Hide comment
@kjellr

kjellr Sep 19, 2018

Contributor

🎉 Thanks, all!

Contributor

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