From 3cdd13ba3a18703dc07f6de1c7790eee1d03b206 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 14 Mar 2023 15:37:22 +0100
Subject: [PATCH] Updated spacing of email newsletter modal sidebar
Refs https://github.com/TryGhost/Team/issues/2699
---
.../components/modals/newsletters/edit.hbs | 6 +-
.../modals/newsletters/edit/design-labs.hbs | 258 ++++++++++++++++++
.../modals/newsletters/edit/design-labs.js | 37 +++
.../modals/newsletters/edit/design.hbs | 95 +------
ghost/admin/app/styles/components/modals.css | 4 -
ghost/admin/app/styles/components/stacks.css | 11 +
ghost/admin/app/styles/layouts/settings.css | 52 +---
7 files changed, 336 insertions(+), 127 deletions(-)
create mode 100644 ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
create mode 100644 ghost/admin/app/components/modals/newsletters/edit/design-labs.js
diff --git a/ghost/admin/app/components/modals/newsletters/edit.hbs b/ghost/admin/app/components/modals/newsletters/edit.hbs
index 6b45356cd6..3a14690983 100644
--- a/ghost/admin/app/components/modals/newsletters/edit.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit.hbs
@@ -8,7 +8,11 @@
<div class="modal-fullsettings-body-labs">
<div class="modal-fullsettings-top">
<Modals::Newsletters::Edit::Settings @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
- <Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
+ {{#if (feature 'makingItRain')}}
+ <Modals::Newsletters::Edit::DesignLabs @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
+ {{else}}
+ <Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
+ {{/if}}
</div>
<div class="modal-fullsettings-bottom">
<div class="modal-fullsettings-footer">
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
new file mode 100644
index 0000000000..c08a6c8aa1
--- /dev/null
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
@@ -0,0 +1,258 @@
+<fieldset class="modal-fullsettings-form-labs email-design">
+ <h4 class="modal-fullsettings-section-title">Design</h4>
+
+ <div class="modal-fullsettings-section-labs">
+
+ {{#let (eq @openSection "design-header") as |isOpen|}}
+ <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-header")}} data-test-nav-toggle="design.header">
+ {{svg-jar "email-header"}} Header
+ <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
+ </button>
+ {{#liquid-if isOpen}}
+ <div class="modal-fullsettings-tab-expanded">
+ <div class="gh-stack">
+ <GhFormGroup class="gh-stack-item">
+ <GhUploader
+ @extensions={{this.imageExtensions}}
+ @paramsHash={{hash purpose="image"}}
+ @onComplete={{fn this.imageUploaded "headerImage"}}
+ as |uploader|
+ >
+ <div class="modal-fullsettings-uploader">
+ <div class="gh-header-img-desc">
+ <label class="modal-fullsettings-title">Header image</label>
+ <p>Optional, recommended size 1200x600</p>
+ </div>
+ {{#if uploader.isUploading}}
+ <div class="gh-header-img-container">
+ <div class="gh-loading-spinner"></div>
+ </div>
+ {{else if @newsletter.headerImage}}
+ <div class="gh-header-img">
+ <img
+ class="gh-header-img-thumbnail"
+ src={{@newsletter.headerImage}}
+ alt=""
+ role="presentation"
+ data-test-img="header"
+ >
+ <button type="button" class="gh-btn gh-header-img-deleteicon" {{on "click" (fn this.changeSetting "headerImage" null)}}>
+ <span> {{svg-jar "trash" class="w5 h5"}} </span>
+ </button>
+ </div>
+ {{else}}
+ <button type="button" class="gh-btn gh-header-img-uploadicon" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="header-image">
+ <span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
+ </button>
+ <div style="display:none">
+ <GhFileInput
+ @multiple={{false}}
+ @action={{uploader.setFiles}}
+ @accept={{uploader.imageMimeTypes}}
+ @onInsert={{uploader.registerFileInput}}
+ data-test-file-input="icon" />
+ </div>
+ {{/if}}
+ </div>
+ </GhUploader>
+ </GhFormGroup>
+
+ {{#if this.settings.icon}}
+ <GhFormGroup class="gh-stack-item">
+ <label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
+ <div class="for-switch small {{unless this.settings.icon "disabled"}}">
+ <label class="switch" for="show-header">
+ <input
+ type="checkbox"
+ checked={{and @newsletter.showHeaderIcon this.settings.icon}}
+ id="show-header"
+ name="show-header"
+ disabled={{not this.settings.icon}}
+ {{on "click" (fn this.toggleSetting "showHeaderIcon")}}
+ >
+ <span class="input-toggle-component"></span>
+ </label>
+ </div>
+ </GhFormGroup>
+ {{/if}}
+
+ <GhFormGroup class="gh-stack-item row">
+ <label class="modal-fullsettings-title">Publication title</label>
+ <div class="for-switch small">
+ <label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
+ <input
+ type="checkbox"
+ checked={{@newsletter.showHeaderTitle}}
+ id="show-title"
+ name="show-title"
+ {{on "click" (fn this.toggleSetting "showHeaderTitle")}}
+ >
+ <span class="input-toggle-component"></span>
+ </label>
+ </div>
+ </GhFormGroup>
+ <GhFormGroup class="gh-stack-item row">
+ <label class="modal-fullsettings-title">Newsletter name</label>
+ <div class="for-switch small">
+ <label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
+ <input
+ type="checkbox"
+ checked={{@newsletter.showHeaderName}}
+ id="show-header-name"
+ name="show-header-name"
+ {{on "click" (fn this.toggleSetting "showHeaderName")}}
+ >
+ <span class="input-toggle-component"></span>
+ </label>
+ </div>
+ </GhFormGroup>
+ </div>
+ </div>
+ {{/liquid-if}}
+ {{/let}}
+
+ {{#let (eq @openSection "design-body") as |isOpen|}}
+ <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-body")}} data-test-nav-toggle="design.body">
+ {{svg-jar "email-body"}} Body
+ <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
+ </button>
+ {{#liquid-if isOpen}}
+ <div class="modal-fullsettings-tab-expanded">
+ <div class="gh-stack">
+ <GhFormGroup class="gh-stack-item row">
+ <label class="modal-fullsettings-title">Post title</label>
+ <div class="for-switch small">
+ <label class="switch" for="show-post-title">
+ <input
+ type="checkbox"
+ checked={{@newsletter.showPostTitleSection}}
+ id="show-post-title"
+ name="show-post-title"
+ {{on "click" (fn this.toggleSetting "showPostTitleSection")}}
+ >
+ <span class="input-toggle-component"></span>
+ </label>
+ </div>
+ </GhFormGroup>
+
+ {{#if @newsletter.showPostTitleSection}}
+ <GhFormGroup class="gh-stack-item">
+ <div class="gh-email-design-typography-wrapper header">
+ <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
+ <GhFontSelector
+ @selected={{@newsletter.titleFontCategory}}
+ @onChange={{fn this.changeSetting "titleFontCategory"}}
+ />
+ </div>
+ <div class="gh-btn-group icons" id="newsletter-title-alignment">
+ <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
+ <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
+ </div>
+ </div>
+ </GhFormGroup>
+ {{/if}}
+ <GhFormGroup class="gh-stack-item row">
+ <label class="modal-fullsettings-title">Feature image</label>
+ <div class="for-switch small">
+ <label class="switch" for="show-feature-image">
+ <input
+ type="checkbox"
+ checked={{@newsletter.showFeatureImage}}
+ id="show-feature-image"
+ name="show-feature-image"
+ {{on "click" (fn this.toggleSetting "showFeatureImage")}}
+ >
+ <span class="input-toggle-component"></span>
+ </label>
+ </div>
+ </GhFormGroup>
+ <GhFormGroup class="gh-stack-item">
+ <label class="modal-fullsettings-title">Body style</label>
+ <div class="gh-email-design-typography-wrapper">
+ <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="bodyFontCategory">
+ <GhFontSelector
+ @selected={{@newsletter.bodyFontCategory}}
+ @onChange={{fn this.changeSetting "bodyFontCategory"}}
+ />
+ </div>
+ </div>
+ </GhFormGroup>
+ </div>
+ </div>
+ {{/liquid-if}}
+ {{/let}}
+
+ {{#let (eq @openSection "design-footer") as |isOpen|}}
+ <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-footer")}} data-test-nav-toggle="design.footer">
+ {{svg-jar "email-footer"}} Footer
+ <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
+ </button>
+ {{#liquid-if isOpen}}
+ <div class="modal-fullsettings-tab-expanded">
+ <div class="gh-stack">
+
+ {{#if (feature "audienceFeedback")}}
+ <GhFormGroup class="gh-stack-item row">
+ <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
+ <div class="for-switch small">
+ <div class="container">
+ <input
+ type="checkbox"
+ id="capture-feedback"
+ checked={{@newsletter.feedbackEnabled}}
+ {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
+ >
+ <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
+ </div>
+ </div>
+ </GhFormGroup>
+ {{/if}}
+
+ {{!-- {{#if @site.comments_enabled}} --}}
+ <GhFormGroup class="gh-stack-item row">
+ <label for="comments-link" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Add a link to your comments</label>
+ <div class="for-switch small">
+ <div class="container">
+ <input
+ type="checkbox"
+ id="comments-link"
+ checked={{@newsletter.feedbackEnabled}}
+ {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
+ >
+ <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
+ </div>
+ </div>
+ </GhFormGroup>
+ {{!-- {{/if}} --}}
+
+ <GhFormGroup class="gh-stack-item row">
+ <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Share your latest posts</label>
+ <div class="for-switch small">
+ <div class="container">
+ <input
+ type="checkbox"
+ id="latest-posts"
+ checked={{@newsletter.feedbackEnabled}}
+ {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
+ >
+ <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
+ </div>
+ </div>
+ </GhFormGroup>
+
+ <GhFormGroup class="gh-stack-item">
+ <label class="modal-fullsettings-title">Email footer</label>
+ <KoenigBasicHtmlInput
+ @name="footer"
+ @html={{@newsletter.footerContent}}
+ @class="miw-100 form-text gh-members-emailsettings-footer-input"
+ @onChange={{fn this.changeSetting "footerContent"}}
+ />
+ <p>Any extra information or legal text</p>
+ </GhFormGroup>
+ </div>
+ </div>
+ {{/liquid-if}}
+ {{/let}}
+ </div>
+</fieldset>
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.js b/ghost/admin/app/components/modals/newsletters/edit/design-labs.js
new file mode 100644
index 0000000000..19228e75b1
--- /dev/null
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.js
@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import {IMAGE_EXTENSIONS} from 'ghost-admin/components/gh-image-uploader';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class EditNewsletterDesignForm extends Component {
+ @service settings;
+
+ imageExtensions = IMAGE_EXTENSIONS;
+
+ @action
+ onCheckboxChange(property, event) {
+ this.args.newsletter[property] = event.target.checked;
+ }
+
+ @action
+ toggleProperty(property) {
+ this.args.newsletter[property] = !this.args.newsletter[property];
+ }
+
+ @action
+ imageUploaded(property, images) {
+ if (images[0]) {
+ this.args.newsletter[property] = images[0].url;
+ }
+ }
+
+ @action
+ changeSetting(property, value) {
+ this.args.newsletter[property] = value;
+ }
+
+ @action
+ toggleSetting(property, event) {
+ this.args.newsletter[property] = event.target.checked;
+ }
+}
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design.hbs b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
index a60c1fd367..31ada99ffb 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
@@ -119,56 +119,21 @@
{{#liquid-if isOpen}}
<div class="modal-fullsettings-tab-expanded">
<div class="gh-stack">
- {{#if (feature 'makingItRain')}}
- <GhFormGroup class="gh-stack-item gh-setting">
- <label class="modal-fullsettings-title">Post title</label>
- <div class="for-switch small">
- <label class="switch" for="show-post-title">
- <input
- type="checkbox"
- checked={{@newsletter.showPostTitleSection}}
- id="show-post-title"
- name="show-post-title"
- {{on "click" (fn this.toggleSetting "showPostTitleSection")}}
- >
- <span class="input-toggle-component"></span>
- </label>
+ <GhFormGroup class="gh-stack-item">
+ <label class="modal-fullsettings-title">Post title style</label>
+ <div class="gh-email-design-typography-wrapper header">
+ <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
+ <GhFontSelector
+ @selected={{@newsletter.titleFontCategory}}
+ @onChange={{fn this.changeSetting "titleFontCategory"}}
+ />
</div>
- </GhFormGroup>
-
- {{#if @newsletter.showPostTitleSection}}
- <GhFormGroup class="gh-stack-item">
- <div class="gh-email-design-typography-wrapper header">
- <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
- <GhFontSelector
- @selected={{@newsletter.titleFontCategory}}
- @onChange={{fn this.changeSetting "titleFontCategory"}}
- />
- </div>
- <div class="gh-btn-group icons" id="newsletter-title-alignment">
- <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
- <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
- </div>
- </div>
- </GhFormGroup>
- {{/if}}
- {{else}}
- <GhFormGroup class="gh-stack-item">
- <label class="modal-fullsettings-title">Post title style</label>
- <div class="gh-email-design-typography-wrapper header">
- <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
- <GhFontSelector
- @selected={{@newsletter.titleFontCategory}}
- @onChange={{fn this.changeSetting "titleFontCategory"}}
- />
- </div>
- <div class="gh-btn-group icons" id="newsletter-title-alignment">
- <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
- <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
- </div>
+ <div class="gh-btn-group icons" id="newsletter-title-alignment">
+ <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
+ <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
</div>
- </GhFormGroup>
- {{/if}}
+ </div>
+ </GhFormGroup>
<GhFormGroup class="gh-stack-item gh-setting gh-setting-first">
<label class="modal-fullsettings-title">Feature image</label>
<div class="for-switch small">
@@ -226,40 +191,6 @@
</GhFormGroup>
{{/if}}
- {{#if (feature 'makingItRain')}}
- {{!-- {{#if @site.comments_enabled}} --}}
- <GhFormGroup class="gh-stack-item gh-setting">
- <label for="comments-link" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Add a link to your comments</label>
- <div class="for-switch small">
- <div class="container">
- <input
- type="checkbox"
- id="comments-link"
- checked={{@newsletter.feedbackEnabled}}
- {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
- >
- <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
- </div>
- </div>
- </GhFormGroup>
- {{!-- {{/if}} --}}
-
- <GhFormGroup class="gh-stack-item gh-setting gh-setting-extra">
- <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Share your latest posts</label>
- <div class="for-switch small">
- <div class="container">
- <input
- type="checkbox"
- id="latest-posts"
- checked={{@newsletter.feedbackEnabled}}
- {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
- >
- <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
- </div>
- </div>
- </GhFormGroup>
- {{/if}}
-
<GhFormGroup class="gh-stack-item">
<label class="modal-fullsettings-title">Email footer</label>
<KoenigBasicHtmlInput
diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css
index d0a897beb7..9da96e5d5d 100644
--- a/ghost/admin/app/styles/components/modals.css
+++ b/ghost/admin/app/styles/components/modals.css
@@ -497,10 +497,6 @@
height: 18px;
}
-.gh-header-img-desc {
- padding: 6px 0;
-}
-
.modal-fullsettings-uploader h4 {
margin: 0 !important;
padding: 0;
diff --git a/ghost/admin/app/styles/components/stacks.css b/ghost/admin/app/styles/components/stacks.css
index 6dd170b224..4f184d0e52 100644
--- a/ghost/admin/app/styles/components/stacks.css
+++ b/ghost/admin/app/styles/components/stacks.css
@@ -12,6 +12,17 @@
padding-right: 0 !important;
}
+.gh-stack-item.row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+
.gh-stack-item .gh-setting-content {
margin-right: 24px;
+}
+
+.gh-stack-item.row label {
+ margin-bottom: 0;
}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 0de92284c1..5aa3ea5863 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -880,44 +880,14 @@
/* Email newsletter
/* ---------------------------------------------------------- */
-.gh-setting-email-section:first-of-type {
- margin-bottom: 20px;
-}
-
-.gh-setting-email-section .gh-expandable {
- margin-bottom: 20px;
-}
-
-.gh-setting-email-section .gh-expandable:last-of-type {
- margin-bottom: 0;
-}
-
-.gh-setting-email-section.content-preview {
- display: grid;
- grid-template-columns: auto calc(336px * .9);
- grid-gap: 4rem;
-}
-
.gh-setting-email hr {
margin: 4.8em 0;
}
-.gh-setting-email-section .gh-setting-richdd-container {
- margin: 0;
- background: var(--white);
-}
-
.gh-email-design-typography-wrapper .gh-setting-dropdown .ember-power-select-status-icon {
right: 16px;
}
-.gh-update-support-address {
- margin: 4px 0 0;
- color: var(--green);
- font-size: 1.25rem;
- font-weight: 400;
-}
-
.gh-mailgun-region {
width: 140px !important;
margin-right: 12px;
@@ -941,16 +911,6 @@
height: 6px;
}
-.member-segments .select-members {
- margin-bottom: .4rem;
-}
-
-.member-segments .segment-totals {
- position: relative;
- top: 2px;
- line-height: 1.65;
-}
-
/* Email newsletter LABS
/* ---------------------------------------------------------- */
@@ -1222,6 +1182,18 @@ body:not([data-user-is-dragging]) .gh-newsletter-card-draggable:hover .grab-news
color: var(--midgrey-l2);
}
+/* Customise email newsletter LABS
+/* ---------------------------------------------------------- */
+
+.modal-fullsettings-form-labs.email-design .modal-fullsettings-tab-expanded {
+ padding: 20px 32px;
+}
+
+.modal-fullsettings-form-labs.email-design .gh-stack-item {
+ margin: 10px 0;
+}
+
+
/* Code injection
/* ---------------------------------------------------------- */