Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues 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"> <div class="flex flex-column h-100 items-center overflow-auto">
<header class="gh-publish-header" data-test-modal="publish-flow"> <header class="gh-publish-header" data-test-modal="publish-flow">
<button class="gh-publish-back-button" title="Close" type="button" {{on "click" @close}}> <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> </button>
</header> </header>

11
ghost/admin/app/components/editor-labs/modals/publish-flow/complete.hbs
View file

@ -35,15 +35,8 @@
</div> </div>
{{#unless post.emailOnly}} {{#unless post.emailOnly}}
<a href={{post.url}} target="_blank" rel="noopener noreferrer">
<GhPostBookmark @post={{post}} /> <GhPostBookmark @post={{post}} />
</a>
{{/unless}} {{/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}} {{/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"}} @successText={{if @publishOptions.willOnlyEmail "Sent" "Published"}}
@class="gh-btn gh-btn-pulse gh-btn-large" @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> </div>

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

@ -7,7 +7,7 @@
{{#if @publishOptions.emailUnavailable}} {{#if @publishOptions.emailUnavailable}}
<div class="gh-publish-setting-title"> <div class="gh-publish-setting-title">
{{svg-jar "send-email"}} {{svg-jar "send-email"}}
<span>Publish on site</span> <div class="gh-publish-setting-trigger">Publish on site</div>
</div> </div>
{{else}} {{else}}
<button type="button" class="gh-publish-setting-title" {{on "click" (fn this.toggleSection "publishType")}}> <button type="button" class="gh-publish-setting-title" {{on "click" (fn this.toggleSection "publishType")}}>
@ -109,5 +109,4 @@
<div class="gh-publish-cta"> <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-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> </div>

9
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"> <div class="flex flex-column h-100 items-center overflow-auto">
<header class="gh-publish-header" data-test-modal="update-flow"> <header class="gh-publish-header" data-test-modal="update-flow">
<button class="gh-publish-back-button" title="Close" type="button" {{on "click" @close}}> <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> </button>
</header> </header>
@ -12,7 +12,8 @@
<span class="green">{{post.status}}</span> <span class="green">{{post.status}}</span>
</div> </div>
<p class="gh-publish-confirmation"> <div class="gh-publish-confirmation">
<p>
{{#let (moment-site-tz post.publishedAtUTC) as |publishedAt|}} {{#let (moment-site-tz post.publishedAtUTC) as |publishedAt|}}
On On
{{moment-format publishedAt "D MMM YYYY"}} {{moment-format publishedAt "D MMM YYYY"}}
@ -51,21 +52,19 @@
<span>revert post to a private draft</span> <span>revert post to a private draft</span>
</button>. </button>.
</p> </p>
{{#if (and post.isScheduled post.email)}} {{#if (and post.isScheduled post.email)}}
<p> <p>
This post was previously emailed to This post was previously emailed to
<strong>{{pluralize post.email.emailCount "member"}}</strong> on <strong>{{pluralize post.email.emailCount "member"}}</strong> on
{{#let (moment-site-tz post.email.createdAtUTC) as |sentAt|}} {{#let (moment-site-tz post.email.createdAtUTC) as |sentAt|}}
<strong>
{{moment-format sentAt "D MMM YYYY"}} {{moment-format sentAt "D MMM YYYY"}}
at at
{{moment-format sentAt "HH:mm"}}. {{moment-format sentAt "HH:mm"}}.
</strong>
{{/let}} {{/let}}
</p> </p>
{{/if}} {{/if}}
</div> </div>
</div>
{{/let}} {{/let}}
</div> </div>

10
ghost/admin/app/components/gh-post-bookmark.hbs
View file

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

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

@ -389,7 +389,7 @@
.gh-publish-header { .gh-publish-header {
position: absolute; position: absolute;
top: 0; top: 0;
right: 3.2rem; left: 4.2rem;
display: flex; display: flex;
align-items: center; align-items: center;
height: 36px; height: 36px;
@ -428,7 +428,11 @@
letter-spacing: 0.2px; letter-spacing: 0.2px;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: var(--border-radius);
}
.gh-publish-back-button:hover {
background: var(--whitegrey);
} }
.gh-publish-back-button span { .gh-publish-back-button span {
@ -438,14 +442,11 @@
} }
.gh-publish-back-button svg { .gh-publish-back-button svg {
width: 1em; width: .8em;
height: 1em; height: .8em;
margin-right: .5em;
padding-top: 2px; padding-top: 2px;
} fill: var(--darkgrey);
.gh-publish-back-button svg path {
stroke-width: 2.4;
stroke: var(--darkgrey);
} }
.gh-publish-settings-container { .gh-publish-settings-container {
@ -532,7 +533,6 @@
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 400; font-weight: 400;
line-height: 1.35em; line-height: 1.35em;
cursor: pointer;
} }
.gh-publish-setting-trigger .gh-selected-newsletter { .gh-publish-setting-trigger .gh-selected-newsletter {
@ -771,3 +771,68 @@
color: var(--green-d1); color: var(--green-d1);
font-weight: 500; 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;
}