From 85f418ba25df76d5a9eb7c89902a29611efafdea Mon Sep 17 00:00:00 2001
From: Pablo Gamito <pablogamito@google.com>
Date: Sun, 14 Nov 2021 00:45:02 +0100
Subject: [PATCH] Polish design of Winscope dropbox

Make sure loading spinner is center aligned

Ensure the size of dropbox remains the same before and while loaded so it doesn't look like it's flickering

Make dropbox clickable to allow for intuitive clicking of dropbox area to open file viewer

Bug: 206214877
Change-Id: Icc5c2bdfce9fd26c3ff6f040f85a289859cfd3ca
---
 tools/winscope/src/DataInput.vue | 61 +++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 20 deletions(-)

diff --git a/tools/winscope/src/DataInput.vue b/tools/winscope/src/DataInput.vue
index df715b94d..0c89b061e 100644
--- a/tools/winscope/src/DataInput.vue
+++ b/tools/winscope/src/DataInput.vue
@@ -19,27 +19,34 @@
       <div class="md-title">Open files</div>
     </md-card-header>
     <md-card-content>
-      <div class="dropbox">
-        <md-list style="background: none">
+      <div class="dropbox" @click="$refs.fileUpload.click()">
+        <md-list
+          class="uploaded-files"
+          v-show="Object.keys(dataFiles).length > 0"
+        >
           <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)"
+              @click="e => {
+                e.stopPropagation()
+                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"
-        />
+        <div class="progress-spinner-wrapper" v-show="loadingFiles">
+          <md-progress-spinner
+            :md-diameter="30"
+            :md-stroke="3"
+            md-mode="indeterminate"
+            class="progress-spinner"
+          />
+        </div>
         <input
           type="file"
           @change="onLoadFile"
@@ -49,8 +56,8 @@
           v-show="false"
           multiple
         />
-          <p v-if="!dataReady">
-            Drag your <b>.winscope</b> or <b>.zip</b> file(s) here to begin
+          <p v-if="!dataReady && !loadingFiles">
+            Drag your <b>.winscope</b> or <b>.zip</b> file(s) or click here to begin
           </p>
         </div>
 
@@ -554,12 +561,6 @@ export default {
       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;
@@ -569,9 +570,29 @@ export default {
     min-height: 200px; /* minimum height */
     position: relative;
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
   }
 
-  .progress-spinner {
+  .dropbox p, .dropbox .progress-spinner-wrapper {
+    font-size: 1.2em;
+    margin: auto;
+  }
+
+  .progress-spinner-wrapper, .progress-spinner {
+    width: fit-content;
+    height: fit-content;
     display: block;
   }
-</style>
\ No newline at end of file
+
+  .progress-spinner-wrapper {
+    padding: 1.5rem 0 1.5rem 0;
+  }
+
+  .dropbox .uploaded-files {
+    background: none!important;
+    width: 100%;
+  }
+</style>