mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
75e573568c
- Traditionally all of Ghost's public-facing text was written in British English - We're changing that to US English because that's more common - This PR mostly just fixes up the words customise/customisation and favourite
250 lines
16 KiB
Handlebars
250 lines
16 KiB
Handlebars
<div class="modal-body modal-fullsettings labs-newsletter-settings">
|
||
<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>
|
||
<fieldset class="modal-fullsettings-form">
|
||
<div class="modal-fullsettings-section first">
|
||
<GhFormGroup @classNames="vertical">
|
||
<h4 class="modal-fullsettings-title">Header image</h4>
|
||
|
||
<GhUploader
|
||
@extensions={{this.imageExtensions}}
|
||
@paramsHash={{hash purpose="image"}}
|
||
@onComplete={{fn this.imageUploaded "headerImage"}}
|
||
as |uploader|
|
||
>
|
||
<div class="modal-fullsettings-uploader">
|
||
{{#if uploader.isUploading}}
|
||
<div class="gh-portal-button-icon">
|
||
<div class="gh-loading-spinner"></div>
|
||
</div>
|
||
{{else if this.headerImage}}
|
||
<div class="gh-header-img-container">
|
||
<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" data-tooltip="Upload image" {{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 class="gh-header-img-desc">
|
||
<h4>An optional branded image</h4>
|
||
<p>For best result use 1200x600 PNG image</p>
|
||
</div>
|
||
</div>
|
||
</GhUploader>
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup>
|
||
<h4 class="modal-fullsettings-title {{if (not this.settings.icon) "disabled"}}">Show publication icon</h4>
|
||
<div class="for-switch small {{if (not this.settings.icon) "disabled"}}">
|
||
<label class="switch" for="show-header">
|
||
<input
|
||
type="checkbox"
|
||
checked={{and this.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>
|
||
<GhFormGroup>
|
||
<h4 class="modal-fullsettings-title">Show 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">Show post 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>
|
||
</div>
|
||
</GhFormGroup>
|
||
<GhFormGroup @classNames="vertical">
|
||
<h4 class="modal-fullsettings-title gh-email-design-alignment">
|
||
<span>Post title style</span>
|
||
<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>
|
||
</h4>
|
||
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
|
||
<GhFontSelector
|
||
@selected={{this.titleFontCategory}}
|
||
@onChange={{fn this.changeSetting "titleFontCategory"}}
|
||
/>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="modal-fullsettings-section">
|
||
<GhFormGroup @classNames="vertical">
|
||
<h4 class="modal-fullsettings-title">Body style</h4>
|
||
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
|
||
<GhFontSelector
|
||
@selected={{this.bodyFontCategory}}
|
||
@onChange={{fn this.changeSetting "bodyFontCategory"}}
|
||
/>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="modal-fullsettings-section divider-top">
|
||
<GhFormGroup @classNames="vertical">
|
||
<h4 class="modal-fullsettings-title">Email footer</h4>
|
||
<KoenigBasicHtmlInput
|
||
@name="footer"
|
||
@html={{this.footerContent}}
|
||
@class="miw-100 form-text gh-members-emailsettings-footer-input"
|
||
@placeholder="Any extra information or legal text"
|
||
@onChange={{fn this.changeSetting "footerContent"}}
|
||
@onFocus={{this.handleInputFocus}}
|
||
@onBlur={{this.handleInputBlur}}
|
||
/>
|
||
</GhFormGroup>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
<div class="modal-fullsettings-section gh-members-emailsettings-footer">
|
||
<GhFormGroup>
|
||
<div class="gh-members-emailsettings-promotelabel">
|
||
<span>{{svg-jar "heart"}}</span>
|
||
<div>
|
||
<h4 class="modal-fullsettings-title">Promote independent publishing</h4>
|
||
<p>Show you’re a part of the indie publishing movement with a small badge in the footer</p>
|
||
</div>
|
||
</div>
|
||
<div class="for-switch small">
|
||
<label
|
||
class="switch"
|
||
for="promote-ghost"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={{this.showBadge}}
|
||
id="promote-ghost"
|
||
name="promote-ghost"
|
||
{{on "click" (fn this.toggleSetting "showBadge")}}
|
||
>
|
||
<span class="input-toggle-component"></span>
|
||
</label>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
</div>
|
||
<div class="modal-fullsettings-main">
|
||
<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}}>
|
||
</p>
|
||
<p><span class="dark">To:</span> Jamie Larson <jamie@example.com></p>
|
||
</div>
|
||
<div class="gh-members-emailpreview-contents">
|
||
{{#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>
|
||
{{/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>
|
||
<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>
|
||
<div class="gh-members-emailpreview-footer">
|
||
<div class="gh-members-emailpreview-footercontent">
|
||
{{{this.footerContent}}}
|
||
</div>
|
||
<div class="gh-members-emailpreview-footersite">
|
||
<span>{{this.config.blogTitle}} © – </span> <a href="javascript:">Unsubscribe</a>
|
||
</div>
|
||
</div>
|
||
<div class="gh-members-emailpreview-badge {{if (not this.showBadge) "hide"}}">
|
||
<a href="javascript:"><svg viewBox="0 0 156 156"><g fill="none" fill-rule="evenodd"><rect fill="#15212B" width="156" height="156" rx="27"></rect><g transform="translate(36 36)" fill="#F6F8FA"><path d="M0 71.007A4.004 4.004 0 014 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0130 84H4a4 4 0 01-4-4.007v-8.986zM50 71.007A4.004 4.004 0 0154 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0180 84H54a4 4 0 01-4-4.007v-8.986z"></path><rect y="34" width="84" height="17" rx="4"></rect><path d="M0 4.007A4.007 4.007 0 014.007 0h41.986A4.003 4.003 0 0150 4.007v8.986A4.007 4.007 0 0145.993 17H4.007A4.003 4.003 0 010 12.993V4.007z"></path><rect x="67" width="17" height="17" rx="4"></rect></g></g></svg> <span>Publish with Ghost</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> |