mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Updated email recipient filter design
Refs https://github.com/TryGhost/Team/issues/1544
This commit is contained in:
Sanne de Vries
parent
4c0c5dcac6
commit
f6b06ef9bf
@ -40,7 +40,9 @@
|
||||
{{svg-jar "member"}}
|
||||
<div class="gh-publish-setting-trigger">
|
||||
{{#let (members-count-fetcher query=(hash filter=@publishOptions.fullRecipientFilter)) as |countFetcher|}}
|
||||
{{#if (gt countFetcher.count 1)}}
|
||||
{{if (eq @recipientType "all") "All"}}
|
||||
{{/if}}
|
||||
|
||||
{{countFetcher.count}}
|
||||
|
||||
@ -48,7 +50,7 @@
|
||||
{{if (not-eq @recipientType "all") @recipientType}}
|
||||
|
||||
{{#if @publishOptions.onlyDefaultNewsletter}}
|
||||
{{gh-pluralize countFetcher.count "member" without-count=true}}
|
||||
{{gh-pluralize countFetcher.count "subscriber" without-count=true}}
|
||||
{{else}}
|
||||
{{gh-pluralize countFetcher.count "subscriber" without-count=true}}
|
||||
of <span class="gh-selected-newsletter">{{@publishOptions.newsletter.name}}</span>
|
||||
@ -66,7 +68,7 @@
|
||||
>
|
||||
{{svg-jar "member"}}
|
||||
<div class="gh-publish-setting-trigger">
|
||||
Not sent to any members
|
||||
Not sent as newsletter
|
||||
</div>
|
||||
<span>
|
||||
{{svg-jar "arrow-down" class="icon-expand"}}
|
||||
|
||||
@ -1,6 +1,15 @@
|
||||
<div class="form-group max-width mb0">
|
||||
<GhMembersRecipientSelect
|
||||
@filter={{@publishOptions.recipientFilter}}
|
||||
@newsletter={{@publishOptions.newsletter}}
|
||||
@onChange={{@publishOptions.setRecipientFilter}}
|
||||
@renderInPlace={{false}}
|
||||
@dropdownClass="gh-publish-newsletter-dropdown"
|
||||
/>
|
||||
|
||||
{{#if (gt @publishOptions.newsletters.length 1)}}
|
||||
<div class="mb4">
|
||||
<div class="mt4">
|
||||
<label class="gh-main-section-header small bn">Newsletter</label>
|
||||
<PowerSelect
|
||||
@selected={{@publishOptions.newsletter}}
|
||||
@options={{@publishOptions.newsletters}}
|
||||
@ -14,12 +23,4 @@
|
||||
</PowerSelect>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<GhMembersRecipientSelect
|
||||
@filter={{@publishOptions.recipientFilter}}
|
||||
@newsletter={{@publishOptions.newsletter}}
|
||||
@onChange={{@publishOptions.setRecipientFilter}}
|
||||
@renderInPlace={{false}}
|
||||
@dropdownClass="gh-publishmenu-newsletter-dropdown"
|
||||
/>
|
||||
</div>
|
||||
@ -1,14 +1,7 @@
|
||||
<div class="gh-publishmenu-send-to-option">
|
||||
<p>
|
||||
Free subscribers
|
||||
{{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:free"))) as |countFetcher|}}
|
||||
{{#if (not (is-empty countFetcher.count))}}
|
||||
<span class="gh-publishmenu-emailcount" data-test-email-count="free-members">({{countFetcher.count}})</span>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</p>
|
||||
<div class="for-switch small {{if @disabled "disabled"}}">
|
||||
<label class="switch" for="send-email-to-free">
|
||||
<div class="gh-publish-send-to">
|
||||
<div class="gh-publish-send-to-option">
|
||||
<div class="for-checkbox {{if @disabled "disabled"}}">
|
||||
<label class="checkbox" for="send-email-to-free">
|
||||
<input
|
||||
id="send-email-to-free"
|
||||
type="checkbox"
|
||||
@ -19,22 +12,24 @@
|
||||
{{on "change" (fn this.toggleFilter "status:free")}}
|
||||
data-test-checkbox="free-members"
|
||||
>
|
||||
<div class="flex">
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>
|
||||
Free
|
||||
{{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:free"))) as |countFetcher|}}
|
||||
{{#if (not (is-empty countFetcher.count))}}
|
||||
<span class="gh-publish-emailcount" data-test-email-count="free-members">({{countFetcher.count}})</span>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{#if this.isPaidAvailable}}
|
||||
<div class="gh-publishmenu-send-to-option">
|
||||
<p>
|
||||
Paid subscribers
|
||||
{{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:-free"))) as |countFetcher|}}
|
||||
{{#if (not (is-empty countFetcher.count))}}
|
||||
<span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">({{countFetcher.count}})</span>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</p>
|
||||
<div class="for-switch small {{if @disabled "disabled"}}">
|
||||
<label class="switch" for="send-email-to-paid">
|
||||
<div class="gh-publish-send-to-option">
|
||||
<div class="for-checkbox {{if @disabled "disabled"}}">
|
||||
<label class="checkbox" for="send-email-to-paid">
|
||||
<input
|
||||
id="send-email-to-paid"
|
||||
type="checkbox"
|
||||
@ -45,16 +40,25 @@
|
||||
{{on "change" (fn this.toggleFilter "status:-free")}}
|
||||
data-test-checkbox="paid-members"
|
||||
>
|
||||
<div class="flex">
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>
|
||||
Paid
|
||||
{{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:-free"))) as |countFetcher|}}
|
||||
{{#if (not (is-empty countFetcher.count))}}
|
||||
<span class="gh-publish-emailcount" data-test-email-count="paid-members">({{countFetcher.count}})</span>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if this.specificOptions}}
|
||||
<div class="gh-publishmenu-send-to-option">
|
||||
<p>Specific people</p>
|
||||
<div class="for-switch small {{if @disabled "disabled"}}">
|
||||
<label class="switch" for="send-email-to-specific">
|
||||
<div class="gh-publish-send-to-option">
|
||||
<div class="for-checkbox {{if @disabled "disabled"}}">
|
||||
<label class="checkbox" for="send-email-to-specific">
|
||||
<input
|
||||
id="send-email-to-specific"
|
||||
type="checkbox"
|
||||
@ -65,7 +69,10 @@
|
||||
{{on "change" this.toggleSpecificFilter}}
|
||||
data-test-checkbox="paid-members"
|
||||
>
|
||||
<div class="flex">
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Other</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,3 +94,4 @@
|
||||
</GhTokenInput>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -329,32 +329,91 @@
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-publishmenu-send-to-option {
|
||||
.gh-publish-send-to {
|
||||
display: flex;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.gh-publish-send-to-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
height: 40px;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.gh-publishmenu-send-to-option p {
|
||||
.gh-publish-send-to-option p {
|
||||
margin: 0;
|
||||
color: var(--darkgrey);
|
||||
font-size: 1.45rem;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .4px;
|
||||
line-height: 36px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-publishmenu-send-to-option .for-switch {
|
||||
line-height: 1;
|
||||
.gh-publish-send-to-option .for-checkbox {
|
||||
height: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-publishmenu-send-to-option .for-switch label {
|
||||
.gh-publish-send-to-option .for-checkbox .input-toggle-component {
|
||||
position: absolute;
|
||||
top: calc(50%-9px);
|
||||
left: 14px;
|
||||
margin: 0;
|
||||
width: 38px !important;
|
||||
height: 22px !important;
|
||||
border-color: var(--white);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.gh-publishmenu-emailcount {
|
||||
color: var(--midlightgrey);
|
||||
.gh-publish-send-to-option label p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 14px 0 38px;
|
||||
border: 1px solid var(--lightgrey-l1);
|
||||
color: var(--middarkgrey);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
letter-spacing: .2px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
overflow: unset;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.gh-publish-send-to-option .for-checkbox input:checked + .flex p {
|
||||
padding: 0 13px 0 37px;
|
||||
border: 2px solid var(--black);
|
||||
background: var(--whitegrey-l2);
|
||||
color: var(--black);
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.gh-publish-send-to-option .for-checkbox input:checked + .flex .input-toggle-component {
|
||||
border: 1px solid var(--white);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.gh-publish-send-to-option .for-checkbox .input-toggle-component::before {
|
||||
opacity: 1 !important;
|
||||
border-color: var(--midlightgrey);
|
||||
}
|
||||
|
||||
.gh-publish-send-to-option .for-checkbox input:checked + .flex .input-toggle-component::before {
|
||||
opacity: 1;
|
||||
border-color: var(--black);
|
||||
}
|
||||
|
||||
.gh-publish-send-to .ember-power-select-multiple-trigger {
|
||||
flex-grow: 1;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.gh-publish-emailcount {
|
||||
margin-left: 4px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.gh-publishmenu-checkbox-disabled {
|
||||
@ -381,11 +440,11 @@
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.gh-publishmenu-newsletter-dropdown {
|
||||
.gh-publish-newsletter-dropdown {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.gh-publishmenu-newsletter-dropdown .ember-power-select-option[aria-selected="true"] {
|
||||
.gh-publish-newsletter-dropdown .ember-power-select-option[aria-selected="true"] {
|
||||
color: var(--black);
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -572,14 +631,22 @@
|
||||
}
|
||||
|
||||
.gh-publish-newsletter-trigger {
|
||||
margin-top: 2px;
|
||||
padding: 8px 16px;
|
||||
font-size: 1.45rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.gh-publish-newsletter-trigger svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
transform: scaleX(1.1);
|
||||
}
|
||||
|
||||
.gh-publish-newsletter-trigger svg path {
|
||||
stroke: var(--midlightgrey) !important;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.gh-publish-newsletter-dropdown {
|
||||
@ -611,15 +678,15 @@
|
||||
.gh-publish-types label,
|
||||
.gh-publish-schedule label {
|
||||
display: block;
|
||||
height: 40px;
|
||||
height: 38px;
|
||||
margin-right: 1.2rem;
|
||||
padding: 0 20px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid var(--lightgrey-l1);
|
||||
color: var(--middarkgrey);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 38px;
|
||||
letter-spacing: .4px;
|
||||
line-height: 36px;
|
||||
letter-spacing: .2px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border-radius: 21px;
|
||||
@ -627,10 +694,10 @@
|
||||
|
||||
.gh-publish-types .gh-radio-button:checked + label,
|
||||
.gh-publish-schedule .gh-radio.active label {
|
||||
padding: 0 19px;
|
||||
padding: 0 17px;
|
||||
border: 2px solid var(--black);
|
||||
color: var(--black);
|
||||
line-height: 36px;
|
||||
line-height: 34px;
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
@ -656,7 +723,7 @@
|
||||
}
|
||||
|
||||
.gh-publish-setting-form .gh-date-time-picker-date {
|
||||
height: 40px;
|
||||
height: 38px;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
font-size: 1.4rem;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
as |editor|
|
||||
>
|
||||
<header class="gh-editor-header br2 pe-none">
|
||||
<div class="flex items-center pe-auto">
|
||||
<div class="flex items-center pe-auto h-100">
|
||||
{{#if this.ui.isFullScreen}}
|
||||
<div class="ml3 mobile flex items-center">
|
||||
<LinkTo @route={{pluralize this.post.displayName }} class="gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user