From ff249689d596b04119c1356b584f39509708dcb3 Mon Sep 17 00:00:00 2001
From: Aileen Nowak <aileen@ghost.org>
Date: Mon, 19 Jun 2017 17:55:28 +0700
Subject: [PATCH] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20=20Trigger=20image=20uploa?=
 =?UTF-8?q?d=20when=20clicking=20on=20image=20(#735)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ⬆️  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
---
 .../admin/app/templates/settings/general.hbs  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs
index f7cda8352a..9fc130b14b 100644
--- a/ghost/admin/app/templates/settings/general.hbs
+++ b/ghost/admin/app/templates/settings/general.hbs
@@ -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}}