Updated email recipient filter design

Refs https://github.com/TryGhost/Team/issues/1544

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

@@ -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 (eq @recipientType "all") "All"}}
+                            {{#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"}}

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

@@ -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>

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

@@ -1,89 +1,97 @@
-<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">
-            <input
-                id="send-email-to-free"
-                type="checkbox"
-                class="gh-input post-settings-featured"
-                checked={{this.isFreeChecked}}
-                disabled={{@disabled}}
-                aria-label="Free members toggle"
-                {{on "change" (fn this.toggleFilter "status:free")}}
-                data-test-checkbox="free-members"
-            >
-            <span class="input-toggle-component"></span>
-        </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">
+    <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-paid"
+                    id="send-email-to-free"
                     type="checkbox"
                     class="gh-input post-settings-featured"
-                    checked={{this.isPaidChecked}}
+                    checked={{this.isFreeChecked}}
                     disabled={{@disabled}}
-                    aria-label="Paid members toggle"
-                    {{on "change" (fn this.toggleFilter "status:-free")}}
-                    data-test-checkbox="paid-members"
+                    aria-label="Free members toggle"
+                    {{on "change" (fn this.toggleFilter "status:free")}}
+                    data-test-checkbox="free-members"
                 >
-                <span class="input-toggle-component"></span>
+                <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}}
-{{#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">
-                <input
-                    id="send-email-to-specific"
-                    type="checkbox"
-                    class="gh-input post-settings-featured"
-                    checked={{this.isSpecificChecked}}
-                    disabled={{@disabled}}
-                    aria-label="Specific people toggle"
-                    {{on "change" this.toggleSpecificFilter}}
-                    data-test-checkbox="paid-members"
-                >
-                <span class="input-toggle-component"></span>
-            </label>
+    {{#if this.isPaidAvailable}}
+        <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"
+                        class="gh-input post-settings-featured"
+                        checked={{this.isPaidChecked}}
+                        disabled={{@disabled}}
+                        aria-label="Paid members toggle"
+                        {{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>
-    </div>
-    {{#if this.isSpecificChecked}}
-        <GhTokenInput
-            @class="select-members select-members-recipient"
-            @dropdownClass={{@dropdownClass}}
-            @options={{this.specificOptions}}
-            @selected={{this.selectedSpecificOptions}}
-            @disabled={{@disabled}}
-            @searchMessage="All labels selected"
-            @optionsComponent="power-select/options"
-            @allowCreation={{false}}
-            @renderInPlace={{this.renderInPlace}}
-            @onChange={{this.selectSpecificOptions}}
-            as |option|
-        >
-            {{option.name}}
-        </GhTokenInput>
     {{/if}}
-{{/if}}
+    {{#if this.specificOptions}}
+        <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"
+                        class="gh-input post-settings-featured"
+                        checked={{this.isSpecificChecked}}
+                        disabled={{@disabled}}
+                        aria-label="Specific people toggle"
+                        {{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>
+        {{#if this.isSpecificChecked}}
+            <GhTokenInput
+                @class="select-members select-members-recipient"
+                @dropdownClass={{@dropdownClass}}
+                @options={{this.specificOptions}}
+                @selected={{this.selectedSpecificOptions}}
+                @disabled={{@disabled}}
+                @searchMessage="All labels selected"
+                @optionsComponent="power-select/options"
+                @allowCreation={{false}}
+                @renderInPlace={{this.renderInPlace}}
+                @onChange={{this.selectSpecificOptions}}
+                as |option|
+            >
+                {{option.name}}
+            </GhTokenInput>
+        {{/if}}
+    {{/if}}
+</div>

ghost/admin/app/styles/components/publishmenu.css

@@ -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;

ghost/admin/app/templates/editor.hbs

@@ -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}}>