mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Added UI for new settings in email newsletter settings
Refs https://github.com/TryGhost/Team/issues/2699 - Added 'Making it rain' feature flag - Added toggles for newsletter title section, comment links, and latest posts
This commit is contained in:
Sanne de Vries
parent
2223db5379
commit
f31c69d7d5
5 changed files with 115 additions and 27 deletions
|
|
@ -119,33 +119,57 @@
|
|||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded">
|
||||
<div class="gh-stack">
|
||||
<GhFormGroup class="gh-stack-item">
|
||||
<label class="modal-fullsettings-title">Newsletter 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"}}
|
||||
/>
|
||||
{{#if (feature 'makingItRain')}}
|
||||
<GhFormGroup class="gh-stack-item gh-setting">
|
||||
<label class="modal-fullsettings-title">Newsletter title</label>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-newsletter-title">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{@newsletter.showNewsletterTitle}}
|
||||
id="show-newsletter-title"
|
||||
name="show-newsletter-title"
|
||||
{{on "click" (fn this.toggleSetting "showNewsletterTitle")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</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>
|
||||
</GhFormGroup>
|
||||
|
||||
{{!-- {{#if @newsletter.showNewsletterTitle}} --}}
|
||||
<GhFormGroup class="gh-stack-item">
|
||||
<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}} --}}
|
||||
{{else}}
|
||||
<GhFormGroup class="gh-stack-item">
|
||||
<label class="modal-fullsettings-title">Newsletter 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>
|
||||
</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>
|
||||
<GhFormGroup class="gh-stack-item gh-setting">
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
<GhFormGroup class="gh-stack-item gh-setting gh-setting-first">
|
||||
<label class="modal-fullsettings-title">Feature image</label>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-feature-image">
|
||||
|
|
@ -160,6 +184,17 @@
|
|||
</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}}
|
||||
|
|
@ -175,7 +210,7 @@
|
|||
<div class="gh-stack">
|
||||
|
||||
{{#if (feature "audienceFeedback")}}
|
||||
<GhFormGroup class="gh-stack-item gh-setting gh-setting-extra">
|
||||
<GhFormGroup class="gh-stack-item gh-setting">
|
||||
<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="container">
|
||||
|
|
@ -191,6 +226,40 @@
|
|||
</GhFormGroup>
|
||||
{{/if}}
|
||||
|
||||
{{#if (feature 'makingItRain')}}
|
||||
{{!-- {{#if @site.comments_enabled}} --}}
|
||||
<GhFormGroup class="gh-stack-item gh-setting">
|
||||
<label for="comments-link" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Include a link to comments</label>
|
||||
<div class="for-switch small">
|
||||
<div class="container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="comments-link"
|
||||
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}} --}}
|
||||
|
||||
<GhFormGroup class="gh-stack-item gh-setting gh-setting-extra">
|
||||
<label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Show three latest posts</label>
|
||||
<div class="for-switch small">
|
||||
<div class="container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="latest-posts"
|
||||
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}}
|
||||
|
||||
<GhFormGroup class="gh-stack-item">
|
||||
<label class="modal-fullsettings-title">Email footer</label>
|
||||
<KoenigBasicHtmlInput
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ export default class FeatureService extends Service {
|
|||
@feature('websockets') websockets;
|
||||
@feature('stripeAutomaticTax') stripeAutomaticTax;
|
||||
@feature('mediaInliner') mediaInliner;
|
||||
@feature('makingItRain') makingItRain;
|
||||
|
||||
_user = null;
|
||||
|
||||
|
|
|
|||
|
|
@ -698,6 +698,10 @@
|
|||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.modal-fullsettings-tab-expanded .gh-setting-first {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.modal-fullsettings-form-labs .for-checkbox .input-toggle-component {
|
||||
background: var(--white);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -290,6 +290,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Making it rain</h4>
|
||||
<p class="gh-expandable-description">
|
||||
Building momentum in the eyes of our publishers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<GhFeatureFlag @flag="makingItRain" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@ const ALPHA_FEATURES = [
|
|||
'lexicalEditor',
|
||||
'websockets',
|
||||
'webmentionEmails',
|
||||
'stripeAutomaticTax'
|
||||
'stripeAutomaticTax',
|
||||
'makingItRain'
|
||||
];
|
||||
|
||||
module.exports.GA_KEYS = [...GA_FEATURES];
|
||||
|
|
|
|||
Loading…
Reference in a new issue