Skip to content

Commit

Permalink
Publish modal updates (#20817)
Browse files Browse the repository at this point in the history 
The new modal for the updated publishing flow has an entirely new
layout, based on feedback previously received. In addition, this PR
includes a few tweaks to the underlying logic.
  • Loading branch information
@dvdwinden
dvdwinden authored Aug 22, 2024
1 parent cd7c27d commit 7c99282
Show file tree
Hide file tree
Showing 9 changed files with 327 additions and 127 deletions.
8 changes: 6 additions & 2 deletions ghost/admin/app/components/editor/modals/publish-flow/confirm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,14 @@ export default class PublishFlowOptions extends Component {
if (this.feature.publishFlowEndScreen) {
if (this.args.publishOptions.isScheduled) {
localStorage.setItem('ghost-last-scheduled-post', this.args.publishOptions.post.id);
this.router.transitionTo('posts', {queryParams: {type: 'scheduled'}});
this.router.transitionTo('posts');
} else {
localStorage.setItem('ghost-last-published-post', this.args.publishOptions.post.id);
this.router.transitionTo('posts.analytics', this.args.publishOptions.post.id);
if (this.args.publishOptions.post.emailOnly) {
this.router.transitionTo('posts.analytics', this.args.publishOptions.post.id);
} else {
this.router.transitionTo('posts');
}
}
}
} catch (e) {
Expand Down
41 changes: 37 additions & 4 deletions ghost/admin/app/components/gh-task-button.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,41 @@
isFailure=this.isFailure
)}}
{{else}}
{{#if this.isRunning}}<span data-test-task-button-state="running">{{#if this.showIcon}}{{svg-jar "spinner" class="gh-icon-spinner"}} {{/if}}{{this.runningText}}</span>{{/if}}
{{#if this.isIdle}}<span data-test-task-button-state="idle">{{this.buttonText}}</span>{{/if}}
{{#if this.isSuccess}}<span {{did-insert this.handleReset}} data-test-task-button-state="success">{{#if this.showIcon}}{{svg-jar "check-circle"}} {{/if}}{{this.successText}}</span>{{/if}}
{{#if this.isFailure}}<span data-test-task-button-state="failure">{{#if this.showIcon}}{{svg-jar "retry"}} {{/if}}{{this.failureText}}</span>{{/if}}
{{#if this.isRunning}}
<span data-test-task-button-state="running">
{{#if this.showIcon}}
{{svg-jar "spinner" class="gh-icon-spinner"}}
{{/if}}
{{this.runningText}}
</span>
{{/if}}

{{#if (and this.isIdle (not (or this.isRunning this.isSuccess this.isFailure)))}}
<span data-test-task-button-state="idle">
{{#if this.showIcon}}
{{#if this.idleIcon}}
{{svg-jar this.idleIcon}}
{{/if}}
{{/if}}
{{this.buttonText}}
</span>
{{/if}}


{{#if this.isSuccess}}
<span {{did-insert this.handleReset}} data-test-task-button-state="success">
{{#if this.showIcon}}
{{svg-jar "check-circle"}}
{{/if}}
{{this.successText}}
</span>
{{/if}}
{{#if this.isFailure}}
<span data-test-task-button-state="failure">
{{#if this.showIcon}}
{{svg-jar "retry"}}
{{/if}}
{{this.failureText}}
</span>
{{/if}}
{{/if}}
1 change: 1 addition & 0 deletions ghost/admin/app/components/gh-task-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const GhTaskButton = Component.extend({
defaultClick: false,
buttonText: 'Save',
idleClass: '',
idleIcon: '',
runningClass: '',
showIcon: true,
showSuccess: true, // set to false if you want the spinner to show until a transition occurs
Expand Down
223 changes: 136 additions & 87 deletions ghost/admin/app/components/modal-post-success.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,4 @@
<div class="modal-content">
{{#if this.post.featureImage}}
<figure class="modal-image">
<img src="{{this.post.featureImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.twitterImage}}
<figure class="modal-image">
<img src="{{this.post.twitterImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.ogImage}}
<figure class="modal-image">
<img src="{{this.post.ogImage}}" alt="{{this.post.title}}">
</figure>
{{/if}}

<header class="modal-header">
<h1>
{{#if this.post.isScheduled}}
Expand All @@ -22,7 +8,7 @@
{{#if this.showPostCount}}
Boom! It's out there.
{{else}}
Your post is out there.
Your post is published.
{{/if}}
</span>
<span>
Expand All @@ -32,101 +18,164 @@
{{#if this.showPostCount}}
That's {{format-number this.postCount}} {{gh-pluralize this.postCount "post" without-count=true}} published.
{{else}}
Share it with the world!
Spread the word!
{{/if}}
{{/if}}
</span>
{{/if}}
</h1>
</header>

<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

<div class="modal-body">
{{#if (and this.post.isPublished (not this.post.emailOnly))}}
{{#if this.showPostCount}}
Keep up the good work. Now, share your post with the world!
{{else}}
Spread the word to your audience and increase your reach.
{{/if}}
{{#if (and this.post.isPublished (not this.post.emailOnly))}}
{{else}}
<div class="modal-body email">
{{#if this.post.isSent}}
It
{{else}}
{{#if this.post.isSent}}
It
{{else}}
{{if this.post.emailOnly "Your email" "Your post"}}
{{/if}}
{{if this.post.isScheduled "will be" "was"}}
{{#if this.post.emailOnly}}
sent to
{{else if this.post.willEmail}}
published on your site, and sent to
{{else}}
published on your site
{{/if}}

{{#if (or this.post.hasEmail this.post.willEmail)}}
{{#let (members-count-fetcher query=(hash filter=this.post.fullRecipientFilter)) as |countFetcher|}}
<strong class="nowrap">
{{if (eq @recipientType "all") "all"}}
{{if this.post.emailOnly "Your email" "Your post"}}
{{/if}}
{{if this.post.isScheduled "will be" "was"}}
{{#if this.post.emailOnly}}
sent to
{{else if this.post.willEmail}}
published on your site, and sent to
{{else}}
published on your site
{{/if}}

{{format-number countFetcher.count}}
{{#if (or this.post.hasEmail this.post.willEmail)}}
{{#let (members-count-fetcher query=(hash filter=this.post.fullRecipientFilter)) as |countFetcher|}}
<strong class="nowrap">
{{if (eq @recipientType "all") "all"}}

{{!-- @recipientType = free/paid/all/specific --}}
{{if (not-eq @recipientType "all") @recipientType}}
{{format-number countFetcher.count}}

{{gh-pluralize countFetcher.count "subscriber" without-count=true}}
</strong>
{{!-- @recipientType = free/paid/all/specific --}}
{{if (not-eq @recipientType "all") @recipientType}}

of <strong>{{this.post.newsletter.name}}</strong>
{{/let}}
{{/if}}
{{gh-pluralize countFetcher.count "subscriber" without-count=true}}
</strong>

{{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
on
{{moment-format publishedAt "D MMM YYYY"}}
at
{{moment-format publishedAt "HH:mm"}}.
of <strong>{{this.post.newsletter.name}}</strong>
{{/let}}
{{/if}}
</div>

<footer class="modal-footer">
{{#if (and this.post.isPublished (not this.post.emailOnly))}}
<a href="https://twitter.com/intent/tweet?text={{this.encodedTitle}}&url={{this.encodedUrl}}" class="gh-btn twitter" target="_blank" rel="noopener noreferrer">
<span>{{svg-jar "social-x"}}</span>
</a>
<a href="https://threads.net/intent/post?text={{this.encodedTitleAndUrl}}" class="gh-btn threads" target="_blank" rel="noopener noreferrer">
<span>{{svg-jar "social-threads"}}</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{this.encodedUrl}}" class="gh-btn facebook" target="_blank" rel="noopener noreferrer">
<span>{{svg-jar "social-facebook"}}</span>
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&title={{this.encodedTitle}}&url={{this.encodedUrl}}" class="gh-btn linkedin" target="_blank" rel="noopener noreferrer">
<span>{{svg-jar "social-linkedin"}}</span>
</a>
<GhTaskButton
@buttonText="Copy link"
@task={{this.handleCopyLink}}
@showIcon={{true}}
@successText="Link copied"
@class="gh-btn gh-btn-primary gh-btn-icon copy-link" />
{{else}}
{{#if (and this.post.isScheduled (not this.post.emailOnly))}}
<GhTaskButton
@buttonText="Copy preview link"
@task={{this.handleCopyPreviewLink}}
@successText="Link copied"
@class="gh-btn gh-btn-icon copy-preview-link" />
{{/if}}
{{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
on
<strong>{{moment-format publishedAt "D MMM YYYY"}}</strong>
at
<strong>{{moment-format publishedAt "HH:mm"}}</strong>.
{{/let}}
</div>

{{#if this.post.emailOnly}}
<footer class="modal-footer-email">
<button
class="gh-btn gh-btn-primary dismiss"
type="button"
{{on "click" @close}}
{{on "mousedown" (optional this.noop)}}
>
<span>OK</span>
<span>Close</span>
</button>
</footer>
{{/if}}
{{/if}}

<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

{{#unless this.post.emailOnly}}
<div class="gh-post-card">
{{#if this.post.featureImage}}
<figure class="modal-image">
<img src="{{this.post.featureImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.twitterImage}}
<figure class="modal-image">
<img src="{{this.post.twitterImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.ogImage}}
<figure class="modal-image">
<img src="{{this.post.ogImage}}" alt="{{this.post.title}}">
</figure>
{{/if}}
</footer>

<div class="modal-body">
<h2>{{this.post.title}}</h2>
{{#if this.post.excerpt}}
<p class="post-excerpt">{{this.post.excerpt}}</p>
{{/if}}

<div class="gh-post-details">
{{#if (get-setting "icon")}}
<div class="gh-post-bookmark-site-icon">
<img src={{get-setting "icon"}} alt="" role="presentation" />
</div>
{{/if}}

{{#if (get-setting "title")}}
<div class="gh-post-bookmark-site-name">{{get-setting "title"}}</div>
{{/if}}
<div class="gh-post-bookmark-authors">{{this.authorNames}}</div>
</div>
</div>

<footer class="modal-footer">
{{#if (and this.post.isPublished (not this.post.emailOnly))}}
<div class="share-buttons">
<a href="https://twitter.com/intent/tweet?text={{this.encodedTitle}}&url={{this.encodedUrl}}" class="gh-btn twitter" target="_blank" rel="noopener noreferrer" title="Share on Twitter">
<span>{{svg-jar "social-x"}}</span>
</a>
<a href="https://threads.net/intent/post?text={{this.encodedTitleAndUrl}}" class="gh-btn threads" target="_blank" rel="noopener noreferrer" title="Share on Threads">
<span>{{svg-jar "social-threads"}}</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{this.encodedUrl}}" class="gh-btn facebook" target="_blank" rel="noopener noreferrer" title="Share on Facebook">
<span>{{svg-jar "social-facebook"}}</span>
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&title={{this.encodedTitle}}&url={{this.encodedUrl}}" class="gh-btn linkedin" target="_blank" rel="noopener noreferrer" title="Share on LinkedIn">
<span>{{svg-jar "social-linkedin"}}</span>
</a>
</div>
<GhTaskButton
@showIcon={{true}}
@idleIcon="link"
@buttonText="Copy link"
@title="Copy link"
@task={{this.handleCopyLink}}
@successText="Link copied"
@class="gh-btn gh-btn-primary gh-btn-icon copy-link" />
{{else}}
{{#if (and this.post.isScheduled (not this.post.emailOnly))}}
<GhTaskButton
@buttonText="Copy preview link"
@task={{this.handleCopyPreviewLink}}
@showIcon={{true}}
@idleIcon="link"
@successText="Preview link copied"
@class="gh-btn gh-btn-icon copy-preview-link" />

<button
class="gh-btn gh-btn-primary dismiss"
type="button"
{{on "click" @close}}
{{on "mousedown" (optional this.noop)}}
>
<span>Close</span>
</button>

{{else}}
<button
class="gh-btn gh-btn-primary dismiss"
type="button"
{{on "click" @close}}
{{on "mousedown" (optional this.noop)}}
>
<span>Close</span>
</button>
{{/if}}

{{/if}}
</footer>
</div>
{{/unless}}
</div>
5 changes: 5 additions & 0 deletions ghost/admin/app/components/modal-post-success.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Component from '@glimmer/component';
import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
import {authorNames} from '../helpers/author-names';
import {capitalize} from '@ember/string';
import {inject as service} from '@ember/service';
import {task, timeout} from 'ember-concurrency';
Expand Down Expand Up @@ -38,6 +39,10 @@ export default class PostSuccessModal extends Component {
return encodeURIComponent(`${this.post.title} ${this.post.url}`);
}

get authorNames() {
return authorNames([this.post.authors]);
}

@task
*handleCopyLink() {
copyTextToClipboard(this.post.url);
Expand Down
Loading

0 comments on commit 7c99282

Please sign in to comment.