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">
<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"}} Close</span>
<span>{{svg-jar "close-stroke"}}</span>
</button>
</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-settings">
<div class="gh-publish-setting">
<div class="gh-publish-setting-title">
{{svg-jar "send-email"}}
{{#if @publishOptions.emailUnavailable}}
{{#if @publishOptions.emailUnavailable}}
<div class="gh-publish-setting-title">
{{svg-jar "send-email"}}
<span>Publish on site</span>
{{else}}
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishType")}}>
</div>
{{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>
</button>
{{svg-jar "arrow-down" class="icon-expand"}}
{{/if}}
</div>
</div>
<span class="{{if (eq this.openSection "publishType") "expanded"}}">
{{svg-jar "arrow-down" class="icon-expand"}}
</span>
</button>
{{/if}}
{{#liquid-if (eq this.openSection "publishType")}}
<div class="gh-publish-setting-form">
<EditorLabs::PublishOptions::PublishType
@ -22,19 +27,25 @@
</div>
<div class="gh-publish-setting">
<div class="gh-publish-setting-title {{if (eq @publishOptions.publishType "publish") "disabled"}}">
{{svg-jar "member"}}
{{#if @publishOptions.willEmail}}
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "emailRecipients")}}>
{{#if @publishOptions.willEmail}}
<button type="button" class="gh-publish-setting-title {{if (eq @publishOptions.publishType "publish") "disabled"}}" {{on "click" (fn this.toggleSection "emailRecipients")}}>
{{svg-jar "member"}}
<div class="gh-publish-setting-trigger">
{{#let (members-count-fetcher query=(hash filter=@publishOptions.fullRecipientFilter)) as |countFetcher|}}
{{countFetcher.count}}
{{/let}}
{{#unless @publishOptions.onlyDefaultNewsletter}}
<span>{{@publishOptions.newsletter.name}}</span>
<span class="gh-selected-newsletter">{{@publishOptions.newsletter.name}}</span>
{{/unless}}
subscribers
</button>
{{else}}
</div>
<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")}}
<div class="gh-publish-setting-trigger">
Not sent to any members
@ -44,9 +55,11 @@
Not sent to any members
</button>
{{/if}}
{{/if}}
{{svg-jar "arrow-down" class="icon-expand"}}
</div>
<span class="{{if (eq this.openSection "emailRecipients") "expanded"}}">
{{svg-jar "arrow-down" class="icon-expand"}}
</span>
</div>
{{/if}}
{{#liquid-if (eq this.openSection "emailRecipients")}}
<div class="gh-publish-setting-form">
<EditorLabs::PublishOptions::EmailRecipients
@ -57,9 +70,9 @@
</div>
<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"}}
<button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishAt")}}>
<div class="gh-publish-setting-trigger">
<span>
{{#if @publishOptions.isScheduled}}
{{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}}
@ -67,9 +80,11 @@
Right now
{{/if}}
</span>
</button>
{{svg-jar "arrow-down" class="icon-expand"}}
</div>
</div>
<span class="{{if (eq this.openSection "publishAt") "expanded"}}">
{{svg-jar "arrow-down" class="icon-expand"}}
</span>
</button>
{{#liquid-if (eq this.openSection "publishAt")}}
<div class="gh-publish-setting-form">
<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!
</p>
{{else}}
<div class="form-group">
<div class="form-group max-width">
{{#if (gt @publishOptions.newsletters.length 1)}}
<div class="mb3">
Newsletter:

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

@ -1,19 +1,17 @@
<fieldset class="gh-publish-types">
{{#each @publishOptions.publishTypeOptions as |option|}}
<div class="gh-btn gh-btn-outline gh-btn-large">
<span>
<input
type="radio"
name="publish-type"
id="publish-type-{{option.value}}"
class="gh-radio-button"
value={{option.value}}
checked={{eq option.value @publishOptions.selectedPublishTypeOption.value}}
disabled={{option.disabled}}
{{on "change" this.onChange}}
>
<label for="publish-type-{{option.value}}">{{option.label}}</label>
</span>
</div>
<span>
<input
type="radio"
name="publish-type"
id="publish-type-{{option.value}}"
class="gh-radio-button"
value={{option.value}}
checked={{eq option.value @publishOptions.selectedPublishTypeOption.value}}
disabled={{option.disabled}}
{{on "change" this.onChange}}
>
<label for="publish-type-{{option.value}}">{{option.label}}</label>
</span>
{{/each}}
</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>
{{/let}}
</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">
<input
id="send-email-to-free"
@ -29,7 +29,7 @@
<span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">({{countFetcher.count}})</span>
{{/let}}
</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">
<input
id="send-email-to-paid"
@ -49,7 +49,7 @@
{{#if this.specificOptions}}
<div class="gh-publishmenu-send-to-option">
<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">
<input
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 {
color: var(--darkgrey);
margin: 0;
color: var(--darkgrey);
font-size: 1.45rem;
font-weight: 400;
}
.gh-publishmenu-send-to-option .for-switch {
@ -393,7 +395,7 @@
.gh-publish-header {
position: absolute;
top: 0;
right: 7rem;
right: 3.2rem;
display: flex;
align-items: center;
height: 36px;
@ -431,14 +433,8 @@
font-weight: 500;
letter-spacing: 0.2px;
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;
background: var(--whitegrey);
border-radius: 3px;
}
.gh-publish-back-button span {
@ -448,14 +444,13 @@
}
.gh-publish-back-button svg {
width: .8em;
height: .8em;
margin-right: .5em;
width: 1em;
height: 1em;
padding-top: 2px;
}
.gh-publish-back-button svg path {
stroke-width: 3;
stroke-width: 2.4;
stroke: var(--darkgrey);
}
@ -490,8 +485,8 @@
.gh-publish-setting {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 1.6rem;
padding-bottom: 1.6rem;
border-bottom: 1px solid var(--whitegrey-d1);
}
@ -503,6 +498,7 @@
position: relative;
display: flex;
align-items: center;
padding-bottom: 1.6rem;
}
.gh-publish-setting-title.disabled {
@ -528,12 +524,18 @@
height: auto;
margin: 0;
fill: var(--midlightgrey);
transition: all 0.2s ease-in-out;
}
.gh-publish-setting-title .icon-expand path {
stroke: var(--midlightgrey);
}
.expanded .icon-expand {
transform: scaleY(-1);
transition: all 0.2s ease-in-out;
}
.gh-publish-setting-trigger {
width: max-content;
color: var(--black);
@ -543,12 +545,16 @@
cursor: pointer;
}
.gh-publish-setting-trigger .gh-selected-newsletter {
font-weight: 600;
}
.gh-publish-setting input[type="radio"]:disabled + label {
color: var(--midlightgrey);
}
.gh-publish-setting-form {
margin: 2.4rem 0 2rem;
margin: 1rem 0 3.6rem;
background-color: var(--white);
}
@ -557,17 +563,38 @@
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 {
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 {
display: flex;
flex-direction: column;
@ -610,7 +637,7 @@
margin-top: 1rem;
height: 40px;
color: var(--midgrey);
font-size: 1.4rem;
font-size: 1.35rem;
font-weight: 400;
line-height: 40px;
letter-spacing: .4px;