From 797091787285c6746a9126f7468f64291e8d6bcb Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 16 Nov 2020 16:48:42 +0100
Subject: [PATCH] Updated email recipient checkbox design

no refs.
- changed email recipient checkboxes to switches in the publish menu so that it's nicely balanced
---
 .../app/components/gh-publishmenu-draft.hbs   | 59 ++++++++++--------
 .../components/gh-publishmenu-scheduled.hbs   | 60 +++++++++++--------
 .../app/styles/components/publishmenu.css     | 28 ++++++++-
 3 files changed, 95 insertions(+), 52 deletions(-)

diff --git a/ghost/admin/app/components/gh-publishmenu-draft.hbs b/ghost/admin/app/components/gh-publishmenu-draft.hbs
index 09de17657d..9aec50e80a 100644
--- a/ghost/admin/app/components/gh-publishmenu-draft.hbs
+++ b/ghost/admin/app/components/gh-publishmenu-draft.hbs
@@ -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}}
diff --git a/ghost/admin/app/components/gh-publishmenu-scheduled.hbs b/ghost/admin/app/components/gh-publishmenu-scheduled.hbs
index 97378af904..eea7ec31f5 100644
--- a/ghost/admin/app/components/gh-publishmenu-scheduled.hbs
+++ b/ghost/admin/app/components/gh-publishmenu-scheduled.hbs
@@ -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}}
diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css
index e7eda04159..68de021ff5 100644
--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@@ -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;
-}
\ No newline at end of file
+    color: var(--midgrey) !important;
+}