✨ Added newsletter footer customisation (#1764)
no-issue This adds support for customising the newsletter footer with plaintext. Updates the new modal to use Octane, rather than legacy components.
This commit is contained in:
Fabien 'egg' O'Carroll
GitHub
parent
387907dc96
commit
f59b332882
|
|
@ -480,10 +480,9 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if this.showEmailDesignSettings}}
|
||||
<GhFullscreenModal @modal="email-design-settings"
|
||||
@model={{hash
|
||||
openStripeSettings=(action "openStripeSettings")
|
||||
}}
|
||||
@close={{action "closeEmailDesignSettings"}}
|
||||
@modifier="full-overlay portal-settings" />
|
||||
<GhFullscreenModal @modifier="full-overlay portal-settings">
|
||||
<ModalEmailDesignSettings
|
||||
@closeModal={{action "closeEmailDesignSettings"}}
|
||||
/>
|
||||
</GhFullscreenModal>
|
||||
{{/if}}
|
||||
|
|
@ -14,10 +14,10 @@
|
|||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.settings.newsletterShowHeader}}
|
||||
checked={{this.showHeader}}
|
||||
id="show-header"
|
||||
name="show-header"
|
||||
onclick={{action "toggleShowHeader" value="target.checked"}}
|
||||
{{on "click" this.setShowHeader}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
|
|
@ -28,16 +28,16 @@
|
|||
<GhFormGroup @classNames="vertical">
|
||||
<h4 class="modal-fullsettings-title">Typography</h4>
|
||||
<div class="modal-fullsettings-radiogroup">
|
||||
<div class="gh-radio {{if (eq this.settings.newsletterBodyFontCategory "serif") "active"}}"
|
||||
{{action "setTypography" "serif" on="click"}}
|
||||
<div class="gh-radio {{if (eq this.bodyFontCategory "serif") "active"}}"
|
||||
{{on "click" (fn this.setBodyFontCategory "serif")}}
|
||||
>
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Serif</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-radio {{if (eq this.settings.newsletterBodyFontCategory "sans_serif") "active"}}"
|
||||
{{action "setTypography" "sans_serif" on="click"}}
|
||||
<div class="gh-radio {{if (eq this.bodyFontCategory "sans_serif") "active"}}"
|
||||
{{on "click" (fn this.setBodyFontCategory "sans_serif")}}
|
||||
>
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
|
|
@ -48,6 +48,21 @@
|
|||
<p>Font style for the email body contents</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="modal-fullsettings-section">
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<h4 class="modal-fullsettings-title">Footer content</h4>
|
||||
<GhTextarea
|
||||
@name="footer"
|
||||
@value={{readonly this.footerHtml}}
|
||||
@input={{this.setFooterHtml}}
|
||||
{{!-- The modal listens for key events to close, this stops the textarea from triggering them--}}
|
||||
{{on "keydown" this.stopPropagation}}
|
||||
{{on "keypress" this.stopPropagation}}
|
||||
{{on "keyup" this.stopPropagation}}
|
||||
/>
|
||||
<p>Extra content to show at the bottom of all emails</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="modal-fullsettings-section gh-members-emailsettings-footer">
|
||||
|
|
@ -66,10 +81,10 @@
|
|||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.settings.newsletterShowBadge}}
|
||||
checked={{this.showBadge}}
|
||||
id="promote-ghost"
|
||||
name="promote-ghost"
|
||||
onclick={{action "toggleBadge" value="target.checked"}}
|
||||
{{on "click" this.setShowBadge}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
|
|
@ -83,7 +98,7 @@
|
|||
<button
|
||||
class="gh-btn mr3"
|
||||
{{action "closeModal"}}
|
||||
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
|
||||
{{!-- disable mouseDown so it does not trigger focus-out validations --}}
|
||||
{{on "mousedown" (optional this.noop)}}
|
||||
data-test-button="cancel-custom-view-form"
|
||||
>
|
||||
|
|
@ -93,7 +108,7 @@
|
|||
<GhTaskButton
|
||||
@buttonText="Save and close"
|
||||
@successText="Saved"
|
||||
@task={{this.saveTask}}
|
||||
@task={{this.saveSettings}}
|
||||
@idleClass="gh-btn-blue"
|
||||
@class="gh-btn gh-btn-icon"
|
||||
data-test-button="save-members-modal-setting"
|
||||
|
|
@ -110,7 +125,7 @@
|
|||
</p>
|
||||
<p><span class="dark">To:</span> Jamie Larson <jamie@example.com></p>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-header {{if (not this.settings.newsletterShowHeader) "hide"}}">
|
||||
<div class="gh-members-emailpreview-header {{if (not this.showHeader) "hide"}}">
|
||||
{{#if this.settings.icon}}
|
||||
<img src={{this.settings.icon}} />
|
||||
{{/if}}
|
||||
|
|
@ -122,19 +137,19 @@
|
|||
<span>By Jamie Larson – Nov 5 2020 – </span> <a href="javascript:">View online →</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-content {{if (eq this.settings.newsletterBodyFontCategory "sans_serif") "sans-serif"}}">
|
||||
<div class="gh-members-emailpreview-content {{if (eq this.bodyFontCategory "sans_serif") "sans-serif"}}">
|
||||
<p>This is where the contents of your newsletter go. Customise the appearance with the options in the sidebar.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at auctor tellus, in accumsan magna. Sed vel magna velit. Vivamus commodo laoreet malesuada. Nullam efficitur augue et eros fermentum.</p>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-footer">
|
||||
<div class="gh-members-emailpreview-footercontent">
|
||||
{{this.footerText}}
|
||||
{{this.footerHtml}}
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-footersite">
|
||||
<span>Ghost Site © – </span> <a href="javascript:">Unsubscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-badge {{if (not this.settings.newsletterShowBadge) "hide"}}">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,73 @@
|
|||
import ModalComponent from 'ghost-admin/components/modal-base';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task} from 'ember-concurrency';
|
||||
import {task} from 'ember-concurrency-decorators';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default ModalComponent.extend({
|
||||
config: service(),
|
||||
settings: service(),
|
||||
export default class ModalEmailDesignSettings extends ModalComponent {
|
||||
@service()
|
||||
settings;
|
||||
|
||||
showHeader: true,
|
||||
showSansSerif: false,
|
||||
showBadge: true,
|
||||
footerText: '',
|
||||
@service()
|
||||
config;
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
},
|
||||
@tracked
|
||||
showHeader = this.settings.get('newsletterShowHeader');
|
||||
|
||||
actions: {
|
||||
toggleShowHeader(showHeader) {
|
||||
this.settings.set('newsletterShowHeader', showHeader);
|
||||
},
|
||||
@tracked
|
||||
bodyFontCategory = this.settings.get('newsletterBodyFontCategory');
|
||||
|
||||
setTypography(typography) {
|
||||
if (typography === 'serif') {
|
||||
this.settings.set('newsletterBodyFontCategory', 'serif');
|
||||
} else {
|
||||
this.settings.set('newsletterBodyFontCategory', 'sans_serif');
|
||||
}
|
||||
},
|
||||
@tracked
|
||||
showBadge = this.settings.get('newsletterShowBadge');
|
||||
|
||||
toggleBadge(showBadge) {
|
||||
this.settings.set('newsletterShowBadge', showBadge);
|
||||
},
|
||||
@tracked
|
||||
footerHtml = this.settings.get('newsletterFooterHtml');
|
||||
|
||||
confirm() {
|
||||
return this.saveTask.perform();
|
||||
},
|
||||
@action
|
||||
setShowHeader(event) {
|
||||
this.showHeader = event.target.checked;
|
||||
}
|
||||
|
||||
leaveSettings() {
|
||||
this.closeModal();
|
||||
@action
|
||||
setBodyFontCategory(value) {
|
||||
this.bodyFontCategory = value;
|
||||
}
|
||||
|
||||
@action
|
||||
stopPropagation(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
@action
|
||||
setShowBadge(event) {
|
||||
this.showBadge = event.target.checked;
|
||||
}
|
||||
|
||||
@action
|
||||
setFooterHtml(event) {
|
||||
this.footerHtml = event.target.value;
|
||||
}
|
||||
|
||||
@action
|
||||
confirm() {
|
||||
this.saveSettings.perform();
|
||||
}
|
||||
|
||||
@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.footerHtml !== null) {
|
||||
this.settings.set('newsletterFooterHtml', this.footerHtml);
|
||||
}
|
||||
},
|
||||
|
||||
saveTask: task(function* () {
|
||||
yield this.settings.save();
|
||||
this.closeModal();
|
||||
}).drop()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,5 +72,6 @@ export default Model.extend(ValidationEngine, {
|
|||
*/
|
||||
newsletterShowHeader: attr('boolean'),
|
||||
newsletterBodyFontCategory: attr('string'),
|
||||
newsletterShowBadge: attr('boolean')
|
||||
newsletterShowBadge: attr('boolean'),
|
||||
newsletterFooterHtml: attr('string')
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue