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

Chrome: Try reorganizing the editor's header #2878

Merged
merged 3 commits into from Oct 5, 2017

Conversation

Projects
None yet
4 participants
@youknowriad
Contributor

youknowriad commented Oct 4, 2017

Description

This changes the UI of the Editor's moving all the content related actions to the left and the document related actions to the right.

Screenshots (jpeg or gifs if applicable):

screen shot 2017-10-04 at 16 56 35

@codecov

This comment has been minimized.

Show comment
Hide comment
@codecov

codecov bot Oct 4, 2017

Codecov Report

Merging #2878 into master will decrease coverage by 0.02%.
The diff coverage is 3.03%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #2878      +/-   ##
==========================================
- Coverage   33.95%   33.92%   -0.03%     
==========================================
  Files         191      190       -1     
  Lines        5690     5695       +5     
  Branches      997      999       +2     
==========================================
  Hits         1932     1932              
- Misses       3180     3183       +3     
- Partials      578      580       +2
Impacted Files Coverage Δ
editor/header/preview-button/index.js 95.23% <ø> (ø)
editor/header/mode-switcher/index.js 0% <0%> (ø) ⬆️
editor/header/index.js 0% <0%> (ø) ⬆️
editor/header/publish-button/index.js 88.46% <100%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9e84bec...b66aac6. Read the comment docs.

codecov bot commented Oct 4, 2017

Codecov Report

Merging #2878 into master will decrease coverage by 0.02%.
The diff coverage is 3.03%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #2878      +/-   ##
==========================================
- Coverage   33.95%   33.92%   -0.03%     
==========================================
  Files         191      190       -1     
  Lines        5690     5695       +5     
  Branches      997      999       +2     
==========================================
  Hits         1932     1932              
- Misses       3180     3183       +3     
- Partials      578      580       +2
Impacted Files Coverage Δ
editor/header/preview-button/index.js 95.23% <ø> (ø)
editor/header/mode-switcher/index.js 0% <0%> (ø) ⬆️
editor/header/index.js 0% <0%> (ø) ⬆️
editor/header/publish-button/index.js 88.46% <100%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9e84bec...b66aac6. Read the comment docs.

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Oct 4, 2017

Contributor

I'm really liking this.

Contributor

mtias commented Oct 4, 2017

I'm really liking this.

.editor-publish-button.is-saving:disabled {
position: relative;
// These styles overrides the disabled state with the button primary styles

This comment has been minimized.

@mtias

mtias Oct 4, 2017

Contributor

@jasmussen is this something we need upstream?

@mtias

mtias Oct 4, 2017

Contributor

@jasmussen is this something we need upstream?

This comment has been minimized.

@jasmussen

jasmussen Oct 5, 2017

Contributor

Good question. I don't know what the best approach is, here — looking at it now I'm worried that we might have a blue disabled button, even if a user has a different admin color scheme.

Long term one would hope we had a single "button-primary" component that has this all baked in, instead of multiple disparate CSS that's competing.

@jasmussen

jasmussen Oct 5, 2017

Contributor

Good question. I don't know what the best approach is, here — looking at it now I'm worried that we might have a blue disabled button, even if a user has a different admin color scheme.

Long term one would hope we had a single "button-primary" component that has this all baked in, instead of multiple disparate CSS that's competing.

youknowriad and others added some commits Oct 4, 2017

Polish the header a bit
- Normalize the margins between items
- Tweak the alignment and size of the publish button
- Make the Settings cog have a background when toggled, and match the size of the publish button
@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 5, 2017

Contributor

A lot of this was inspired by @afercia and @hedgefield and #467, particularly the discussions around grouping the save state indicator with the publish button. I'm curious of your thoughts on this design, Andrea.

Contributor

jasmussen commented Oct 5, 2017

A lot of this was inspired by @afercia and @hedgefield and #467, particularly the discussions around grouping the save state indicator with the publish button. I'm curious of your thoughts on this design, Andrea.

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Oct 5, 2017

Contributor

@jasmussen grouping and separating content related actions and document/editor related actions makes lot of sense to me. It is a nice improvement.

Also the logical sequence:
Is everything saved? Yes > Let me check how it looks. Preview > OK Publish

seems good to me.

Not sure about a couple details and it doesn't address the sidebar toggle issue yet but to me this is an improvement. 🙂 I've probably missed some of the recent changes, quick questions:

  • what about the visual/text mode switcher?
  • what the ellipsis button is for?
Contributor

afercia commented Oct 5, 2017

@jasmussen grouping and separating content related actions and document/editor related actions makes lot of sense to me. It is a nice improvement.

Also the logical sequence:
Is everything saved? Yes > Let me check how it looks. Preview > OK Publish

seems good to me.

Not sure about a couple details and it doesn't address the sidebar toggle issue yet but to me this is an improvement. 🙂 I've probably missed some of the recent changes, quick questions:

  • what about the visual/text mode switcher?
  • what the ellipsis button is for?
@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 5, 2017

Contributor

what about the visual/text mode switcher?
what the ellipsis button is for?

I think this got buried in another ticket or PR, my apologies, but it is related to the PR to allow users to edit the HTML on a per-block basis (#2797). It's not fully fleshed out yet, but basically the ellipsis would be the mode switch:

screen shot 2017-10-05 at 11 28 41

It could potentially also be pluggable, so global actions like for example spell check, could live there.

Contributor

jasmussen commented Oct 5, 2017

what about the visual/text mode switcher?
what the ellipsis button is for?

I think this got buried in another ticket or PR, my apologies, but it is related to the PR to allow users to edit the HTML on a per-block basis (#2797). It's not fully fleshed out yet, but basically the ellipsis would be the mode switch:

screen shot 2017-10-05 at 11 28 41

It could potentially also be pluggable, so global actions like for example spell check, could live there.

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Oct 5, 2017

Contributor

Ah yes the ellipsis thing is also on #2460
Reading all the considerations about mobile in #2797 separating the two group of controls makes even more sense to me.

Contributor

afercia commented Oct 5, 2017

Ah yes the ellipsis thing is also on #2460
Reading all the considerations about mobile in #2797 separating the two group of controls makes even more sense to me.

@youknowriad youknowriad merged commit a89801b into master Oct 5, 2017

3 checks passed

codecov/project 33.92% (-0.03%) compared to 9e84bec
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@youknowriad youknowriad deleted the update/reorganize-header branch Oct 5, 2017

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