mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Updated Email settings page to accommodate multiple newsletters
Refs https://github.com/TryGhost/Team/issues/1441 - Rearranged the page: publish-menu preview is removed because the publish flow will change. - Email addresses setting removed because it will be set on an individual newsletter level
This commit is contained in:
Sanne de Vries
parent
cbc7429f69
commit
81463954e4
@ -1,121 +1,210 @@
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
||||
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
|
||||
<input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if this.emailNewsletterEnabled}}
|
||||
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
{{#if (feature "multipleNewsletters")}}
|
||||
<section class="gh-main-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Email design</h4>
|
||||
<p class="gh-expandable-description">Customize the look and feel of your newsletters</p>
|
||||
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
||||
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
|
||||
<input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" class="gh-btn gh-btn-green" {{on "click" @toggleEmailDesignSettings}} data-test-toggle-membersFrom><span> Customize design →</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
{{#if this.emailNewsletterEnabled}}
|
||||
<div class="gh-main-section gh-newsletters">
|
||||
<h4 class="gh-main-section-header small bn">Newsletters</h4>
|
||||
<section class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-main-content-card gh-newsletter-card">
|
||||
<div class="gh-newsletter-card-block title-block">
|
||||
<h3 class="gh-newsletter-card-name">
|
||||
Daily roundup
|
||||
</h3>
|
||||
<p class="gh-newsletter-card-description">
|
||||
Daily news delivered to your inbox every morning.
|
||||
</p>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-block stats-block">
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">19</h3>
|
||||
<p class="gh-newsletter-card-description">Subscribers</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">17</h3>
|
||||
<p class="gh-newsletter-card-description">Posts sent</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-button-container">
|
||||
<span class="dropdown">
|
||||
<GhDropdownButton
|
||||
@dropdownName="newsletter-actions-menu-newsletter-1"
|
||||
@classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
|
||||
>
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Actions</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown
|
||||
@name="newsletter-actions-menu-newsletter-1"
|
||||
@tagName="ul"
|
||||
@classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
|
||||
>
|
||||
<li>
|
||||
<button class="mr2" type="button">
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="mr2" type="button">
|
||||
<span>Archive</span>
|
||||
</button>
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="gh-main-section gh-setting-email-section content-preview">
|
||||
<div>
|
||||
<div class="gh-main-content-card gh-newsletter-card">
|
||||
<div class="gh-newsletter-card-block title-block">
|
||||
<h3 class="gh-newsletter-card-name">
|
||||
Weekly summary
|
||||
</h3>
|
||||
<p class="gh-newsletter-card-description">
|
||||
Get the weekly highlights every Sunday.
|
||||
</p>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-block stats-block">
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">32</h3>
|
||||
<p class="gh-newsletter-card-description">Subscribers</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">2</h3>
|
||||
<p class="gh-newsletter-card-description">Posts sent</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-button-container">
|
||||
<span class="dropdown">
|
||||
<GhDropdownButton
|
||||
@dropdownName="newsletter-actions-menu-newsletter-2"
|
||||
@classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
|
||||
>
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Actions</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown
|
||||
@name="newsletter-actions-menu-newsletter-2"
|
||||
@tagName="ul"
|
||||
@classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
|
||||
>
|
||||
<li>
|
||||
<button class="mr2" type="button">
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="mr2" type="button">
|
||||
<span>Archive</span>
|
||||
</button>
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="button" class="gh-add-newsletter" {{on "click" @toggleEmailDesignSettings}}>{{svg-jar "add-stroke"}}Add newsletter</button>
|
||||
</div>
|
||||
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">General settings</h4>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Default newsletter recipients</h4>
|
||||
<p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn"><span>Expand</span></button>
|
||||
</div>
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Email addresses</h4>
|
||||
<p class="gh-expandable-description">Contact information used for newsletters and member login emails</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersFromOpen" this)}} data-test-toggle-membersFrom><span>{{if this.membersFromOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersFromOpen}}
|
||||
|
||||
{{#unless this.config.mailgunIsConfigured}}
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Newsletter email address</label>
|
||||
<div class="flex items-center justify-center mt1">
|
||||
<GhTextInput
|
||||
@value={{readonly this.fromAddress}}
|
||||
@input={{action "setFromAddress" value="target.value"}}
|
||||
@class="gh-labs-members-emailinput"
|
||||
/>
|
||||
<GhTaskButton
|
||||
@buttonText="Update newsletter address"
|
||||
@runningText="Sending..."
|
||||
@successText="Confirmation email sent"
|
||||
@disabled={{this.disableUpdateFromAddressButton}}
|
||||
@task={{this.updateFromAddress}}
|
||||
@class="gh-btn gh-btn-icon gh-btn-green gh-btn-textfield-group gh-labs-members-emaildropdown"
|
||||
data-test-button="update-from-address"
|
||||
/>
|
||||
</div>
|
||||
<p>The address your newsletter posts are sent from</p>
|
||||
</GhFormGroup>
|
||||
{{#if this.showFromAddressConfirmation}}
|
||||
<div class="flex items-center green-d1 nt3 lh-1">
|
||||
{{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} <span class="nudge-left--2">Check your inbox and confirm before saving your settings</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
||||
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
||||
</div>
|
||||
<GhFormGroup @class="for-select gh-members-defaultemaildd">
|
||||
<label class="fw6 f8" for="reply-address">Newsletter replies go to</label>
|
||||
<span class="gh-select mt1">
|
||||
{{one-way-select this.selectedReplyAddress
|
||||
id="reply-address"
|
||||
name="reply-address"
|
||||
options=(readonly this.replyAddresses)
|
||||
optionValuePath="value"
|
||||
optionLabelPath="label"
|
||||
update=(action "setReplyAddress")
|
||||
}}
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<div class="flex justify-between">
|
||||
<p>Where you receive responses to newsletters</p>
|
||||
{{#if (eq this.settings.membersReplyAddress "support")}}
|
||||
<LinkTo @route="settings.membership" class="gh-update-support-address" type="button" @query={{hash showPortalSettings=true}}>Change support email address</LinkTo>
|
||||
{{/if}}
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersEmailOpen}}
|
||||
<div class="flex flex-column flex">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<GhFormGroup @class="gh-mailgun-region no-margin">
|
||||
<label class="fw6 f8">Mailgun region</label>
|
||||
<div class="mt1">
|
||||
<PowerSelect
|
||||
@options={{this.mailgunRegions}}
|
||||
@selected={{this.mailgunRegion}}
|
||||
@onChange={{action "setMailgunRegion"}}
|
||||
@class="gh-select"
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
as |region|
|
||||
>
|
||||
{{region.flag}} {{region.name}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @class="no-margin">
|
||||
<label class="fw6 f8">Mailgun domain</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.mailgunSettings.domain}}
|
||||
@input={{action "setMailgunDomain"}}
|
||||
@class="mt1"
|
||||
data-test-mailgun-domain-input={{true}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Find your Mailgun region and domain
|
||||
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Mailgun Private API key</label>
|
||||
<GhTextInput
|
||||
@type="password"
|
||||
@value={{readonly this.mailgunSettings.apiKey}}
|
||||
@input={{action "setMailgunApiKey"}}
|
||||
@class="mt1 password" @autocomplete="new-password"
|
||||
data-test-mailgun-api-key-input={{true}}
|
||||
/>
|
||||
<p>Find your Mailgun API keys
|
||||
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/liquid-if}}
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
{{/unless}}
|
||||
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
@ -131,116 +220,253 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-email-publishmenu-preview">
|
||||
<h4 class="gh-main-section-header small bn">Preview</h4>
|
||||
<div class="gh-publishmenu-dropdown-container">
|
||||
<div class="gh-publishmenu-dropdown">
|
||||
<header class="gh-publishmenu-heading">Ready to <span class="gh-publishmenu-heading-dropdown">{{#if this.emailPreviewVisible}} publish & send {{else}} publish {{/if}}{{svg-jar "arrow-down"}}</span> this post?</header>
|
||||
<section class="gh-publishmenu-content">
|
||||
<div class="gh-publishmenu-section {{if this.emailPreviewVisible "" "mb7"}}">
|
||||
<div class="gh-publishmenu-radio active">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Set it live now</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-publishmenu-radio">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if this.emailPreviewVisible}}
|
||||
<div class="gh-publishmenu-section">
|
||||
<div class="gh-publishmenu-email">
|
||||
<div class="gh-publishmenu-email-label">
|
||||
<label class="gh-publishmenu-radio-label mb3">Send by email to</label>
|
||||
<div class="form-group">
|
||||
<GhMembersRecipientSelect
|
||||
@filter={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
||||
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
|
||||
<input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#unless this.config.mailgunIsConfigured}}
|
||||
<hr>
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Advanced</h4>
|
||||
{{#if this.emailNewsletterEnabled}}
|
||||
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
||||
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
||||
<h4 class="gh-expandable-title">Email design</h4>
|
||||
<p class="gh-expandable-description">Customize the look and feel of your newsletters</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersEmailOpen}}
|
||||
<div class="flex flex-column flex">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<GhFormGroup @class="gh-mailgun-region no-margin">
|
||||
<label class="fw6 f8">Mailgun region</label>
|
||||
<div class="mt1">
|
||||
<PowerSelect
|
||||
@options={{this.mailgunRegions}}
|
||||
@selected={{this.mailgunRegion}}
|
||||
@onChange={{action "setMailgunRegion"}}
|
||||
@class="gh-select"
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
as |region|
|
||||
>
|
||||
{{region.flag}} {{region.name}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @class="no-margin">
|
||||
<label class="fw6 f8">Mailgun domain</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.mailgunSettings.domain}}
|
||||
@input={{action "setMailgunDomain"}}
|
||||
@class="mt1"
|
||||
data-test-mailgun-domain-input={{true}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Find your Mailgun region and domain
|
||||
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Mailgun Private API key</label>
|
||||
<GhTextInput
|
||||
@type="password"
|
||||
@value={{readonly this.mailgunSettings.apiKey}}
|
||||
@input={{action "setMailgunApiKey"}}
|
||||
@class="mt1 password" @autocomplete="new-password"
|
||||
data-test-mailgun-api-key-input={{true}}
|
||||
/>
|
||||
<p>Find your Mailgun API keys
|
||||
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
<button type="button" class="gh-btn gh-btn-green" {{on "click" @toggleEmailDesignSettings}} data-test-toggle-membersFrom><span> Customize design →</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/unless}}
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="gh-main-section gh-setting-email-section content-preview">
|
||||
<div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Default newsletter recipients</h4>
|
||||
<p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
|
||||
</div>
|
||||
</div>
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Email addresses</h4>
|
||||
<p class="gh-expandable-description">Contact information used for newsletters and member login emails</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersFromOpen" this)}} data-test-toggle-membersFrom><span>{{if this.membersFromOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersFromOpen}}
|
||||
<div>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Newsletter email address</label>
|
||||
<div class="flex items-center justify-center mt1">
|
||||
<GhTextInput
|
||||
@value={{readonly this.fromAddress}}
|
||||
@input={{action "setFromAddress" value="target.value"}}
|
||||
@class="gh-labs-members-emailinput"
|
||||
/>
|
||||
<GhTaskButton
|
||||
@buttonText="Update newsletter address"
|
||||
@runningText="Sending..."
|
||||
@successText="Confirmation email sent"
|
||||
@disabled={{this.disableUpdateFromAddressButton}}
|
||||
@task={{this.updateFromAddress}}
|
||||
@class="gh-btn gh-btn-icon gh-btn-green gh-btn-textfield-group gh-labs-members-emaildropdown"
|
||||
data-test-button="update-from-address"
|
||||
/>
|
||||
</div>
|
||||
<p>The address your newsletter posts are sent from</p>
|
||||
</GhFormGroup>
|
||||
{{#if this.showFromAddressConfirmation}}
|
||||
<div class="flex items-center green-d1 nt3 lh-1">
|
||||
{{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} <span class="nudge-left--2">Check your inbox and confirm before saving your settings</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<GhFormGroup @class="for-select gh-members-defaultemaildd">
|
||||
<label class="fw6 f8" for="reply-address">Newsletter replies go to</label>
|
||||
<span class="gh-select mt1">
|
||||
{{one-way-select this.selectedReplyAddress
|
||||
id="reply-address"
|
||||
name="reply-address"
|
||||
options=(readonly this.replyAddresses)
|
||||
optionValuePath="value"
|
||||
optionLabelPath="label"
|
||||
update=(action "setReplyAddress")
|
||||
}}
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<div class="flex justify-between">
|
||||
<p>Where you receive responses to newsletters</p>
|
||||
{{#if (eq this.settings.membersReplyAddress "support")}}
|
||||
<LinkTo @route="settings.membership" class="gh-update-support-address" type="button" @query={{hash showPortalSettings=true}}>Change support email address</LinkTo>
|
||||
{{/if}}
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
|
||||
<p class="gh-expandable-description">Track how many members are reading your emails</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-track-opens" {{on "click" (action "toggleEmailTrackOpens")}}>
|
||||
<input type="checkbox" checked={{this.settings.emailTrackOpens}} class="gh-input" {{on "click" (action "toggleEmailTrackOpens")}} name="email-track-opens" data-test-checkbox="email-track-opens">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-email-publishmenu-preview">
|
||||
<h4 class="gh-main-section-header small bn">Preview</h4>
|
||||
<div class="gh-publishmenu-dropdown-container">
|
||||
<div class="gh-publishmenu-dropdown">
|
||||
<header class="gh-publishmenu-heading">Ready to <span class="gh-publishmenu-heading-dropdown">{{#if this.emailPreviewVisible}} publish & send {{else}} publish {{/if}}{{svg-jar "arrow-down"}}</span> this post?</header>
|
||||
<section class="gh-publishmenu-content">
|
||||
<div class="gh-publishmenu-section {{if this.emailPreviewVisible "" "mb7"}}">
|
||||
<div class="gh-publishmenu-radio active">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Set it live now</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-publishmenu-radio">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if this.emailPreviewVisible}}
|
||||
<div class="gh-publishmenu-section">
|
||||
<div class="gh-publishmenu-email">
|
||||
<div class="gh-publishmenu-email-label">
|
||||
<label class="gh-publishmenu-radio-label mb3">Send by email to</label>
|
||||
<div class="form-group">
|
||||
<GhMembersRecipientSelect
|
||||
@filter={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#unless this.config.mailgunIsConfigured}}
|
||||
<hr>
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Advanced</h4>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
||||
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersEmailOpen}}
|
||||
<div class="flex flex-column flex">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<GhFormGroup @class="gh-mailgun-region no-margin">
|
||||
<label class="fw6 f8">Mailgun region</label>
|
||||
<div class="mt1">
|
||||
<PowerSelect
|
||||
@options={{this.mailgunRegions}}
|
||||
@selected={{this.mailgunRegion}}
|
||||
@onChange={{action "setMailgunRegion"}}
|
||||
@class="gh-select"
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
as |region|
|
||||
>
|
||||
{{region.flag}} {{region.name}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @class="no-margin">
|
||||
<label class="fw6 f8">Mailgun domain</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.mailgunSettings.domain}}
|
||||
@input={{action "setMailgunDomain"}}
|
||||
@class="mt1"
|
||||
data-test-mailgun-domain-input={{true}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Find your Mailgun region and domain
|
||||
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Mailgun Private API key</label>
|
||||
<GhTextInput
|
||||
@type="password"
|
||||
@value={{readonly this.mailgunSettings.apiKey}}
|
||||
@input={{action "setMailgunApiKey"}}
|
||||
@class="mt1 password" @autocomplete="new-password"
|
||||
data-test-mailgun-api-key-input={{true}}
|
||||
/>
|
||||
<p>Find your Mailgun API keys
|
||||
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/unless}}
|
||||
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@ -226,7 +226,14 @@
|
||||
}
|
||||
|
||||
.gh-btn-add-product svg {
|
||||
margin-right: 2px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 1px 4px 0 0;
|
||||
}
|
||||
|
||||
.gh-btn-icon.gh-btn-add-product svg path {
|
||||
stroke: var(--green-d1);
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.gh-product-list-icon {
|
||||
|
||||
@ -881,6 +881,120 @@
|
||||
}
|
||||
|
||||
|
||||
/* Email newsletter LABS
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-newsletters .intro {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.gh-newsletters .gh-expandable-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-newsletters .gh-expandable-description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--darkgrey);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.gh-newsletters .gh-expandable-block {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-newsletters .gh-main-content-card:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-newsletter-card {
|
||||
position:relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.gh-newsletter-card {
|
||||
padding: 4vmin 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-newsletter-card-block.stats-block {
|
||||
display: grid;
|
||||
flex-basis: 30%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-right: 4.4rem;
|
||||
}
|
||||
|
||||
.gh-newsletter-card-block.title-block {
|
||||
flex-basis: 60%;
|
||||
}
|
||||
|
||||
.gh-newsletter-card-block:not(:first-of-type) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.gh-newsletter-card-block h4 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-newsletter-card-block h4 .counter {
|
||||
font-weight: 400;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-newsletter-card-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
.gh-newsletter-card-description {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.45em;
|
||||
margin: 4px 20px 4px 0;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-newsletter-card-button-container {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 24px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gh-newsletter-actions-menu {
|
||||
top: calc(100% + 6px);
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.gh-add-newsletter {
|
||||
width: max-content;
|
||||
margin: .8rem 0 0;
|
||||
color: var(--green-d1);
|
||||
}
|
||||
|
||||
.gh-add-newsletter svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 1px 4px 0 0;
|
||||
}
|
||||
|
||||
.gh-add-newsletter svg path {
|
||||
stroke: var(--green-d1);
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
/* Code injection
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user