Merge "Add box for drag and drop files on winscope"

tools/winscope/src/DataInput.vue

@@ -19,25 +19,43 @@
       <div class="md-title">Open files</div>
     </md-card-header>
     <md-card-content>
-      <md-list>
-        <md-list-item v-for="file in dataFiles" v-bind:key="file.filename">
-          <md-icon>{{FILE_ICONS[file.type]}}</md-icon>
-          <span class="md-list-item-text">{{file.filename}} ({{file.type}})
-          </span>
-          <md-button
-            class="md-icon-button md-accent"
-            @click="onRemoveFile(file.type)"
-          >
-            <md-icon>close</md-icon>
-          </md-button>
-        </md-list-item>
-      </md-list>
-      <md-progress-spinner
-        :md-diameter="30"
-        :md-stroke="3"
-        md-mode="indeterminate"
-        v-show="loadingFiles"
-      />
+      <div class="dropbox">
+        <md-list style="background: none">
+          <md-list-item v-for="file in dataFiles" v-bind:key="file.filename">
+            <md-icon>{{FILE_ICONS[file.type]}}</md-icon>
+            <span class="md-list-item-text">{{file.filename}} ({{file.type}})
+            </span>
+            <md-button
+              class="md-icon-button md-accent"
+              @click="onRemoveFile(file.type)"
+            >
+              <md-icon>close</md-icon>
+            </md-button>
+          </md-list-item>
+        </md-list>
+        <md-progress-spinner
+          :md-diameter="30"
+          :md-stroke="3"
+          md-mode="indeterminate"
+          v-show="loadingFiles"
+          class="progress-spinner"
+        />
+        <input
+          type="file"
+          @change="onLoadFile"
+          v-on:drop="handleFileDrop"
+          ref="fileUpload"
+          id="dropzone"
+          v-show="false"
+          webkitdirectory
+          directory
+          multiple
+        />
+          <p v-if="!dataReady">
+            Drag your <b>.winscope</b> or <b>.zip</b> file(s) here to begin
+          </p>
+        </div>
+
       <div class="md-layout">
         <div class="md-layout-item md-small-size-100">
           <md-field>
@@ -53,13 +71,6 @@
         </div>
       </div>
       <div class="md-layout">
-        <input
-          type="file"
-          @change="onLoadFile"
-          ref="fileUpload"
-          v-show="false"
-          :multiple="fileType === 'auto'"
-        />
         <md-button
           class="md-primary md-theme-default"
           @click="$refs.fileUpload.click()"
@@ -226,10 +237,10 @@ export default {
         });
       }
     },
-    fileDragIn(e){
+    fileDragIn(e) {
       e.preventDefault();
     },
-    fileDragOut(e){
+    fileDragOut(e) {
       e.preventDefault();
     },
     handleFileDrop(e) {
@@ -534,4 +545,30 @@ export default {
   },
 };
 
-</script>
+</script>
+<style>
+  .dropbox:hover {
+      background: rgb(224, 224, 224);
+    }
+
+  .dropbox p {
+    font-size: 1.2em;
+    text-align: center;
+    padding: 50px 10px;
+  }
+
+  .dropbox {
+    outline: 2px dashed #448aff; /* the dash box */
+    outline-offset: -10px;
+    background: white;
+    color: #448aff;
+    padding: 10px 10px 10px 10px;
+    min-height: 200px; /* minimum height */
+    position: relative;
+    cursor: pointer;
+  }
+
+  .progress-spinner {
+    display: block;
+  }
+</style>