OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved publish flow transition (#20794)

Browse Source 
ref DES-697

- used client side navigation on the flow instead of hard refresh
- reduced layout shift on the analytics screen
- made the modal transition a bit smoother
This commit is contained in:
Sodbileg Gansukh 2024-08-20 20:04:44 +08:00 committed by GitHub
parent d3c2c7b369
commit a8dc689823
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ghost/admin/app/components/editor/modals/publish-flow/confirm.js
View File

@ -14,6 +14,7 @@ function isString(str) {
export default class PublishFlowOptions extends Component {
@service settings;
@service feature;
@service router;
@tracked errorMessage;
@ -95,10 +96,10 @@ 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);
window.location.href = '/ghost/#/posts?type=scheduled';
this.router.transitionTo('posts', {queryParams: {type: 'scheduled'}});
} else {
localStorage.setItem('ghost-last-published-post', this.args.publishOptions.post.id);
window.location.href = `/ghost/#/posts/analytics/${this.args.publishOptions.post.id}`;
this.router.transitionTo('posts.analytics', this.args.publishOptions.post.id);
}
}
} catch (e) {

58
ghost/admin/app/components/posts/post-activity-feed.hbs
View File

@ -11,35 +11,7 @@
</div>
{{/if}}
{{#if (and (not eventsFetcher.data) (not eventsFetcher.isLoading))}}
<div class="gh-dashboard-list-body">
<div class="gh-post-activity-feed-empty">
<div class="attribution-list-empty">
{{#if (eq this.eventType "sent")}}
{{svg-jar "empty-sent"}}
<h4>No members have received your email yet</h4>
<p>Once someone receives your email, you'll be able to see the member activity here.</p>
{{else if (eq this.eventType "opened")}}
{{svg-jar "empty-opened"}}
<h4>No members have opened your newsletter</h4>
<p>Once someone opens, you'll see them listed here.</p>
{{else if (eq this.eventType "clicked")}}
{{svg-jar "empty-clicked"}}
<h4>No links have been clicked in your newsletter</h4>
<p>Once a member clicks a link, you'll see them listed here.</p>
{{else if (eq this.eventType "feedback")}}
{{svg-jar "empty-feedback"}}
<h4>No members have given feedback yet</h4>
<p>When someone does, you'll see their response here.</p>
{{else if (eq this.eventType "conversion")}}
{{svg-jar "empty-conversion"}}
<h4>No members have signed up on this post</h4>
<p>When someone new signs up, you'll see them here.</p>
{{/if}}
</div>
</div>
</div>
{{else}}
{{#if eventsFetcher.data}}
<div class="gh-dashboard-list-body gh-dashboard-list-cols-{{this.eventType}}">
{{#each eventsFetcher.data as |event|}}
{{#let (parse-member-event event) as |parsedEvent|}}
@ -134,6 +106,34 @@
{{#if (eq @eventType 'feedback')}}
<Posts::FeedbackEventsChart @data={{@data}} />
{{/if}}
{{else}}
<div class="gh-dashboard-list-body">
<div class="gh-post-activity-feed-empty">
<div class="attribution-list-empty">
{{#if (eq this.eventType "sent")}}
{{svg-jar "empty-sent"}}
<h4>No members have received your email yet</h4>
<p>Once someone receives your email, you'll be able to see the member activity here.</p>
{{else if (eq this.eventType "opened")}}
{{svg-jar "empty-opened"}}
<h4>No members have opened your newsletter</h4>
<p>Once someone opens, you'll see them listed here.</p>
{{else if (eq this.eventType "clicked")}}
{{svg-jar "empty-clicked"}}
<h4>No links have been clicked in your newsletter</h4>
<p>Once a member clicks a link, you'll see them listed here.</p>
{{else if (eq this.eventType "feedback")}}
{{svg-jar "empty-feedback"}}
<h4>No members have given feedback yet</h4>
<p>When someone does, you'll see their response here.</p>
{{else if (eq this.eventType "conversion")}}
{{svg-jar "empty-conversion"}}
<h4>No members have signed up on this post</h4>
<p>When someone new signs up, you'll see them here.</p>
{{/if}}
</div>
</div>
</div>
{{/if}}
{{/let}}
</div>

10
ghost/admin/app/styles/components/modals-new.css
View File

@ -1,17 +1,17 @@
:root {
/* The named -duration and -delay variables will be lowered to near zero when using the setupPromiseModals test helper */
--epm-animation-backdrop-in-duration: 0.15s;
--epm-animation-backdrop-out-duration: 0.15s;
--epm-animation-backdrop-in-duration: 0.2s;
--epm-animation-backdrop-out-duration: 0.2s;
--epm-animation-modal-in-duration: 0.15s;
--epm-animation-modal-out-duration: 0.15s;
--epm-animation-backdrop-in-delay: 0s;
--epm-animation-backdrop-out-delay: 0s;
--epm-animation-modal-in-delay: 0s;
--epm-animation-modal-out-delay: 0s;
--epm-animation-backdrop-in: var(--epm-animation-backdrop-in-duration) ease
--epm-animation-backdrop-in: var(--epm-animation-backdrop-in-duration) ease-in-out
var(--epm-animation-backdrop-in-delay) forwards epm-backdrop-in;
--epm-animation-backdrop-out: var(--epm-animation-backdrop-out-duration)
ease var(--epm-animation-backdrop-out-delay) forwards epm-backdrop-out;
ease-in-out var(--epm-animation-backdrop-out-delay) forwards epm-backdrop-out;
--epm-animation-modal-in: var(--epm-animation-modal-in-duration) ease-out
var(--epm-animation-modal-in-delay) forwards epm-modal-in;
--epm-animation-modal-out: var(--epm-animation-modal-out-duration) ease-out
@ -133,9 +133,11 @@
@keyframes epm-modal-in {
0% {
transform: translateY(-16px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}