From 48742a1b1553efacbfc3084fba29d7b87ff3e0b4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 1 Dec 2021 14:07:05 +0000
Subject: [PATCH] Updated audio card placeholder

---
 ghost/admin/app/styles/components/koenig.css  | 54 +++++++++++-
 .../addon/components/koenig-card-audio.hbs    | 88 +++++++++----------
 .../addon/components/koenig-card-video.hbs    |  2 +-
 .../public/assets/icons/audio-upload.svg      |  8 ++
 4 files changed, 105 insertions(+), 47 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/audio-upload.svg

diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
index 6ce419295b..f95ba8cfde 100644
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@@ -1875,7 +1875,59 @@ button.emoji-picker__category-button.active {
     margin-top: 20px;
 }
 
-/* .kg-nft-card  */
+/* Audio card
+/* --------------------------------------------------------------- */
+
+.kg-audio-card .kg-audio-container {
+    display: flex;
+    border-radius: var(--border-radius);
+    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
+}
+
+.kg-media-container {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin: 8px;
+    background: var(--whitegrey-l1);
+    border-radius: var(--border-radius);
+}
+
+.kg-audio-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+}
+
+.kg-audio-button svg {
+    fill: var(--midlightgrey);
+    opacity: 0.85;
+    transition: var(--animation-speed-normal) ease-out;
+    transform: scale(1.0);
+  }
+  
+  .kg-audio-button:hover svg {
+    opacity: 1.0;
+    fill: var(--green);
+  }
+
+  .kg-placeholder-audio {
+    width: 28px;
+    height: 28px;
+}
+
+.kg-placeholder-text {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    margin-left: 12px;
+    color: var(--midgrey);
+    font-family: var(--font-family);
+    font-size: 1.45rem;
+    font-weight: 400;
+}
 
 /* Codemirror overrides
 /* --------------------------------------------------------------- */
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
index 1181deac62..cf0d209879 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
@@ -1,6 +1,6 @@
 <KoenigCard
     @env={{@env}}
-    @class={{concat (kg-style "container-card") " kg-video-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
+    @class={{concat (kg-style "media-card") " kg-card kg-audio-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
     @headerOffset={{@headerOffset}}
     @toolbar={{this.toolbar}}
     @payload={{@payload}}
@@ -22,8 +22,8 @@
     {{on "drop" this.drop}}
     as |card|
 >
-    <div style="display:flex">
-        <div style="width: 150px;">
+    <div class="kg-audio-container">
+        <div class="kg-media-container">
             {{#if (not @payload.src)}}
                 <GhUploader
                     @uploadUrl="/media/upload/"
@@ -36,39 +36,37 @@
                     @onFailed={{this.audioUploadFailed}}
                     as |uploader|
                 >
-                    <div class="relative{{unless @payload.src " bg-whitegrey-l2"}}">
-                        {{#if (or uploader.errors uploader.isUploading)}}
-                            <div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
-                                {{#if uploader.errors}}
-                                    <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
-                                        {{uploader.errors.firstObject.message}}
-                                    </span>
-                                {{/if}}
+                    {{#if (or uploader.errors uploader.isUploading)}}
+                        <div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder" "absolute absolute--fill bg-white-50"}}">
+                            {{#if uploader.errors}}
+                                <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
+                                    {{uploader.errors.firstObject.message}}
+                                </span>
+                            {{/if}}
 
-                                {{#if this.isDraggedOver}}
-                                    <span class="db center sans-serif fw7 f7 middarkgrey">
-                                        Drop it like it's hot 🔥
-                                    </span>
-                                {{else if uploader.isUploading}}
-                                    {{uploader.progressBar}}
-                                {{/if}}
-                            </div>
-                        {{else}}
-                            <div class="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
-                                {{#if this.isDraggedOver}}
-                                    <span class="db center sans-serif fw7 f7 middarkgrey">
-                                        Drop it like it's hot 🔥
-                                    </span>
-                                {{else if uploader.isUploading}}
-                                    {{uploader.progressBar}}
-                                {{else}}
-                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerAudioFileDialog}}>
-                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
-                                    </button>
-                                {{/if}}
-                            </div>
-                        {{/if}}
-                    </div>
+                            {{#if this.isDraggedOver}}
+                                <span class="db center sans-serif fw7 f7 middarkgrey">
+                                    Drop it like it's hot 🔥
+                                </span>
+                            {{else if uploader.isUploading}}
+                                {{uploader.progressBar}}
+                            {{/if}}
+                        </div>
+                    {{else}}
+                        <div class="kg-media-placeholder">
+                            {{#if this.isDraggedOver}}
+                                <span class="db center sans-serif fw7 f7 middarkgrey">
+                                    Drop it like it's hot 🔥
+                                </span>
+                            {{else if uploader.isUploading}}
+                                {{uploader.progressBar}}
+                            {{else}}
+                                <button class="kg-audio-button" {{on "click" this.triggerAudioFileDialog}}>
+                                    {{svg-jar "audio-upload" class="kg-placeholder-audio"}}
+                                </button>
+                            {{/if}}
+                        </div>
+                    {{/if}}
 
                     <div style="display:none">
                         <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.audioMimeTypes}} @onInsert={{this.registerAudioFileInput}} />
@@ -88,10 +86,10 @@
                     @paramsHash={{hash url=@payload.src}}
                     as |uploader|
                 >
-                    <div class="relative{{unless @payload.thumbnailSrc " bg-whitegrey-l2"}}">
+                    <div class="relative">
 
                         {{#if (or uploader.errors uploader.isUploading)}}
-                            <div class="relative miw-100 flex items-center {{if (not @payload.thumbnailSrc) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
+                            <div class="relative miw-100 flex items-center {{if (not @payload.thumbnailSrc) "kg-media-placeholder" "absolute absolute--fill bg-white-50"}}">
                                 {{#if uploader.errors}}
                                     <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
                                         {{uploader.errors.firstObject.message}}
@@ -105,12 +103,12 @@
                                 {{else if uploader.isUploading}}
                                     {{uploader.progressBar}}
                                 {{else if (not @payload.thumbnailSrc)}}
-                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
-                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
+                                    <button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                        {{svg-jar "audio-upload" class="kg-placeholder-audio"}}
                                         {{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
                                     </button>
                                 {{else}}
-                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                    <button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
                                         <img src={{@payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
                                         {{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
                                     </button>
@@ -124,7 +122,7 @@
                                 {{/if}}
                             </div>
                         {{else}}
-                            <div class="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
+                            <div class="kg-media-placeholder">
                                 {{#if this.isDraggedOver}}
                                     <span class="db center sans-serif fw7 f7 middarkgrey">
                                         Drop it like it's hot 🔥
@@ -132,12 +130,12 @@
                                 {{else if uploader.isUploading}}
                                     {{uploader.progressBar}}
                                 {{else if @payload.thumbnailSrc}}
-                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                    <button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
                                         <img src={{@payload.thumbnailSrc}} style="width: 150px" />
                                     </button>
                                 {{else}}
-                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
-                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
+                                    <button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                        {{svg-jar "audio-upload" class="kg-placeholder-audio"}}
                                     </button>
                                 {{/if}}
                             </div>
@@ -160,7 +158,7 @@
                 />
             </div>
         {{else}}
-            <div style="flex-grow: 1;display: flex;align-items: center;margin-left: 12px;line-height:3rem">
+            <div class="kg-placeholder-text">
                 Click to upload an audio file
             </div>
         {{/if}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.hbs
index 493b2668e1..8f9cd24733 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.hbs
@@ -1,6 +1,6 @@
 <KoenigCard
     @env={{@env}}
-    @class={{concat (kg-style "container-card") " kg-video-card mih10 miw-100 relative " (kg-style "breakout" size=@payload.cardWidth)}}
+    @class={{concat (kg-style "container-card") " kg-card kg-video-card mih10 miw-100 relative " (kg-style "breakout" size=@payload.cardWidth)}}
     @headerOffset={{@headerOffset}}
     @toolbar={{this.toolbar}}
     @payload={{@payload}}
diff --git a/ghost/admin/public/assets/icons/audio-upload.svg b/ghost/admin/public/assets/icons/audio-upload.svg
new file mode 100644
index 0000000000..7cd52c69d7
--- /dev/null
+++ b/ghost/admin/public/assets/icons/audio-upload.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 12a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5Zm-6.75 5.25a6.75 6.75 0 1 1 13.5 0 6.75 6.75 0 0 1-13.5 0Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 13.5a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.78 13.72a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.72 13.72a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 1 1-1.06 1.06l-2.25-2.25a.75.75 0 0 1 0-1.06ZM2.25 1.5a.75.75 0 0 0-.75.75v16.5a.75.75 0 0 0 .75.75h6a.75.75 0 0 1 0 1.5h-6A2.25 2.25 0 0 1 0 18.75V2.25A2.25 2.25 0 0 1 2.25 0h10.629a2.25 2.25 0 0 1 1.59.658l2.872 2.873c.422.421.659.994.659 1.59V8.25a.75.75 0 0 1-1.5 0V5.121a.75.75 0 0 0-.22-.53L13.41 1.72a.75.75 0 0 0-.53-.219H2.25Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.825 12.313c-.273.182-.325.352-.325.437 0 .085.052.255.325.437.268.178.681.313 1.175.313s.907-.135 1.175-.313c.273-.182.325-.352.325-.437 0-.085-.052-.255-.325-.437C6.907 12.135 6.494 12 6 12s-.907.135-1.175.313Zm-.832-1.248C4.539 10.701 5.251 10.5 6 10.5c.749 0 1.46.201 2.007.565.541.361.993.942.993 1.685 0 .743-.452 1.324-.993 1.685C7.461 14.799 6.749 15 6 15c-.749 0-1.46-.201-2.007-.565C3.452 14.074 3 13.493 3 12.75c0-.743.452-1.324.993-1.685Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.16 7.645c-.33-.164-.7-.23-1.065-.19l-.358.037.26 5.221a.75.75 0 1 1-1.498.075l-.295-5.93a.75.75 0 0 1 .67-.782l1.062-.113a3.435 3.435 0 0 1 3.304 1.64.75.75 0 0 1-1.284.775 1.935 1.935 0 0 0-.796-.733Z"/>
+</svg>
\ No newline at end of file