Email settings design update (#2359)
Updated Email settings and Portal settings design to make it more scalable and more consistent with the rest of the Admin.
This commit is contained in:
Peter Zimon
GitHub
parent
75395a0eb2
commit
86c08eaf88
47
.lint-todo
47
.lint-todo
|
|
@ -1106,3 +1106,50 @@ add|ember-template-lint|require-valid-alt-text|8|20|8|20|9d0c591086dc9139ff38a7b
|
|||
add|ember-template-lint|require-input-label|10|12|10|12|8c3c0ea315ff4da828363989a45fa11256a78796|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs
|
||||
remove|ember-template-lint|no-with|2|0|2|0|0f2ccc59fb9c8536430187580b4cfcc9e946d780|1649203200000|1651795200000|1654387200000|app/components/gh-basic-dropdown.hbs
|
||||
remove|ember-template-lint|no-quoteless-attributes|46|59|46|59|c7ec82d1c4dca380890a40909733cc5029b9c095|1649203200000|1651795200000|1654387200000|app/templates/editor.hbs
|
||||
remove|ember-template-lint|no-action|11|142|11|142|d7344cff0074353f10626fbe36707360e8ffd52c|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|14|142|14|142|d07a2c2968b7c337172eb3d189fcd004f05034d7|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|33|57|33|57|b5e82dc8693610f3eb52006adac6456b86fb5ff1|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|61|61|61|61|fc5db5638fa960219dcaac666df85bd49ae5ba39|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|83|65|83|65|9e5e50275cb198c163f5da82335957b69255ac1a|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|112|61|112|61|fc5db5638fa960219dcaac666df85bd49ae5ba39|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|135|61|135|61|4a9c1575e2a51a19d342f234cc41b045ea419ae3|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|156|61|156|61|40f0dc3732c554bb3f69d3d126263eb0a24f7738|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|166|67|166|67|d7344cff0074353f10626fbe36707360e8ffd52c|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|181|52|181|52|6cb8968d67fbe25c46f1f963ad4f5564f51746f0|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|204|52|204|52|4432d73cb43005a6c5ab22362c8773f0f21d0ac4|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|215|56|215|56|3ae31e5d2f432b152768be816a2fc40803434382|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|222|171|222|171|b84f11a781130328997f76bd3ef2f3faa57a31d0|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|236|68|236|68|7fab1dccd9502d972b0b6f3fbbea8340483ada89|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|241|138|241|138|22c6e583ac81ee6f218414ee5f5271469891c114|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|246|129|246|129|69e5f19c951bf70e9e7eaa72ea2b784ab97c3dff|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|273|47|273|47|bb06a1edb1abab80686af224b1e77ff4cba9d604|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|281|67|281|67|d0601ba765735657d724123264ad81ccb959cd6b|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|288|43|288|43|b7fa34dcfcdeab84175766fab6106fe6659f53e7|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|310|102|310|102|d7344cff0074353f10626fbe36707360e8ffd52c|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|311|107|311|107|d0601ba765735657d724123264ad81ccb959cd6b|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|312|97|312|97|4f3b22e95cffd8f24cf49a30092a5d9e0b708e47|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
remove|ember-template-lint|no-action|317|57|317|57|141d456b03124abca146e58e4ae15825fdd040bb|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|13|112|13|112|decaf649532f1148f5071c2070b99d4e28986150|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|18|160|18|160|d7344cff0074353f10626fbe36707360e8ffd52c|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|20|150|20|150|d07a2c2968b7c337172eb3d189fcd004f05034d7|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|38|69|38|69|b5e82dc8693610f3eb52006adac6456b86fb5ff1|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|66|73|66|73|fc5db5638fa960219dcaac666df85bd49ae5ba39|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|88|77|88|77|9e5e50275cb198c163f5da82335957b69255ac1a|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|117|73|117|73|fc5db5638fa960219dcaac666df85bd49ae5ba39|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|140|73|140|73|4a9c1575e2a51a19d342f234cc41b045ea419ae3|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|161|73|161|73|40f0dc3732c554bb3f69d3d126263eb0a24f7738|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|175|112|175|112|d4947b819970cbee74170cd33c3067f75dde86d2|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|180|85|180|85|d7344cff0074353f10626fbe36707360e8ffd52c|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|194|64|194|64|6cb8968d67fbe25c46f1f963ad4f5564f51746f0|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|217|64|217|64|4432d73cb43005a6c5ab22362c8773f0f21d0ac4|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|228|68|228|68|3ae31e5d2f432b152768be816a2fc40803434382|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|235|183|235|183|b84f11a781130328997f76bd3ef2f3faa57a31d0|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|249|80|249|80|7fab1dccd9502d972b0b6f3fbbea8340483ada89|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|254|150|254|150|22c6e583ac81ee6f218414ee5f5271469891c114|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|259|141|259|141|69e5f19c951bf70e9e7eaa72ea2b784ab97c3dff|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|286|59|286|59|bb06a1edb1abab80686af224b1e77ff4cba9d604|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|297|112|297|112|044d2c50ef7e4765d1130fb40d620b90bae19174|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|302|85|302|85|d0601ba765735657d724123264ad81ccb959cd6b|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|308|55|308|55|b7fa34dcfcdeab84175766fab6106fe6659f53e7|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|338|32|338|32|b7ca157f62b1295d8f5839c8f5d33a6020bc98a8|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
add|ember-template-lint|no-action|345|57|345|57|141d456b03124abca146e58e4ae15825fdd040bb|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs
|
||||
|
|
|
|||
|
|
@ -1,304 +1,327 @@
|
|||
{{!-- template-lint-disable no-invalid-interactive --}}
|
||||
<div class="modal-body gh-ps-modal-body">
|
||||
<div class="flex pa0 flex-grow-1 gh-portal-settings" {{did-insert this.finishPreloading}}>
|
||||
<div class="modal-body gh-ps-modal-body modal-fullsettings modal-fullsettings-body ">
|
||||
<div class="flex pa0 flex-grow-1 gh-portal-settings gh-newsletters-labs" {{did-insert this.finishPreloading}}>
|
||||
{{#if this.isPreloading}}
|
||||
<GhLoadingSpinner />
|
||||
{{else}}
|
||||
<div class="gh-portal-settings-sidebar">
|
||||
<h2 class="gh-portal-settings-title">Portal settings</h2>
|
||||
<div class="gh-portal-form-wrapper">
|
||||
<fieldset class="gh-portal-settings-form">
|
||||
<div class="gh-portal-setting-section {{if (not-eq this.settings.membersSignupAccess "all") "disabled-overlay"}}" onclick={{action "switchPreviewPage" "signup"}}>
|
||||
<h3 class="gh-portal-setting-sectionheading gh-stripe-connect">Signup options
|
||||
{{#unless this.membersUtils.isStripeEnabled}}
|
||||
<button class="gh-btn gh-btn-link {{unless this.session.user.isAdmin "disabled"}}" type="button" {{on "click" (action "openStripeSettings")}}>Connect to Stripe</button>
|
||||
{{/unless}}
|
||||
</h3>
|
||||
<GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first mb0">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr3">
|
||||
<h4 class="gh-portal-setting-title">Display name in signup form</h4>
|
||||
</div>
|
||||
<div class="for-switch small">
|
||||
<label
|
||||
class="switch"
|
||||
for="signup-name-checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.settings.portalName}}
|
||||
id="signup-name-checkbox"
|
||||
name="signup-name-checkbox"
|
||||
disabled={{not-eq this.settings.membersSignupAccess "all"}}
|
||||
{{on "click" (action "togglePortalName" value="target.checked")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<div {{did-insert this.refreshAfterStripeConnected}}>
|
||||
{{#if this.showPortalTiers}}
|
||||
<div class="mb3 mt5">
|
||||
<h4 class="gh-portal-setting-title">Tiers available at signup</h4>
|
||||
</div>
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="free-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.membersUtils.isFreeChecked}}
|
||||
id="free-plan"
|
||||
name="free-plan"
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "free")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Free</p>
|
||||
</label>
|
||||
</div>
|
||||
{{#each this.products as |product|}}
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for={{product.id}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={{product.id}}
|
||||
name={{product.id}}
|
||||
checked={{product.checked}}
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "toggleProduct" product.id)}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>{{product.name}}</p>
|
||||
</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
{{#if this.showPortalPrices}}
|
||||
<div class="mb3 {{if (and (feature "multipleProducts") this.showPortalTiers) "mt5" ""}}">
|
||||
<h4 class="gh-portal-setting-title">Prices available at signup</h4>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#unless this.showPortalTiers}}
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="free-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.membersUtils.isFreeChecked}}
|
||||
id="free-plan"
|
||||
name="free-plan"
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "free")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Free</p>
|
||||
</label>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{#if this.showPortalPrices}}
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="monthly-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="monthly-plan"
|
||||
name="monthly-plan"
|
||||
checked={{this.isMonthlyChecked}}
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "monthly")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Monthly</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="yearly-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="yearly-plan"
|
||||
name="yearly-plan"
|
||||
checked={{this.isYearlyChecked}}
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "yearly")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Yearly</p>
|
||||
</label>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-portal-setting-section" onclick={{action "switchPreviewPage" "signup"}}>
|
||||
<h3 class="gh-portal-setting-sectionheading">Look & feel</h3>
|
||||
<GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="gh-portal-setting-title">Show Portal button</h4>
|
||||
<div class="for-switch small">
|
||||
<label
|
||||
class="switch"
|
||||
for="portal-button-checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.settings.portalButton}}
|
||||
id="portal-button-checkbox"
|
||||
name="portal-button-checkbox"
|
||||
onclick={{action "togglePortalButton" value="target.checked"}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{#if this.settings.portalButton}}
|
||||
<div class="mt5">
|
||||
<GhFormGroup @classNames="space-l">
|
||||
<h4 class="gh-portal-setting-title mb1">Portal button style</h4>
|
||||
<span
|
||||
class="gh-select mt2"
|
||||
data-select-text="test"
|
||||
tabindex="0"
|
||||
>
|
||||
<OneWaySelect
|
||||
@id="portal-button-style"
|
||||
@name="portal[button-style]"
|
||||
@options={{this.buttonStyleOptions}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@value={{this.selectedButtonStyle}}
|
||||
@update={{action "setButtonStyle"}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</GhFormGroup>
|
||||
{{#if this.showIconSetting}}
|
||||
<GhFormGroup @classNames="space-l">
|
||||
<h4 class="gh-portal-setting-title">Icon</h4>
|
||||
<GhUploader
|
||||
@extensions={{this.iconExtensions}}
|
||||
@paramsHash={{hash purpose="image"}}
|
||||
@onComplete={{action "imageUploaded" "buttonIcon"}}
|
||||
as
|
||||
|uploader|
|
||||
>
|
||||
<div class="flex items-center justify-between mt2 br3 ba b--whitegrey bg-white">
|
||||
<div class="gh-portal-settings-icons">
|
||||
{{#each this.membersUtils.defaultButtonIcons as |imgIcon| }}
|
||||
<span class="gh-portal-button-icon {{if (eq this.membersUtils.buttonIcon imgIcon.value) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon.value}}>
|
||||
{{svg-jar imgIcon.icon}}
|
||||
</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="flex gh-setting-action gh-portal-custom-icon">
|
||||
{{#if uploader.isUploading}}
|
||||
<div class="gh-portal-button-icon">
|
||||
<div class="gh-loading-spinner"></div>
|
||||
</div>
|
||||
{{else if this.customIcon}}
|
||||
<img
|
||||
class="gh-portal-button-icon gh-portal-button-custom {{if (eq this.membersUtils.buttonIcon this.customIcon) "selected-icon"}}"
|
||||
src="{{this.customIcon}}"
|
||||
onclick={{action "selectDefaultIcon" this.customIcon}}
|
||||
alt="icon"
|
||||
data-test-icon-img
|
||||
>
|
||||
{{#if (eq this.membersUtils.buttonIcon this.customIcon)}}
|
||||
<button type="button" class="gh-btn gh-btn-hover-red gh-portal-button-deleteicon" {{action "deleteCustomIcon"}}>
|
||||
<span> {{svg-jar "trash" class="w5 h5"}} </span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn gh-portal-button-uploadicon" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon" data-tooltip="Upload icon">
|
||||
<span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
|
||||
</button>
|
||||
<div style="display:none">
|
||||
<GhFileInput
|
||||
@multiple={{false}}
|
||||
@action={{uploader.setFiles}}
|
||||
@accept={{this.iconMimeTypes}}
|
||||
data-test-file-input="icon"
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-portal-settings-sidebar modal-fullsettings-sidebar-labs">
|
||||
<h2 class="modal-fullsettings-heading-labs gh-portal-settings-title">Portal settings</h2>
|
||||
<div class="modal-fullsettings-body-labs">
|
||||
<fieldset class="modal-fullsettings-form-labs">
|
||||
<div class="modal-fullsettings-section-labs">
|
||||
{{#let (eq this.openSection "signup-options") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "signup-options"}}>
|
||||
{{svg-jar "credit-card"}} Signup options
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded {{if (not-eq this.settings.membersSignupAccess "all") "disabled-overlay"}}" onclick={{action "switchPreviewPage" "signup"}}>
|
||||
{{#unless this.membersUtils.isStripeEnabled}}
|
||||
<button class="gh-btn gh-btn-link {{unless this.session.user.isAdmin "disabled"}}" type="button" {{on "click" (action "openStripeSettings")}}>Connect to Stripe</button>
|
||||
{{/unless}}
|
||||
<GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first mb0">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr3">
|
||||
<h4 class="gh-portal-setting-title">Display name in signup form</h4>
|
||||
</div>
|
||||
</GhUploader>
|
||||
|
||||
<div class="for-switch small">
|
||||
<label
|
||||
class="switch"
|
||||
for="signup-name-checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.settings.portalName}}
|
||||
id="signup-name-checkbox"
|
||||
name="signup-name-checkbox"
|
||||
disabled={{not-eq this.settings.membersSignupAccess "all"}}
|
||||
{{on "click" (action "togglePortalName" value="target.checked")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.showButtonTextSetting}}
|
||||
<GhFormGroup @classNames="space-l">
|
||||
<h4 class="gh-portal-setting-title">Signup button text</h4>
|
||||
|
||||
<div class="flex items-center mt2">
|
||||
<GhTextInput
|
||||
@value={{readonly this.settings.portalButtonSignupText}}
|
||||
@type="text"
|
||||
@input={{action "setSignupButtonText"}}
|
||||
/>
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<div {{did-insert this.refreshAfterStripeConnected}}>
|
||||
{{#if this.showPortalTiers}}
|
||||
<div class="mb3 mt5">
|
||||
<h4 class="gh-portal-setting-title">Tiers available at signup</h4>
|
||||
</div>
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="free-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.membersUtils.isFreeChecked}}
|
||||
id="free-plan"
|
||||
name="free-plan"
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "free")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Free</p>
|
||||
</label>
|
||||
</div>
|
||||
{{#each this.products as |product|}}
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for={{product.id}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={{product.id}}
|
||||
name={{product.id}}
|
||||
checked={{product.checked}}
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "toggleProduct" product.id)}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>{{product.name}}</p>
|
||||
</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
{{#if this.showPortalPrices}}
|
||||
<div class="mb3 {{if (and (feature "multipleProducts") this.showPortalTiers) "mt5" ""}}">
|
||||
<h4 class="gh-portal-setting-title">Prices available at signup</h4>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#unless this.showPortalTiers}}
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="free-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.membersUtils.isFreeChecked}}
|
||||
id="free-plan"
|
||||
name="free-plan"
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "free")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Free</p>
|
||||
</label>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{#if this.showPortalPrices}}
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="monthly-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="monthly-plan"
|
||||
name="monthly-plan"
|
||||
checked={{this.isMonthlyChecked}}
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "monthly")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Monthly</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group mb0 for-checkbox">
|
||||
<label
|
||||
class="checkbox"
|
||||
for="yearly-plan"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="yearly-plan"
|
||||
name="yearly-plan"
|
||||
checked={{this.isYearlyChecked}}
|
||||
disabled={{or
|
||||
(not this.membersUtils.isStripeEnabled)
|
||||
(not-eq this.settings.membersSignupAccess "all")
|
||||
}}
|
||||
class="gh-input post-settings-featured"
|
||||
{{on "click" (action "togglePlan" "yearly")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Yearly</p>
|
||||
</label>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
|
||||
<div class="gh-portal-setting-section" onclick={{action "switchPreviewPage" "accountHome"}}>
|
||||
<h3 class="gh-portal-setting-sectionheading">Account page settings</h3>
|
||||
<GhFormGroup @classNames="space-l mt5">
|
||||
<h4 class="gh-portal-setting-title">Support email address</h4>
|
||||
<div class="mt2">
|
||||
<GhTextInput
|
||||
@value={{readonly this.supportAddress}}
|
||||
@input={{action "setSupportAddress" value="target.value"}}
|
||||
/>
|
||||
<GhTaskButton
|
||||
@buttonText="Update support address"
|
||||
@runningText="Sending..."
|
||||
@successText="Confirmation email sent"
|
||||
@disabled={{this.disableUpdateSupportAddressButton}}
|
||||
@task={{this.updateSupportAddress}}
|
||||
@class="gh-btn gh-btn-green gh-btn-icon gh-btn-textfield-group gh-portal-emailupdate-button"
|
||||
data-test-button="update-support-address"
|
||||
/>
|
||||
</div>
|
||||
<p>How members can reach you for help with their account (public)</p>
|
||||
</GhFormGroup>
|
||||
{{#let (eq this.openSection "look-and-feel") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "look-and-feel"}}>
|
||||
{{svg-jar "paintbrush"}} Look & feel
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded" onclick={{action "switchPreviewPage" "signup"}}>
|
||||
<GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="gh-portal-setting-title">Show Portal button</h4>
|
||||
<div class="for-switch small">
|
||||
<label
|
||||
class="switch"
|
||||
for="portal-button-checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.settings.portalButton}}
|
||||
id="portal-button-checkbox"
|
||||
name="portal-button-checkbox"
|
||||
onclick={{action "togglePortalButton" value="target.checked"}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{#if this.settings.portalButton}}
|
||||
<div class="mt5">
|
||||
<GhFormGroup @classNames="space-l">
|
||||
<h4 class="gh-portal-setting-title mb1">Portal button style</h4>
|
||||
<span
|
||||
class="gh-select mt2"
|
||||
data-select-text="test"
|
||||
tabindex="0"
|
||||
>
|
||||
<OneWaySelect
|
||||
@id="portal-button-style"
|
||||
@name="portal[button-style]"
|
||||
@options={{this.buttonStyleOptions}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@value={{this.selectedButtonStyle}}
|
||||
@update={{action "setButtonStyle"}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</GhFormGroup>
|
||||
{{#if this.showIconSetting}}
|
||||
<GhFormGroup @classNames="space-l">
|
||||
<h4 class="gh-portal-setting-title">Icon</h4>
|
||||
<GhUploader
|
||||
@extensions={{this.iconExtensions}}
|
||||
@paramsHash={{hash purpose="image"}}
|
||||
@onComplete={{action "imageUploaded" "buttonIcon"}}
|
||||
as
|
||||
|uploader|
|
||||
>
|
||||
<div class="flex items-center justify-between mt2 br3 ba b--whitegrey bg-white">
|
||||
<div class="gh-portal-settings-icons">
|
||||
{{#each this.membersUtils.defaultButtonIcons as |imgIcon| }}
|
||||
<span class="gh-portal-button-icon {{if (eq this.membersUtils.buttonIcon imgIcon.value) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon.value}}>
|
||||
{{svg-jar imgIcon.icon}}
|
||||
</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="flex gh-setting-action gh-portal-custom-icon">
|
||||
{{#if uploader.isUploading}}
|
||||
<div class="gh-portal-button-icon">
|
||||
<div class="gh-loading-spinner"></div>
|
||||
</div>
|
||||
{{else if this.customIcon}}
|
||||
<img
|
||||
class="gh-portal-button-icon gh-portal-button-custom {{if (eq this.membersUtils.buttonIcon this.customIcon) "selected-icon"}}"
|
||||
src="{{this.customIcon}}"
|
||||
onclick={{action "selectDefaultIcon" this.customIcon}}
|
||||
alt="icon"
|
||||
data-test-icon-img
|
||||
>
|
||||
{{#if (eq this.membersUtils.buttonIcon this.customIcon)}}
|
||||
<button type="button" class="gh-btn gh-btn-hover-red gh-portal-button-deleteicon" {{action "deleteCustomIcon"}}>
|
||||
<span> {{svg-jar "trash" class="w5 h5"}} </span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn gh-portal-button-uploadicon" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon" data-tooltip="Upload icon">
|
||||
<span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
|
||||
</button>
|
||||
<div style="display:none">
|
||||
<GhFileInput
|
||||
@multiple={{false}}
|
||||
@action={{uploader.setFiles}}
|
||||
@accept={{this.iconMimeTypes}}
|
||||
data-test-file-input="icon"
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.showButtonTextSetting}}
|
||||
<GhFormGroup @classNames="space-l">
|
||||
<h4 class="gh-portal-setting-title">Signup button text</h4>
|
||||
|
||||
<div class="flex items-center mt2">
|
||||
<GhTextInput
|
||||
@value={{readonly this.settings.portalButtonSignupText}}
|
||||
@type="text"
|
||||
@input={{action "setSignupButtonText"}}
|
||||
/>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
|
||||
{{#let (eq this.openSection "account-page") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "account-page"}}>
|
||||
{{svg-jar "members"}} Account page settings
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded" onclick={{action "switchPreviewPage" "accountHome"}}>
|
||||
<GhFormGroup @classNames="space-l mt5">
|
||||
<h4 class="gh-portal-setting-title">Support email address</h4>
|
||||
<div class="mt2">
|
||||
<GhTextInput
|
||||
@value={{readonly this.supportAddress}}
|
||||
@input={{action "setSupportAddress" value="target.value"}}
|
||||
/>
|
||||
<GhTaskButton
|
||||
@buttonText="Update support address"
|
||||
@runningText="Sending..."
|
||||
@successText="Confirmation email sent"
|
||||
@disabled={{this.disableUpdateSupportAddressButton}}
|
||||
@task={{this.updateSupportAddress}}
|
||||
@class="gh-btn gh-btn-green gh-btn-icon gh-btn-textfield-group gh-portal-emailupdate-button"
|
||||
data-test-button="update-support-address"
|
||||
/>
|
||||
</div>
|
||||
<p>How members can reach you for help with their account (public)</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
@ -306,10 +329,15 @@
|
|||
<div class="gh-portal-settings-main">
|
||||
<div class="gh-portal-settings-previewheader">
|
||||
|
||||
<div class="gh-btn-group">
|
||||
<a class="gh-btn {{if (eq this.page "signup") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page"><span>Signup</span></a>
|
||||
<a class="gh-btn {{if (eq this.page "accountHome") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page"><span>Account</span></a>
|
||||
<a class="gh-btn {{if this.showLinksPage "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page"><span>Links</span></a>
|
||||
<div class="gh-select gh-preview-page-selector">
|
||||
<OneWaySelect
|
||||
@value={{this.page}}
|
||||
@options={{this.availablePages}}
|
||||
@optionValuePath="name"
|
||||
@optionLabelPath="label"
|
||||
@update={{action "switchPreviewPage"}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</div>
|
||||
|
||||
<div class="gh-portal-settings-actions">
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export default ModalComponent.extend({
|
|||
showLeaveSettingsModal: false,
|
||||
isPreloading: true,
|
||||
changedProducts: null,
|
||||
openSection: null,
|
||||
portalPreviewGuid: 'modal-portal-settings',
|
||||
|
||||
confirm() {},
|
||||
|
|
@ -135,6 +136,16 @@ export default ModalComponent.extend({
|
|||
{name: 'icon-only', label: 'Icon only'},
|
||||
{name: 'text-only', label: 'Text only'}
|
||||
];
|
||||
this.availablePages = [{
|
||||
name: 'signup',
|
||||
label: 'Signup'
|
||||
}, {
|
||||
name: 'accountHome',
|
||||
label: 'Account'
|
||||
}, {
|
||||
name: 'links',
|
||||
label: 'Links'
|
||||
}];
|
||||
this.iconExtensions = ICON_EXTENSIONS;
|
||||
this.changedProducts = [];
|
||||
this.set('supportAddress', this.parseEmailAddress(this.settings.get('membersSupportAddress')));
|
||||
|
|
@ -162,6 +173,13 @@ export default ModalComponent.extend({
|
|||
togglePortalName(showSignupName) {
|
||||
this.settings.set('portalName', showSignupName);
|
||||
},
|
||||
toggleSection(section) {
|
||||
if (this.get('openSection') === section) {
|
||||
this.set('openSection', null);
|
||||
} else {
|
||||
this.set('openSection', section);
|
||||
}
|
||||
},
|
||||
|
||||
confirm() {
|
||||
return this.saveTask.perform();
|
||||
|
|
@ -173,12 +191,12 @@ export default ModalComponent.extend({
|
|||
},
|
||||
|
||||
switchPreviewPage(page) {
|
||||
if (page === 'links') {
|
||||
if (page.name === 'links') {
|
||||
this.set('showLinksPage', true);
|
||||
this.set('page', '');
|
||||
} else {
|
||||
this.set('showLinksPage', false);
|
||||
this.set('page', page);
|
||||
this.set('page', page.name);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,48 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-body modal-fullsettings">
|
||||
<div class="modal-fullsettings-body gh-newsletters-labs">
|
||||
<div class="modal-fullsettings-sidebar">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="modal-fullsettings-heading">
|
||||
{{if @data.newsletter.isNew "Create" "Edit"}} newsletter
|
||||
</h2>
|
||||
<div class="gh-btn-group">
|
||||
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "settings") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "settings")}}><span>Settings</span></button>
|
||||
<button type="button" class="gh-btn gh-btn-icon {{if (eq this.tab "design") "gh-btn-group-selected"}}" {{on "click" (fn this.changeTab "design")}}><span>Design</span></button>
|
||||
<div class="modal-fullsettings-sidebar-labs">
|
||||
<h2 class="modal-fullsettings-heading-labs">
|
||||
{{if @data.newsletter.isNew "Create" "Edit"}} newsletter
|
||||
</h2>
|
||||
<div class="modal-fullsettings-body-labs">
|
||||
<div class="modal-fullsettings-top">
|
||||
<Modals::Newsletters::Edit::Settings @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
|
||||
<Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
|
||||
</div>
|
||||
<div class="modal-fullsettings-bottom">
|
||||
<div class="modal-fullsettings-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={{@data.newsletter.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>
|
||||
|
||||
{{#if (eq this.tab "settings")}}
|
||||
<Modals::Newsletters::Edit::Settings
|
||||
@newsletter={{@data.newsletter}}
|
||||
/>
|
||||
{{else}}
|
||||
<Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} />
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="modal-fullsettings-main">
|
||||
<div class="modal-fullsettings-main-topbar">
|
||||
<div class="modal-fullsettings-main-topbar-labs">
|
||||
<button class="gh-btn mr3" type="button" {{on "click" @close}}>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -12,18 +12,13 @@ export default class EditNewsletterModal extends Component {
|
|||
className: 'fullscreen-modal-full-overlay fullscreen-modal-portal-settings'
|
||||
};
|
||||
|
||||
@tracked tab = 'settings';
|
||||
@tracked openSection = null;
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
this.args.data.newsletter.rollbackAttributes();
|
||||
}
|
||||
|
||||
@action
|
||||
changeTab(tab) {
|
||||
this.tab = tab;
|
||||
}
|
||||
|
||||
@action
|
||||
saveViaKeyboard(event, responder) {
|
||||
responder.stopPropagation();
|
||||
|
|
@ -32,6 +27,20 @@ export default class EditNewsletterModal extends Component {
|
|||
this.saveTask.perform();
|
||||
}
|
||||
|
||||
@action
|
||||
toggleSection(section) {
|
||||
if (this.openSection === section) {
|
||||
this.openSection = null;
|
||||
} else {
|
||||
this.openSection = section;
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
toggleSetting(property, event) {
|
||||
this.args.data.newsletter[property] = event.target.checked;
|
||||
}
|
||||
|
||||
@task
|
||||
*saveTask() {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -1,185 +1,191 @@
|
|||
<div>
|
||||
<fieldset class="modal-fullsettings-form">
|
||||
<div class="modal-fullsettings-section first">
|
||||
<h3 class="gh-newsletters-setting-sectionheading">Header</h3>
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@paramsHash={{hash purpose="image"}}
|
||||
@onComplete={{fn this.imageUploaded "headerImage"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="modal-fullsettings-uploader">
|
||||
<div class="gh-header-img-desc">
|
||||
<h4 class="modal-fullsettings-title">Header image</h4>
|
||||
<p>Optional, recommended size 1200x600</p>
|
||||
</div>
|
||||
{{#if uploader.isUploading}}
|
||||
<div class="gh-header-img-container">
|
||||
<div class="gh-loading-spinner"></div>
|
||||
</div>
|
||||
{{else if @newsletter.headerImage}}
|
||||
<div class="gh-header-img">
|
||||
<img
|
||||
class="gh-header-img-thumbnail"
|
||||
src={{@newsletter.headerImage}}
|
||||
alt=""
|
||||
role="presentation"
|
||||
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" {{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>
|
||||
<fieldset class="modal-fullsettings-form-labs">
|
||||
<h4 class="modal-fullsettings-section-title">Design</h4>
|
||||
|
||||
<div class="modal-fullsettings-section-labs">
|
||||
|
||||
{{#let (eq @openSection "design-header") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-header")}} data-test-nav-toggle="general">
|
||||
{{svg-jar "email-header"}} Header
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded">
|
||||
<div class="gh-stack">
|
||||
<GhFormGroup @classNames="gh-stack-item gh-setting">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@paramsHash={{hash purpose="image"}}
|
||||
@onComplete={{fn this.imageUploaded "headerImage"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="modal-fullsettings-uploader">
|
||||
<div class="gh-header-img-desc">
|
||||
<label class="modal-fullsettings-title">Header image</label>
|
||||
<p>Optional, recommended size 1200x600</p>
|
||||
</div>
|
||||
{{#if uploader.isUploading}}
|
||||
<div class="gh-header-img-container">
|
||||
<div class="gh-loading-spinner"></div>
|
||||
</div>
|
||||
{{else if @newsletter.headerImage}}
|
||||
<div class="gh-header-img">
|
||||
<img
|
||||
class="gh-header-img-thumbnail"
|
||||
src={{@newsletter.headerImage}}
|
||||
alt=""
|
||||
role="presentation"
|
||||
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" {{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>
|
||||
</GhUploader>
|
||||
</GhFormGroup>
|
||||
|
||||
{{#if this.settings.icon}}
|
||||
<GhFormGroup @classNames="gh-stack-item gh-setting">
|
||||
<label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
|
||||
<div class="for-switch small {{unless this.settings.icon "disabled"}}">
|
||||
<label class="switch" for="show-header">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{and @newsletter.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>
|
||||
{{/if}}
|
||||
</div>
|
||||
</GhUploader>
|
||||
</GhFormGroup>
|
||||
|
||||
{{#if this.settings.icon}}
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</h4>
|
||||
<div class="for-switch small {{unless this.settings.icon "disabled"}}">
|
||||
<label class="switch" for="show-header">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{and @newsletter.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>
|
||||
{{/if}}
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title">Publication title</h4>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-title">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{@newsletter.showHeaderTitle}}
|
||||
id="show-title"
|
||||
name="show-title"
|
||||
{{on "click" (fn this.toggleSetting "showHeaderTitle")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title">Newsletter name</h4>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-header-name">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{@newsletter.showHeaderName}}
|
||||
id="show-header-name"
|
||||
name="show-header-name"
|
||||
{{on "click" (fn this.toggleSetting "showHeaderName")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="modal-fullsettings-section">
|
||||
<h3 class="gh-newsletters-setting-sectionheading">Body</h3>
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<h4 class="modal-fullsettings-title gh-email-design-alignment">Title style</h4>
|
||||
<div class="gh-email-design-typography-wrapper header">
|
||||
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
|
||||
<GhFontSelector
|
||||
@selected={{@newsletter.titleFontCategory}}
|
||||
@onChange={{fn this.changeSetting "titleFontCategory"}}
|
||||
/>
|
||||
</div>
|
||||
<div class="gh-btn-group icons">
|
||||
<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 @classNames="gh-stack-item gh-setting">
|
||||
<label class="modal-fullsettings-title">Publication title</label>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-title">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{@newsletter.showHeaderTitle}}
|
||||
id="show-title"
|
||||
name="show-title"
|
||||
{{on "click" (fn this.toggleSetting "showHeaderTitle")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @classNames="gh-stack-item gh-setting">
|
||||
<label class="modal-fullsettings-title">Newsletter name</label>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-header-name">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{@newsletter.showHeaderName}}
|
||||
id="show-header-name"
|
||||
name="show-header-name"
|
||||
{{on "click" (fn this.toggleSetting "showHeaderName")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<h4 class="modal-fullsettings-title">Body style</h4>
|
||||
<div class="gh-email-design-typography-wrapper">
|
||||
<div class="modal-fullsettings-radiogroup gh-email-design-typography">
|
||||
<GhFontSelector
|
||||
@selected={{@newsletter.bodyFontCategory}}
|
||||
@onChange={{fn this.changeSetting "bodyFontCategory"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<h4 class="modal-fullsettings-title">Feature image</h4>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-feature-image">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{@newsletter.showFeatureImage}}
|
||||
id="show-feature-image"
|
||||
name="show-feature-image"
|
||||
{{on "click" (fn this.toggleSetting "showFeatureImage")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
|
||||
<div class="modal-fullsettings-section">
|
||||
<h3 class="gh-newsletters-setting-sectionheading">Footer</h3>
|
||||
<GhFormGroup @classNames="vertical">
|
||||
<label class="modal-fullsettings-title">Email footer</label>
|
||||
<KoenigBasicHtmlInput
|
||||
@name="footer"
|
||||
@html={{@newsletter.footerContent}}
|
||||
@class="miw-100 form-text gh-members-emailsettings-footer-input"
|
||||
@onChange={{fn this.changeSetting "footerContent"}}
|
||||
/>
|
||||
<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={{@newsletter.showBadge}}
|
||||
id="promote-ghost"
|
||||
name="promote-ghost"
|
||||
{{on "click" (fn this.toggleSetting "showBadge")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{#let (eq @openSection "design-body") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-body")}} data-test-nav-toggle="general">
|
||||
{{svg-jar "email-body"}} Body
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded">
|
||||
<div class="gh-stack">
|
||||
<GhFormGroup @classNames="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">
|
||||
<GhFontSelector
|
||||
@selected={{@newsletter.titleFontCategory}}
|
||||
@onChange={{fn this.changeSetting "titleFontCategory"}}
|
||||
/>
|
||||
</div>
|
||||
<div class="gh-btn-group icons">
|
||||
<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>
|
||||
<GhFormGroup @classNames="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">
|
||||
<GhFontSelector
|
||||
@selected={{@newsletter.bodyFontCategory}}
|
||||
@onChange={{fn this.changeSetting "bodyFontCategory"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @classNames="gh-stack-item gh-setting">
|
||||
<label class="modal-fullsettings-title">Feature image</label>
|
||||
<div class="for-switch small">
|
||||
<label class="switch" for="show-feature-image">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{@newsletter.showFeatureImage}}
|
||||
id="show-feature-image"
|
||||
name="show-feature-image"
|
||||
{{on "click" (fn this.toggleSetting "showFeatureImage")}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
|
||||
{{#let (eq @openSection "design-footer") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-footer")}} data-test-nav-toggle="general">
|
||||
{{svg-jar "email-footer"}} Footer
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded">
|
||||
<div class="gh-stack">
|
||||
<GhFormGroup @classNames="gh-stack-item">
|
||||
<label class="modal-fullsettings-title">Email footer</label>
|
||||
<KoenigBasicHtmlInput
|
||||
@name="footer"
|
||||
@html={{@newsletter.footerContent}}
|
||||
@class="miw-100 form-text gh-members-emailsettings-footer-input"
|
||||
@onChange={{fn this.changeSetting "footerContent"}}
|
||||
/>
|
||||
<p>Any extra information or legal text</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="modal-fullsettings-preview-container gh-members-emailpreview">
|
||||
<div class="modal-fullsettings-preview-container-labs gh-members-emailpreview">
|
||||
<div class="gh-members-emailpreview-container">
|
||||
<div class="gh-members-emailpreview-faux">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,122 @@
|
|||
<div>
|
||||
<fieldset class="modal-fullsettings-form">
|
||||
<div class="modal-fullsettings-section first">
|
||||
<h3 class="gh-newsletters-setting-sectionheading">General</h3>
|
||||
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="name">
|
||||
<label for="newsletter-title" class="modal-fullsettings-title">Name</label>
|
||||
<input
|
||||
id="newsletter-title"
|
||||
type="text"
|
||||
class="gh-input miw-100 form-text"
|
||||
value={{@newsletter.name}}
|
||||
placeholder="Weekly Roundup"
|
||||
{{on "input" (fn this.onInput "name")}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="name" />
|
||||
</GhFormGroup>
|
||||
<fieldset class="modal-fullsettings-form-labs">
|
||||
<div class="modal-fullsettings-section-labs">
|
||||
<h4 class="modal-fullsettings-section-title">General settings</h4>
|
||||
|
||||
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="description">
|
||||
<label for="newsletter-description" class="modal-fullsettings-title">Description</label>
|
||||
<textarea
|
||||
id="newsletter-description"
|
||||
class="gh-input miw-100 form-text"
|
||||
{{on "input" (fn this.onInput "description")}}
|
||||
>{{@newsletter.description}}</textarea>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="description" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{#let (eq @openSection "name") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "name")}} data-test-nav-toggle="general">
|
||||
{{svg-jar "email-name"}} Name and description
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded">
|
||||
<div class="gh-stack">
|
||||
<GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="name">
|
||||
<label for="newsletter-title" class="modal-fullsettings-title">Name</label>
|
||||
<input
|
||||
id="newsletter-title"
|
||||
type="text"
|
||||
class="gh-input miw-100 form-text"
|
||||
value={{@newsletter.name}}
|
||||
placeholder="Weekly Roundup"
|
||||
{{on "input" (fn this.onInput "name")}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="name" />
|
||||
</GhFormGroup>
|
||||
|
||||
<div class="modal-fullsettings-section">
|
||||
<h3 class="gh-newsletters-setting-sectionheading">Email addresses</h3>
|
||||
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderName">
|
||||
<label for="newsletter-sender-name" class="modal-fullsettings-title">Sender name</label>
|
||||
<input
|
||||
id="newsletter-sender-name"
|
||||
type="text"
|
||||
class="gh-input miw-100 form-text"
|
||||
value={{@newsletter.senderName}}
|
||||
placeholder={{this.settings.title}}
|
||||
{{on "input" (fn this.onInput "senderName")}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="senderName" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderEmail">
|
||||
<span class="flex items-center justify-between">
|
||||
<label for="newsletter-sender-email" class="modal-fullsettings-title ml2">Newsletter email address</label>
|
||||
<span class="tooltip-top-left" data-tooltip="Defaults to {{full-email-address "noreply"}} if empty">{{svg-jar "info" class="fill-darkgrey w4 h4"}}</span>
|
||||
</span>
|
||||
<input
|
||||
id="newsletter-sender-email"
|
||||
type="text"
|
||||
class="gh-input miw-100 form-text"
|
||||
value={{@newsletter.senderEmail}}
|
||||
placeholder={{full-email-address "noreply"}}
|
||||
{{on "input" (fn this.onInput "senderEmail")}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="senderEmail" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderReplyTo">
|
||||
<label for="newsletter-reply-to" class="modal-fullsettings-title">Reply-to email</label>
|
||||
<Inputs::Select
|
||||
id="newsletter-reply-to"
|
||||
@value={{@newsletter.senderReplyTo}}
|
||||
@onChange={{fn this.onValueChange "senderReplyTo"}}
|
||||
as |select|
|
||||
>
|
||||
<select.option @value="newsletter">Newsletter address ({{full-email-address (or @newsletter.senderEmail "noreply")}})</select.option>
|
||||
<select.option @value="support">Support address ({{full-email-address this.settings.membersSupportAddress}})</select.option>
|
||||
</Inputs::Select>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="senderReplyTo" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
|
||||
<div class="modal-fullsettings-section">
|
||||
<h3 class="gh-newsletters-setting-sectionheading">Member settings</h3>
|
||||
<GhFormGroup>
|
||||
<label for="subscribe-on-signup" class="modal-fullsettings-title">Subscribe new members on signup</label>
|
||||
<div class="for-switch small">
|
||||
<div class="container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="subscribe-on-signup"
|
||||
checked={{@newsletter.subscribeOnSignup}}
|
||||
{{on "change" (fn this.onCheckboxChange "subscribeOnSignup")}}
|
||||
>
|
||||
<button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "subscribeOnSignup")}}></button>
|
||||
<GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="description">
|
||||
<label for="newsletter-description" class="modal-fullsettings-title">Description</label>
|
||||
<textarea
|
||||
id="newsletter-description"
|
||||
class="gh-input miw-100 form-text"
|
||||
{{on "input" (fn this.onInput "description")}}
|
||||
>{{@newsletter.description}}</textarea>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="description" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
|
||||
{{#let (eq @openSection "email") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "email")}} data-test-nav-toggle="general">
|
||||
{{svg-jar "email-at"}} Email addresses
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded">
|
||||
<div class="gh-stack">
|
||||
<GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderName">
|
||||
<label for="newsletter-sender-name" class="modal-fullsettings-title">Sender name</label>
|
||||
<input
|
||||
id="newsletter-sender-name"
|
||||
type="text"
|
||||
class="gh-input miw-100 form-text"
|
||||
value={{@newsletter.senderName}}
|
||||
placeholder={{this.settings.title}}
|
||||
{{on "input" (fn this.onInput "senderName")}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="senderName" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderEmail">
|
||||
<span class="flex items-center justify-between">
|
||||
<label for="newsletter-sender-email" class="modal-fullsettings-title ml2">Sender email address</label>
|
||||
<span class="tooltip-top-left" data-tooltip="Defaults to {{full-email-address "noreply"}} if empty">{{svg-jar "info" class="fill-darkgrey w4 h4"}}</span>
|
||||
</span>
|
||||
<input
|
||||
id="newsletter-sender-email"
|
||||
type="text"
|
||||
class="gh-input miw-100 form-text"
|
||||
value={{@newsletter.senderEmail}}
|
||||
placeholder={{full-email-address "noreply"}}
|
||||
{{on "input" (fn this.onInput "senderEmail")}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="senderEmail" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderReplyTo">
|
||||
<label for="newsletter-reply-to" class="modal-fullsettings-title">Reply-to email</label>
|
||||
<Inputs::Select
|
||||
id="newsletter-reply-to"
|
||||
@value={{@newsletter.senderReplyTo}}
|
||||
@onChange={{fn this.onValueChange "senderReplyTo"}}
|
||||
as |select|
|
||||
>
|
||||
<select.option @value="newsletter">Newsletter address ({{full-email-address (or @newsletter.senderEmail "noreply")}})</select.option>
|
||||
<select.option @value="support">Support address ({{full-email-address this.settings.membersSupportAddress}})</select.option>
|
||||
</Inputs::Select>
|
||||
<GhErrorMessage @errors={{@newsletter.errors}} @property="senderReplyTo" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
|
||||
{{#let (eq @openSection "members") as |isOpen|}}
|
||||
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "members")}} data-test-nav-toggle="general">
|
||||
{{svg-jar "email-member"}} Member settings
|
||||
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
||||
</button>
|
||||
{{#liquid-if isOpen}}
|
||||
<div class="modal-fullsettings-tab-expanded">
|
||||
<div class="gh-stack">
|
||||
<GhFormGroup @classNames="gh-stack-item gh-setting">
|
||||
<label for="subscribe-on-signup" class="modal-fullsettings-title">Subscribe new members on signup</label>
|
||||
<div class="for-switch small">
|
||||
<div class="container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="subscribe-on-signup"
|
||||
checked={{@newsletter.subscribeOnSignup}}
|
||||
{{on "change" (fn this.onCheckboxChange "subscribeOnSignup")}}
|
||||
>
|
||||
<button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "subscribeOnSignup")}}></button>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -591,3 +591,180 @@
|
|||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fullscreen Modal Labs
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal-fullsettings-sidebar-labs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-fullsettings-heading-labs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 32px;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-fullsettings-body-labs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.modal-fullsettings-section-labs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.modal-fullsettings-section-title {
|
||||
margin: 0 16px 4px;
|
||||
padding: 8px 16px;
|
||||
color: var(--black);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.modal-fullsettings-tab {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 7px var(--main-layout-area-padding);
|
||||
color: var(--darkgrey-l1);
|
||||
font-weight: 400;
|
||||
font-size: 1.45rem;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.modal-fullsettings-tab:hover {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.modal-fullsettings-tab.active {
|
||||
color: var(--black);
|
||||
font-weight: 400;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
.modal-fullsettings-tab:not(.active):hover {
|
||||
background: var(--mainmenu-color-hover-bg);
|
||||
}
|
||||
|
||||
.modal-fullsettings-form-labs .modal-fullsettings-tab svg {
|
||||
margin-right: 17px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 1;
|
||||
transition: none;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-fullsettings-tab-expanded {
|
||||
margin: 8px 0 24px;
|
||||
padding: 24px var(--main-layout-area-padding) 16px;
|
||||
background: var(--mainmenu-color-hover-bg);
|
||||
}
|
||||
|
||||
.modal-fullsettings-tab-expanded .gh-setting {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.modal-fullsettings-form-labs .for-checkbox .input-toggle-component {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.modal-fullsettings-form-labs .gh-nav-button-expand {
|
||||
position: relative;
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
margin: 0 8px 0 auto;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.modal-fullsettings-form-labs .gh-nav-button-expand svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.modal-fullsettings-main-topbar-labs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
padding: 2.4rem;
|
||||
}
|
||||
|
||||
.modal-fullsettings-preview-container-labs {
|
||||
overflow: hidden;
|
||||
background: var(--white);
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.modal-fullsettings-bottom {
|
||||
position: sticky;
|
||||
-webkit-position: sticky;
|
||||
bottom: -24px;
|
||||
z-index: 9997;
|
||||
height: 164px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.modal-fullsettings-bottom::before,
|
||||
.modal-fullsettings-bottom::after {
|
||||
content: "";
|
||||
position: sticky;
|
||||
-webkit-position: sticky;
|
||||
display: block;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.modal-fullsettings-bottom::before {
|
||||
z-index: 9998;
|
||||
bottom: 0;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.modal-fullsettings-bottom::after {
|
||||
bottom: 116px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 -8px 16px -3px rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
.modal-fullsettings-footer {
|
||||
position: sticky;
|
||||
-webkit-position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 140px;
|
||||
margin-bottom: -24px;
|
||||
padding: var(--main-layout-area-padding);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.modal-fullsettings-footer .form-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -1708,9 +1708,10 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
padding: 0;
|
||||
}
|
||||
.gh-members-emailsettings-footer-input {
|
||||
border: 1px solid var(--whitegrey-d1);
|
||||
padding: 0 12px 6px 12px;
|
||||
height: 120px;
|
||||
padding: 0 12px 6px 12px;
|
||||
border: 1px solid var(--whitegrey-d1);
|
||||
background: var(--white);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,12 +61,12 @@
|
|||
|
||||
.gh-portal-settings-sidebar {
|
||||
padding: 0;
|
||||
width: 380px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.gh-portal-form-wrapper {
|
||||
overflow: hidden;
|
||||
width: 380px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-form {
|
||||
|
|
@ -390,22 +390,15 @@
|
|||
}
|
||||
|
||||
.gh-portal-settings-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
margin: 0;
|
||||
height: 66px;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.1px;
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-previewheader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
height: 66px;
|
||||
height: 84px;
|
||||
padding: 0 24px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -416,26 +409,24 @@
|
|||
}
|
||||
|
||||
.gh-portal-settings-actions {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-preview-wrapper {
|
||||
overflow: hidden;
|
||||
max-height: calc(100vh - 60px - 66px);
|
||||
max-height: calc(100vh - 60px - 84px);
|
||||
height: 100%;
|
||||
background: #EDF0F2;
|
||||
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(249,249,250,1) 100%);
|
||||
}
|
||||
|
||||
.gh-portal-preview-container {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
background: #EDF0F2;
|
||||
max-height: calc(100vh - 60px - 66px);
|
||||
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(249,249,250,1) 100%);
|
||||
max-height: calc(100vh - 60px - 84px);
|
||||
}
|
||||
|
||||
.gh-portal-preview-wrapper .gh-portal-preview-container {
|
||||
|
|
@ -472,7 +463,8 @@
|
|||
}
|
||||
|
||||
.gh-portal-links-main h2 {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.gh-portal-links-main p {
|
||||
|
|
@ -634,4 +626,17 @@
|
|||
background: var(--whitegrey-d2) !important;
|
||||
color: var(--darkgrey) !important;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.gh-portal-settings-sidebar .modal-fullsettings-tab-expanded {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-previewheader .gh-preview-page-selector,
|
||||
.gh-portal-settings-previewheader .gh-preview-page-selector select {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-previewheader .gh-preview-page-selector svg {
|
||||
top: 16px;
|
||||
}
|
||||
|
|
@ -1043,10 +1043,6 @@
|
|||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .modal-fullsettings-sidebar {
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
.gh-newsletters-setting-sectionheading {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
|
|
@ -1058,32 +1054,46 @@
|
|||
border-bottom: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .modal-fullsettings-section {
|
||||
margin: 40px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .modal-fullsettings-section.first {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .form-group.vertical p {
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .modal-fullsettings-uploader {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .gh-header-img-uploadicon {
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .gh-email-design-typography-wrapper.header .gh-btn-group {
|
||||
background: var(--whitegrey-d1);
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .gh-members-emailsettings-footer {
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-fullsettings-main-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
padding: 2.4rem;
|
||||
.gh-newsletters-labs .gh-members-emailpreview-container {
|
||||
margin: 16px auto 32px;
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .gh-members-emailpreview-faux {
|
||||
height: 88px;
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .gh-members-emailpreview-faux .dark,
|
||||
.gh-newsletters-labs .gh-members-emailpreview-faux .strong {
|
||||
color: var(--darkgrey);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-newsletters-labs .gh-members-emailpreview-faux p {
|
||||
color: var(--midgrey-l2);
|
||||
}
|
||||
|
||||
/* Code injection
|
||||
|
|
@ -1718,7 +1728,6 @@ p.theme-validation-details {
|
|||
color: var(--darkgrey-l1);
|
||||
font-weight: 400;
|
||||
font-size: 1.45rem;
|
||||
border-radius: var(--border-radius);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
|
@ -1803,7 +1812,7 @@ p.theme-validation-details {
|
|||
.gh-nav-design .gh-nav-bottom::after {
|
||||
bottom: 72px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 -8px 16px -3px rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
|
||||
.gh-change-theme {
|
||||
position: sticky;
|
||||
|
|
@ -1841,7 +1850,6 @@ p.theme-validation-details {
|
|||
margin: 8px 0 24px;
|
||||
padding: 24px var(--main-layout-area-padding) 16px;
|
||||
background: var(--mainmenu-color-hover-bg);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.gh-nav-design .gh-setting {
|
||||
|
|
@ -1943,13 +1951,13 @@ p.theme-validation-details {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.gh-design-page-preview-mode,
|
||||
.gh-design-page-preview-mode select {
|
||||
.gh-preview-page-selector,
|
||||
.gh-preview-page-selector select {
|
||||
height: 34px;
|
||||
min-width: 128px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.gh-design-page-preview-mode svg {
|
||||
.gh-preview-page-selector svg {
|
||||
margin-top: -.1em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title">Site design</h2>
|
||||
<section class="view-actions">
|
||||
<div class="gh-select gh-design-page-preview-mode">
|
||||
<div class="gh-select gh-preview-page-selector">
|
||||
<OneWaySelect
|
||||
@value={{this.themeManagement.previewType}}
|
||||
@options={{this.themeManagement.availablePreviewTypes}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.126 14.3A7.032 7.032 0 1 1 15.032 8" stroke="#394047" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.001 11.124a3.125 3.125 0 1 0 0-6.25 3.125 3.125 0 0 0 0 6.25Z" stroke="#394047" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.126 8V9.17a1.953 1.953 0 0 0 3.906 0V8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 516 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 1.498h-13a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1ZM15.5 10.498h-13a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 342 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 15.002h12a1 1 0 0 0 1-1v-12a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1ZM15 11.002H1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 271 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 .998H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-12a1 1 0 0 0-1-1ZM1 4.998h14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.667 13.939a2.66 2.66 0 0 0-1.956-2.571c-1.263-.345-2.987-.701-4.711-.701-1.724 0-3.448.356-4.71.701a2.66 2.66 0 0 0-1.957 2.57v1.395h13.334V13.94ZM8 8A3.667 3.667 0 1 0 8 .667 3.667 3.667 0 0 0 8 8Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2h5.333M10 6h5.333M.667 10h14.666M.667 14h14.666" stroke="#394047" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.69 7.333v-.718l.756-.082-.332-.958H2.831l-.322.957.727.083v.718H.666v-.718l.406-.101c.11-.027.193-.065.23-.175L3.319.667h1.63l2.007 5.69c.037.111.11.129.22.157l.424.101v.718H4.69ZM4.02 2.075h-.056L3.116 4.58h1.722l-.82-2.505Z" fill="#394047"/></svg>
|
||||
|
After Width: | Height: | Size: 483 B |
Loading…
Reference in New Issue