mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 00:54:50 +03:00
🎨 Improved save/update button copy in editor (#2413)
no issue - renamed "Update" to "Unpublish" or "Unschedule" to match the available actions - renamed "Save" to "Update" and made it always visible but disabled when there are no unsaved changes - switched <Editor::PublishManagement> to a provider component and extracted `<Editor::PublishButtons>` - allows for the management flow to wrap other UI elements and have the yielded actions passed down so the publish/update flow can be opened from more than just the publish/unschedule/unpublish buttons - added link to "Sent" in editor status that opens the update flow for email-only posts Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
This commit is contained in:
Kevin Ansfield
GitHub
parent
ed235b374d
commit
e1dfe3edb0
@ -4,9 +4,13 @@
|
||||
<span>{{svg-jar "arrow-left"}} Editor</span>
|
||||
</button>
|
||||
<div class="flex">
|
||||
<button class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active" title="Close" type="button" {{on "click" @close}}>
|
||||
<span>Update</span>
|
||||
</button>
|
||||
{{#let @data.publishOptions.post as |post|}}
|
||||
{{#if (not (and post.isSent (not post.isPublished)))}}
|
||||
<button class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active" title="Close" type="button" {{on "click" @close}}>
|
||||
<span>{{if post.isScheduled "Unschedule" "Unpublish"}}</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
<div class="settings-menu-toggle-spacer"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
72
ghost/admin/app/components/editor/publish-buttons.hbs
Normal file
72
ghost/admin/app/components/editor/publish-buttons.hbs
Normal file
@ -0,0 +1,72 @@
|
||||
{{#if @publishManagement.publishOptions.user.isContributor}}
|
||||
{{#if @publishManagement.post.isDraft}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
|
||||
{{on "click" @publishManagement.openPreview}}
|
||||
{{on-key "cmd+p" @publishManagement.togglePreview}}
|
||||
data-test-button="contributor-preview"
|
||||
>
|
||||
<span>Preview</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
<GhTaskButton
|
||||
@buttonText="Save"
|
||||
@task={{@publishManagement.saveTask}}
|
||||
@runningText="Saving"
|
||||
@class="gh-btn gh-btn-icon gh-btn-editor gh-editor-save-trigger contributor-save-button"
|
||||
data-test-button="contributor-save" />
|
||||
{{else}}
|
||||
{{#if @publishManagement.post.isDraft}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
|
||||
{{on "click" @publishManagement.openPreview}}
|
||||
{{on-key "cmd+p" @publishManagement.togglePreview}}
|
||||
data-test-button="publish-preview"
|
||||
>
|
||||
<span>Preview</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
|
||||
{{on "click" @publishManagement.openPublishFlow}}
|
||||
{{on-key "cmd+shift+p"}}
|
||||
disabled={{@publishManagement.publishOptions.isLoading}}
|
||||
data-test-button="publish-flow"
|
||||
>
|
||||
<span>Publish</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<GhTaskButton
|
||||
@task={{@publishManagement.saveTask}}
|
||||
@buttonText="Update"
|
||||
@runningText="Updating..."
|
||||
@successText="Updated"
|
||||
@class="gh-btn gh-btn-editor gh-editor-save-trigger gh-publish-trigger"
|
||||
@idleClass="green"
|
||||
@runningClass="midlightgrey"
|
||||
@successClass="midlightgrey"
|
||||
@failureClass="red"
|
||||
@showIcon={{false}}
|
||||
@disabled={{not @publishManagement.hasUnsavedChanges}}
|
||||
@autoReset={{true}}
|
||||
data-test-button="publish-save"
|
||||
/>
|
||||
|
||||
{{#if (not (and @publishManagement.post.isSent (not @publishManagement.post.isPublished)))}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
|
||||
{{on "click" @publishManagement.openUpdateFlow}}
|
||||
data-test-button="update-flow"
|
||||
>
|
||||
<span>
|
||||
{{if @publishManagement.post.isScheduled "Unschedule" "Unpublish"}}
|
||||
</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@ -1,67 +1,11 @@
|
||||
{{#if this.publishOptions.user.isContributor}}
|
||||
{{#if @post.isDraft}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
|
||||
{{on "click" this.openPreview}}
|
||||
{{on-key "cmd+p" this.togglePreview}}
|
||||
data-test-button="contributor-preview"
|
||||
>
|
||||
<span>Preview</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
<GhTaskButton
|
||||
@buttonText="Save"
|
||||
@task={{this.saveTask}}
|
||||
@runningText="Saving"
|
||||
@class="gh-btn gh-btn-icon gh-btn-editor gh-editor-save-trigger contributor-save-button"
|
||||
data-test-button="contributor-save" />
|
||||
{{else}}
|
||||
{{#if @post.isDraft}}
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
|
||||
{{on "click" this.openPreview}}
|
||||
{{on-key "cmd+p" this.togglePreview}}
|
||||
data-test-button="publish-preview"
|
||||
>
|
||||
<span>Preview</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
|
||||
{{on "click" this.openPublishFlow}}
|
||||
{{on-key "cmd+shift+p"}}
|
||||
disabled={{this.publishOptions.isLoading}}
|
||||
data-test-button="publish-flow"
|
||||
>
|
||||
<span>Publish</span>
|
||||
</button>
|
||||
{{else}}
|
||||
{{#if (or @hasUnsavedChanges this.saveButtonTaskGroup.isRunning)}}
|
||||
<GhTaskButton
|
||||
@task={{this.saveTask}}
|
||||
@runningText="Saving..."
|
||||
@class="gh-btn gh-btn-editor gh-editor-save-trigger gh-publish-trigger"
|
||||
@idleClass="green"
|
||||
@runningClass="midlightgrey"
|
||||
@successClass="midlightgrey"
|
||||
@failureClass="red"
|
||||
@showIcon={{false}}
|
||||
@autoReset={{false}}
|
||||
data-test-button="publish-save"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
|
||||
{{on "click" this.openUpdateFlow}}
|
||||
data-test-button="update-flow"
|
||||
>
|
||||
<span>Update</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{yield (hash
|
||||
post=@post
|
||||
publishOptions=this.publishOptions
|
||||
openPreview=this.openPreview
|
||||
togglePreview=this.togglePreview
|
||||
saveTask=this.saveTask
|
||||
saveButtonTaskGroup=this.saveButtonTaskGroup
|
||||
hasUnsavedChanges=@hasUnsavedChanges
|
||||
openPublishFlow=this.openPublishFlow
|
||||
openUpdateFlow=this.openUpdateFlow
|
||||
)}}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<div role="tooltip" {{on "mouseover" this.onMouseover}} {{on "mouseleave" this.onMouseleave}} data-test-editor-post-status ...attributes>
|
||||
{{!-- template-lint-disable no-invalid-interactive --}}
|
||||
<div {{on "mouseover" this.onMouseover}} {{on "mouseleave" this.onMouseleave}} data-test-editor-post-status ...attributes>
|
||||
{{#if (and this.isSaving @post.isDraft)}}
|
||||
Saving...
|
||||
{{else if @post.isSent}}
|
||||
Sent to {{gh-pluralize @post.email.emailCount "member"}}
|
||||
<button type="button" {{on "click" @openUpdateFlow}} class="gh-editor-post-status-btn">Sent</button>
|
||||
to {{gh-pluralize @post.email.emailCount "member"}}
|
||||
{{else if (and @post.emailOnly @post.isScheduled)}}
|
||||
Scheduled
|
||||
{{#if this.isHovered}}
|
||||
|
||||
@ -1206,4 +1206,8 @@ kbd {
|
||||
|
||||
.gh-dashboard-tooltip {
|
||||
background: var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-editor-post-status-btn::after {
|
||||
background: var(--hairline-color-2);
|
||||
}
|
||||
@ -625,6 +625,21 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gh-editor-post-status-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-editor-post-status-btn::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
bottom: 6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-editor-save-trigger {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@ -6,41 +6,45 @@
|
||||
as |editor|
|
||||
>
|
||||
<header class="gh-editor-header br2 pe-none">
|
||||
<div class="flex items-center pe-auto h-100">
|
||||
{{#if this.ui.isFullScreen}}
|
||||
<LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
|
||||
<Editor::PublishManagement
|
||||
@post={{this.post}}
|
||||
@hasUnsavedChanges={{this.hasDirtyAttributes}}
|
||||
@beforePublish={{perform this.beforeSaveTask}}
|
||||
@afterPublish={{this.afterSave}}
|
||||
@saveTask={{this.saveTask}}
|
||||
as |publishManagement|
|
||||
>
|
||||
<div class="flex items-center pe-auto h-100">
|
||||
{{#if this.ui.isFullScreen}}
|
||||
<LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
|
||||
<span>
|
||||
{{svg-jar "arrow-left"}}
|
||||
{{capitalize (pluralize this.post.displayName)}}
|
||||
</span>
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
<div class="gh-editor-post-status">
|
||||
<span>
|
||||
{{svg-jar "arrow-left"}}
|
||||
{{capitalize (pluralize this.post.displayName)}}
|
||||
<GhEditorPostStatus
|
||||
@post={{this.post}}
|
||||
@hasDirtyAttributes={{this.hasDirtyAttributes}}
|
||||
@isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
|
||||
@openUpdateFlow={{publishManagement.openUpdateFlow}}
|
||||
/>
|
||||
</span>
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
<div class="gh-editor-post-status">
|
||||
<span>
|
||||
<GhEditorPostStatus
|
||||
@post={{this.post}}
|
||||
@hasDirtyAttributes={{this.hasDirtyAttributes}}
|
||||
@isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="flex items-center pe-auto h-100">
|
||||
{{#unless this.post.isNew}}
|
||||
<Editor::PublishManagement
|
||||
@post={{this.post}}
|
||||
@hasUnsavedChanges={{this.hasDirtyAttributes}}
|
||||
@beforePublish={{perform this.beforeSaveTask}}
|
||||
@afterPublish={{this.afterSave}}
|
||||
@saveTask={{this.saveTask}}
|
||||
/>
|
||||
<section class="flex items-center pe-auto h-100">
|
||||
{{#unless this.post.isNew}}
|
||||
<Editor::PublishButtons @publishManagement={{publishManagement}} />
|
||||
|
||||
{{#unless this.showSettingsMenu}}
|
||||
<div class="settings-menu-toggle-spacer"></div>
|
||||
{{#unless this.showSettingsMenu}}
|
||||
<div class="settings-menu-toggle-spacer"></div>
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
</section>
|
||||
</section>
|
||||
</Editor::PublishManagement>
|
||||
</header>
|
||||
|
||||
{{!--
|
||||
|
||||
Loading…
Reference in New Issue
Block a user