From e322709f950f106b1f070dea492938c66c276cf0 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 21 Jun 2021 13:40:54 +0100 Subject: [PATCH] Updated newsletter design settings modal for new settings (#2013) refs https://github.com/TryGhost/Team/issues/793 requires https://github.com/TryGhost/Ghost/pull/13074 - replaced main email design settings modal component with labs component and removed conditional - removed `labs-newsletter-settings` class and cleaned up CSS --- .../modal-email-design-settings-labs.js | 93 ------- .../modal-email-design-settings.hbs | 237 ++++++++++++------ .../components/modal-email-design-settings.js | 90 ++++--- ghost/admin/app/styles/components/modals.css | 76 ++---- ghost/admin/app/styles/layouts/members.css | 33 ++- .../app/templates/settings/members-email.hbs | 12 +- 6 files changed, 245 insertions(+), 296 deletions(-) delete mode 100644 ghost/admin/app/components/modal-email-design-settings-labs.js diff --git a/ghost/admin/app/components/modal-email-design-settings-labs.js b/ghost/admin/app/components/modal-email-design-settings-labs.js deleted file mode 100644 index 4d59597c54..0000000000 --- a/ghost/admin/app/components/modal-email-design-settings-labs.js +++ /dev/null @@ -1,93 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import moment from 'moment'; -// TODO: expose this via a helper -import {IMAGE_EXTENSIONS} from 'ghost-admin/components/gh-image-uploader'; -import {action} from '@ember/object'; -import {htmlSafe} from '@ember/template'; -import {inject as service} from '@ember/service'; -import {task} from 'ember-concurrency-decorators'; -import {tracked} from '@glimmer/tracking'; - -export default class ModalEmailDesignSettings extends ModalComponent { - @service config; - @service ghostPaths; - @service session; - @service settings; - - @tracked headerImage = this.settings.get('newsletterHeaderImage'); - @tracked showHeaderIcon = this.settings.get('newsletterShowHeaderIcon'); - @tracked showHeaderTitle = this.settings.get('newsletterShowHeaderTitle'); - @tracked titleFontCategory = this.settings.get('newsletterTitleFontCategory'); - @tracked titleAlignment = this.settings.get('newsletterTitleAlignment'); - @tracked showFeatureImage = this.settings.get('newsletterShowFeatureImage'); - @tracked bodyFontCategory = this.settings.get('newsletterBodyFontCategory'); - @tracked footerContent = this.settings.get('newsletterFooterContent'); - @tracked showBadge = this.settings.get('newsletterShowBadge'); - - currentDate = moment().format('D MMM YYYY'); - copyrightYear = new Date().getFullYear(); - imageExtensions = IMAGE_EXTENSIONS; - - get showHeader() { - return (this.showHeaderIcon && this.settings.get('icon')) || this.showHeaderTitle; - } - - get featureImageUrl() { - // keep path separate so asset rewriting correctly picks it up - let imagePath = '/img/user-cover.png'; - let fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath; - return fullPath; - } - - get featureImageStyle() { - return htmlSafe(`background-image: url(${this.featureImageUrl})`); - } - - @action - toggleSetting(setting, event) { - this[setting] = event.target.checked; - } - - @action - changeSetting(setting, value) { - this[setting] = value; - } - - @action - imageUploaded(setting, images) { - if (images[0]) { - this[setting] = images[0].url; - } - } - - @action - handleInputFocus() { - this._removeShortcuts(); - } - - @action - handleInputBlur() { - this._setupShortcuts(); - } - - @action - confirm() { - this.saveSettings.perform(); - } - - @task({drop: true}) - *saveSettings() { - this.settings.set('newsletterHeaderImage', this.headerImage); - this.settings.set('newsletterShowHeaderIcon', this.showHeaderIcon); - this.settings.set('newsletterShowHeaderTitle', this.showHeaderTitle); - this.settings.set('newsletterTitleFontCategory', this.titleFontCategory); - this.settings.set('newsletterTitleAlignment', this.titleAlignment); - this.settings.set('newsletterShowFeatureImage', this.showFeatureImage); - this.settings.set('newsletterBodyFontCategory', this.bodyFontCategory); - this.settings.set('newsletterFooterContent', this.footerContent); - this.settings.set('newsletterShowBadge', this.showBadge); - - yield this.settings.save(); - this.closeModal(); - } -} diff --git a/ghost/admin/app/components/modal-email-design-settings.hbs b/ghost/admin/app/components/modal-email-design-settings.hbs index 99d65d2f7d..5b7e1b2cd9 100644 --- a/ghost/admin/app/components/modal-email-design-settings.hbs +++ b/ghost/admin/app/components/modal-email-design-settings.hbs @@ -1,23 +1,135 @@
+
+

Email newsletter design

+
+ + + +
+
-

Email newsletter design

- -

Show publication icon and title

-
-
+
+ +

Header style

+
+
+ +
+
+ + +
+
+ + +

Feature image

+
+ @@ -25,53 +137,30 @@
- -

Body font

-
-
-
-
- Aa -
-

Elegant serif

-

Beautiful lines with great readability

-
-
-
-
-
-
-
-
- Aa -
-

Clean sans-serif

-

A more minimal style with sharp lines

-
-
-
-
+ +

Body style

+
+
+
- {{!--

Font style for the email body content

--}}
-
+
-

Email footer

+

Email footer

-

Any extra information or legal text
@@ -95,7 +184,7 @@ checked={{this.showBadge}} id="promote-ghost" name="promote-ghost" - {{on "click" this.setShowBadge}} + {{on "click" (fn this.toggleSetting "showBadge")}} > @@ -104,50 +193,40 @@
-
-
- - - -
-
-

- {{this.config.blogTitle}} <{{this.settings.membersFromAddress}}> + {{this.config.blogTitle}} <{{full-email-address this.settings.membersFromAddress}}>

To: Jamie Larson <jamie@example.com>

-
- {{#if this.settings.icon}} - - {{/if}} -

{{this.config.blogTitle}}

-
-
-

Your email newsletter

+ {{#if this.headerImage}} +
+ +
+ {{/if}} + {{#if this.showHeader}} +
+ {{#if (and this.settings.icon this.showHeaderIcon)}} + + {{/if}} + {{#if this.showHeaderTitle}} +

{{this.config.blogTitle}}

+ {{/if}} +
+ {{/if}} +
+

Your email newsletter

By {{if this.session.user.name this.session.user.name this.session.user.email}} – {{this.currentDate}} – View online →

+ {{#if this.showFeatureImage}} +
+
Feature image caption
+ {{/if}}

This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.

Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.

@@ -158,7 +237,7 @@ {{{this.footerContent}}}
- {{this.config.blogTitle}} © – Unsubscribe + {{this.config.blogTitle}} © {{this.copyrightYear}} – Unsubscribe
diff --git a/ghost/admin/app/components/modal-email-design-settings.js b/ghost/admin/app/components/modal-email-design-settings.js index c92e713f08..4d59597c54 100644 --- a/ghost/admin/app/components/modal-email-design-settings.js +++ b/ghost/admin/app/components/modal-email-design-settings.js @@ -1,53 +1,63 @@ import ModalComponent from 'ghost-admin/components/modal-base'; import moment from 'moment'; +// TODO: expose this via a helper +import {IMAGE_EXTENSIONS} from 'ghost-admin/components/gh-image-uploader'; import {action} from '@ember/object'; +import {htmlSafe} from '@ember/template'; import {inject as service} from '@ember/service'; import {task} from 'ember-concurrency-decorators'; import {tracked} from '@glimmer/tracking'; export default class ModalEmailDesignSettings extends ModalComponent { - @service() - settings; + @service config; + @service ghostPaths; + @service session; + @service settings; - @service() - session; + @tracked headerImage = this.settings.get('newsletterHeaderImage'); + @tracked showHeaderIcon = this.settings.get('newsletterShowHeaderIcon'); + @tracked showHeaderTitle = this.settings.get('newsletterShowHeaderTitle'); + @tracked titleFontCategory = this.settings.get('newsletterTitleFontCategory'); + @tracked titleAlignment = this.settings.get('newsletterTitleAlignment'); + @tracked showFeatureImage = this.settings.get('newsletterShowFeatureImage'); + @tracked bodyFontCategory = this.settings.get('newsletterBodyFontCategory'); + @tracked footerContent = this.settings.get('newsletterFooterContent'); + @tracked showBadge = this.settings.get('newsletterShowBadge'); - @service() - config; - - @tracked - showHeader = this.settings.get('newsletterShowHeader'); - - @tracked - bodyFontCategory = this.settings.get('newsletterBodyFontCategory'); - - @tracked - showBadge = this.settings.get('newsletterShowBadge'); - - @tracked - footerContent = this.settings.get('newsletterFooterContent'); - - @tracked currentDate = moment().format('D MMM YYYY'); + copyrightYear = new Date().getFullYear(); + imageExtensions = IMAGE_EXTENSIONS; - @action - setShowHeader(event) { - this.showHeader = event.target.checked; + get showHeader() { + return (this.showHeaderIcon && this.settings.get('icon')) || this.showHeaderTitle; + } + + get featureImageUrl() { + // keep path separate so asset rewriting correctly picks it up + let imagePath = '/img/user-cover.png'; + let fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath; + return fullPath; + } + + get featureImageStyle() { + return htmlSafe(`background-image: url(${this.featureImageUrl})`); } @action - setBodyFontCategory(value) { - this.bodyFontCategory = value; + toggleSetting(setting, event) { + this[setting] = event.target.checked; } @action - setShowBadge(event) { - this.showBadge = event.target.checked; + changeSetting(setting, value) { + this[setting] = value; } @action - setFooterContent(value) { - this.footerContent = value; + imageUploaded(setting, images) { + if (images[0]) { + this[setting] = images[0].url; + } } @action @@ -67,18 +77,16 @@ export default class ModalEmailDesignSettings extends ModalComponent { @task({drop: true}) *saveSettings() { - if (this.showHeader !== null) { - this.settings.set('newsletterShowHeader', this.showHeader); - } - if (this.bodyFontCategory !== null) { - this.settings.set('newsletterBodyFontCategory', this.bodyFontCategory); - } - if (this.showBadge !== null) { - this.settings.set('newsletterShowBadge', this.showBadge); - } - if (this.footerContent !== null) { - this.settings.set('newsletterFooterContent', this.footerContent); - } + this.settings.set('newsletterHeaderImage', this.headerImage); + this.settings.set('newsletterShowHeaderIcon', this.showHeaderIcon); + this.settings.set('newsletterShowHeaderTitle', this.showHeaderTitle); + this.settings.set('newsletterTitleFontCategory', this.titleFontCategory); + this.settings.set('newsletterTitleAlignment', this.titleAlignment); + this.settings.set('newsletterShowFeatureImage', this.showFeatureImage); + this.settings.set('newsletterBodyFontCategory', this.bodyFontCategory); + this.settings.set('newsletterFooterContent', this.footerContent); + this.settings.set('newsletterShowBadge', this.showBadge); + yield this.settings.save(); this.closeModal(); } diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css index 4e5070339c..533ed333ee 100644 --- a/ghost/admin/app/styles/components/modals.css +++ b/ghost/admin/app/styles/components/modals.css @@ -241,8 +241,6 @@ display: flex; padding: 0; flex-grow: 1; -} -.labs-newsletter-settings .modal-fullsettings-body { overflow: hidden; } @@ -268,9 +266,6 @@ display: flex; flex-direction: column; padding: 0px 24px 20px; - width: 362px; -} -.labs-newsletter-settings .modal-fullsettings-sidebar { width: 420px; overflow-y: auto; } @@ -282,22 +277,18 @@ .modal-fullsettings-topbar { height: 66px; padding: 0 24px; -} -.labs-newsletter-settings .modal-fullsettings-topbar { border-bottom: 1px solid var(--whitegrey); } .modal-fullsettings-heading { display: flex; align-items: center; + height: 66px; font-size: 1.9rem; font-weight: 600; padding: 0 24px; margin: 0 -24px 1px; } -.labs-newsletter-settings .modal-fullsettings-heading { - height: 66px; -} .modal-fullsettings-form { min-width: 292px; @@ -308,20 +299,8 @@ padding: 0 24px; } -/* labs-newsletter-settings - delete all when removing flag */ -.modal-fullsettings-section.first { - margin-top: 8px; -} -.labs-newsletter-settings .modal-fullsettings-section.first { - margin-top: 24px; -} -/* end delete all */ - .modal-fullsettings-section.divider-top { border-top: 1px solid var(--whitegrey); - padding-top: 16px; -} -.labs-newsletter-settings .modal-fullsettings-section.divider-top { padding-top: 24px; } @@ -339,9 +318,6 @@ justify-content: space-between; align-items: center; padding: 0; - margin-bottom: 0; -} -.labs-newsletter-settings .modal-fullsettings-section .form-group { margin-bottom: 20px; } @@ -368,10 +344,6 @@ } .modal-fullsettings-radiogroup { - margin: 18px 0 0; -} - -.labs-newsletter-settings .modal-fullsettings-radiogroup { margin: 0; } @@ -394,11 +366,11 @@ margin: 0 12px 0 0; } -.labs-newsletter-settings .modal-fullsettings-title.disabled { +.modal-fullsettings-title.disabled { opacity: .5; } -.labs-newsletter-settings .modal-fullsettings-uploader { +.modal-fullsettings-uploader { display: flex; justify-content: space-between; align-items: center; @@ -406,7 +378,7 @@ border-radius: 3px; } -.labs-newsletter-settings .gh-header-img-container { +.gh-header-img-container { display: flex; justify-content: center; align-items: center; @@ -414,14 +386,14 @@ height: 44px; } -.labs-newsletter-settings .gh-header-img-container .gh-loading-spinner { +.gh-header-img-container .gh-loading-spinner { width: 20px; height: 20px; } -.labs-newsletter-settings .gh-header-img-uploadicon, -.labs-newsletter-settings .gh-header-img-uploadicon:hover, -.labs-newsletter-settings .gh-header-img-uploadicon:focus { +.gh-header-img-uploadicon, +.gh-header-img-uploadicon:hover, +.gh-header-img-uploadicon:focus { width: 64px; height: 44px; border: 1px dashed var(--lightgrey); @@ -429,27 +401,27 @@ box-shadow: none; } -.labs-newsletter-settings .gh-header-img-uploadicon span { +.gh-header-img-uploadicon span { display: flex; justify-content: center; align-items: center; } -.labs-newsletter-settings .gh-header-img-uploadicon span svg { +.gh-header-img-uploadicon span svg { width: 18px; height: 18px; fill: var(--black); } -.labs-newsletter-settings .gh-header-img-uploadicon:hover span svg { +.gh-header-img-uploadicon:hover span svg { fill: var(--green-d1); } -.labs-newsletter-settings .gh-header-img { +.gh-header-img { height: 44px; } -.labs-newsletter-settings .gh-header-img-thumbnail { +.gh-header-img-thumbnail { display: inline-block; width: 64px; height: 44px; @@ -460,11 +432,11 @@ border-radius: 3px; } -.labs-newsletter-settings .gh-header-img-thumbnail svg path { +.gh-header-img-thumbnail svg path { stroke: var(--midlightgrey-d1); } -.labs-newsletter-settings .gh-header-img-deleteicon { +.gh-header-img-deleteicon { position: absolute; right: 0; width:64px; @@ -473,22 +445,22 @@ opacity: 0; } -.labs-newsletter-settings .gh-header-img-deleteicon:hover { +.gh-header-img-deleteicon:hover { opacity: 1; } -.labs-newsletter-settings .gh-header-img-deleteicon span { +.gh-header-img-deleteicon span { display: flex; justify-content: center; align-items: center; } -.labs-newsletter-settings .gh-header-img-deleteicon span svg { +.gh-header-img-deleteicon span svg { width: 18px; height: 18px; } -.labs-newsletter-settings .gh-header-img-desc { +.gh-header-img-desc { padding: 6px 0; } @@ -516,23 +488,17 @@ .modal-fullsettings-preview-container { overflow: hidden; background: var(--whitegrey-l1); - height: calc(100vh - 126px); - overflow-y: scroll; -} -.labs-newsletter-settings .modal-fullsettings-preview-container { height: 100vh; + overflow-y: scroll; } .modal-fullsettings-preview-hidescrollbar { overflow: hidden; - height: calc(100vh - 126px); + height: 100vh; background: var(--whitegrey-l1); border: 1px solid var(--whitegrey); border-radius: 5px; } -.labs-newsletter-settings .modal-fullsettings-preview-hidescrollbar { - height: 100vh; -} .modal-fullsettings-preview-hidescrollbar .modal-fullsettings-preview-container { border: none; diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 9deb401328..9f22a60045 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -1180,47 +1180,47 @@ p.gh-members-import-errordetail:first-of-type { /* Email newsletter design settings /* -------------------------------------------------------- */ -.labs-newsletter-settings .gh-email-design-alignment { +.gh-email-design-alignment { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 0 0; } -.labs-newsletter-settings .gh-email-design-typography-wrapper { +.gh-email-design-typography-wrapper { display: flex; width: 250px; } -.labs-newsletter-settings .gh-email-design-typography { +.gh-email-design-typography { width: 100%; } -.labs-newsletter-settings .gh-email-design-typography .gh-setting-dropdown { +.gh-email-design-typography .gh-setting-dropdown { margin: 0; - padding: 0 40px 0 8px; + padding: 0 40px 0 8px; } -.labs-newsletter-settings .gh-email-design-typography-wrapper.header .gh-setting-dropdown { +.gh-email-design-typography-wrapper.header .gh-setting-dropdown { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.labs-newsletter-settings .gh-email-design-typography-wrapper.header .ember-power-select-status-icon { +.gh-email-design-typography-wrapper.header .ember-power-select-status-icon { right: 16px !important; } -.labs-newsletter-settings .gh-email-design-typography .gh-setting-dropdown-list .ember-power-select-option { +.gh-email-design-typography .gh-setting-dropdown-list .ember-power-select-option { padding: 2px 8px; } -.labs-newsletter-settings .gh-email-design-typography-wrapper.header .gh-btn-group { +.gh-email-design-typography-wrapper.header .gh-btn-group { background: var(--whitegrey); border-top-left-radius: 0; border-bottom-left-radius: 0; } -.labs-newsletter-settings .gh-email-design-typography .gh-btn-group.icons .gh-btn { +.gh-email-design-typography .gh-btn-group.icons .gh-btn { margin: 4px; } @@ -1303,7 +1303,6 @@ p.gh-members-import-errordetail:first-of-type { margin: 0; padding: 0; } - .gh-members-emailsettings-footer-input { border: 1px solid var(--whitegrey-d1); padding: 0 12px 6px 12px; @@ -1323,10 +1322,6 @@ p.gh-members-import-errordetail:first-of-type { } .gh-members-emailsettings-footer { - padding-top: 20px; - margin-bottom: 4px; -} -.labs-newsletter-settings .gh-members-emailsettings-footer { padding: 0; margin: 0; } @@ -1475,7 +1470,7 @@ p.gh-members-import-errordetail:first-of-type { align-items: center; padding: 50px 0 40px; } -.labs-newsletter-settings .gh-members-emailpreview-title-left { +.gh-members-emailpreview-title-left { align-items: flex-start; } @@ -1510,7 +1505,7 @@ p.gh-members-import-errordetail:first-of-type { color: #15212A; } -.labs-newsletter-settings .gh-members-emailpreview-featureimage { +.gh-members-emailpreview-featureimage { width: 100%; max-width: 600px; height: 300px; @@ -1519,7 +1514,7 @@ p.gh-members-import-errordetail:first-of-type { background-size: cover; } -.labs-newsletter-settings .gh-members-emailpreview-featureimage-caption { +.gh-members-emailpreview-featureimage-caption { width: 100%; max-width: 600px; padding-bottom: 30px; @@ -1839,4 +1834,4 @@ p.gh-members-import-errordetail:first-of-type { .gh-member-addcomp-warning { margin-top: -16px; -} \ No newline at end of file +} diff --git a/ghost/admin/app/templates/settings/members-email.hbs b/ghost/admin/app/templates/settings/members-email.hbs index 8e2a5bf1ad..fcb6950885 100644 --- a/ghost/admin/app/templates/settings/members-email.hbs +++ b/ghost/admin/app/templates/settings/members-email.hbs @@ -41,14 +41,8 @@ {{#if this.showEmailDesignSettings}} - {{#if (enable-developer-experiments)}} - - {{else}} - - {{/if}} + {{/if}} \ No newline at end of file