Updated file upload Koenig styles

ghost/admin/app/styles/components/koenig.css

@@ -2082,7 +2082,7 @@ button.emoji-picker__category-button.active {
     max-width: 80px;
     margin: 8px;
     background: var(--accent-color);
-    border-radius: var(--border-radius);
+    border-radius: 2px;
 }
 
 .kg-media-container.light {
@@ -2090,6 +2090,10 @@ button.emoji-picker__category-button.active {
     color: var(--pink);
 }
 
+.kg-file-card .kg-media-container {
+    color: var(--accent-color);
+}
+
 .kg-media-container .gh-progress-container-progress {
     background: rgba(225, 225, 225, .2);
 }
@@ -2126,10 +2130,11 @@ button.emoji-picker__category-button.active {
     opacity: 1;
 }
 
-.kg-upload-button .kg-audio-icon {
+.kg-upload-button .kg-audio-icon,
+.kg-upload-button .kg-file-icon {
     width: 24px;
     height: 24px;
-    fill: var(--white);
+    fill: #fff;
     transition: all 0.15s ease-in-out;
 }
 
@@ -2159,7 +2164,7 @@ button.emoji-picker__category-button.active {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: var(--border-radius);
+    border-radius: 2px;
     background: var(--white);
 }
 
@@ -2182,6 +2187,11 @@ button.emoji-picker__category-button.active {
     background: transparent;
 }
 
+.kg-upload-title,
+.kg-upload-caption {
+    padding-left: 16px;
+}
+
 .kg-upload-title:focus,
 .kg-upload-caption:focus {
     box-shadow: none;
@@ -2196,7 +2206,7 @@ button.emoji-picker__category-button.active {
 
 .kg-upload-metadata {
     line-height: 1em;
-    margin: 0 12px 14px;
+    margin: 0 16px 14px;
     font-size: 1.4rem;
     font-weight: 500;
 }
@@ -2329,15 +2339,16 @@ button.emoji-picker__category-button.active {
 .kg-file-data-container {
     position: relative;
     display: flex;
+    justify-content: center;
     flex-direction: column;
     width: 100%;
-    justify-content: space-between;
 }
 
 .kg-file-data-container .kg-upload-title {
     padding-top: 4px;
     padding-bottom: 0px;
     height: 30px;
+    margin-bottom: 2px;
 }
 
 .kg-file-data-container .kg-upload-caption {
@@ -2351,6 +2362,42 @@ button.emoji-picker__category-button.active {
     margin-top: 0;
 }
 
+.kg-file-card .kg-media-container {
+    order: 2;
+}
+
+.kg-file-data-container .kg-upload-title.hide,
+.kg-file-data-container .kg-upload-caption.hide {
+    display: none;
+}
+
+.kg-file-card .kg-upload-container.medium .kg-media-container {
+    height: 60px;
+}
+
+.kg-file-card .kg-upload-container.medium .kg-upload-metadata {
+    margin-top: 4px;
+    margin-bottom: 0;
+}
+
+.kg-file-card .kg-upload-container.medium .kg-upload-title {
+    margin-top: -4px;
+    padding-top: 0;
+    margin-bottom: 2px;
+}
+
+.kg-file-card .kg-upload-container.small .kg-media-container {
+    height: 40px;
+}
+
+.kg-file-card .kg-upload-container.small .kg-upload-metadata {
+    margin-top: 0;
+}
+
+.kg-file-card .kg-upload-container.small .kg-file-inputs {
+    display: none;
+}
+
 /* Video card
 /* --------------------------------------------------------------- */
 

ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs

@@ -1,6 +1,6 @@
 <KoenigCard
     @env={{@env}}
-    @class={{"ba b--transparent relative kg-card-hover kg-card kg-upload-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
+    @class={{"ba b--transparent relative kg-card-hover kg-card kg-upload-card kg-audio-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
     @headerOffset={{@headerOffset}}
     @toolbar={{this.toolbar}}
     @payload={{@payload}}

ghost/admin/lib/koenig-editor/addon/components/koenig-card-file.hbs

@@ -23,26 +23,28 @@
     as |card|
 >
     {{#if @payload.src}}
-        <div class="kg-upload-container">
+        <div class="kg-upload-container {{if (and (not @isEditing) (or (not @payload.fileTitle) (not @payload.fileCaption))) "medium"}} {{if (and (not @isEditing) (and (not @payload.fileTitle) (not @payload.fileCaption))) "small"}}">
             <div class="kg-media-container light">
                 <button class="kg-upload-button">
-                    {{svg-jar "file-download" class="kg-audio-icon"}}
+                    {{svg-jar "file-upload" class="kg-file-icon"}}
                 </button>
             </div>
 
             <div class="kg-file-data-container">
-                <div>
+                <div class="kg-file-inputs">
                     <GhTextInput
                         @value={{@payload.fileTitle}}
                         @placeholder="File Title"
                         @input={{action "setFileTitle" value="target.value"}}
-                        @class="kg-upload-title"
+                        @class="kg-upload-title {{if (and (not @isEditing) (not @payload.fileTitle)) "hide"}}"
+                        @maxlength="80"
                     />
                     <GhTextInput
                         @value={{@payload.fileCaption}}
                         @input={{action "setFileCaption" value="target.value"}}
                         @placeholder="File Caption"
-                        @class="kg-upload-caption"
+                        @class="kg-upload-caption  {{if (and (not @isEditing) (not @payload.fileCaption)) "hide"}}"
+                        @maxlength="100"
                     />
                 </div>
                 <div class="kg-upload-metadata">
@@ -88,7 +90,7 @@
                         {{uploader.progressBar}}
                     {{else}}
                         <div {{on "click" this.triggerFileDialog}} class="flex pa4 midgrey">
-                            {{svg-jar "file-upload"}}
+                            {{svg-jar "upload"}}
                             <span class="kg-upload-placeholder-text">
                                 Click to upload a file
                             </span>

ghost/admin/public/assets/icons/file-upload.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>common-file-upload</title><circle class="a" cx="17.25" cy="17.25" r="6"/><line class="a" x1="17.25" y1="20.25" x2="17.25" y2="14.25"/><line class="a" x1="17.25" y1="14.25" x2="15" y2="16.5"/><line class="a" x1="17.25" y1="14.25" x2="19.5" y2="16.5"/><path class="a" d="M8.25,20.25h-6a1.5,1.5,0,0,1-1.5-1.5V2.25A1.5,1.5,0,0,1,2.25.75H12.879a1.5,1.5,0,0,1,1.06.439l2.872,2.872a1.5,1.5,0,0,1,.439,1.06V8.25"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>download-circle</title><polyline class="a" points="8.25 14.25 12 18 15.75 14.25"/><line class="a" x1="12" y1="6.75" x2="12" y2="18"/><circle class="a" cx="12" cy="12" r="11.25"/></svg>