mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 15:12:58 +03:00
b2b66490b7
refs https://github.com/TryGhost/Team/issues/755 reqs https://github.com/TryGhost/Ghost/pull/13006 - updated settings model to match new server-side settings - updated email customisation modal behind the dev experiments flag - adjusted layout to move to a fixed top bar and scrollable sidebar - added image upload, toggles and selections for new settings - updated preview to match selected settings Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
172 lines
10 KiB
Handlebars
172 lines
10 KiB
Handlebars
<div class="modal-body modal-fullsettings">
|
||
<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"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={{this.showHeader}}
|
||
id="show-header"
|
||
name="show-header"
|
||
{{on "click" this.setShowHeader}}
|
||
>
|
||
<span class="input-toggle-component"></span>
|
||
</label>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
{{!-- <p>Font style for the email body content</p> --}}
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="modal-fullsettings-section">
|
||
<GhFormGroup @classNames="vertical">
|
||
<h4 class="modal-fullsettings-title pt4">Email footer</h4>
|
||
<KoenigBasicHtmlInput
|
||
@name="footer"
|
||
@html={{this.footerContent}}
|
||
@class="miw-100 form-text gh-members-emailsettings-footer-input"
|
||
@onChange={{this.setFooterContent}}
|
||
@onFocus={{this.handleInputFocus}}
|
||
@onBlur={{this.handleInputBlur}}
|
||
/>
|
||
<p>Any extra information or legal text</p>
|
||
</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" this.setShowBadge}}
|
||
>
|
||
<span class="input-toggle-component"></span>
|
||
</label>
|
||
</div>
|
||
</GhFormGroup>
|
||
</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}}>
|
||
</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>
|
||
<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>
|
||
<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 customise 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> |