Ghost/ghost/admin/app/components/settings/form-fields/publication-logo.hbs
Sodbileg Gansukh 7a49183bc8
Custom theme settings improvements (#18101)
no issues

- removed (default) label from the custom theme settings
- the label was redundant especially when multiple select settings are next to each other
- instead, the default value should always be the first option in the select fields
- more consistent spacing between settings with/without description
- less spacing between boolean settings
2023-09-14 10:27:33 +08:00

54 lines
2.7 KiB
Handlebars

<div data-test-setting="logo" ...attributes>
<GhUploader
@extensions={{this.imageExtensions}}
@onComplete={{this.imageUploaded}}
as |uploader|
>
<div>
<label class="gh-setting-title" for="publication-logo">Publication logo</label>
<div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div>
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column" style="margin-top: 12px;">
{{#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}}
<div class="gh-branding-image-container largeimg justify-center transparent-bg">
<input
id="publication-logo"
type="image"
class="blog-logo"
src={{this.settings.logo}}
{{on "click" uploader.triggerFileDialog}}
data-test-logo-img
>
{{#if (feature 'lexicalEditor')}}
<KoenigImageEditor
@className="gh-setting-action-smallimg-delete gh-setting-action-smallimg-edit"
@imageSrc={{this.settings.logo}}
@saveImage={{fn this.saveImage uploader.setFiles}}
/>
{{/if}}
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="logo">
{{svg-jar "trash" class="w4 h4"}}
</button>
</div>
{{else}}
<button id="publication-logo" type="button" class="gh-btn gh-btn-white self-start" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="logo">
<span>Upload logo</span>
</button>
{{/if}}
<div class="dn">
<GhFileInput
@multiple={{false}}
@action={{uploader.setFiles}}
@accept={{this.imageMimeTypes}}
@onInsert={{uploader.registerFileInput}}
data-test-file-input="logo" />
</div>
</div>
</div>
</GhUploader>
</div>