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

Fix off center post-publish button #17726

Merged
merged 10 commits into from
Nov 14, 2019
Merged

Fix off center post-publish button #17726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
482c1d5
Horizontally center the post-publish button
richtabor Oct 2, 2019
2556c5e
Move post-pubish close panel icon off the right edge
richtabor Oct 2, 2019
98ca599
Removed spacer and adjusted height of button. Centered button as well…
mapk Oct 16, 2019
d36e6bd
Merge branch 'master' into fix/17691-publish-button-off-center
richtabor Oct 24, 2019
2da19f0
Merge branch 'master' into fix/17691-publish-button-off-center
richtabor Oct 30, 2019
a088acd
Merge branch 'master' into fix/17691-publish-button-off-center
richtabor Nov 3, 2019
cb228b1
Update snapshot
richtabor Nov 3, 2019
717c4b0
Merge branch 'master' into fix/17691-publish-button-off-center
richtabor Nov 7, 2019
de38da4
Remove editor-post-publish-panel__spacer selector
richtabor Nov 7, 2019
abf0d91
Tweak positioning of "Close panel" to center "Publish" button properly
richtabor Nov 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions packages/edit-post/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,17 +163,13 @@
}

.edit-post-layout .editor-post-publish-panel__header-publish-button {
justify-content: center;

// Match the size of the Publish... button.
.components-button.is-large {
.components-button {
height: 33px;
line-height: 32px;
}

// Size the spacer flexibly to allow for different button lengths.
.editor-post-publish-panel__spacer {
display: inline-flex;
flex: 0 1 52px; // This number is approximative to keep the publish button at the same position when opening the panel
}
}

.edit-post-toggle-publish-panel {
Expand Down
1 change: 0 additions & 1 deletion packages/editor/src/components/post-publish-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export class PostPublishPanel extends Component {
) : (
<div className="editor-post-publish-panel__header-publish-button">
<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
<span className="editor-post-publish-panel__spacer"></span>
</div>
) }
<IconButton
Expand Down
8 changes: 7 additions & 1 deletion packages/editor/src/components/post-publish-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,18 @@

.editor-post-publish-panel__header {
background: $white;
padding-left: 16px;
padding-left: 8px;
padding-right: 8px;
height: $header-height;
border-bottom: $border-width solid $light-gray-500;
display: flex;
align-items: center;
align-content: space-between;

.components-icon-button {
position: absolute;
right: 8px;
}
}

.editor-post-publish-panel__header-publish-button {
Expand Down
9 changes: 0 additions & 9 deletions packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,6 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
focusOnMount={true}
onSubmit={[Function]}
/>
<span
className="editor-post-publish-panel__spacer"
/>
</div>
<ForwardRef(IconButton)
aria-expanded={true}
Expand Down Expand Up @@ -123,9 +120,6 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
focusOnMount={true}
onSubmit={[Function]}
/>
<span
className="editor-post-publish-panel__spacer"
/>
</div>
<ForwardRef(IconButton)
aria-expanded={true}
Expand Down Expand Up @@ -162,9 +156,6 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
focusOnMount={true}
onSubmit={[Function]}
/>
<span
className="editor-post-publish-panel__spacer"
/>
</div>
<ForwardRef(IconButton)
aria-expanded={true}
Expand Down