Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

✨ Added email design customization

Browse source 
fixes https://github.com/TryGhost/Team/issues/2671

Co-authored-by: Fabien 'egg' O'Carroll <fabien@allou.is>
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
This commit is contained in:
Simon Backx 2023-04-05 11:07:11 +02:00 • committed by Simon Backx
parent c975e9af00
commit 4639514a3b
12 changed files with 306 additions and 2590 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ghost/admin/app/components/modals/newsletters/edit.hbs
View file

@ -8,11 +8,7 @@
<div class="modal-fullsettings-body-labs">
<div class="modal-fullsettings-top">
<Modals::Newsletters::Edit::Settings @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}}
<Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
</div>
<div class="modal-fullsettings-bottom">
<div class="modal-fullsettings-footer">
@ -61,11 +57,7 @@
data-test-button="save-newsletter"
/>
</div>
{{#if (feature 'makingItRain')}}
<Modals::Newsletters::Edit::PreviewLabs @newsletter={{@data.newsletter}} />
{{else}}
<Modals::Newsletters::Edit::Preview @newsletter={{@data.newsletter}} />
{{/if}}
<Modals::Newsletters::Edit::Preview @newsletter={{@data.newsletter}} />
</div>
</div>
</div>

301
ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
View file

@ -1,301 +0,0 @@
<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 row">
<label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
<div class="for-switch x-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 x-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 x-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 class="show-overflow"}}
<div class="modal-fullsettings-tab-expanded">
<div class="gh-stack">
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Background color</label>
<Modals::Newsletters::Components::ColorPicker
@color={{@newsletter.backgroundColor}}
@presetColors={{this.backgroundPresetColors}}
@onColorChange={{fn this.changeSetting "backgroundColor"}}
/>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Border color</label>
<Modals::Newsletters::Components::ColorPicker
@color={{@newsletter.borderColor}}
@presetColors={{this.borderPresetColors}}
@onColorChange={{fn this.changeSetting "borderColor"}}
/>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Post title</label>
<div class="for-switch x-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">
<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>
</GhFormGroup>
{{/if}}
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Heading color</label>
<Modals::Newsletters::Components::ColorPicker
@color={{@newsletter.titleColor}}
@presetColors={{this.titlePresetColors}}
@onColorChange={{fn this.changeSetting "titleColor"}}
/>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Feature image</label>
<div class="for-switch x-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 x-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}}
{{#unless (eq this.settings.commentsEnabled 'off') }}
<GhFormGroup class="gh-stack-item row">
<label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label>
<div class="for-switch x-small">
<div class="container">
<input
type="checkbox"
id="comments-link"
checked={{@newsletter.showCommentCta}}
{{on "change" (fn this.onCheckboxChange "showCommentCta")}}
>
<button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showCommentCta")}}></button>
</div>
</div>
</GhFormGroup>
{{/unless}}
<GhFormGroup class="gh-stack-item row">
<label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
<div class="for-switch x-small">
<div class="container">
<input
type="checkbox"
id="latest-posts"
checked={{@newsletter.showLatestPosts}}
{{on "change" (fn this.onCheckboxChange "showLatestPosts")}}
>
<button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showLatestPosts")}}></button>
</div>
</div>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
<div class="for-switch x-small">
<div class="container">
<input
type="checkbox"
id="capture-feedback"
checked={{@newsletter.showSubscriptionDetails}}
{{on "change" (fn this.onCheckboxChange "showSubscriptionDetails")}}
>
<button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showSubscriptionDetails")}}></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>

105
ghost/admin/app/components/modals/newsletters/edit/design-labs.js
View file

@ -1,105 +0,0 @@
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';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
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;
}
get backgroundColorIsDark() {
if (this.args.newsletter.backgroundColor === 'dark') {
return true;
}
if (this.args.newsletter.backgroundColor === 'light') {
return false;
}
return textColorForBackgroundColor(this.args.newsletter.backgroundColor).hex().toLowerCase() === '#ffffff';
}
get backgroundPresetColors() {
return [
{
value: '#f0f0f0',
name: 'Lightgrey',
class: '',
style: 'background: #f0f0f0 !important;'
},
{
value: 'light',
name: 'White',
class: 'white',
style: ''
}
];
}
get borderPresetColors() {
return [
{
value: 'accent',
name: 'Accent',
class: 'accent',
style: ''
},
{
value: 'auto',
name: 'Auto',
class: this.backgroundColorIsDark ? 'white' : 'black',
style: ''
},
{
value: null,
name: 'Transparent',
class: 'transparent',
style: ''
}
];
}
get titlePresetColors() {
return [
{
value: 'accent',
name: 'Accent',
class: 'accent',
style: ''
},
{
value: null,
name: 'Auto',
class: this.backgroundColorIsDark ? 'white' : 'black',
style: ''
}
];
}
}

46
ghost/admin/app/components/modals/newsletters/edit/design.hbs
View file

@ -60,7 +60,7 @@
{{#if this.settings.icon}}
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
<div class="for-switch small {{unless this.settings.icon "disabled"}}">
<div class="for-switch x-small {{unless this.settings.icon "disabled"}}">
<label class="switch" for="show-header">
<input
type="checkbox"
@ -78,7 +78,7 @@
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Publication title</label>
<div class="for-switch small">
<div class="for-switch x-small">
<label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
<input
type="checkbox"
@ -93,7 +93,7 @@
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Newsletter name</label>
<div class="for-switch small">
<div class="for-switch x-small">
<label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
<input
type="checkbox"
@ -119,9 +119,27 @@
{{#liquid-if isOpen class="show-overflow"}}
<div class="modal-fullsettings-tab-expanded">
<div class="gh-stack">
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Background color</label>
<Modals::Newsletters::Components::ColorPicker
@color={{@newsletter.backgroundColor}}
@presetColors={{this.backgroundPresetColors}}
@onColorChange={{fn this.changeSetting "backgroundColor"}}
/>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Border color</label>
<Modals::Newsletters::Components::ColorPicker
@color={{@newsletter.borderColor}}
@presetColors={{this.borderPresetColors}}
@onColorChange={{fn this.changeSetting "borderColor"}}
/>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Post title</label>
<div class="for-switch small">
<div class="for-switch x-small">
<label class="switch" for="show-post-title">
<input
type="checkbox"
@ -137,6 +155,7 @@
{{#if @newsletter.showPostTitleSection}}
<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
@ -151,9 +170,18 @@
</div>
</GhFormGroup>
{{/if}}
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Heading color</label>
<Modals::Newsletters::Components::ColorPicker
@color={{@newsletter.titleColor}}
@presetColors={{this.titlePresetColors}}
@onColorChange={{fn this.changeSetting "titleColor"}}
/>
</GhFormGroup>
<GhFormGroup class="gh-stack-item row">
<label class="modal-fullsettings-title">Feature image</label>
<div class="for-switch small">
<div class="for-switch x-small">
<label class="switch" for="show-feature-image">
<input
type="checkbox"
@ -194,7 +222,7 @@
{{#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="for-switch x-small">
<div class="container">
<input
type="checkbox"
@ -211,7 +239,7 @@
{{#unless (eq this.settings.commentsEnabled 'off') }}
<GhFormGroup class="gh-stack-item row">
<label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label>
<div class="for-switch small">
<div class="for-switch x-small">
<div class="container">
<input
type="checkbox"
@ -227,7 +255,7 @@
<GhFormGroup class="gh-stack-item row">
<label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
<div class="for-switch small">
<div class="for-switch x-small">
<div class="container">
<input
type="checkbox"
@ -242,7 +270,7 @@
<GhFormGroup class="gh-stack-item row">
<label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
<div class="for-switch small">
<div class="for-switch x-small">
<div class="container">
<input
type="checkbox"

68
ghost/admin/app/components/modals/newsletters/edit/design.js
View file

@ -2,6 +2,7 @@ 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';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
export default class EditNewsletterDesignForm extends Component {
@service settings;
@ -34,4 +35,71 @@ export default class EditNewsletterDesignForm extends Component {
toggleSetting(property, event) {
this.args.newsletter[property] = event.target.checked;
}
get backgroundColorIsDark() {
if (this.args.newsletter.backgroundColor === 'dark') {
return true;
}
if (this.args.newsletter.backgroundColor === 'light') {
return false;
}
return textColorForBackgroundColor(this.args.newsletter.backgroundColor).hex().toLowerCase() === '#ffffff';
}
get backgroundPresetColors() {
return [
{
value: '#f0f0f0',
name: 'Lightgrey',
class: '',
style: 'background: #f0f0f0 !important;'
},
{
value: 'light',
name: 'White',
class: 'white',
style: ''
}
];
}
get borderPresetColors() {
return [
{
value: 'accent',
name: 'Accent',
class: 'accent',
style: ''
},
{
value: 'auto',
name: 'Auto',
class: this.backgroundColorIsDark ? 'white' : 'black',
style: ''
},
{
value: null,
name: 'Transparent',
class: 'transparent',
style: ''
}
];
}
get titlePresetColors() {
return [
{
value: 'accent',
name: 'Accent',
class: 'accent',
style: ''
},
{
value: null,
name: 'Auto',
class: this.backgroundColorIsDark ? 'white' : 'black',
style: ''
}
];
}
}

137
ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs
View file

@ -1,137 +0,0 @@
<div class="gh-members-emailpreview gh-members-emailpreview-labs">
<div class="gh-members-emailpreview-container">
<div class="gh-members-emailpreview-faux">
<p>
<span class="strong">{{or @newsletter.senderName this.settings.title}}</span> &lt;{{full-email-address (or @newsletter.senderEmail "noreply")}}&gt;
</p>
<p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
</div>
<div class="gh-members-emailpreview-contents" style={{html-safe (concat "background: " this.backgroundColor)}}>
<div class="gh-members-emailpreview-border" style={{html-safe (concat "border-color: " this.borderColor)}}>
{{#if @newsletter.headerImage}}
<div class="gh-members-emailpreview-header-image">
<img src={{@newsletter.headerImage}} alt="" role="presentation">
</div>
{{/if}}
{{#if this.showHeader}}
<div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}} style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
{{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
<img src={{this.settings.icon}} alt="" role="presentation" />
{{/if}}
{{#if this.headerTitle}}
<h4 style={{html-safe (concat "color: " this.textColor)}}>{{this.headerTitle}}</h4>
{{/if}}
{{#if this.headerSubtitle}}
<h5 style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.headerSubtitle}}</h5>
{{/if}}
</div>
{{/if}}
{{#if @newsletter.showPostTitleSection}}
<div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
<h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}" style={{html-safe (concat "color: " this.titleColor)}}>Your email newsletter</h2>
<div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
<p style={{html-safe (concat "color: " this.secondaryTextColor)}}>By {{or this.session.user.name this.session.user.email}}
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
{{#if this.showCommentCta}}
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}><a href="javascript:" class="gh-members-emailpreview-comment-link"
style={{html-safe (if this.backgroundColorIsDark "filter: brightness(2)")}}> {{svg-jar "comment"}}</a></span>
{{/if}}
</p>
<p>
<a href="javascript:" class="gh-members-emailpreview-view-online" style={{html-safe (concat "color: " this.secondaryTextColor)}}>View in browser</a>
</p>
</div>
</div>
{{/if}}
{{#if @newsletter.showFeatureImage}}
<div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
<div class="gh-members-emailpreview-featureimage-caption" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Feature image caption</div>
{{/if}}
<div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<p style={{html-safe (concat "color: " this.textColor)}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
<p style={{html-safe (concat "color: " this.textColor)}}>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>
<p style={{html-safe (concat "color: " this.textColor)}}>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
</div>
{{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
<div class="gh-members-emailpreview-feedback" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<div class="gh-members-emailpreview-feedback-buttons-group">
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
<Modals::Newsletters::Components::FeedbackButton
@text="More like this"
@icon="thumbs-up"
@textColor={{html-safe this.textColor}} />
<Modals::Newsletters::Components::FeedbackButton
@text="Less like this"
@icon="thumbs-down"
@textColor={{html-safe this.textColor}} />
{{/if}}
{{#if this.showCommentCta}}
<Modals::Newsletters::Components::FeedbackButton
@text="Comment"
@icon="comment"
@textColor={{html-safe this.textColor}} />
{{/if}}
</div>
</div>
{{/if}}
{{#if @newsletter.showLatestPosts}}
<div class="gh-members-emailpreview-latest-posts" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<h3 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Keep reading</h3>
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-1.png"
@postTitle="The three latest posts published on your site"
@postExcerpt="Posts sent as an email only will never be shown here."
@textColor={{html-safe this.textColor}}
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-2.png"
@postTitle="Displayed at the bottom of each newsletter"
@postExcerpt="Giving your readers one more place to discover your stories."
@textColor={{html-safe this.textColor}}
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-3.png"
@postTitle="To keep your work front and center"
@postExcerpt="Making sure that your audience stays engaged."
@textColor={{html-safe this.textColor}}
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
</div>
{{/if}}
{{#if @newsletter.showSubscriptionDetails}}
<div class="gh-members-emailpreview-subscription-details" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<h4 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Subscription details</h4>
<p class="pb4" style={{html-safe (concat "color: " this.textColor)}}>You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
<div class="flex">
<div class="flex-shrink-0">
<p style={{html-safe (concat "color: " this.textColor)}}>Name: Jamie Larson</p>
<p style={{html-safe (concat "color: " this.textColor)}}>Email: jamie@example.com</p>
<p style={{html-safe (concat "color: " this.textColor)}}>Member since: {{this.todayString}}</p>
</div>
<a href="#" class="gh-members-emailpreview-subscription-link" style={{html-safe (if this.backgroundColorIsDark "color: #FFF; text-decoration: underline;")}}>Manage subscription &rarr;</a>
</div>
</div>
{{/if}}
<div class="gh-members-emailpreview-footer">
<div class="gh-members-emailpreview-footercontent" style={{html-safe (concat "color: " this.secondaryTextColor)}}>
{{html-safe @newsletter.footerContent}}
</div>
<div class="gh-members-emailpreview-footersite">
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.settings.title}} &copy; {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Unsubscribe</a>
</div>
</div>
<div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
<a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
</svg> <span>Powered by Ghost</span></a>
</div>
</div>
</div>
</div>
</div>

137
ghost/admin/app/components/modals/newsletters/edit/preview-labs.js
View file

@ -1,137 +0,0 @@
import Component from '@glimmer/component';
import moment from 'moment-timezone';
import {htmlSafe} from '@ember/template';
import {inject as service} from '@ember/service';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
export default class EditNewsletterPreview extends Component {
@service ghostPaths;
@service session;
@service settings;
@service membersUtils;
get accentColor() {
return this.settings.accentColor;
}
get backgroundColor() {
const value = this.args.newsletter.backgroundColor;
const validHex = /#([0-9a-f]{3}){1,2}$/i;
if (validHex.test(value)) {
return value;
}
if (value === 'dark') {
return '#15212a';
}
return '#ffffff';
}
get backgroundColorIsDark() {
return textColorForBackgroundColor(this.backgroundColor).hex().toLowerCase() === '#ffffff';
}
get borderColor() {
const value = this.args.newsletter.borderColor;
const validHex = /#([0-9a-f]{3}){1,2}$/i;
if (validHex.test(value)) {
return value;
}
if (value === 'auto') {
const backgroundColor = this.backgroundColor;
return textColorForBackgroundColor(backgroundColor).hex();
}
if (value === 'accent') {
return this.accentColor;
}
return null;
}
get secondaryBorderColor() {
return textColorForBackgroundColor(this.backgroundColor).alpha(0.12).toString();
}
get titleColor() {
const value = this.args.newsletter.titleColor;
const validHex = /#([0-9a-f]{3}){1,2}$/i;
if (validHex.test(value)) {
return value;
}
if (value === 'accent') {
return this.accentColor;
}
const backgroundColor = this.backgroundColor;
return textColorForBackgroundColor(backgroundColor).hex();
}
get textColor() {
return textColorForBackgroundColor(this.backgroundColor).hex();
}
get secondaryTextColor() {
return textColorForBackgroundColor(this.backgroundColor).alpha(0.5).toString();
}
get linkColor() {
return this.backgroundIsDark ? '#ffffff' : this.accentColor;
}
get showHeader() {
return (this.args.newsletter.showHeaderIcon && this.settings.icon)
|| this.headerTitle;
}
get showHeaderTitle() {
return this.headerTitle || this.headerSubtitle;
}
get showCommentCta() {
return this.args.newsletter.showCommentCta && this.settings.commentsEnabled !== 'off';
}
get headerTitle() {
if (this.args.newsletter.showHeaderTitle) {
return this.settings.title;
} else if (this.args.newsletter.showHeaderName) {
return this.args.newsletter.name;
}
return null;
}
get headerSubtitle() {
if (this.args.newsletter.showHeaderTitle && this.args.newsletter.showHeaderName) {
return this.args.newsletter.name;
}
return null;
}
get featureImageUrl() {
// keep path separate so asset rewriting correctly picks it up
const imagePath = '/img/user-cover.png';
const fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath;
return fullPath;
}
get featureImageStyle() {
return htmlSafe(`background-image: url(${this.featureImageUrl})`);
}
get renewDateString() {
return moment().add(1, 'year').format('DD MMM YYYY');
}
get todayString() {
return moment().format('DD MMM YYYY');
}
}

223
ghost/admin/app/components/modals/newsletters/edit/preview.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-members-emailpreview">
<div class="gh-members-emailpreview gh-members-emailpreview-labs">
<div class="gh-members-emailpreview-container">
<div class="gh-members-emailpreview-faux">
<p>
@ -6,118 +6,131 @@
</p>
<p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
</div>
<div class="gh-members-emailpreview-contents">
{{#if @newsletter.headerImage}}
<div class="gh-members-emailpreview-header-image">
<img src={{@newsletter.headerImage}} alt="" role="presentation">
</div>
{{/if}}
{{#if this.showHeader}}
<div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
{{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
<img src={{this.settings.icon}} alt="" role="presentation" />
{{/if}}
{{#if this.headerTitle}}
<h4>{{this.headerTitle}}</h4>
{{/if}}
{{#if this.headerSubtitle}}
<h5>{{this.headerSubtitle}}</h5>
{{/if}}
</div>
{{/if}}
{{#if @newsletter.showPostTitleSection}}
<div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
<h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
<div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
<p>By {{or this.session.user.name this.session.user.email}}
<span>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
{{#if this.showCommentCta}}
<span><a href="javascript:" class="gh-members-emailpreview-comment-link"> {{svg-jar "comment"}}</a></span>
{{/if}}
</p>
<p>
<a href="javascript:" class="gh-members-emailpreview-view-online">View in browser</a>
</p>
<div class="gh-members-emailpreview-contents" style={{html-safe (concat "background: " this.backgroundColor)}}>
<div class="gh-members-emailpreview-border" style={{html-safe (concat "border-color: " this.borderColor)}}>
{{#if @newsletter.headerImage}}
<div class="gh-members-emailpreview-header-image">
<img src={{@newsletter.headerImage}} alt="" role="presentation">
</div>
</div>
{{/if}}
{{#if @newsletter.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 @newsletter.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>
<p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
</div>
{{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
<div class="gh-members-emailpreview-feedback">
<div class="gh-members-emailpreview-feedback-buttons-group">
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
<Modals::Newsletters::Components::FeedbackButton
@text="More like this"
@icon="thumbs-up" />
<Modals::Newsletters::Components::FeedbackButton
@text="Less like this"
@icon="thumbs-down" />
{{/if}}
{{#if this.showHeader}}
<div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}} style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
{{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
<img src={{this.settings.icon}} alt="" role="presentation" />
{{/if}}
{{#if this.showCommentCta}}
<Modals::Newsletters::Components::FeedbackButton
@text="Comment"
@icon="comment" />
{{#if this.headerTitle}}
<h4 style={{html-safe (concat "color: " this.textColor)}}>{{this.headerTitle}}</h4>
{{/if}}
{{#if this.headerSubtitle}}
<h5 style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.headerSubtitle}}</h5>
{{/if}}
</div>
</div>
{{/if}}
{{#if @newsletter.showLatestPosts}}
<div class="gh-members-emailpreview-latest-posts">
<h3 class="pb2">Keep reading</h3>
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-1.png"
@postTitle="The three latest posts published on your site"
@postExcerpt="Posts sent as an email only will never be shown here." />
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-2.png"
@postTitle="Displayed at the bottom of each newsletter"
@postExcerpt="Giving your readers one more place to discover your stories." />
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-3.png"
@postTitle="To keep your work front and center"
@postExcerpt="Making sure that your audience stays engaged." />
</div>
{{/if}}
{{#if @newsletter.showSubscriptionDetails}}
<div class="gh-members-emailpreview-subscription-details">
<h4 class="pb2">Subscription details</h4>
<p class="pb4">You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
<div class="flex">
<div class="flex-shrink-0">
<p>Name: Jamie Larson</p>
<p>Email: jamie@example.com</p>
<p>Member since: {{this.todayString}}</p>
{{/if}}
{{#if @newsletter.showPostTitleSection}}
<div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
<h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}" style={{html-safe (concat "color: " this.titleColor)}}>Your email newsletter</h2>
<div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
<p style={{html-safe (concat "color: " this.secondaryTextColor)}}>By {{or this.session.user.name this.session.user.email}}
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
{{#if this.showCommentCta}}
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}><a href="javascript:" class="gh-members-emailpreview-comment-link"
style={{html-safe (if this.backgroundColorIsDark "filter: brightness(2)")}}> {{svg-jar "comment"}}</a></span>
{{/if}}
</p>
<p>
<a href="javascript:" class="gh-members-emailpreview-view-online" style={{html-safe (concat "color: " this.secondaryTextColor)}}>View in browser</a>
</p>
</div>
<a href="#" class="gh-members-emailpreview-subscription-link">Manage subscription &rarr;</a>
</div>
{{/if}}
{{#if @newsletter.showFeatureImage}}
<div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
<div class="gh-members-emailpreview-featureimage-caption" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Feature image caption</div>
{{/if}}
<div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<p style={{html-safe (concat "color: " this.textColor)}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
<p style={{html-safe (concat "color: " this.textColor)}}>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>
<p style={{html-safe (concat "color: " this.textColor)}}>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
</div>
{{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
<div class="gh-members-emailpreview-feedback" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<div class="gh-members-emailpreview-feedback-buttons-group">
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
<Modals::Newsletters::Components::FeedbackButton
@text="More like this"
@icon="thumbs-up"
@textColor={{html-safe this.textColor}} />
<Modals::Newsletters::Components::FeedbackButton
@text="Less like this"
@icon="thumbs-down"
@textColor={{html-safe this.textColor}} />
{{/if}}
{{#if this.showCommentCta}}
<Modals::Newsletters::Components::FeedbackButton
@text="Comment"
@icon="comment"
@textColor={{html-safe this.textColor}} />
{{/if}}
</div>
</div>
{{/if}}
{{#if @newsletter.showLatestPosts}}
<div class="gh-members-emailpreview-latest-posts" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<h3 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Keep reading</h3>
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-1.png"
@postTitle="The three latest posts published on your site"
@postExcerpt="Posts sent as an email only will never be shown here."
@textColor={{html-safe this.textColor}}
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-2.png"
@postTitle="Displayed at the bottom of each newsletter"
@postExcerpt="Giving your readers one more place to discover your stories."
@textColor={{html-safe this.textColor}}
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
<Modals::Newsletters::Components::LatestPost
@imgPath="assets/img/latest-posts-3.png"
@postTitle="To keep your work front and center"
@postExcerpt="Making sure that your audience stays engaged."
@textColor={{html-safe this.textColor}}
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
</div>
{{/if}}
{{#if @newsletter.showSubscriptionDetails}}
<div class="gh-members-emailpreview-subscription-details" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
<h4 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Subscription details</h4>
<p class="pb4" style={{html-safe (concat "color: " this.textColor)}}>You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
<div class="flex">
<div class="flex-shrink-0">
<p style={{html-safe (concat "color: " this.textColor)}}>Name: Jamie Larson</p>
<p style={{html-safe (concat "color: " this.textColor)}}>Email: jamie@example.com</p>
<p style={{html-safe (concat "color: " this.textColor)}}>Member since: {{this.todayString}}</p>
</div>
<a href="#" class="gh-members-emailpreview-subscription-link" style={{html-safe (if this.backgroundColorIsDark "color: #FFF; text-decoration: underline;")}}>Manage subscription &rarr;</a>
</div>
</div>
{{/if}}
<div class="gh-members-emailpreview-footer">
<div class="gh-members-emailpreview-footercontent" style={{html-safe (concat "color: " this.secondaryTextColor)}}>
{{html-safe @newsletter.footerContent}}
</div>
<div class="gh-members-emailpreview-footersite">
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.settings.title}} &copy; {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Unsubscribe</a>
</div>
</div>
{{/if}}
<div class="gh-members-emailpreview-footer">
<div class="gh-members-emailpreview-footercontent">
{{html-safe @newsletter.footerContent}}
<div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
<a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
</svg> <span>Powered by Ghost</span></a>
</div>
<div class="gh-members-emailpreview-footersite">
<span>{{this.settings.title}} &copy; {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:">Unsubscribe</a>
</div>
</div>
<div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
<a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
</svg> <span>Powered by Ghost</span></a>
</div>
</div>
</div>

76
ghost/admin/app/components/modals/newsletters/edit/preview.js
View file

@ -2,6 +2,7 @@ import Component from '@glimmer/component';
import moment from 'moment-timezone';
import {htmlSafe} from '@ember/template';
import {inject as service} from '@ember/service';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
export default class EditNewsletterPreview extends Component {
@service ghostPaths;
@ -9,6 +10,81 @@ export default class EditNewsletterPreview extends Component {
@service settings;
@service membersUtils;
get accentColor() {
return this.settings.accentColor;
}
get backgroundColor() {
const value = this.args.newsletter.backgroundColor;
const validHex = /#([0-9a-f]{3}){1,2}$/i;
if (validHex.test(value)) {
return value;
}
if (value === 'dark') {
return '#15212a';
}
return '#ffffff';
}
get backgroundColorIsDark() {
return textColorForBackgroundColor(this.backgroundColor).hex().toLowerCase() === '#ffffff';
}
get borderColor() {
const value = this.args.newsletter.borderColor;
const validHex = /#([0-9a-f]{3}){1,2}$/i;
if (validHex.test(value)) {
return value;
}
if (value === 'auto') {
const backgroundColor = this.backgroundColor;
return textColorForBackgroundColor(backgroundColor).hex();
}
if (value === 'accent') {
return this.accentColor;
}
return null;
}
get secondaryBorderColor() {
return textColorForBackgroundColor(this.backgroundColor).alpha(0.12).toString();
}
get titleColor() {
const value = this.args.newsletter.titleColor;
const validHex = /#([0-9a-f]{3}){1,2}$/i;
if (validHex.test(value)) {
return value;
}
if (value === 'accent') {
return this.accentColor;
}
const backgroundColor = this.backgroundColor;
return textColorForBackgroundColor(backgroundColor).hex();
}
get textColor() {
return textColorForBackgroundColor(this.backgroundColor).hex();
}
get secondaryTextColor() {
return textColorForBackgroundColor(this.backgroundColor).alpha(0.5).toString();
}
get linkColor() {
return this.backgroundIsDark ? '#ffffff' : this.accentColor;
}
get showHeader() {
return (this.args.newsletter.showHeaderIcon && this.settings.icon)
|| this.headerTitle;

19
ghost/email-service/lib/email-renderer.js
View file

@ -668,13 +668,8 @@ class EmailRenderer {
});
// Partials
if (this.#labs.isSet('makingItRain')) {
const cssPartialSource = await fs.readFile(path.join(__dirname, './email-templates/partials/', `styles.hbs`), 'utf8');
this.#handlebars.registerPartial('styles', cssPartialSource);
} else {
const cssPartialSource = await fs.readFile(path.join(__dirname, './email-templates/partials/', `styles-old.hbs`), 'utf8');
this.#handlebars.registerPartial('styles', cssPartialSource);
}
const cssPartialSource = await fs.readFile(path.join(__dirname, './email-templates/partials/', `styles.hbs`), 'utf8');
this.#handlebars.registerPartial('styles', cssPartialSource);
const paywallPartial = await fs.readFile(path.join(__dirname, './email-templates/partials/', `paywall.hbs`), 'utf8');
this.#handlebars.registerPartial('paywall', paywallPartial);
@ -689,13 +684,9 @@ class EmailRenderer {
this.#handlebars.registerPartial('latestPosts', latestPostsPartial);
// Actual template
if (this.#labs.isSet('makingItRain')) {
const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `template.hbs`), 'utf8');
this.#renderTemplate = this.#handlebars.compile(Buffer.from(htmlTemplateSource).toString());
} else {
const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `template-old.hbs`), 'utf8');
this.#renderTemplate = this.#handlebars.compile(Buffer.from(htmlTemplateSource).toString());
}
const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `template.hbs`), 'utf8');
this.#renderTemplate = this.#handlebars.compile(Buffer.from(htmlTemplateSource).toString());
return this.#renderTemplate(data);
}

1532
ghost/email-service/lib/email-templates/partials/styles-old.hbs
View file

File diff suppressed because it is too large Load diff

240
ghost/email-service/lib/email-templates/template-old.hbs
View file

@ -1,240 +0,0 @@
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
<title>{{post.title}}</title>
{{>styles}}
</head>
<body>
<span class="preheader">{{preheader}}</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">
<!-- Outlook doesn't respect max-width so we need an extra centered table -->
<!--[if mso]>
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<![endif]-->
<tr>
<td>&nbsp;</td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
{{#if headerImage}}
<tr class="header-image-row">
<td class="header-image" width="100%" align="center">
<img
src="{{headerImage}}"
{{#if headerImageWidth}}
width="{{headerImageWidth}}"
{{/if}}
>
</td>
</tr>
{{/if}}
{{#if (or showHeaderIcon showHeaderTitle showHeaderName) }}
<tr>
<td class="{{#if (and newsletter.showPostTitleSection showHeaderTitle) }}site-info-bordered{{else}}site-info{{/if}}" width="100%" align="center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
{{#if (and showHeaderIcon site.iconUrl) }}
<tr>
<td class="site-icon"><a href="{{site.url}}"><img src="{{site.iconUrl}}" alt="{{site.title}}" border="0"></a></td>
</tr>
{{/if}}
{{#if showHeaderTitle }}
<tr>
<td class="site-url {{#unless showHeaderName}}site-url-bottom-padding{{/unless}}"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{site.title}}</a></div></td>
</tr>
{{/if}}
{{#if (and showHeaderName showHeaderTitle) }}
<tr>
<td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-subtitle">{{newsletter.name}}</a></div></td>
</tr>
{{/if}}
{{#if (and showHeaderName (not showHeaderTitle)) }}
<tr>
<td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{newsletter.name}}</a></div></td>
</tr>
{{/if}}
</table>
</td>
</tr>
{{/if}}
{{#if newsletter.showPostTitleSection}}
<tr>
<td class="{{classes.title}}">
<a href="{{post.url}}" class="{{classes.titleLink}}">{{post.title}}</a>
</td>
</tr>
<tr>
<td style="width: 100%">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
<tr>
<td height="20" class="{{classes.meta}}" style="padding: 0;">
By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
{{#if newsletter.showCommentCta}}
<a href="{{post.commentUrl}}" class="comment-link" valign="middle">
• <img src="https://static.ghost.org/v5.0.0/images/comment-icon.png" border="0" width="16" height="16" alt="Comment">
</a>
{{/if}}
</td>
<td class="{{classes.meta}} view-online desktop">
<a href="{{post.url}}" class="view-online-link">View in browser</a>
</td>
</tr>
<tr class="{{classes.meta}} view-online-mobile">
<td height="20" class="view-online">
<a href="{{post.url}}" class="view-online-link">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
{{/if}}
{{#if showFeatureImage }}
<tr class="feature-image-row">
<td class="feature-image
{{#if post.feature_image_caption }}
feature-image-with-caption
{{/if}}
"><img
src="{{post.feature_image}}"
{{#if post.feature_image_width }}
width="{{post.feature_image_width}}"
{{/if}}
{{#if post.feature_image_alt }}
alt="{{post.feature_image_alt}}"
{{/if}}
></td>
</tr>
{{#if post.feature_image_caption }}
<tr>
<td class="feature-image-caption" align="center">{{{post.feature_image_caption}}}</td>
</tr>
{{/if}}
{{/if}}
<tr class="post-content-row">
<td class="{{classes.body}}">
<!-- POST CONTENT START -->
{{{html}}}
<!-- POST CONTENT END -->
{{#if paywall}}
{{>paywall}}
{{/if}}
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
{{#if (or feedbackButtons newsletter.showCommentCta) }}
<tr>
<td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 32px 0 24px; border-bottom: 1px solid #e5eff5;" align="center">
<table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if feedbackButtons }}
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" width="145" height="36" }}
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" width="142" height="36" }}
{{/if}}
{{#if newsletter.showCommentCta}}
{{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment.png" width="122" height="36" }}
{{/if}}
</tr>
</table>
<table class="feedback-buttons-mobile" role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if feedbackButtons }}
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this-mobile.png" width="42" height="42" }}
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this-mobile.png" width="42" height="42" }}
{{/if}}
{{#if newsletter.showCommentCta}}
{{> feedbackButtonMobile href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-mobile.png" width="42" height="42" }}
{{/if}}
</tr>
</table>
</td>
</tr>
{{/if}}
{{#if latestPosts.length}}
<tr>
<td style="padding: 24px 0; border-bottom: 1px solid #e5eff5;">
<h3 class="latest-posts-header">Keep reading</h3>
{{> latestPosts}}
</td>
</tr>
{{/if}}
{{#if newsletter.showSubscriptionDetails}}
<tr>
<td class="subscription-box">
<h3>Subscription details</h3>
<p style="margin-bottom: 16px;">
<span>You are receiving this because you are a <strong>%%{status}%% subscriber</strong> to {{site.title}}.</span> %%{status_text}%%
</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="subscription-details">
<p class="%%{name_class}%%">Name: %%{name, "not provided"}%%</p>
<p>Email: <a href="#">%%{email}%%</a></p>
<p>Member since: %%{created_at}%%</p>
</td>
<td align="right" valign="bottom" class="manage-subscription">
<a href="%%{manage_account_url}%%"> Manage subscription &rarr;</a>
</td>
</tr>
</table>
</td>
</tr>
{{/if}}
<tr>
<td class="wrapper" align="center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 40px; padding-bottom: 30px;">
{{#if footerContent }}
<tr><td class="footer">{{{footerContent}}}</td></tr>
{{/if}}
<tr>
<td class="footer">{{site.title}} &copy; {{year}} – <a href="%%{unsubscribe_url}%%">Unsubscribe</a></td>
</tr>
{{#if showBadge }}
<tr>
<td class="footer-powered"><a href="https://ghost.org/"><img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" class="gh-powered" alt="Powered by Ghost"></a></td>
</tr>
{{/if}}
</table>
</td>
</tr>
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td>&nbsp;</td>
</tr>
<!--[if mso]>
</table>
</center>
</td>
</tr>
<![endif]-->
</table>
</body>
</html>