mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Added confirmation step to new publish flow
refs https://github.com/TryGhost/Team/issues/1542 - added `willPublish` and `willEmail` convenience getters to `PublishOptions` - added confirmation step that is switched to when clicking the Continue button in the publish flow - separated options and confirmation steps into discrete components used by the `publish-flow` modal
This commit is contained in:
Kevin Ansfield
parent
357bbf56cf
commit
f28320abae
6 changed files with 159 additions and 73 deletions
|
|
@ -6,70 +6,19 @@
|
|||
</header>
|
||||
|
||||
<div class="gh-publish-settings-container">
|
||||
<div class="gh-publish-title"><span>Another masterpiece.</span> Ready to share it with the world?</div>
|
||||
<div class="gh-publish-settings">
|
||||
<div class="gh-publish-setting">
|
||||
<div class="gh-publish-setting-title">
|
||||
{{svg-jar "send-email"}}
|
||||
{{#if @data.publishOptions.emailUnavailable}}
|
||||
<span>Publish on site</span>
|
||||
{{else}}
|
||||
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishType")}}>
|
||||
<span>{{@data.publishOptions.selectedPublishTypeOption.display}}</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#liquid-if (eq this.openSection "publishType")}}
|
||||
<div class="gh-publish-setting-form">
|
||||
<EditorLabs::PublishOptions::PublishType
|
||||
@publishOptions={{@data.publishOptions}}
|
||||
/>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
|
||||
{{#if (not-eq @data.publishOptions.publishType "publish")}}
|
||||
<div class="gh-publish-setting">
|
||||
<div class="gh-publish-setting-title">
|
||||
{{svg-jar "member"}}
|
||||
<div class="gh-publish-setting-trigger">
|
||||
{{#let (members-count-fetcher query=(hash filter=@data.publishOptions.recipientFilter)) as |countFetcher|}}
|
||||
{{countFetcher.count}}
|
||||
{{/let}}
|
||||
{{#unless @data.publishOptions.onlyDefaultNewsletter}}
|
||||
<span>{{@data.publishOptions.newsletter.name}}</span>
|
||||
{{/unless}}
|
||||
subscribers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-publish-setting">
|
||||
<div class="gh-publish-setting-title">
|
||||
{{svg-jar "clock"}}
|
||||
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishAt")}}>
|
||||
<span>
|
||||
{{#if @data.publishOptions.isScheduled}}
|
||||
{{capitalize (gh-format-post-time @data.publishOptions.scheduledAtUTC draft=true)}}
|
||||
{{else}}
|
||||
Right now
|
||||
{{/if}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{{#liquid-if (eq this.openSection "publishAt")}}
|
||||
<EditorLabs::PublishOptions::PublishAt
|
||||
@publishOptions={{@data.publishOptions}}
|
||||
/>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="gh-publish-cta">
|
||||
<button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" (noop)}}><span>Continue →</span></button>
|
||||
<button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}><span>Back to edit</span></button>
|
||||
</div>
|
||||
{{#if this.isConfirming}}
|
||||
<EditorLabs::Modals::PublishFlow::Confirm
|
||||
@publishOptions={{@data.publishOptions}}
|
||||
@confirm={{noop}}
|
||||
@cancel={{this.toggleConfirm}}
|
||||
@close={{@close}}
|
||||
/>
|
||||
{{else}}
|
||||
<EditorLabs::Modals::PublishFlow::Options
|
||||
@publishOptions={{@data.publishOptions}}
|
||||
@confirm={{this.toggleConfirm}}
|
||||
@close={{@close}}
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,14 +9,11 @@ export default class PublishModalComponent extends Component {
|
|||
ignoreBackdropClick: true
|
||||
};
|
||||
|
||||
@tracked openSection = null;
|
||||
@tracked isConfirming = false;
|
||||
|
||||
@action
|
||||
toggleSection(section) {
|
||||
if (section === this.openSection) {
|
||||
this.openSection = null;
|
||||
} else {
|
||||
this.openSection = section;
|
||||
}
|
||||
toggleConfirm() {
|
||||
// TODO: validate?
|
||||
this.isConfirming = !this.isConfirming;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="gh-publish-title">
|
||||
Ready to go?<br>
|
||||
Here's what happens next.
|
||||
</div>
|
||||
|
||||
<p>
|
||||
{{#if @publishOptions.isScheduled}}
|
||||
{{#let (moment-site-tz @publishOptions.scheduledAtUTC) as |scheduledAt|}}
|
||||
On
|
||||
<strong>
|
||||
{{moment-format scheduledAt "D MMM YYYY"}}
|
||||
at
|
||||
{{moment-format scheduledAt "HH:mm"}}
|
||||
</strong>
|
||||
{{/let}}
|
||||
{{else}}
|
||||
Your
|
||||
{{/if}}
|
||||
|
||||
{{@publishOptions.post.displayName}}
|
||||
|
||||
{{#if @publishOptions.willEmail}}
|
||||
will be delivered to
|
||||
|
||||
{{#let (members-count-fetcher query=(hash filter=@publishOptions.recipientFilter)) as |countFetcher|}}
|
||||
<strong>{{pluralize countFetcher.count "member"}}</strong>
|
||||
{{/let}}
|
||||
|
||||
{{#if @publishOptions.willPublish}}
|
||||
and
|
||||
{{else}}
|
||||
and will <strong>not</strong> be published on your site.
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if @publishOptions.willPublish}}
|
||||
will be published on your site.
|
||||
{{/if}}
|
||||
|
||||
Sound good?
|
||||
</p>
|
||||
|
||||
<div class="gh-publish-cta">
|
||||
<button type="button" class="gh-btn gh-btn-green gh-btn-large" {{on "click" @confirm}}><span>{{@publishOptions.selectedPublishTypeOption.confirmButton}}</span></button>
|
||||
<button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @cancel}}><span>Back to publish settings</span></button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<div class="gh-publish-title"><span>Another masterpiece.</span> Ready to share it with the world?</div>
|
||||
<div class="gh-publish-settings">
|
||||
<div class="gh-publish-setting">
|
||||
<div class="gh-publish-setting-title">
|
||||
{{svg-jar "send-email"}}
|
||||
{{#if @publishOptions.emailUnavailable}}
|
||||
<span>Publish on site</span>
|
||||
{{else}}
|
||||
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishType")}}>
|
||||
<span>{{@publishOptions.selectedPublishTypeOption.display}}</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#liquid-if (eq this.openSection "publishType")}}
|
||||
<div class="gh-publish-setting-form">
|
||||
<EditorLabs::PublishOptions::PublishType
|
||||
@publishOptions={{@publishOptions}}
|
||||
/>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
|
||||
{{#if (not-eq @publishOptions.publishType "publish")}}
|
||||
<div class="gh-publish-setting">
|
||||
<div class="gh-publish-setting-title">
|
||||
{{svg-jar "member"}}
|
||||
<div class="gh-publish-setting-trigger">
|
||||
{{#let (members-count-fetcher query=(hash filter=@publishOptions.recipientFilter)) as |countFetcher|}}
|
||||
{{countFetcher.count}}
|
||||
{{/let}}
|
||||
{{#unless @publishOptions.onlyDefaultNewsletter}}
|
||||
<span>{{@publishOptions.newsletter.name}}</span>
|
||||
{{/unless}}
|
||||
subscribers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-publish-setting">
|
||||
<div class="gh-publish-setting-title">
|
||||
{{svg-jar "clock"}}
|
||||
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishAt")}}>
|
||||
<span>
|
||||
{{#if @publishOptions.isScheduled}}
|
||||
{{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}}
|
||||
{{else}}
|
||||
Right now
|
||||
{{/if}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{{#liquid-if (eq this.openSection "publishAt")}}
|
||||
<EditorLabs::PublishOptions::PublishAt
|
||||
@publishOptions={{@publishOptions}}
|
||||
/>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="gh-publish-cta">
|
||||
<button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @confirm}}><span>Continue →</span></button>
|
||||
<button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}><span>Back to edit</span></button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class PublishFlowOptions extends Component {
|
||||
@tracked openSection = null;
|
||||
|
||||
@action
|
||||
toggleSection(section) {
|
||||
if (section === this.openSection) {
|
||||
this.openSection = null;
|
||||
} else {
|
||||
this.openSection = section;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,6 +22,14 @@ export class PublishOptions {
|
|||
return this.setupTask.isRunning;
|
||||
}
|
||||
|
||||
get willEmail() {
|
||||
return this.publishType !== 'publish';
|
||||
}
|
||||
|
||||
get willPublish() {
|
||||
return this.publishType !== 'send';
|
||||
}
|
||||
|
||||
// publish date ------------------------------------------------------------
|
||||
|
||||
@tracked isScheduled = false;
|
||||
|
|
@ -70,15 +78,18 @@ export class PublishOptions {
|
|||
value: 'publish+send',
|
||||
label: 'Publish and email',
|
||||
display: 'Publish and email',
|
||||
confirmButton: 'Publish and send',
|
||||
disabled: this.emailDisabled
|
||||
}, {
|
||||
value: 'publish',
|
||||
label: 'Publish only',
|
||||
display: 'Publish on site'
|
||||
display: 'Publish on site',
|
||||
confirmButton: 'Publish'
|
||||
}, {
|
||||
value: 'send',
|
||||
label: 'Email only',
|
||||
display: 'Send email',
|
||||
confirmButton: 'Send',
|
||||
disabled: this.emailDisabled
|
||||
}];
|
||||
}
|
||||
|
|
@ -180,6 +191,8 @@ export class PublishOptions {
|
|||
|
||||
yield Promise.all([countTotalMembers, fetchNewsletters]);
|
||||
}
|
||||
|
||||
// saving ------------------------------------------------------------------
|
||||
}
|
||||
|
||||
// This component exists for the duration of the editor screen being open.
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue