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
This commit is contained in:
Kevin Ansfield
GitHub
parent
6011142428
commit
e322709f95
@ -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();
|
||||
}
|
||||
}
|
||||
@ -1,23 +1,135 @@
|
||||
<div class="modal-body modal-fullsettings">
|
||||
<div class="flex items-center justify-between w-100 modal-fullsettings-topbar">
|
||||
<h2 class="modal-fullsettings-heading">Email newsletter design</h2>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="gh-btn mr3"
|
||||
{{on "click" (action "closeModal")}}
|
||||
{{!-- disable mouseDown so it does not trigger focus-out validations --}}
|
||||
{{on "mousedown" (optional this.noop)}}
|
||||
data-test-button="cancel-custom-view-form"
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
<GhTaskButton
|
||||
@buttonText="Save and close"
|
||||
@successText="Saved"
|
||||
@task={{this.saveSettings}}
|
||||
@idleClass="gh-btn-primary"
|
||||
@class="gh-btn gh-btn-icon"
|
||||
data-test-button="save-members-modal-setting"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-fullsettings-body">
|
||||
<div class="modal-fullsettings-sidebar with-footer">
|
||||
<div>
|
||||
<h2 class="modal-fullsettings-topbar modal-fullsettings-heading">Email newsletter design</h2>
|
||||
<fieldset class="modal-fullsettings-form">
|
||||
<div class="modal-fullsettings-section first">
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title">Show publication icon and title</h4>
|
||||
<div class="for-switch small">
|
||||
<label
|
||||
class="switch"
|
||||
for="show-header"
|
||||
>
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<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">
|
||||
<h4 class="modal-fullsettings-title">Header image</h4>
|
||||
<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 this.headerImage}}
|
||||
<div class="gh-header-img">
|
||||
<img
|
||||
class="gh-header-img-thumbnail"
|
||||
src={{this.headerImage}}
|
||||
alt="header image"
|
||||
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>
|
||||
|
||||
<GhFormGroup data-tooltip={{if (not this.settings.icon) "A publication icon must be set in Branding settings."}}>
|
||||
<h4 class="modal-fullsettings-title {{if (not this.settings.icon) "disabled"}}">Publication icon</h4>
|
||||
<div class="for-switch small {{if (not this.settings.icon) "disabled"}}">
|
||||
<label class="switch" for="show-header">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.showHeader}}
|
||||
checked={{and this.showHeaderIcon this.settings.icon}}
|
||||
id="show-header"
|
||||
name="show-header"
|
||||
{{on "click" this.setShowHeader}}
|
||||
disabled={{not this.settings.icon}}
|
||||
{{on "click" (fn this.toggleSetting "showHeaderIcon")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title">Publication title</h4>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-title">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.showHeaderTitle}}
|
||||
id="show-title"
|
||||
name="show-title"
|
||||
{{on "click" (fn this.toggleSetting "showHeaderTitle")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="modal-fullsettings-section divider-top">
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title gh-email-design-alignment">Header style</h4>
|
||||
<div class="gh-email-design-typography-wrapper header">
|
||||
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
|
||||
<GhFontSelector
|
||||
@selected={{this.titleFontCategory}}
|
||||
@onChange={{fn this.changeSetting "titleFontCategory"}}
|
||||
/>
|
||||
</div>
|
||||
<div class="gh-btn-group icons">
|
||||
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.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 this.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title">Feature image</h4>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-feature-image">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.showFeatureImage}}
|
||||
id="show-feature-image"
|
||||
name="show-feature-image"
|
||||
{{on "click" (fn this.toggleSetting "showFeatureImage")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
@ -25,53 +137,30 @@
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="modal-fullsettings-section">
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<h4 class="modal-fullsettings-title">Body font</h4>
|
||||
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
|
||||
<div class="gh-radio {{if (eq this.bodyFontCategory "serif") "active"}}"
|
||||
{{on "click" (fn this.setBodyFontCategory "serif")}}
|
||||
>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label serif">
|
||||
<span class="sample">Aa</span>
|
||||
<div class="description">
|
||||
<h4>Elegant serif</h4>
|
||||
<p>Beautiful lines with great readability</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-radio-button"></div>
|
||||
</div>
|
||||
<div class="gh-radio {{if (eq this.bodyFontCategory "sans_serif") "active"}}"
|
||||
{{on "click" (fn this.setBodyFontCategory "sans_serif")}}
|
||||
>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label sans-serif">
|
||||
<span class="sample">Aa</span>
|
||||
<div class="description">
|
||||
<h4>Clean sans-serif</h4>
|
||||
<p>A more minimal style with sharp lines</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-radio-button"></div>
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title">Body style</h4>
|
||||
<div class="gh-email-design-typography-wrapper">
|
||||
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
|
||||
<GhFontSelector
|
||||
@selected={{this.bodyFontCategory}}
|
||||
@onChange={{fn this.changeSetting "bodyFontCategory"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{{!-- <p>Font style for the email body content</p> --}}
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="modal-fullsettings-section">
|
||||
<div class="modal-fullsettings-section divider-top">
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<h4 class="modal-fullsettings-title pt4">Email footer</h4>
|
||||
<h4 class="modal-fullsettings-title">Email footer</h4>
|
||||
<KoenigBasicHtmlInput
|
||||
@name="footer"
|
||||
@html={{this.footerContent}}
|
||||
@class="miw-100 form-text gh-members-emailsettings-footer-input"
|
||||
@onChange={{this.setFooterContent}}
|
||||
@placeholder="Any extra information or legal text"
|
||||
@onChange={{fn this.changeSetting "footerContent"}}
|
||||
@onFocus={{this.handleInputFocus}}
|
||||
@onBlur={{this.handleInputBlur}}
|
||||
/>
|
||||
<p>Any extra information or legal text</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</fieldset>
|
||||
@ -95,7 +184,7 @@
|
||||
checked={{this.showBadge}}
|
||||
id="promote-ghost"
|
||||
name="promote-ghost"
|
||||
{{on "click" this.setShowBadge}}
|
||||
{{on "click" (fn this.toggleSetting "showBadge")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
@ -104,50 +193,40 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-fullsettings-main">
|
||||
<div class="flex items-center justify-end w-100 modal-fullsettings-topbar">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="gh-btn mr3"
|
||||
{{action "closeModal"}}
|
||||
{{!-- disable mouseDown so it does not trigger focus-out validations --}}
|
||||
{{on "mousedown" (optional this.noop)}}
|
||||
data-test-button="cancel-custom-view-form"
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
<GhTaskButton
|
||||
@buttonText="Save and close"
|
||||
@successText="Saved"
|
||||
@task={{this.saveSettings}}
|
||||
@idleClass="gh-btn-primary"
|
||||
@class="gh-btn gh-btn-icon"
|
||||
data-test-button="save-members-modal-setting"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-fullsettings-preview-container gh-members-emailpreview">
|
||||
<div class="gh-members-emailpreview-container">
|
||||
<div class="gh-members-emailpreview-faux">
|
||||
<p>
|
||||
<span class="strong">{{this.config.blogTitle}}</span> <{{this.settings.membersFromAddress}}>
|
||||
<span class="strong">{{this.config.blogTitle}}</span> <{{full-email-address this.settings.membersFromAddress}}>
|
||||
</p>
|
||||
<p><span class="dark">To:</span> Jamie Larson <jamie@example.com></p>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-contents">
|
||||
<div class="gh-members-emailpreview-header {{if (not this.showHeader) "hide"}}">
|
||||
{{#if this.settings.icon}}
|
||||
<img src={{this.settings.icon}} />
|
||||
{{/if}}
|
||||
<h4>{{this.config.blogTitle}}</h4>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-title">
|
||||
<h2>Your email newsletter</h2>
|
||||
{{#if this.headerImage}}
|
||||
<div class="gh-members-emailpreview-header-image">
|
||||
<img src={{this.headerImage}}>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if this.showHeader}}
|
||||
<div class="gh-members-emailpreview-header">
|
||||
{{#if (and this.settings.icon this.showHeaderIcon)}}
|
||||
<img src={{this.settings.icon}} />
|
||||
{{/if}}
|
||||
{{#if this.showHeaderTitle}}
|
||||
<h4>{{this.config.blogTitle}}</h4>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-title {{if (eq this.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
|
||||
<h2 class="{{if (eq this.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
|
||||
<p>
|
||||
<span>By {{if this.session.user.name this.session.user.name this.session.user.email}} – {{this.currentDate}} – </span> <a href="javascript:">View online →</a>
|
||||
</p>
|
||||
</div>
|
||||
{{#if this.showFeatureImage}}
|
||||
<div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
|
||||
<div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-content {{if (eq this.bodyFontCategory "sans_serif") "sans-serif"}}">
|
||||
<p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
|
||||
<p>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.</p>
|
||||
@ -158,7 +237,7 @@
|
||||
{{{this.footerContent}}}
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-footersite">
|
||||
<span>{{this.config.blogTitle}} © – </span> <a href="javascript:">Unsubscribe</a>
|
||||
<span>{{this.config.blogTitle}} © {{this.copyrightYear}} – </span> <a href="javascript:">Unsubscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-badge {{if (not this.showBadge) "hide"}}">
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,14 +41,8 @@
|
||||
|
||||
{{#if this.showEmailDesignSettings}}
|
||||
<GhFullscreenModal @modifier="full-overlay portal-settings">
|
||||
{{#if (enable-developer-experiments)}}
|
||||
<ModalEmailDesignSettingsLabs
|
||||
@closeModal={{this.toggleEmailDesignSettings}}
|
||||
/>
|
||||
{{else}}
|
||||
<ModalEmailDesignSettings
|
||||
@closeModal={{this.toggleEmailDesignSettings}}
|
||||
/>
|
||||
{{/if}}
|
||||
<ModalEmailDesignSettings
|
||||
@closeModal={{this.toggleEmailDesignSettings}}
|
||||
/>
|
||||
</GhFullscreenModal>
|
||||
{{/if}}
|
||||
Loading…
Reference in New Issue
Block a user