191 lines
12 KiB
Handlebars
191 lines
12 KiB
Handlebars
<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}}
|
|
|
|
<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>
|
|
{{/liquid-if}}
|
|
{{/let}}
|
|
|
|
{{#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> |