Adding placeholder illustration for Koenig image empty state

This commit is contained in:
Zimo 2018-06-11 13:28:37 +02:00
parent a213d2612e
commit de4d1420d6
2 changed files with 5 additions and 3 deletions

View File

@ -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>

View File

@ -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>

After

Width:  |  Height:  |  Size: 3.2 KiB