2021-01-28 18:25:21 +03:00
|
|
|
<div class="modal-body gh-ps-modal-body">
|
|
|
|
|
<div class="gh-branding-settings-header">
|
|
|
|
|
<h4>Branding</h4>
|
|
|
|
|
<div class="gh-branding-settings-actions">
|
|
|
|
|
<a class="gh-btn gh-btn-blue" href="" role="button" title="Close" {{action "closeModal"}}><span>Save and close</span></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gh-branding-settings">
|
|
|
|
|
<section class="gh-branding-settings-options">
|
|
|
|
|
<div class="gh-stack">
|
|
|
|
|
<div class="gh-stack-item gh-setting-first" data-test-setting="icon">
|
|
|
|
|
<GhUploader
|
|
|
|
|
@extensions={{this.iconExtensions}}
|
|
|
|
|
@paramsHash={{hash purpose="icon"}}
|
|
|
|
|
@onComplete={{action "imageUploaded" "icon"}}
|
|
|
|
|
as |uploader|
|
|
|
|
|
>
|
|
|
|
|
<div class="gh-setting-content">
|
|
|
|
|
<div class="gh-setting-title">Publication icon</div>
|
|
|
|
|
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
|
|
|
|
|
{{#each uploader.errors as |error|}}
|
|
|
|
|
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
|
|
|
|
|
{{/each}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
|
|
|
|
|
{{#if uploader.isUploading}}
|
|
|
|
|
{{uploader.progressBar}}
|
|
|
|
|
{{else if this.settings.icon}}
|
|
|
|
|
<div class="gh-branding-image-container transparent-bg">
|
|
|
|
|
<img class="blog-icon" src="{{this.settings.icon}}" alt="icon" data-test-icon-img>
|
|
|
|
|
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "icon"}} data-test-delete-image="icon">
|
|
|
|
|
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{{else}}
|
|
|
|
|
<button type="button" class="gh-btn self-center" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
|
|
|
|
|
<span>Upload icon</span>
|
|
|
|
|
</button>
|
|
|
|
|
{{/if}}
|
|
|
|
|
<div style="display:none">
|
|
|
|
|
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.iconMimeTypes}} data-test-file-input="icon" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</GhUploader>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gh-stack-item gh-setting" data-test-setting="logo">
|
|
|
|
|
<GhUploader
|
|
|
|
|
@extensions={{this.imageExtensions}}
|
|
|
|
|
@onComplete={{action "imageUploaded" "logo"}}
|
|
|
|
|
as |uploader|
|
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="gh-setting-title">Publication logo</div>
|
|
|
|
|
<div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
|
|
|
|
|
|
|
|
|
|
<div class="gh-uploadbutton-container flex flex-column mt3">
|
|
|
|
|
{{#each uploader.errors as |error|}}
|
|
|
|
|
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
|
|
|
|
|
{{/each}}
|
|
|
|
|
{{#if uploader.isUploading}}
|
|
|
|
|
{{uploader.progressBar}}
|
|
|
|
|
{{else if this.settings.logo}}
|
2021-02-01 19:11:01 +03:00
|
|
|
<div class="gh-branding-image-container largeimg justify-center transparent-bg">
|
2021-01-28 18:25:21 +03:00
|
|
|
<img class="blog-logo" src="{{this.settings.logo}}" alt="logo" data-test-logo-img>
|
|
|
|
|
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "logo"}} data-test-delete-image="logo">
|
|
|
|
|
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{{else}}
|
|
|
|
|
<button type="button" class="gh-btn self-start" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="logo">
|
|
|
|
|
<span>Upload logo</span>
|
|
|
|
|
</button>
|
|
|
|
|
{{/if}}
|
|
|
|
|
<div style="display:none">
|
|
|
|
|
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</GhUploader>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gh-stack-item gh-setting" data-test-setting="coverImage">
|
|
|
|
|
<GhUploader
|
|
|
|
|
@extensions={{this.imageExtensions}}
|
|
|
|
|
@onComplete={{action "imageUploaded" "coverImage"}}
|
|
|
|
|
as |uploader|
|
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="gh-setting-title">Publication cover</div>
|
|
|
|
|
<div class="gh-setting-desc">An optional large background image for your site</div>
|
|
|
|
|
{{#each uploader.errors as |error|}}
|
|
|
|
|
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
|
|
|
|
|
{{/each}}
|
|
|
|
|
|
|
|
|
|
<div class="gh-uploadbutton-container flex flex-column mt3 items-stretch">
|
|
|
|
|
{{#if uploader.isUploading}}
|
|
|
|
|
{{uploader.progressBar}}
|
|
|
|
|
{{else if this.settings.coverImage}}
|
|
|
|
|
<div class="gh-branding-image-container largeimg">
|
|
|
|
|
<img class="blog-cover" src="{{this.settings.coverImage}}" alt="cover photo" data-test-cover-img>
|
|
|
|
|
<button type="button" class="gh-setting-action-largeimg-delete" {{action "removeImage" "coverImage"}} data-test-delete-image="coverImage">
|
|
|
|
|
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{{else}}
|
|
|
|
|
<button type="button" class="gh-btn self-start" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="coverImage">
|
|
|
|
|
<span>Upload cover</span>
|
|
|
|
|
</button>
|
|
|
|
|
{{/if}}
|
|
|
|
|
<div style="display:none">
|
|
|
|
|
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="coverImage" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</GhUploader>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gh-stack-item gh-setting-last">
|
|
|
|
|
<div class="gh-setting-content">
|
|
|
|
|
<div class="gh-setting-title">Accent color</div>
|
|
|
|
|
<div class="gh-setting-desc">Primary color used in your publication theme</div>
|
|
|
|
|
{{#each uploader.errors as |error|}}
|
|
|
|
|
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
|
|
|
|
|
{{/each}}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gh-setting-action" data-test-setting="accentColor">
|
|
|
|
|
<GhFormGroup
|
|
|
|
|
@errors={{this.settings.errors}}
|
|
|
|
|
@hasValidated={{this.settings.hasValidated}}
|
|
|
|
|
@property="accentColor"
|
|
|
|
|
@class="input-color-form-group"
|
|
|
|
|
>
|
|
|
|
|
<div class="input-color">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="abcdef"
|
|
|
|
|
name="accent-color"
|
|
|
|
|
autocorrect="off"
|
|
|
|
|
maxlength="6"
|
|
|
|
|
value={{this.accentColor}}
|
|
|
|
|
class="gh-input"
|
|
|
|
|
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
|
|
|
|
{{on "blur" (action 'updateAccentColor')}}
|
|
|
|
|
data-test-input="accentColor"
|
|
|
|
|
/>
|
|
|
|
|
<div class="color-picker-horizontal-divider"></div>
|
|
|
|
|
<div
|
|
|
|
|
class="color-box-container"
|
|
|
|
|
style={{this.accentColorBgStlye}}
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
name="accent-color"
|
|
|
|
|
class="color-picker"
|
|
|
|
|
value="{{this.accentColorPickerValue}}"
|
|
|
|
|
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</GhFormGroup>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="gh-branding-settings-right">
|
|
|
|
|
<GhBrowserPreview class="gh-branding-settings-previewcontainer" @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
|
|
|
|
|
<GhSiteIframe class="gh-branding-settings-preview" @guid={{this.previewGuid}}></GhSiteIframe>
|
|
|
|
|
</GhBrowserPreview>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
