TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Updated publishing flow

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1544
This commit is contained in:
Sanne de Vries 2022-05-10 17:57:39 +01:00
parent cf3650ddcc
commit d364116948
7 changed files with 148 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
View File

@ -1,7 +1,7 @@
<div class="flex flex-column h-100 items-center overflow-auto">
<header class="gh-publish-header" data-test-modal="publish-flow">
<button class="gh-publish-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "close-stroke"}}</span>
<span>{{svg-jar "arrow-left"}} Back to editor</span>
</button>
</header>

13
ghost/admin/app/components/editor-labs/modals/publish-flow/complete.hbs
View File

@ -35,15 +35,8 @@
</div>
{{#unless post.emailOnly}}
<GhPostBookmark @post={{post}} />
<a href={{post.url}} target="_blank" rel="noopener noreferrer">
<GhPostBookmark @post={{post}} />
</a>
{{/unless}}
<div class="gh-publish-cta">
<button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @close}}><span>Back to {{post.displayName}}</span></button>
{{#unless post.emailOnly}}
<div class="gh-publish-cta-secondary">
<a href={{post.url}} class="gh-btn gh-btn-link gh-btn-large" target="_blank" rel="noopener noreferrer">View published {{post.displayName}} on site</a>
</div>
{{/unless}}
</div>
{{/let}}

2
ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.hbs
View File

@ -62,5 +62,5 @@
@successText={{if @publishOptions.willOnlyEmail "Sent" "Published"}}
@class="gh-btn gh-btn-pulse gh-btn-large"
/>
<button type="button" class="gh-btn gh-btn-link gh-btn-large gh-publish-cta-secondary" {{on "click" @cancel}}>Back to publish settings</button>
<button type="button" class="gh-btn gh-btn-link gh-btn-large gh-publish-cta-secondary" {{on "click" @cancel}}>Back to settings</button>
</div>

3
ghost/admin/app/components/editor-labs/modals/publish-flow/options.hbs
View File

@ -7,7 +7,7 @@
{{#if @publishOptions.emailUnavailable}}
<div class="gh-publish-setting-title">
{{svg-jar "send-email"}}
<span>Publish on site</span>
<div class="gh-publish-setting-trigger">Publish on site</div>
</div>
{{else}}
<button type="button" class="gh-publish-setting-title" {{on "click" (fn this.toggleSection "publishType")}}>
@ -109,5 +109,4 @@
<div class="gh-publish-cta">
<button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @confirm}}><span>Continue, final review &rarr;</span></button>
<button type="button" class="gh-btn gh-btn-link gh-btn-large gh-publish-cta-secondary" {{on "click" @close}}>Back to editor</button>
</div>

99
ghost/admin/app/components/editor-labs/modals/update-flow.hbs
View File

@ -1,7 +1,7 @@
<div class="flex flex-column h-100 items-center overflow-auto">
<header class="gh-publish-header" data-test-modal="update-flow">
<button class="gh-publish-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "close-stroke"}}</span>
<span>{{svg-jar "arrow-left"}} Back to editor</span>
</button>
</header>
@ -12,60 +12,59 @@
<span class="green">{{post.status}}</span>
</div>
<p class="gh-publish-confirmation">
{{#let (moment-site-tz post.publishedAtUTC) as |publishedAt|}}
On
{{moment-format publishedAt "D MMM YYYY"}}
at
{{moment-format publishedAt "HH:mm"}}
your
{{/let}}
{{post.displayName}}
{{if post.isScheduled "will be" "was"}}
{{#if (or (and post.isPublished post.email) (and post.isScheduled post.emailRecipientFilter (not post.email)))}}
{{#if post.emailOnly}}
sent to
{{else}}
published and sent to
{{/if}}
{{#if post.isScheduled}}
{{#let (members-count-fetcher query=(hash filter=post.fullRecipientFilter)) as |countFetcher|}}
<strong>{{gh-pluralize countFetcher.count "member"}}</strong>.
{{/let}}
{{else}}
<strong>{{pluralize post.email.emailCount "member"}}</strong>.
{{/if}}
{{else}}
published.
{{/if}}
To change this,
<button
type="button"
class="gh-revert-to-draft"
{{on "click" (fn @close (hash afterTask="revertToDraftTask"))}}
>
<span>revert post to a private draft</span>
</button>.
</p>
{{#if (and post.isScheduled post.email)}}
<div class="gh-publish-confirmation">
<p>
This post was previously emailed to
<strong>{{pluralize post.email.emailCount "member"}}</strong> on
{{#let (moment-site-tz post.publishedAtUTC) as |publishedAt|}}
On
{{moment-format publishedAt "D MMM YYYY"}}
at
{{moment-format publishedAt "HH:mm"}}
your
{{/let}}
{{#let (moment-site-tz post.email.createdAtUTC) as |sentAt|}}
<strong>
{{post.displayName}}
{{if post.isScheduled "will be" "was"}}
{{#if (or (and post.isPublished post.email) (and post.isScheduled post.emailRecipientFilter (not post.email)))}}
{{#if post.emailOnly}}
sent to
{{else}}
published and sent to
{{/if}}
{{#if post.isScheduled}}
{{#let (members-count-fetcher query=(hash filter=post.fullRecipientFilter)) as |countFetcher|}}
<strong>{{gh-pluralize countFetcher.count "member"}}</strong>.
{{/let}}
{{else}}
<strong>{{pluralize post.email.emailCount "member"}}</strong>.
{{/if}}
{{else}}
published.
{{/if}}
To change this,
<button
type="button"
class="gh-revert-to-draft"
{{on "click" (fn @close (hash afterTask="revertToDraftTask"))}}
>
<span>revert post to a private draft</span>
</button>.
</p>
{{#if (and post.isScheduled post.email)}}
<p>
This post was previously emailed to
<strong>{{pluralize post.email.emailCount "member"}}</strong> on
{{#let (moment-site-tz post.email.createdAtUTC) as |sentAt|}}
{{moment-format sentAt "D MMM YYYY"}}
at
{{moment-format sentAt "HH:mm"}}.
</strong>
{{/let}}
</p>
{{/if}}
{{/let}}
</p>
{{/if}}
</div>
</div>
{{/let}}
</div>

34
ghost/admin/app/components/gh-post-bookmark.hbs
View File

@ -1,19 +1,21 @@
<div class="gh-post-bookmark flex flex-row">
{{#if @post.featureImage}}
<div class="gh-post-bookmark-image">
<img src={{@post.featureImage}} alt="" role="presentation" />
</div>
{{/if}}
<div class="flex flex-column">
<div class="gh-post-bookmark-title">{{@post.title}}</div>
<div class="gh-post-bookmark-text">{{@post.excerpt}}</div>
<div class="gh-post-bookmark-details flex flex-row">
{{#if @post.primaryAuthor.profileImage}}
<div class="gh-post-bookmark-author-image">
<img src={{@post.primaryAuthor.profileImage}} alt="" role="presentation" />
</div>
{{/if}}
<div class="gh-post-bookmark-authors">{{post-author-names @post}}</div>
<div class="gh-post-bookmark-container">
<div class="gh-post-bookmark">
{{#if @post.featureImage}}
<div class="gh-post-bookmark-image">
<img src={{@post.featureImage}} alt="" role="presentation" />
</div>
{{/if}}
<div class="gh-post-bookmark-content">
<div class="gh-post-bookmark-title">{{@post.title}}</div>
<div class="gh-post-bookmark-text truncate">{{@post.excerpt}}</div>
<div class="gh-post-bookmark-details">
{{#if @post.primaryAuthor.profileImage}}
<div class="gh-post-bookmark-author-image">
<img src={{@post.primaryAuthor.profileImage}} alt="" role="presentation" />
</div>
{{/if}}
<div class="gh-post-bookmark-authors">{{post-author-names @post}}</div>
</div>
</div>
</div>
</div>

85
ghost/admin/app/styles/components/publishmenu.css
View File

@ -389,7 +389,7 @@
.gh-publish-header {
position: absolute;
top: 0;
right: 3.2rem;
left: 4.2rem;
display: flex;
align-items: center;
height: 36px;
@ -428,7 +428,11 @@
letter-spacing: 0.2px;
white-space: nowrap;
cursor: pointer;
border-radius: 3px;
border-radius: var(--border-radius);
}
.gh-publish-back-button:hover {
background: var(--whitegrey);
}
.gh-publish-back-button span {
@ -438,14 +442,11 @@
}
.gh-publish-back-button svg {
width: 1em;
height: 1em;
width: .8em;
height: .8em;
margin-right: .5em;
padding-top: 2px;
}
.gh-publish-back-button svg path {
stroke-width: 2.4;
stroke: var(--darkgrey);
fill: var(--darkgrey);
}
.gh-publish-settings-container {
@ -532,7 +533,6 @@
font-size: 1.8rem;
font-weight: 400;
line-height: 1.35em;
cursor: pointer;
}
.gh-publish-setting-trigger .gh-selected-newsletter {
@ -770,4 +770,69 @@
.gh-revert-to-draft {
color: var(--green-d1);
font-weight: 500;
}
.gh-post-bookmark {
display: flex;
align-items: center;
width: 100%;
max-width: 640px;
margin-top: 1.6rem;
background: var(--white);
box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0px 2px 5px rgba(0, 0, 0, 0.07);
border-radius: var(--border-radius);
transition: all 0.3s ease-in-out;
}
.gh-post-bookmark:hover {
box-shadow:
0px 54px 80px rgba(0, 0, 0, 0.07),
0px 19.7109px 29.2013px rgba(0, 0, 0, 0.0482987),
0px 9.56927px 14.1767px rgba(0, 0, 0, 0.0389404),
0px 4.69103px 6.94968px rgba(0, 0, 0, 0.0310596),
0px 1.85484px 2.74791px rgba(0, 0, 0, 0.0217013),
0 0 0 1px rgba(0,0,0,.03);
transition: all 0.3s ease-in-out;
transform: translateY(-4px);
}
.gh-post-bookmark-image {
max-width: 33%;
max-height: 152px;
display: inherit;
}
.gh-post-bookmark-image img {
width: 100%;
object-fit: cover;
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.gh-post-bookmark-content {
max-width: 67%;
padding: 2rem;
}
.gh-post-bookmark-title {
margin-bottom: .4rem;
color: var(--darkgrey);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.4em;
}
.gh-post-bookmark-text {
margin-bottom: 1.6rem;
color: var(--midgrey);
font-size: 1.4rem;
font-weight: 400;
}
.gh-post-bookmark-details {
display: flex;
color: var(--midgrey);
font-size: 1.4rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}