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 publish settings forms

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1544
This commit is contained in:
Sanne de Vries 2022-05-06 13:54:15 +01:00
parent dd901c6790
commit f4405927ee
5 changed files with 73 additions and 43 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/options.hbs
View File

@ -94,7 +94,7 @@
</span>
</button>
{{#liquid-if (eq this.openSection "publishAt")}}
<div class="gh-publish-setting-form">
<div class="gh-publish-setting-form last">
<EditorLabs::PublishOptions::PublishAt
@publishOptions={{@publishOptions}}
/>

9
ghost/admin/app/components/editor-labs/publish-options/email-recipients.hbs
View File

@ -4,17 +4,16 @@
to start sending newsletters!
</p>
{{else}}
<div class="form-group max-width">
<div class="form-group max-width mb0">
{{#if (gt @publishOptions.newsletters.length 1)}}
<div class="mb3">
Newsletter:
<div class="mb4">
<PowerSelect
@selected={{@publishOptions.newsletter}}
@options={{@publishOptions.newsletters}}
@onChange={{@publishOptions.setNewsletter}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-publishmenu-newsletter-trigger"
@dropdownClass="gh-publishmenu-newsletter-dropdown"
@triggerClass="gh-publish-newsletter-trigger"
@dropdownClass="gh-publish-newsletter-dropdown"
as |newsletter|
>
{{newsletter.name}}

39
ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs
View File

@ -1,25 +1,24 @@
{{!-- template-lint-disable no-invalid-interactive --}}
<fieldset>
<div class="gh-publishmenu-radio {{unless @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled false)}}>
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
<div class="gh-publishmenu-radio-content">
<div class="gh-publishmenu-radio-label">Set it live now</div>
</div>
</div>
<div class="gh-publishmenu-radio {{if @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled true)}}>
<div class="gh-publishmenu-radio-button" data-test-publishmenu-scheduled-option></div>
<div class="gh-publishmenu-radio-content">
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
<GhDateTimePicker
@date={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "YYYY-MM-DD"}}
@time={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "HH:mm"}}
@setDate={{this.setDate}}
@setTime={{this.setTime}}
@minDate={{@publishOptions.minScheduledAt}}
@isActive={{@publishOptions.isScheduled}}
@renderInPlace={{false}}
/>
<div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
<div class="gh-publish-schedule">
<div class="gh-radio {{unless @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled false)}}>
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
<label>Set it live now</label>
</div>
<div class="gh-radio {{if @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled true)}}>
<div class="gh-radio-button" data-test-publishmenu-scheduled-option></div>
<label>Schedule it for later</label>
</div>
</div>
{{#if @publishOptions.isScheduled}}
<GhDateTimePicker
@date={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "YYYY-MM-DD"}}
@time={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "HH:mm"}}
@setDate={{this.setDate}}
@setTime={{this.setTime}}
@minDate={{@publishOptions.minScheduledAt}}
@isActive={{@publishOptions.isScheduled}}
@renderInPlace={{false}}
/>
{{/if}}
</fieldset>

4
ghost/admin/app/components/gh-members-recipient-select.hbs
View File

@ -1,6 +1,6 @@
<div class="gh-publishmenu-send-to-option">
<p>
Free members
Free subscribers
{{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:free"))) as |countFetcher|}}
<span class="gh-publishmenu-emailcount" data-test-email-count="free-members">({{countFetcher.count}})</span>
{{/let}}
@ -24,7 +24,7 @@
{{#if this.isPaidAvailable}}
<div class="gh-publishmenu-send-to-option">
<p>
Paid members
Paid subscribers
{{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:-free"))) as |countFetcher|}}
<span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">({{countFetcher.count}})</span>
{{/let}}

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

@ -373,12 +373,6 @@
right: 10px;
}
.gh-publishmenu-newsletter-trigger svg {
position: absolute;
top: 50%;
right: 10px;
}
.gh-publishmenu-newsletter-dropdown {
z-index: 99999;
}
@ -458,7 +452,7 @@
display: flex;
flex-direction: column;
height: 100%;
width: 740px;
width: 640px;
margin: 0 auto 8rem;
padding-top: 11vw;
margin-bottom: 11vw;
@ -554,20 +548,31 @@
}
.gh-publish-setting-form {
margin: 1rem 0 3.6rem;
margin: 1.6rem 0 4rem;
background-color: var(--white);
}
.gh-publish-setting-form .gh-publish-types {
.gh-publish-setting-form.last {
margin-bottom: 0;
}
.gh-publish-setting-form.last fieldset {
margin-bottom: 0;
}
.gh-publish-types,
.gh-publish-schedule {
display: flex;
margin: 0;
}
.gh-publish-types .gh-radio-button {
.gh-publish-types .gh-radio-button,
.gh-publish-schedule .gh-radio-button {
display: none;
}
.gh-publish-types label {
.gh-publish-types label,
.gh-publish-schedule label {
display: block;
height: 40px;
margin-right: 1.2rem;
@ -583,7 +588,8 @@
border-radius: 21px;
}
.gh-publish-types .gh-radio-button:checked + label {
.gh-publish-types .gh-radio-button:checked + label,
.gh-publish-schedule .gh-radio.active label {
padding: 0 19px;
border: 2px solid var(--black);
color: var(--black);
@ -591,10 +597,36 @@
background: var(--whitegrey-l2);
}
.gh-publish-types label:hover {
.gh-publish-types label:hover,
.gh-publish-schedule label:hover {
color: var(--middarkgrey-d1);
}
.gh-publish-newsletter-trigger {
padding: 8px 16px;
font-size: 1.45rem;
}
.gh-publish-newsletter-trigger svg {
position: absolute;
top: 50%;
right: 16px;
}
.gh-publish-newsletter-dropdown {
z-index: 99999;
padding: 4px 0;
}
.gh-publish-newsletter-dropdown .ember-power-select-option {
padding: 8px 16px;
}
.gh-publish-newsletter-dropdown .ember-power-select-option[aria-selected="true"] {
color: var(--black);
font-weight: 600;
}
.gh-publish-cta {
display: flex;
flex-direction: column;
@ -655,9 +687,9 @@
}
.gh-publish-confirmation {
margin-bottom: 5.2rem;
margin-bottom: 7rem;
color: var(--black);
font-size: 1.9rem;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.35em;
}