diff --git a/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs new file mode 100644 index 0000000000..431d8f2136 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs @@ -0,0 +1,75 @@ +
+
+ +
+ +
+
Another masterpiece. Ready to share it with the world?
+
+
+
+ {{svg-jar "send-email"}} + {{#if @data.publishOptions.emailUnavailable}} + Publish on site + {{else}} + + {{/if}} +
+ {{#liquid-if (eq this.openSection "publishType")}} +
+ +
+ {{/liquid-if}} +
+ + {{#if (not-eq @data.publishOptions.publishType "publish")}} +
+
+ {{svg-jar "member"}} +
+ 235 + {{#unless @data.publishOptions.onlyDefaultNewsletter}} + + Charts of the Week + + {{/unless}} + subscribers +
+
+
+ {{/if}} + +
+
+ {{svg-jar "clock"}} + +
+ {{#liquid-if (eq this.openSection "publishAt")}} + + {{/liquid-if}} +
+ +
+ +
+ + +
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/modals/editor-labs/publish-flow.js b/ghost/admin/app/components/editor-labs/modals/publish-flow.js similarity index 55% rename from ghost/admin/app/components/modals/editor-labs/publish-flow.js rename to ghost/admin/app/components/editor-labs/modals/publish-flow.js index 8bcf741fe0..23c9d4935e 100644 --- a/ghost/admin/app/components/modals/editor-labs/publish-flow.js +++ b/ghost/admin/app/components/editor-labs/modals/publish-flow.js @@ -1,5 +1,6 @@ import Component from '@glimmer/component'; import {action} from '@ember/object'; +import {tracked} from '@glimmer/tracking'; export default class PublishModalComponent extends Component { static modalOptions = { @@ -8,10 +9,14 @@ export default class PublishModalComponent extends Component { ignoreBackdropClick: true }; - @action - publishTypeChanged(event) { - event.preventDefault(); + @tracked openSection = null; - this.args.data.publishOptions.setPublishType(event.target.value); + @action + toggleSection(section) { + if (section === this.openSection) { + this.openSection = null; + } else { + this.openSection = section; + } } } diff --git a/ghost/admin/app/components/editor-labs/publish-management.js b/ghost/admin/app/components/editor-labs/publish-management.js index 93b7c6e297..4e2ac78dfc 100644 --- a/ghost/admin/app/components/editor-labs/publish-management.js +++ b/ghost/admin/app/components/editor-labs/publish-management.js @@ -1,6 +1,7 @@ import Component from '@glimmer/component'; -import PublishFlowModal from '../modals/editor-labs/publish-flow'; +import PublishFlowModal from './modals/publish-flow'; import PublishOptionsResource from 'ghost-admin/helpers/publish-options'; +import moment from 'moment'; import {action, get} from '@ember/object'; import {inject as service} from '@ember/service'; import {task} from 'ember-concurrency'; @@ -13,7 +14,7 @@ export class PublishOptions { settings = null; store = null; - // passed in objects + // passed in models post = null; user = null; @@ -21,6 +22,45 @@ export class PublishOptions { return this.setupTask.isRunning; } + // publish date ------------------------------------------------------------ + + @tracked isScheduled = false; + @tracked scheduledAtUTC = this.minScheduledAt; + + get minScheduledAt() { + return moment.utc().add(5, 'minutes'); + } + + @action + toggleScheduled(shouldSchedule) { + if (shouldSchedule === undefined) { + shouldSchedule = !this.isScheduled; + } + + this.isScheduled = shouldSchedule; + + if (shouldSchedule && (!this.scheduledAtUTC || this.scheduledAtUTC.isBefore(this.minScheduledAt))) { + this.scheduledAtUTC = this.minScheduledAt; + } + } + + @action + setScheduledAt(date) { + if (moment.utc(date).isBefore(this.minScheduledAt)) { + return; + } + + this.scheduledAtUTC = moment.utc(date); + } + + @action + resetPastScheduledAt() { + if (this.scheduledAtUTC.isBefore(this.minScheduledAt)) { + this.isScheduled = false; + this.scheduledAt = null; + } + } + // publish type ------------------------------------------------------------ @tracked publishType = 'publish+send'; @@ -67,15 +107,11 @@ export class PublishOptions { } @action - setPublishType(publishType) { - // TODO: validate publish type is allowed - this.publishType = publishType; + setPublishType(newValue) { + // TODO: validate option is allowed when setting? + this.publishType = newValue; } - // publish date ------------------------------------------------------------ - - @tracked publishDate = 'now'; - // newsletter -------------------------------------------------------------- newsletters = []; // set in constructor @@ -153,6 +189,8 @@ export default class PublishManagement extends Component { event?.preventDefault(); if (!this.publishFlowModal || this.publishFlowModal.isClosing) { + this.publishOptions.resetPastScheduledAt(); + this.publishFlowModal = this.modals.open(PublishFlowModal, { publishOptions: this.publishOptions }); diff --git a/ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs b/ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs new file mode 100644 index 0000000000..0582cdb4dd --- /dev/null +++ b/ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs @@ -0,0 +1,25 @@ +{{!-- template-lint-disable no-invalid-interactive --}} +
+
+
+
+
Set it live now
+
+
+
+
+
+
Schedule it for later
+ +
Set automatic future publish date
+
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/editor-labs/publish-options/publish-at.js b/ghost/admin/app/components/editor-labs/publish-options/publish-at.js new file mode 100644 index 0000000000..96add71f87 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/publish-options/publish-at.js @@ -0,0 +1,47 @@ +import Component from '@glimmer/component'; +import moment from 'moment'; +import {action} from '@ember/object'; + +export default class PublishAtOption extends Component { + @action + setDate(selectedDate) { + const newDate = moment(this.args.publishOptions.scheduledAtUTC); + const {year, month, date} = moment(selectedDate).toObject(); + + newDate.set({year, month, date}); + + this.args.publishOptions.setScheduledAt(newDate); + } + + @action + setTime(time) { + if (!time) { + return; + } + + if (time.match(/^\d:\d\d$/)) { + time = `0${time}`; + } + + if (!time.match(/^\d\d:\d\d$/)) { + return; + } + + const [hour, minute] = time.split(':').map(n => parseInt(n, 10)); + + if (isNaN(hour) || hour < 0 || hour > 23 || isNaN(minute) || minute < 0 || minute > 59) { + return; + } + + // hour/minute will be the site timezone equivalent but we need the hour/minute + // as it would be in UTC + const conversionDate = moment(); + conversionDate.set({hour, minute}); + const utcDate = moment.utc(conversionDate); + + const newDate = moment.utc(this.args.publishOptions.scheduledAtUTC); + newDate.set({hour: utcDate.get('hour'), minute: utcDate.get('minute')}); + + this.args.publishOptions.setScheduledAt(newDate); + } +} diff --git a/ghost/admin/app/components/editor-labs/publish-options/publish-type.hbs b/ghost/admin/app/components/editor-labs/publish-options/publish-type.hbs new file mode 100644 index 0000000000..e57691fb93 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/publish-options/publish-type.hbs @@ -0,0 +1,16 @@ +
+ {{#each @publishOptions.publishTypeOptions as |option|}} +
+ + +
+ {{/each}} +
\ No newline at end of file diff --git a/ghost/admin/app/components/editor-labs/publish-options/publish-type.js b/ghost/admin/app/components/editor-labs/publish-options/publish-type.js new file mode 100644 index 0000000000..6c168b60e2 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/publish-options/publish-type.js @@ -0,0 +1,10 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; + +export default class PublishTypeOption extends Component { + @action + onChange(event) { + event.preventDefault(); + this.args.publishOptions.setPublishType(event.target.value); + } +} diff --git a/ghost/admin/app/components/gh-date-time-picker.hbs b/ghost/admin/app/components/gh-date-time-picker.hbs index 4df5648197..5b49c4a1fe 100644 --- a/ghost/admin/app/components/gh-date-time-picker.hbs +++ b/ghost/admin/app/components/gh-date-time-picker.hbs @@ -3,7 +3,7 @@ @selected={{this._date}} @center={{this._date}} @onSelect={{action "setDateInternal" value="date"}} - @renderInPlace={{true}} + @renderInPlace={{this.renderInPlaceWithFallback}} @disabled={{this.disabled}} as |dp| > diff --git a/ghost/admin/app/components/gh-date-time-picker.js b/ghost/admin/app/components/gh-date-time-picker.js index b955e7383d..1b77ac3d6e 100644 --- a/ghost/admin/app/components/gh-date-time-picker.js +++ b/ghost/admin/app/components/gh-date-time-picker.js @@ -31,6 +31,10 @@ export default class GhDateTimePicker extends Component { // actions setTypedDateError() {} + get renderInPlaceWithFallback() { + return this.renderInPlace === undefined ? true : this.renderInPlace; + } + @reads('settings.timezone') blogTimezone; diff --git a/ghost/admin/app/components/modals/editor-labs/publish-flow.hbs b/ghost/admin/app/components/modals/editor-labs/publish-flow.hbs deleted file mode 100644 index 9f425f413d..0000000000 --- a/ghost/admin/app/components/modals/editor-labs/publish-flow.hbs +++ /dev/null @@ -1,76 +0,0 @@ -
-
- -
- -
-
Another masterpiece. Ready to share it with the world?
-
-
- {{svg-jar "send-email"}} - {{#if @data.publishOptions.emailUnavailable}} - publish - {{else}} - - - {{@data.publishOptions.selectedPublishTypeOption.display}} - - -
- {{#each @data.publishOptions.publishTypeOptions as |option|}} -
- - -
- {{/each}} -
- - - - {{/if}} -
- - {{#if (not-eq @data.publishOptions.publishType "publish")}} -
- {{svg-jar "member"}} -
- 235 - {{#unless @data.publishOptions.onlyDefaultNewsletter}} - - Charts of the Week - - {{/unless}} - subscribers -
-
- {{/if}} - -
- {{svg-jar "clock"}} -
Right now
-
- -
- -
- - -
-
-
\ No newline at end of file diff --git a/ghost/admin/app/styles/components/power-calendar.css b/ghost/admin/app/styles/components/power-calendar.css index f4c7d3442c..7461790fae 100644 --- a/ghost/admin/app/styles/components/power-calendar.css +++ b/ghost/admin/app/styles/components/power-calendar.css @@ -220,6 +220,7 @@ .ember-power-datepicker-content { min-width: 212px; padding: 12px; + z-index: 99999; } .ember-power-datepicker-trigger:focus { diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css index 89b27f15a1..537d6d8454 100644 --- a/ghost/admin/app/styles/components/publishmenu.css +++ b/ghost/admin/app/styles/components/publishmenu.css @@ -462,6 +462,7 @@ width: 640px; margin: 0 auto 8rem; padding-top: 11vw; + margin-bottom: 11vw; } .gh-publish-title { @@ -485,17 +486,22 @@ .gh-publish-setting { display: flex; - align-items: center; + flex-direction: column; margin-bottom: 1.6rem; } -.gh-publish-setting svg { +.gh-publish-setting-title { + display: flex; + align-items: center; +} + +.gh-publish-setting-title svg { width: 2rem; height: 2rem; margin-right: 1.6rem; } -.gh-publish-setting svg path { +.gh-publish-setting-title svg path { stroke: var(--black); stroke-width: 2px; } @@ -510,7 +516,7 @@ cursor: pointer; } -.gh-publish-setting span { +.gh-publish-setting-title span { border-bottom: 0; font-weight: 700; } @@ -519,19 +525,25 @@ color: var(--midlightgrey); } -.gh-publish-setting-dropdown { - top: 46px; - min-width: 218px; - padding: 4px 16px; - font-size: 1.4rem; - font-weight: 500; - background: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--box-shadow-m); +.gh-publish-setting fieldset { + margin: 0; + margin-top: 1.6rem; + background-color: var(--whitegrey); } -.gh-publish-setting-dropdown fieldset { - margin-bottom: 0; +.gh-publish-setting .radio-button { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 5px; + padding: 10px; + border-bottom: 1px solid var(--white); +} + +.gh-publish-setting .gh-publishmenu-radio { + margin: 0; + padding: 20px 10px; + border-bottom: 1px solid var(--white); } .gh-publish-cta {