add 'load db' illustration and animation #19

src/components/DbUpload.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="db-upload-container">
     <label for="assetsFieldHandle">
-      <div class="drop-area" @dragover="dragover" @dragleave="dragleave" @drop="drop">
+      <div
+        class="drop-area"
+        @dragover.prevent="$emit('dragover')"
+        @dragleave="$emit('dragleave')"
+        @drop="drop"
+      >
         <input
           type="file"
           id="assetsFieldHandle"
@@ -31,22 +36,10 @@ export default {
           }
         })
     },
-    dragover (event) {
-      event.preventDefault()
-      // TODO: Add some visual stuff to show the user can drop its files
-      if (!event.currentTarget.classList.contains('bg-green-300')) {
-        event.currentTarget.classList.remove('bg-gray-100')
-        event.currentTarget.classList.add('bg-green-300')
-      }
-    },
-    dragleave (event) {
-      // Clean up
-      event.currentTarget.classList.add('bg-gray-100')
-      event.currentTarget.classList.remove('bg-green-300')
-    },
     drop (event) {
       event.preventDefault()
       this.$refs.file.files = event.dataTransfer.files
+      this.$emit('drop')
       this.loadDb()
         .then(() => {
           // Clean up