From 94581a87f8a82a6908ec37a0b7febf944568db82 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Thu, 12 Nov 2020 15:45:22 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20newsletter=20customisation?= =?UTF-8?q?=20options=20(#1756)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no-issue This adds three initial customisation options for newsletters: 1. Show/Hide site title and logo 2. Set font to serif/sans serif 3. Display a publish with Ghost badge This is the first step in allowing customisation of the look and feel of newsletters. Co-authored-by: Rish Co-authored-by: Peter Zimon --- .../app/components/gh-members-lab-setting.hbs | 22 +- .../app/components/gh-members-lab-setting.js | 5 + .../modal-email-design-settings.hbs | 142 ++++++++++ .../components/modal-email-design-settings.js | 47 ++++ ghost/admin/app/models/setting.js | 8 +- ghost/admin/app/services/settings.js | 2 +- ghost/admin/app/styles/components/modals.css | 155 +++++++++++ ghost/admin/app/styles/layouts/members.css | 244 ++++++++++++++++++ ghost/admin/app/styles/spirit/_colors.css | 1 + ghost/admin/public/assets/icons/heart.svg | 1 + 10 files changed, 624 insertions(+), 3 deletions(-) create mode 100644 ghost/admin/app/components/modal-email-design-settings.hbs create mode 100644 ghost/admin/app/components/modal-email-design-settings.js create mode 100644 ghost/admin/public/assets/icons/heart.svg diff --git a/ghost/admin/app/components/gh-members-lab-setting.hbs b/ghost/admin/app/components/gh-members-lab-setting.hbs index fee474a80d..4a5b6a30c2 100644 --- a/ghost/admin/app/components/gh-members-lab-setting.hbs +++ b/ghost/admin/app/components/gh-members-lab-setting.hbs @@ -282,7 +282,17 @@
Email
-
+
+
+

Email design

+

Customize the look and feel of email newsletters

+
+
+ +
+
+ +

Email addresses

Contact information used for newsletters and member login emails

@@ -461,9 +471,19 @@ @close={{action "closePortalSettings"}} @modifier="full-overlay portal-settings" /> {{/if}} + {{#if this.showLeaveSettingsModal}} +{{/if}} + +{{#if this.showEmailDesignSettings}} + {{/if}} \ No newline at end of file diff --git a/ghost/admin/app/components/gh-members-lab-setting.js b/ghost/admin/app/components/gh-members-lab-setting.js index 95aba5c3c2..cf27a5cec5 100644 --- a/ghost/admin/app/components/gh-members-lab-setting.js +++ b/ghost/admin/app/components/gh-members-lab-setting.js @@ -52,6 +52,7 @@ export default Component.extend({ showFromAddressConfirmation: false, showSupportAddressConfirmation: false, showPortalSettings: false, + showEmailDesignSettings: false, stripePlanInvalidAmount: false, _scratchStripeYearlyAmount: null, _scratchStripeMonthlyAmount: null, @@ -164,6 +165,10 @@ export default Component.extend({ } }, + closeEmailDesignSettings() { + this.set('showEmailDesignSettings', false); + }, + setDefaultContentVisibility(value) { this.setDefaultContentVisibility(value); }, diff --git a/ghost/admin/app/components/modal-email-design-settings.hbs b/ghost/admin/app/components/modal-email-design-settings.hbs new file mode 100644 index 0000000000..8d7e73bcc9 --- /dev/null +++ b/ghost/admin/app/components/modal-email-design-settings.hbs @@ -0,0 +1,142 @@ +
+
+
+
+

Email newsletter design

+
+
+ +

Show publication icon and title

+
+ +
+ +
+
+ +

Typography

+
+
+
+
+
Serif
+
+
+
+
+
+
Sans-serif
+
+
+
+

Font style for the email body contents

+ +
+
+
+
+ +
+ {{svg-jar "heart"}} +
+

Promote independent publishing

+

Show you’re a part of the indie publishing movement with a small badge in the footer

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

+ Ghost Site <newsletters@ghostsite.com> +

+

To: Jamie Larson <jamie@example.com>

+
+
+ +

Ghost site

+
+
+

Email newsletter

+

+ By Jamie Larson – Nov 5 2020 –  View online → +

+
+
+

This is where the contents of your newsletter go. Customise the appearance with the options in the sidebar.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at auctor tellus, in accumsan magna. Sed vel magna velit. Vivamus commodo laoreet malesuada. Nullam efficitur augue et eros fermentum.

+
+
+
+ {{this.footerText}} +
+
+ Ghost Site © – Unsubscribe +
+
+
+ Publish with Ghost +
+
+ +
+
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-email-design-settings.js b/ghost/admin/app/components/modal-email-design-settings.js new file mode 100644 index 0000000000..ab425e6beb --- /dev/null +++ b/ghost/admin/app/components/modal-email-design-settings.js @@ -0,0 +1,47 @@ +import ModalComponent from 'ghost-admin/components/modal-base'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; + +export default ModalComponent.extend({ + settings: service(), + + showHeader: true, + showSansSerif: false, + showBadge: true, + footerText: '', + + init() { + this._super(...arguments); + }, + + actions: { + toggleShowHeader(showHeader) { + this.settings.set('newsletterShowHeader', showHeader); + }, + + setTypography(typography) { + if (typography === 'serif') { + this.settings.set('newsletterBodyFontCategory', 'serif'); + } else { + this.settings.set('newsletterBodyFontCategory', 'sans_serif'); + } + }, + + toggleBadge(showBadge) { + this.settings.set('newsletterShowBadge', showBadge); + }, + + confirm() { + return this.saveTask.perform(); + }, + + leaveSettings() { + this.closeModal(); + } + }, + + saveTask: task(function* () { + yield this.settings.save(); + this.closeModal(); + }).drop() +}); diff --git a/ghost/admin/app/models/setting.js b/ghost/admin/app/models/setting.js index 61fefc687d..e1c89d1ed1 100644 --- a/ghost/admin/app/models/setting.js +++ b/ghost/admin/app/models/setting.js @@ -66,5 +66,11 @@ export default Model.extend(ValidationEngine, { stripeConnectSecretKey: attr('string'), stripeConnectLivemode: attr('boolean'), stripeConnectDisplayName: attr('string'), - stripeConnectAccountId: attr('string') + stripeConnectAccountId: attr('string'), + /** + * Newsletter settings + */ + newsletterShowHeader: attr('boolean'), + newsletterBodyFontCategory: attr('string'), + newsletterShowBadge: attr('boolean') }); diff --git a/ghost/admin/app/services/settings.js b/ghost/admin/app/services/settings.js index 1801f7c8fe..9bb57166d5 100644 --- a/ghost/admin/app/services/settings.js +++ b/ghost/admin/app/services/settings.js @@ -27,7 +27,7 @@ export default Service.extend(_ProxyMixin, ValidationEngine, { _loadSettings() { if (!this._loadingPromise) { this._loadingPromise = this.store - .queryRecord('setting', {group: 'site,theme,private,members,portal,email,amp,labs,slack,unsplash,views'}) + .queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views'}) .then((settings) => { this._loadingPromise = null; return settings; diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css index 769663c31b..48a98deaa9 100644 --- a/ghost/admin/app/styles/components/modals.css +++ b/ghost/admin/app/styles/components/modals.css @@ -165,6 +165,161 @@ } +/* Full screen setting modal with preview. Used in e.g. Portal +/* settings, Email design settings etc. +/* ---------------------------------------------------------- */ +.modal-fullsettings { + height: 100%; + display: flex; + flex-direction: column; +} + +.modal-fullsettings-body { + display: flex; + padding: 0; + flex-grow: 1; +} + +.modal-fullsettings-body .form-group.space-l { + margin-bottom: 1.9em; +} + +.modal-fullsettings-body .for-switch.small { + width: 36px !important; + height: 22px !important; +} + +.modal-fullsettings-body .gh-select svg { + top: 19px; + right: 9px; +} + +.modal-fullsettings-body .modal-footer { + margin-top: 28px; +} + +.modal-fullsettings-sidebar { + display: flex; + flex-direction: column; + padding: 0px 24px 20px; + width: 342px; +} + +.modal-fullsettings-sidebar.with-footer { + justify-content: space-between; +} + +.modal-fullsettings-topbar { + height: 66px; +} + +.modal-fullsettings-heading { + display: flex; + align-items: center; + font-size: 1.9rem; + font-weight: 600; + padding: 0 24px; + margin: 0 -24px 1px; + border-bottom: 1px solid var(--whitegrey); +} + +.modal-fullsettings-form { + min-width: 292px; +} + +.modal-fullsettings-section { + margin: 24px -24px; + padding: 0 24px; +} + +.modal-fullsettings-section.first { + margin-top: 20px; +} + +.modal-fullsettings-section.divider-top { + border-top: 1px solid var(--whitegrey); + padding-top: 16px; +} + +.modal-fullsettings-sectionheading { + font-size: 1.2rem; + font-weight: 500; + color: var(--midlightgrey); + margin: 0 0 12px; + text-transform: uppercase; + letter-spacing: 0.2px; +} + +.modal-fullsettings-section .form-group { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0; + margin-bottom: 0; +} + +.modal-fullsettings-section .form-group p { + font-size: 1.25rem !important; + line-height: 1.4em; +} + +.modal-fullsettings-section .form-group.vertical { + display: block; +} + +.modal-fullsettings-section .form-group.vertical h4 { + margin-bottom: 8px; +} + +.modal-fullsettings-section .form-group.vertical p { + margin-top: 8px; +} + +.modal-fullsettings-section .gh-select select, +.modal-fullsettings-section textarea { + font-size: 1.4rem; +} + +.modal-fullsettings-radiogroup { + margin: 18px 0 0; +} + +.modal-fullsettings-radiogroup .gh-radio { + margin-bottom: 14px; +} + +.modal-fullsettings-radiogroup .gh-radio:last-of-type { + margin-bottom: 12px; +} + +.modal-fullsettings-radiogroup + p { + margin-top: 4px !important; + margin-bottom: 28px; +} + +.modal-fullsettings-title { + font-size: 1.3rem; + font-weight: 600; + margin: 0 12px 0 0; +} + +.modal-fullsettings-main { + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 0 20px 20px; + border-left: 1px solid var(--whitegrey); +} + +.modal-fullsettings-preview-container { + border: 1px solid var(--whitegrey); + border-radius: 5px; + overflow: hidden; + background: var(--whitegrey-l1); + height: calc(100vh - 150px); + overflow-y: scroll; +} + /* Content Modifiers /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 991a5add59..0082def5dd 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -791,4 +791,248 @@ p.gh-members-import-errordetail:first-of-type { .gh-import-member-select select { padding: 4px; } +} + +/* Email newsletter design settings +/* -------------------------------------------------------- */ +.gh-members-emailsettings-footer { + border-top: 1px solid var(--whitegrey); + padding-top: 20px; + margin-bottom: 4px; +} + +.gh-members-emailsettings-footer .form-group { + align-items: flex-start; +} + +.gh-members-emailsettings-promotelabel { + display: flex; + align-items: flex-start; +} + +.gh-members-emailsettings-promotelabel svg { + width: 20px; + margin-right: 8px; +} + +.gh-members-emailsettings-promotelabel svg path { + stroke: var(--red); +} + +.gh-members-emailsettings-footer .for-switch { + margin-top: -2px; +} + +.gh-members-emailpreview-container { + width: 100%; + max-width: 520px; + background: var(--white); + border-radius: 12px; + padding: 32px; + margin: 32px auto; + box-shadow: + 0 0 0 1px rgba(0,0,0,0.02), + 0 2.8px 2.2px rgba(0, 0, 0, 0.02), + 0 6.7px 5.3px rgba(0, 0, 0, 0.028), + 0 12.5px 10px rgba(0, 0, 0, 0.035), + 0 22.3px 17.9px rgba(0, 0, 0, 0.042), + 0 41.8px 33.4px rgba(0, 0, 0, 0.05), + 0 100px 80px rgba(0, 0, 0, 0.07); + ; + color: var(--blackgrey); + transform: scale(0.8); + transform-origin: top; +} + +.gh-members-emailpreview-container a { + color: var(--midgrey); + text-decoration: underline; +} + +.gh-members-emailpreview-faux { + margin: -32px -32px 16px; + padding: 16px 24px; + border-bottom: 1px solid var(--lightgrey-d1); +} + +.gh-members-emailpreview-faux p { + margin: 0; + padding: 0; + color: var(--midlightgrey); +} + +.gh-members-emailpreview-faux .strong { + font-size: 1.5rem; + font-weight: 500; + color: var(--darkgrey); +} + +.gh-members-emailpreview-faux .dark { + color: var(--darkgrey); +} + +.gh-members-emailpreview-header { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px 0; + border-bottom: 1px solid var(--whitegrey); +} + +.gh-members-emailpreview-header.hide { + display: none; +} + +.gh-members-emailpreview-header img { + width: 48px; + height: 48px; +} + +.gh-members-emailpreview-header h4 { + text-align: center; + font-size: 1.6rem; + letter-spacing: -0.1px; + font-weight: 700; + text-transform: uppercase; + margin: 10px 0; + color: var(--blackgrey); +} + +.gh-members-emailpreview-title { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px 0; +} + +.gh-members-emailpreview-title h2 { + font-size: 4.2rem; + line-height: 1.1em; + font-weight: 600; + text-align: center; + margin: 0; + padding: 0 0 10px; + color: var(--blackgrey); +} + +.gh-members-emailpreview-title p { + margin: 0; + padding: 0 0 10px; + white-space: nowrap; + font-size: 1.3rem; + line-height: 1; + letter-spacing: 0.2px; + text-transform: uppercase; + text-align: center; + color: var(--blackgrey); +} + +.gh-members-emailpreview-title p span { + color: var(--midgrey); +} + +.gh-members-emailpreview-title a { + text-decoration: none; + color: var(--blackgrey); +} + +.gh-members-emailpreview-content { + padding-bottom: 20px; + border-bottom: 1px solid var(--whitegrey); +} + +.gh-members-emailpreview-content p { + font-family: Georgia, serif; + font-size: 1.8rem; + line-height: 1.5em; + color: var(--darkgrey-l1); + max-width: 560px; +} + +.gh-members-emailpreview-content.sans-serif p { + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif; + font-size: 1.75rem; + line-height: 1.5em; +} + +.gh-members-emailpreview-footer { + padding: 40px 0 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.gh-members-emailpreview-footercontent { + margin: 0 0 10px; + max-width: 380px; + font-size: 1.15rem; + text-align: center; + line-height: 1.4em; + color: var(--midgrey-l1); +} + +.gh-members-emailpreview-footercontent p { + font-size: 1.15rem; + text-align: center; + line-height: 1.4em; + color: var(--midgrey-l1); + margin: 0; + padding: 0; +} + +.gh-members-emailpreview-footercontent strong { + font-weight: 600; +} + +.gh-members-emailpreview-footersite { + font-size: 1.15rem; + text-align: center; + color: var(--blackgrey); +} + +.gh-members-emailpreview-footersite span { + color: var(--midgrey-l1); +} + +.gh-members-emailpreview-badge { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 0 25px; +} + +.gh-members-emailpreview-badge.hide { + display: none; +} + +.gh-members-emailpreview-badge a { + display: inline-flex; + align-items: center; + padding: 6px 9px 6px 6px; + border: none; + font-size: 12px; + line-height: 12px; + letter-spacing: -.3px; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; + font-weight: 600; + text-decoration: none; + color: #383838; + background: #fff; + border-radius: 5px; + box-shadow: 0 0 0 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08); + cursor: pointer; + outline: none; + background: var(--white); +} + +.gh-members-emailpreview-badge svg { + height: 16px; + width: 16px; + margin: 0 6px 0 0; +} + +@media (min-height: 1070px) { + .gh-members-emailpreview-container { + transform: scale(0.9); + } } \ No newline at end of file diff --git a/ghost/admin/app/styles/spirit/_colors.css b/ghost/admin/app/styles/spirit/_colors.css index db43d5a8e5..c02035ed9f 100644 --- a/ghost/admin/app/styles/spirit/_colors.css +++ b/ghost/admin/app/styles/spirit/_colors.css @@ -35,6 +35,7 @@ --black-80: rgba(40, 48, 52, 0.8); --black-90: rgba(40, 48, 52, 0.9); + --blackgrey: #15212A; --darkgrey: #343f44; --middarkgrey: #54666D; --midgrey: #738a94; diff --git a/ghost/admin/public/assets/icons/heart.svg b/ghost/admin/public/assets/icons/heart.svg new file mode 100644 index 0000000000..4bda9a57f5 --- /dev/null +++ b/ghost/admin/public/assets/icons/heart.svg @@ -0,0 +1 @@ +heart \ No newline at end of file