From de4d1420d62366bffdebcf9824cb2eabb9436199 Mon Sep 17 00:00:00 2001
From: Zimo <peter.zimon@gmail.com>
Date: Mon, 11 Jun 2018 13:28:37 +0200
Subject: [PATCH] Adding placeholder illustration for Koenig image empty state

---
 .../addon/templates/components/koenig-card-image.hbs       | 7 ++++---
 ghost/admin/public/assets/icons/summer.svg                 | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/summer.svg

diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs
index 515d813018..d7d22cccfe 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs
@@ -20,7 +20,7 @@
         onFailed=(action "resetSrcs")
         as |uploader|
     }}
-        <div class="relative">
+        <div class="relative bg-whitegrey-l2">
             {{#if (or previewSrc payload.src)}}
                 <img src={{or previewSrc payload.src}} class="{{kg-style kgImgStyle sidebar=ui.hasSideNav}}" alt={{payload.alt}}>
             {{/if}}
@@ -36,8 +36,9 @@
                     {{#if uploader.isUploading}}
                         {{uploader.progressBar}}
                     {{else if (not previewSrc payload.src)}}
-                        <button class="db center btn-base ba b--whitegrey br3 sans-serif fw4 f7 middarkgrey" onclick={{action "triggerFileDialog"}}>
-                            <span>Click to select an image</span>
+                        <button class="flex flex-column items-center center btn-base sans-serif fw4 f7 middarkgrey" onclick={{action "triggerFileDialog"}}>
+                            {{svg-jar "summer" class="nudge-right--10"}}
+                            <span class="mt2 midgrey">Click to select an image</span>
                         </button>
                     {{/if}}
                 </div>
diff --git a/ghost/admin/public/assets/icons/summer.svg b/ghost/admin/public/assets/icons/summer.svg
new file mode 100644
index 0000000000..cbb39d99b3
--- /dev/null
+++ b/ghost/admin/public/assets/icons/summer.svg
@@ -0,0 +1 @@
+<svg width="152" height="122" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="60.476" cy="59.931" r="59.931"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(27.987 1)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#FFF" xlink:href="#a"/><g mask="url(#b)" stroke="#C5D2D9" stroke-width="2"><path d="M-2.066 69.9c2.292-1.72 4.584-3.44 6.877-3.44 4.581 0 9.162 6.872 13.744 6.872 4.582 0 9.163-6.873 13.745-6.873 4.581 0 9.162 6.873 13.744 6.873 4.582 0 9.163-6.873 13.745-6.873 4.581 0 9.162 6.873 13.744 6.873 4.582 0 9.163-6.873 13.745-6.873 4.581 0 9.162 6.873 13.744 6.873 4.582 0 9.163-6.873 13.745-6.873 2.853 0 5.705 2.665 8.558 4.676" opacity=".3"/><path d="M-1.647 76.637c2.153-1.609 4.305-3.125 6.458-3.125 4.581 0 9.162 6.872 13.744 6.872 4.582 0 9.163-6.872 13.745-6.872 4.581 0 9.162 6.872 13.744 6.872 4.582 0 9.163-6.872 13.745-6.872 4.581 0 9.162 6.872 13.744 6.872 4.582 0 9.163-6.872 13.745-6.872 4.581 0 9.162 6.872 13.744 6.872 4.582 0 9.163-6.872 13.745-6.872 2.671 0 5.343 2.337 8.015 4.285" opacity=".7"/><path d="M-.691 83.842c1.834-1.32 3.668-2.422 5.502-2.422 4.581 0 9.162 6.873 13.744 6.873 4.582 0 9.163-6.873 13.745-6.873 4.581 0 9.162 6.873 13.744 6.873 4.582 0 9.163-6.873 13.745-6.873 4.581 0 9.162 6.873 13.744 6.873 4.582 0 9.163-6.873 13.745-6.873 4.581 0 9.162 6.873 13.744 6.873 4.582 0 9.163-6.873 13.745-6.873 1.656 0 3.312.899 4.969 2.046"/></g><g mask="url(#b)" fill="#F8FAFC" stroke="#C5D2D9" stroke-width="1.999"><path d="M6.797 92.556h107.53c-12.722 19.819-30.644 29.728-53.765 29.728-23.12 0-41.042-9.91-53.765-29.728z"/></g><g mask="url(#b)" stroke="#C5D2D9" stroke-linecap="round" stroke-linejoin="round"><path d="M36.964 99.775h2.971M36.964 112.652h2.971M30.092 106.647h2.971M51.482 99.876h2.971M51.482 112.752h2.971M44.61 106.748h2.97M66 99.977h2.97M66 112.853h2.97M59.128 106.849h2.97M80.518 100.077h2.97M80.518 112.954h2.97M73.646 106.95h2.97M95.035 100.178h2.971M88.163 107.05h2.971"/></g></g><path d="M29.458 50.372a60.298 60.298 0 0 0-.927 10.56c0 33.098 26.832 59.93 59.931 59.93 33.1 0 59.932-26.832 59.932-59.93 0-5.078-.632-10.007-1.82-14.714M108.475 4.423A59.833 59.833 0 0 0 88.462 1c-14.728 0-28.216 5.313-38.65 14.127" stroke="#C5D2D9" stroke-linecap="round"/><circle cx="23.239" cy="22.972" r="22.946" transform="translate(104.383 2.299)" fill="#FFF" stroke="#C5D2D9" stroke-width="1.997"/><g stroke="#C5D2D9"><path d="M45.061 44.717l-3.64.654 10.008 55.075 3.64.034z" fill="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M1.185 55.135s4.398-6.273 9.671-7.219c5.273-.946 11.578 3.405 11.578 3.405s4.316-6.258 9.671-7.219c5.355-.96 11.578 3.406 11.578 3.406s4.358-6.266 9.671-7.22c5.313-.953 11.578 3.406 11.578 3.406s4.98-6.377 9.671-7.22c4.692-.841 11.578 3.406 11.578 3.406S66.645 15.97 38.916 20.946c-27.73 4.977-37.731 34.19-37.731 34.19z" stroke-width="2.003" fill="#FFF" stroke-linecap="round" stroke-linejoin="round"/><path d="M22.434 51.321s.191-10.414 4.017-17.466c3.826-7.051 12.465-12.909 12.465-12.909M65.435 43.604s-3.8-9.698-9.84-14.98c-6.04-5.28-16.176-7.768-16.176-7.768M38.916 20.946l4.767 26.562" stroke-width="2"/></g></g></svg>