Refining image input ui

app/imports/client/ui/components/global/SmartImageInput.vue

@@ -1,7 +1,7 @@
 <template>
   <outlined-input
     :name="label"
-    class="smart-image-input mb-3 pt-4"
+    class="smart-image-input mb-3"
     :data-id="id"
     :class="{ dragging }"
     @click="openImageInputDialog"
@@ -9,11 +9,37 @@
     @dragleave="handleDragLeave"
     @drop="handleDrop"
   >
-    <img
-      v-if="value"
-      class="image"
-      :src="value"
+    <template v-if="value">
+      <img
+        v-if="value"
+        class="image"
+        :src="value"
+      >
+      <div
+        class="image-overlay"
+        :class="themeClasses"
+      />
+      <v-btn
+        v-if="value"
+        icon
+        dark
+        class="clear-button ma-1"
+        @click.stop="change(undefined)"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+    <div
+      v-else
+      class="add-image-text d-flex align-center justify-center"
     >
+      Add image
+      <v-icon
+        right
+      >
+        mdi-image-outline
+      </v-icon>
+    </div>
   </outlined-input>
 </template>
 
@@ -61,6 +87,13 @@ export default {
     OutlinedInput,
   },
   mixins: [SmartInput],
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
   props: {
     label: {
       type: String,
@@ -73,6 +106,14 @@ export default {
       dragging: false,
     };
   },
+  computed: {
+    themeClasses() {
+      return {
+        'theme--dark': this.theme.isDark,
+        'theme--light': !this.theme.isDark,
+      }
+    },
+  },
   watch: {
     file(file){
       if (!file) return;
@@ -129,6 +170,11 @@ export default {
         data: {
           href: this.value,
         },
+        callback: (href) => {
+          if (href) {
+            this.change(href);
+          }
+        },
       });
     },
     handleUrlChange() {
@@ -161,12 +207,21 @@ export default {
 
 <style scoped>
 .smart-image-input {
+  position: relative;
   min-height: 120px;
   cursor: pointer;
+  overflow: hidden;
 }
 .image {
+  min-height: 100px;
   max-height: 400px;
   max-width: 100%;
+  margin-bottom: -7px;
+}
+.clear-button {
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 .dragging {
   border-style: dashed;
@@ -177,4 +232,34 @@ export default {
 .outlined-input.dragging.theme--light:not(.no-hover) {
   border-color: rgba(0,0,0,.86);
 }
+.image-overlay {
+  position: absolute;
+  top: 0;
+  height: 12px;
+  left: 0;
+  right: 0;
+}
+.image-overlay.theme--dark {
+  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+}
+.image-overlay.theme--light {
+  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+}
+.add-image-text {
+  opacity: 0.7;
+  height: 118px; 
+}
+.smart-image-input:hover .add-image-text {
+  opacity: 1;
+}
+</style>
+
+<style>
+.smart-image-input > legend {
+  position: relative;
+  z-index: 1;
+}
+.smart-image-input .clear-button i {
+  text-shadow: 0 0 4px #000, 0 0 4px #000 ;
+}
 </style>