Updated copy for scheduled posts

TryGhost · Nov 8, 2019 · 39d2e13 · 39d2e13
1 parent 421809b
commit 39d2e13
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 29 deletions.
diff --git a/app/components/gh-posts-list-item.js b/app/components/gh-posts-list-item.js
@@ -36,7 +36,7 @@ export default Component.extend({
         }
 
         if (this.isScheduled) {
-            return `${text.slice(0, 40)}...`;
+            return `${text.slice(0, 35)}...`;
         } else {
             return `${text.slice(0, 80)}...`;
         }

diff --git a/app/components/gh-publishmenu-scheduled.js b/app/components/gh-publishmenu-scheduled.js
@@ -1,6 +1,7 @@
 import Component from '@ember/component';
 import moment from 'moment';
 import {computed} from '@ember/object';
+import { equal } from '@ember/object/computed';
 import {inject as service} from '@ember/service';
 
 export default Component.extend({
@@ -15,6 +16,8 @@ export default Component.extend({
 
     'data-test-publishmenu-scheduled': true,
 
+    disableEmailOption: equal('memberCount', 0),
+
     timeToPublished: computed('post.publishedAtUTC', 'clock.second', function () {
         let publishedAtUTC = this.get('post.publishedAtUTC');
 

diff --git a/app/styles/components/publishmenu.css b/app/styles/components/publishmenu.css
@@ -69,7 +69,7 @@
     margin: 0 0 15px 0;
     padding: 20px 20px 0;
     font-size: 1.8rem;
-    line-height: 1.15em;
+    line-height: 1.25em;
 }
 
 .gh-publishmenu-content {
@@ -249,4 +249,9 @@
 
 .gh-publishmenu-content .for-switch.pe-none {
     opacity: 0.6;
+}
+
+.gh-publishmenu-email-info {
+    margin: 15px 0;
+    color: var(--midgrey);
 }
diff --git a/app/templates/components/gh-posts-list-item.hbs b/app/templates/components/gh-posts-list-item.hbs
@@ -10,7 +10,7 @@
     </h3>
     {{#if isScheduled}}
         <p>
-            <span class="gh-schedule-time">Will go live {{gh-format-post-time this.post.publishedAtUTC scheduled=true}}</span>
+            <span class="gh-schedule-time">Scheduled to be published and sent {{gh-format-post-time this.post.publishedAtUTC scheduled=true}}</span>
             <span class="gh-schedule-subtext">&dash; {{this.subText}}</span>
         </p>
     {{else}}

diff --git a/app/templates/components/gh-publishmenu-scheduled.hbs b/app/templates/components/gh-publishmenu-scheduled.hbs
@@ -1,27 +1,56 @@
 <header class="gh-publishmenu-heading">Will be published in {{timeToPublished}}</header>
-<section class="gh-publishmenu-content">
-    <div class="gh-publishmenu-radio {{if (eq saveType "draft") "active"}}" {{action "setSaveType" "draft" on="click"}}>
-        <div class="gh-publishmenu-radio-button" data-test-publishmenu-draft-option></div>
-        <div class="gh-publishmenu-radio-content">
-            <div class="gh-publishmenu-radio-label">Revert to draft</div>
-            <div class="gh-publishmenu-radio-desc">Do not publish</div>
+<div class="gh-publishmenu-content">
+    <section class="gh-publishmenu-section">
+        <div class="gh-publishmenu-radio {{if (eq saveType "draft") "active"}}" {{action "setSaveType" "draft" on="click"}}>
+            <div class="gh-publishmenu-radio-button" data-test-publishmenu-draft-option></div>
+            <div class="gh-publishmenu-radio-content">
+                <div class="gh-publishmenu-radio-label">Revert to draft</div>
+                <div class="gh-publishmenu-radio-desc">Do not publish</div>
+            </div>
         </div>
-    </div>
-    <div class="gh-publishmenu-radio {{if (eq saveType "schedule") "active"}}" {{action "setSaveType" "schedule" on="click"}}>
-        <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 for later</div>
-            {{gh-date-time-picker
-                date=post.publishedAtBlogDate
-                time=post.publishedAtBlogTime
-                setDate=(action "setDate")
-                setTime=(action "setTime")
-                errors=post.errors
-                dateErrorProperty="publishedAtBlogDate"
-                timeErrorProperty="publishedAtBlogTime"
-                minDate=_minDate
-            }}
-            <div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
+        <div class="gh-publishmenu-radio {{if (eq saveType "schedule") "active"}}" {{action "setSaveType" "schedule" on="click"}}>
+            <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 for later</div>
+                {{gh-date-time-picker
+                    date=post.publishedAtBlogDate
+                    time=post.publishedAtBlogTime
+                    setDate=(action "setDate")
+                    setTime=(action "setTime")
+                    errors=post.errors
+                    dateErrorProperty="publishedAtBlogDate"
+                    timeErrorProperty="publishedAtBlogTime"
+                    minDate=_minDate
+                }}
+                <div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
+            </div>
         </div>
-    </div>
-</section>
+    </section>
+    {{#if post.sendEmailWhenPublished}}
+        <section class="gh-publishmenu-section">
+            <div class="gh-publishmenu-radio 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 pe-none midgrey"
+                        for="email-when-published-checkbox">Send by email</label>
+                    {{#if this.memberCount}}
+                    <div class="gh-publishmenu-radio-desc">Deliver post to members</div>
+                    {{else}}
+                    <div class="gh-publishmenu-radio-desc">You haven't got any members</div>
+                    {{/if}}
+                </div>
+                <div class="for-switch small pe-none">
+                    <div class="switch container" for="email-when-published-checkbox">
+                        <Input @checked={{post.sendEmailWhenPublished}} @type="checkbox" @id="email-when-published-checkbox"
+                            @name="email-when-published" @disabled={{disableEmailOption}} />
+                        <span class="input-toggle-component gh-publishmenu-email-checkbox"
+                            {{on "click" (toggle "sendEmailWhenPublished" this)}}></span>
+                    </div>
+                </div>
+                {{/if}}
+            </div>
+        </section>
+    {{/if}}
+</div>
diff --git a/app/templates/components/gh-publishmenu.hbs b/app/templates/components/gh-publishmenu.hbs
@@ -17,6 +17,7 @@
             post=post
             saveType=saveType
             isClosing=isClosing
+            memberCount=this.memberCount
             setSaveType=(action "setSaveType")}}
 
         {{else}}

diff --git a/app/templates/editor.hbs b/app/templates/editor.hbs
@@ -15,15 +15,17 @@
                     </div>
                 {{/if}}
                 <div class="flex items-center pl4 pr4 f8 nudge-left--1 h9 br2 br--right {{unless infoMessage "bg-white"}}">
+                    {{#unless post.isScheduled}}
                     <span class="fw4 midgrey-l2">
                         {{gh-editor-post-status
                             post=post
                             isSaving=(or autosave.isRunning saveTasks.isRunning)
                         }}
                     </span>
+                    {{/unless}}
                 {{#gh-scheduled-post-countdown post=post as |post countdown|}}
-                    <time datetime="{{post.publishedAtUTC}}" class="green f8 ml5" data-test-schedule-countdown>
-                        {{capitalize post.displayName}} will go live {{countdown}}.
+                    <time datetime="{{post.publishedAtUTC}}" class="green f8" data-test-schedule-countdown>
+                        Scheduled to be published and sent {{countdown}}.
                     </time>
                 {{/gh-scheduled-post-countdown}}
                 </div>