mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-02 08:13:34 +03:00
14c0c5ff65
refs https://github.com/TryGhost/Team/issues/1310 We want to use parts of the "Brand setting" form in a separate streamlined settings screen after site setup but that wasn't possible without a lot of duplication. - extracted individual form fields into separate components for re-use - included minor refactors like using `uploader.registerFileInput` and `uploader.triggerFileDialog` instead of continually duplicating the same file input trigger method - fixed accessibility issues - changed input titles from `<div>` to `<label>` and associated with the component's input fields - changed `<img {{on "click" upload}}>` to `<input type="image">` so they act as proper buttons and are linked to the label (required a styling change so `img` and `input[type="image"]` are treated equally) - finished cleanup of `.description-container-labs` by renaming to `.description-container`
48 lines
2.0 KiB
Handlebars
48 lines
2.0 KiB
Handlebars
<div data-test-setting="icon" ...attributes>
|
|
<GhUploader
|
|
@extensions={{this.iconExtensions}}
|
|
@paramsHash={{hash purpose="icon"}}
|
|
@onComplete={{this.imageUploaded}}
|
|
as |uploader|
|
|
>
|
|
<div class="gh-setting-content">
|
|
<label class="gh-setting-title" for="publication-icon">Publication icon</label>
|
|
<div class="gh-setting-desc">A square, social icon, 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">
|
|
<input
|
|
id="publication-icon"
|
|
type="image"
|
|
class="blog-icon"
|
|
src={{this.settings.icon}}
|
|
{{on "click" uploader.triggerFileDialog}}
|
|
data-test-icon-img
|
|
>
|
|
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="icon">
|
|
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
|
</button>
|
|
</div>
|
|
{{else}}
|
|
<button id="publication-icon" type="button" class="gh-btn gh-btn-white self-center" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="icon">
|
|
<span>Upload icon</span>
|
|
</button>
|
|
{{/if}}
|
|
<div class="dn">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{this.iconMimeTypes}}
|
|
@onInsert={{uploader.registerFileInput}}
|
|
data-test-file-input="icon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</GhUploader>
|
|
</div> |