TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Updated email recipient checkbox design

Browse Source 
no refs.
- changed email recipient checkboxes to switches in the publish menu so that it's nicely balanced
This commit is contained in:
Peter Zimon 2020-11-16 16:48:42 +01:00
parent c46198f728
commit 7970917872
3 changed files with 95 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
ghost/admin/app/components/gh-publishmenu-draft.hbs
View File

@ -31,37 +31,48 @@
{{#if (and this.canSendEmail showSendEmail)}}
<div class="gh-publishmenu-section">
<div class="gh-publishmenu-radio gh-publishmenu-email">
<div class="gh-publishmenu-email">
{{#if this.backgroundLoader.isRunning}}
<div class="gh-loading-spinner" style="zoom: 50%"></div>
{{else}}
<div class="gh-publishmenu-email-label {{if this.disableEmailOption "pe-none"}}">
<label class="gh-publishmenu-radio-label mb3 {{if this.disableEmailOption "midgrey"}}">Send by email to</label>
<div class="form-group for-checkbox mb0">
<label class="checkbox {{if this.disableFreeMemberCheckbox "gh-publishmenu-checkbox-disabled"}}" for="free-members" {{action "toggleSendEmailWhenPublished" "free" bubbles="false"}}>
<input
type="checkbox"
checked={{this.sendEmailToFreeMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
onclick={{action "toggleSendEmailWhenPublished" value="free"}}
data-test-checkbox="free-members"
>
<span class="input-toggle-component"></span>
<div class="form-group">
<div class="gh-publishmenu-send-to-option">
<p>Free members <span class="gh-publishmenu-emailcount">{{this.freeMemberCountLabel}}</span></p>
</label>
<label class="checkbox {{if this.disablePaidMemberCheckbox "gh-publishmenu-checkbox-disabled"}}" for="paid-members" {{action "toggleSendEmailWhenPublished" "paid" bubbles="false"}}>
<input
type="checkbox"
checked={{this.sendEmailToPaidMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
onclick={{action "toggleSendEmailWhenPublished" value='paid'}}
data-test-checkbox="paid-members"
>
<span class="input-toggle-component"></span>
<div class="for-switch small" {{action "toggleSendEmailWhenPublished" "free" bubbles="false"}}>
<label class="switch" for="send-email-to-free">
<input
id="send-email-to-free"
type="checkbox"
checked={{this.sendEmailToFreeMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
onclick={{action "toggleSendEmailWhenPublished" value="free"}}
data-test-checkbox="free-members"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
<div class="gh-publishmenu-send-to-option">
<p>Paid members <span class="gh-publishmenu-emailcount">{{this.paidMemberCountLabel}}</span></p>
</label>
<div class="for-switch small" {{action "toggleSendEmailWhenPublished" "paid" bubbles="false"}}>
<label class="switch" for="send-email-to-paid">
<input
id="send-email-to-paid"
type="checkbox"
checked={{this.sendEmailToPaidMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
onclick={{action "toggleSendEmailWhenPublished" value="paid"}}
data-test-checkbox="paid-members"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
</div>
</div>
{{/if}}

60
ghost/admin/app/components/gh-publishmenu-scheduled.hbs
View File

@ -31,35 +31,45 @@
{{#if (and canSendEmail showSendEmail)}}
{{#unless this.post.email}}
<section class="gh-publishmenu-section">
<div class="gh-publishmenu-radio gh-publishmenu-email">
<div class="gh-publishmenu-email">
{{#if this.backgroundLoader.isRunning}}
<div class="gh-loading-spinner" style="zoom: 50%"></div>
{{else}}
<div class="gh-publishmenu-email-label">
<label class="gh-publishmenu-radio-label mb3 midgrey pe-none">Send by email to</label>
<div class="form-group for-checkbox mb0">
<label class="checkbox gh-publishmenu-checkbox-disabled" for="free-members">
<input
type="checkbox"
checked={{this.sendEmailToFreeMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
data-test-checkbox="free-members"
>
<span class="input-toggle-component"></span>
<p>Free members <span class="gh-publishmenu-emailcount">{{this.freeMemberCountLabel}}</span></p>
</label>
<label class="checkbox gh-publishmenu-checkbox-disabled" for="paid-members">
<input
type="checkbox"
checked={{this.sendEmailToPaidMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
data-test-checkbox="paid-members"
>
<span class="input-toggle-component"></span>
<p>Paid members <span class="gh-publishmenu-emailcount">{{this.paidMemberCountLabel}}</span></p>
</label>
<label class="gh-publishmenu-radio-label mb3 pe-none">Send by email to</label>
<div class="form-group">
<div class="gh-publishmenu-send-to-option gh-publishmenu-checkbox-disabled">
<p>Free members</p>
<div class="for-switch small">
<label class="switch" for="send-email-to-free">
<input
id="send-email-to-free"
type="checkbox"
checked={{this.sendEmailToFreeMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
data-test-checkbox="free-members"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
<div class="gh-publishmenu-send-to-option gh-publishmenu-checkbox-disabled">
<p>Paid members</p>
<div class="for-switch small">
<label class="switch" for="send-email-to-paid">
<input
id="send-email-to-paid"
type="checkbox"
checked={{this.sendEmailToPaidMembersWhenPublished}}
disabled={{this.disableEmailOption}}
class="gh-input post-settings-featured"
data-test-checkbox="paid-members"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
</div>
</div>
{{/if}}

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

@ -257,16 +257,38 @@
color: var(--midgrey);
}
.gh-publishmenu-send-to-option {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.gh-publishmenu-send-to-option p {
color: var(--darkgrey);
margin: 0;
}
.gh-publishmenu-send-to-option .for-switch {
line-height: 1;
}
.gh-publishmenu-send-to-option .for-switch label {
margin: 0;
width: 38px !important;
height: 22px !important;
}
.gh-publishmenu-emailcount {
color: var(--midlightgrey);
}
.gh-publishmenu-checkbox-disabled {
color: var(--midlightgrey);
opacity: 0.75;
opacity: 0.6;
pointer-events: none;
}
.gh-publishmenu-checkbox-disabled p {
color: var(--midlightgrey) !important;
}
color: var(--midgrey) !important;
}