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

Updates publish settings

Browse source 
Refs https://github.com/TryGhost/Team/issues/1544
This commit is contained in:
Sanne de Vries 2022-05-06 08:06:45 +01:00
parent bee7760815
commit 416976368b
6 changed files with 107 additions and 67 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"}} Close</span> <span>{{svg-jar "close-stroke"}}</span>
</button> </button>
</header> </header>

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

@ -1,17 +1,22 @@
<div class="gh-publish-title"><span>Ready, set, publish.</span> Share it with the world.</div> <div class="gh-publish-title"><span>Ready, set, publish.</span> Share it with the world.</div>
<div class="gh-publish-settings"> <div class="gh-publish-settings">
<div class="gh-publish-setting"> <div class="gh-publish-setting">
<div class="gh-publish-setting-title"> {{#if @publishOptions.emailUnavailable}}
{{svg-jar "send-email"}} <div class="gh-publish-setting-title">
{{#if @publishOptions.emailUnavailable}} {{svg-jar "send-email"}}
<span>Publish on site</span> <span>Publish on site</span>
{{else}} </div>
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishType")}}> {{else}}
<button type="button" class="gh-publish-setting-title" {{on "click" (fn this.toggleSection "publishType")}}>
{{svg-jar "send-email"}}
<div class="gh-publish-setting-trigger">
<span>{{@publishOptions.selectedPublishTypeOption.display}}</span> <span>{{@publishOptions.selectedPublishTypeOption.display}}</span>
</button> </div>
{{svg-jar "arrow-down" class="icon-expand"}} <span class="{{if (eq this.openSection "publishType") "expanded"}}">
{{/if}} {{svg-jar "arrow-down" class="icon-expand"}}
</div> </span>
</button>
{{/if}}
{{#liquid-if (eq this.openSection "publishType")}} {{#liquid-if (eq this.openSection "publishType")}}
<div class="gh-publish-setting-form"> <div class="gh-publish-setting-form">
<EditorLabs::PublishOptions::PublishType <EditorLabs::PublishOptions::PublishType
@ -22,19 +27,25 @@
</div> </div>
<div class="gh-publish-setting"> <div class="gh-publish-setting">
<div class="gh-publish-setting-title {{if (eq @publishOptions.publishType "publish") "disabled"}}"> {{#if @publishOptions.willEmail}}
{{svg-jar "member"}} <button type="button" class="gh-publish-setting-title {{if (eq @publishOptions.publishType "publish") "disabled"}}" {{on "click" (fn this.toggleSection "emailRecipients")}}>
{{#if @publishOptions.willEmail}} {{svg-jar "member"}}
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "emailRecipients")}}> <div class="gh-publish-setting-trigger">
{{#let (members-count-fetcher query=(hash filter=@publishOptions.fullRecipientFilter)) as |countFetcher|}} {{#let (members-count-fetcher query=(hash filter=@publishOptions.fullRecipientFilter)) as |countFetcher|}}
{{countFetcher.count}} {{countFetcher.count}}
{{/let}} {{/let}}
{{#unless @publishOptions.onlyDefaultNewsletter}} {{#unless @publishOptions.onlyDefaultNewsletter}}
<span>{{@publishOptions.newsletter.name}}</span> <span class="gh-selected-newsletter">{{@publishOptions.newsletter.name}}</span>
{{/unless}} {{/unless}}
subscribers subscribers
</button> </div>
{{else}} <span class="{{if (eq this.openSection "emailRecipients") "expanded"}}">
{{svg-jar "arrow-down" class="icon-expand"}}
</span>
</button>
{{else}}
<div type="button" class="gh-publish-setting-title {{if (eq @publishOptions.publishType "publish") "disabled"}}">
{{svg-jar "member"}}
{{#if (eq @publishOptions.publishType "publish")}} {{#if (eq @publishOptions.publishType "publish")}}
<div class="gh-publish-setting-trigger"> <div class="gh-publish-setting-trigger">
Not sent to any members Not sent to any members
@ -44,9 +55,11 @@
Not sent to any members Not sent to any members
</button> </button>
{{/if}} {{/if}}
{{/if}} <span class="{{if (eq this.openSection "emailRecipients") "expanded"}}">
{{svg-jar "arrow-down" class="icon-expand"}} {{svg-jar "arrow-down" class="icon-expand"}}
</div> </span>
</div>
{{/if}}
{{#liquid-if (eq this.openSection "emailRecipients")}} {{#liquid-if (eq this.openSection "emailRecipients")}}
<div class="gh-publish-setting-form"> <div class="gh-publish-setting-form">
<EditorLabs::PublishOptions::EmailRecipients <EditorLabs::PublishOptions::EmailRecipients
@ -57,9 +70,9 @@
</div> </div>
<div class="gh-publish-setting last"> <div class="gh-publish-setting last">
<div class="gh-publish-setting-title"> <button type="button" class="gh-publish-setting-title" {{on "click" (fn this.toggleSection "publishAt")}}>
{{svg-jar "clock"}} {{svg-jar "clock"}}
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishAt")}}> <div class="gh-publish-setting-trigger">
<span> <span>
{{#if @publishOptions.isScheduled}} {{#if @publishOptions.isScheduled}}
{{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}} {{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}}
@ -67,9 +80,11 @@
Right now Right now
{{/if}} {{/if}}
</span> </span>
</button> </div>
{{svg-jar "arrow-down" class="icon-expand"}} <span class="{{if (eq this.openSection "publishAt") "expanded"}}">
</div> {{svg-jar "arrow-down" class="icon-expand"}}
</span>
</button>
{{#liquid-if (eq this.openSection "publishAt")}} {{#liquid-if (eq this.openSection "publishAt")}}
<div class="gh-publish-setting-form"> <div class="gh-publish-setting-form">
<EditorLabs::PublishOptions::PublishAt <EditorLabs::PublishOptions::PublishAt

2
ghost/admin/app/components/editor-labs/publish-options/email-recipients.hbs
View file

@ -4,7 +4,7 @@
to start sending newsletters! to start sending newsletters!
</p> </p>
{{else}} {{else}}
<div class="form-group"> <div class="form-group max-width">
{{#if (gt @publishOptions.newsletters.length 1)}} {{#if (gt @publishOptions.newsletters.length 1)}}
<div class="mb3"> <div class="mb3">
Newsletter: Newsletter:

28
ghost/admin/app/components/editor-labs/publish-options/publish-type.hbs
View file

@ -1,19 +1,17 @@
<fieldset class="gh-publish-types"> <fieldset class="gh-publish-types">
{{#each @publishOptions.publishTypeOptions as |option|}} {{#each @publishOptions.publishTypeOptions as |option|}}
<div class="gh-btn gh-btn-outline gh-btn-large"> <span>
<span> <input
<input type="radio"
type="radio" name="publish-type"
name="publish-type" id="publish-type-{{option.value}}"
id="publish-type-{{option.value}}" class="gh-radio-button"
class="gh-radio-button" value={{option.value}}
value={{option.value}} checked={{eq option.value @publishOptions.selectedPublishTypeOption.value}}
checked={{eq option.value @publishOptions.selectedPublishTypeOption.value}} disabled={{option.disabled}}
disabled={{option.disabled}} {{on "change" this.onChange}}
{{on "change" this.onChange}} >
> <label for="publish-type-{{option.value}}">{{option.label}}</label>
<label for="publish-type-{{option.value}}">{{option.label}}</label> </span>
</span>
</div>
{{/each}} {{/each}}
</fieldset> </fieldset>

6
ghost/admin/app/components/gh-members-recipient-select.hbs
View file

@ -5,7 +5,7 @@
<span class="gh-publishmenu-emailcount" data-test-email-count="free-members">({{countFetcher.count}})</span> <span class="gh-publishmenu-emailcount" data-test-email-count="free-members">({{countFetcher.count}})</span>
{{/let}} {{/let}}
</p> </p>
<div class="for-switch x-small {{if @disabled "disabled"}}"> <div class="for-switch small {{if @disabled "disabled"}}">
<label class="switch" for="send-email-to-free"> <label class="switch" for="send-email-to-free">
<input <input
id="send-email-to-free" id="send-email-to-free"
@ -29,7 +29,7 @@
<span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">({{countFetcher.count}})</span> <span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">({{countFetcher.count}})</span>
{{/let}} {{/let}}
</p> </p>
<div class="for-switch x-small {{if @disabled "disabled"}}"> <div class="for-switch small {{if @disabled "disabled"}}">
<label class="switch" for="send-email-to-paid"> <label class="switch" for="send-email-to-paid">
<input <input
id="send-email-to-paid" id="send-email-to-paid"
@ -49,7 +49,7 @@
{{#if this.specificOptions}} {{#if this.specificOptions}}
<div class="gh-publishmenu-send-to-option"> <div class="gh-publishmenu-send-to-option">
<p>Specific people</p> <p>Specific people</p>
<div class="for-switch x-small {{if @disabled "disabled"}}"> <div class="for-switch small {{if @disabled "disabled"}}">
<label class="switch" for="send-email-to-specific"> <label class="switch" for="send-email-to-specific">
<input <input
id="send-email-to-specific" id="send-email-to-specific"

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

@ -329,8 +329,10 @@
} }
.gh-publishmenu-send-to-option p { .gh-publishmenu-send-to-option p {
color: var(--darkgrey);
margin: 0; margin: 0;
color: var(--darkgrey);
font-size: 1.45rem;
font-weight: 400;
} }
.gh-publishmenu-send-to-option .for-switch { .gh-publishmenu-send-to-option .for-switch {
@ -393,7 +395,7 @@
.gh-publish-header { .gh-publish-header {
position: absolute; position: absolute;
top: 0; top: 0;
right: 7rem; right: 3.2rem;
display: flex; display: flex;
align-items: center; align-items: center;
height: 36px; height: 36px;
@ -431,14 +433,8 @@
font-weight: 500; font-weight: 500;
letter-spacing: 0.2px; letter-spacing: 0.2px;
white-space: nowrap; white-space: nowrap;
border-radius: 3px;
transition: all 0.25s ease;
transition-property: color, border-color, background, width, height, box-shadow;
}
.gh-publish-back-button:hover {
cursor: pointer; cursor: pointer;
background: var(--whitegrey); border-radius: 3px;
} }
.gh-publish-back-button span { .gh-publish-back-button span {
@ -448,14 +444,13 @@
} }
.gh-publish-back-button svg { .gh-publish-back-button svg {
width: .8em; width: 1em;
height: .8em; height: 1em;
margin-right: .5em;
padding-top: 2px; padding-top: 2px;
} }
.gh-publish-back-button svg path { .gh-publish-back-button svg path {
stroke-width: 3; stroke-width: 2.4;
stroke: var(--darkgrey); stroke: var(--darkgrey);
} }
@ -490,8 +485,8 @@
.gh-publish-setting { .gh-publish-setting {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
margin-bottom: 1.6rem; margin-bottom: 1.6rem;
padding-bottom: 1.6rem;
border-bottom: 1px solid var(--whitegrey-d1); border-bottom: 1px solid var(--whitegrey-d1);
} }
@ -503,6 +498,7 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding-bottom: 1.6rem;
} }
.gh-publish-setting-title.disabled { .gh-publish-setting-title.disabled {
@ -528,12 +524,18 @@
height: auto; height: auto;
margin: 0; margin: 0;
fill: var(--midlightgrey); fill: var(--midlightgrey);
transition: all 0.2s ease-in-out;
} }
.gh-publish-setting-title .icon-expand path { .gh-publish-setting-title .icon-expand path {
stroke: var(--midlightgrey); stroke: var(--midlightgrey);
} }
.expanded .icon-expand {
transform: scaleY(-1);
transition: all 0.2s ease-in-out;
}
.gh-publish-setting-trigger { .gh-publish-setting-trigger {
width: max-content; width: max-content;
color: var(--black); color: var(--black);
@ -543,12 +545,16 @@
cursor: pointer; cursor: pointer;
} }
.gh-publish-setting-trigger .gh-selected-newsletter {
font-weight: 600;
}
.gh-publish-setting input[type="radio"]:disabled + label { .gh-publish-setting input[type="radio"]:disabled + label {
color: var(--midlightgrey); color: var(--midlightgrey);
} }
.gh-publish-setting-form { .gh-publish-setting-form {
margin: 2.4rem 0 2rem; margin: 1rem 0 3.6rem;
background-color: var(--white); background-color: var(--white);
} }
@ -557,17 +563,38 @@
margin: 0; margin: 0;
} }
.gh-publish-types .gh-btn {
margin-right: 1.2rem;
cursor: pointer;
border-radius: 21px;
box-shadow: none;
}
.gh-publish-types .gh-radio-button { .gh-publish-types .gh-radio-button {
display: none; display: none;
} }
.gh-publish-types label {
display: block;
height: 40px;
margin-right: 1.2rem;
padding: 0 20px;
border: 1px solid var(--lightgrey-l1);
color: var(--middarkgrey);
font-size: 1.4rem;
font-weight: 500;
line-height: 38px;
letter-spacing: .4px;
cursor: pointer;
background: none;
border-radius: 21px;
}
.gh-publish-types .gh-radio-button:checked + label {
padding: 0 19px;
border: 2px solid var(--black);
color: var(--black);
line-height: 36px;
background: var(--whitegrey-l2);
}
.gh-publish-types label:hover {
color: var(--middarkgrey-d1);
}
.gh-publish-cta { .gh-publish-cta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -610,7 +637,7 @@
margin-top: 1rem; margin-top: 1rem;
height: 40px; height: 40px;
color: var(--midgrey); color: var(--midgrey);
font-size: 1.4rem; font-size: 1.35rem;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 40px;
letter-spacing: .4px; letter-spacing: .4px;