⬆️ Trigger image upload when clicking on image (#735)

* ⬆️  Trigger image upload when clicking on image

closes TryGhost/Ghost#8544

When clicking on an already uploaded icon, logo or cover in Settings -> General we trigger now the file upload to be able to replace it.

* use lowercase event names

* toggle progress bar when replacing image
This commit is contained in:
Aileen Nowak 2017-06-19 17:55:28 +07:00 committed by David Wolfe
parent 6ed32c0069
commit 2a73c798c5
1 changed files with 15 additions and 15 deletions

View File

@ -70,15 +70,15 @@
{{/if}}
</div>
<div class="gh-setting-action gh-setting-action-smallimg">
{{#if model.icon}}
<img class="blog-icon" src="{{model.icon}}" alt="icon" data-test-icon-img>
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if model.icon}}
<img class="blog-icon" src="{{model.icon}}" onclick={{action "triggerFileDialog"}} alt="icon" data-test-icon-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "icon"}} data-test-delete-image="icon">
<span>delete</span>
</button>
{{else if uploader.isUploading}}
{{uploader.progressBar}}
{{else}}
<button type="button" class="gh-btn" onClick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
<span>Upload Image</span>
</button>
{{/if}}
@ -105,15 +105,15 @@
{{/if}}
</div>
<div class="gh-setting-action gh-setting-action-smallimg">
{{#if model.logo}}
<img class="blog-logo" src="{{model.logo}}" alt="logo" data-test-logo-img>
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if model.logo}}
<img class="blog-logo" src="{{model.logo}}" onclick={{action "triggerFileDialog"}} alt="logo" data-test-logo-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "logo"}} data-test-delete-image="logo">
<span>delete</span>
</button>
{{else if uploader.isUploading}}
{{uploader.progressBar}}
{{else}}
<button type="button" class="gh-btn" onClick={{action "triggerFileDialog"}} data-test-image-upload-btn="logo">
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="logo">
<span>Upload Image</span>
</button>
{{/if}}
@ -140,15 +140,15 @@
{{/if}}
</div>
<div class="gh-setting-action gh-setting-action-largeimg">
{{#if model.coverImage}}
<img class="blog-cover" src="{{model.coverImage}}" alt="cover photo" data-test-cover-img>
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if model.coverImage}}
<img class="blog-cover" src="{{model.coverImage}}" onclick={{action "triggerFileDialog"}} alt="cover photo" data-test-cover-img>
<button type="button" class="gh-setting-action-largeimg-delete" {{action "removeImage" "coverImage"}} data-test-delete-image="coverImage">
<span>delete</span>
</button>
{{else if uploader.isUploading}}
{{uploader.progressBar}}
{{else}}
<button type="button" class="gh-btn" onClick={{action "triggerFileDialog"}} data-test-image-upload-btn="coverImage">
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="coverImage">
<span>Upload Image</span>
</button>
{{/if}}