From 578160457278f2881b58680d34afe4d2155a36fa Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Tue, 13 Jul 2021 03:19:32 +0000
Subject: [PATCH] Use material design for OTAGUI.

1. Changed the layout using material design ui in vuetify.
2. Changed the file upload to drag-and-drop style.

Test: Mannual tested.
Change-Id: I8b34a405ae3783d6806946f0adc5fc5ac9c30a49
---
 tools/otagui/src/App.vue                      |  55 +++--
 tools/otagui/src/components/BaseCheckbox.vue  |  44 ++--
 tools/otagui/src/components/BaseFile.vue      |  62 ++++--
 tools/otagui/src/components/BaseInput.vue     |   9 +-
 tools/otagui/src/components/FileSelect.vue    | 120 +++++++++--
 .../src/components/JobConfiguration.vue       |  23 ++-
 tools/otagui/src/components/JobDisplay.vue    |   1 +
 .../otagui/src/components/PartialCheckbox.vue |  53 +++--
 tools/otagui/src/views/JobDetails.vue         |  25 ++-
 tools/otagui/src/views/JobList.vue            |   7 +-
 tools/otagui/src/views/SimpleForm.vue         | 193 +++++++++---------
 11 files changed, 403 insertions(+), 189 deletions(-)

diff --git a/tools/otagui/src/App.vue b/tools/otagui/src/App.vue
index c6fbe6376..d9064fb7c 100644
--- a/tools/otagui/src/App.vue
+++ b/tools/otagui/src/App.vue
@@ -1,16 +1,41 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link :to="{ name: 'Create' }">
-        Create Jobs
-      </router-link> |
-      <router-link :to="{ name: 'JobList' }">
-        Jobs Status
-      </router-link> |
-      <router-link :to="{ name: 'About' }">
-        About
-      </router-link>
-    </div>
-    <router-view />
-  </div>
-</template>
\ No newline at end of file
+  <v-app>
+    <v-app-bar
+      rounded
+      color="primary"
+    >
+      <v-app-bar-title> OTA Dashboard </v-app-bar-title>
+      <v-spacer />
+      <v-btn
+        v-for="link in links"
+        :key="`${link}-header-link`"
+        :to="{ name: link }"
+        class="ml-5"
+        color="primary"
+      >
+        {{ link }}
+      </v-btn>
+    </v-app-bar>
+    <v-main>
+      <v-container fluid>
+        <router-view />
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      links: ['Create', 'JobList', 'About'],
+    }
+  },
+}
+</script>
+
+<style>
+h3 {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/tools/otagui/src/components/BaseCheckbox.vue b/tools/otagui/src/components/BaseCheckbox.vue
index 21a697789..bd16dab1e 100644
--- a/tools/otagui/src/components/BaseCheckbox.vue
+++ b/tools/otagui/src/components/BaseCheckbox.vue
@@ -1,12 +1,17 @@
 <template>
-  <input
-    type="checkbox"
-    :checked="modelValue"
-    class="field"
-    v-bind="$attrs"
-    @change="$emit('update:modelValue', $event.target.checked)"
+  <label
+    v-if="label"
+    class="checkbox"
   >
-  <label v-if="label"> {{ label }} </label>
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      class="field"
+      v-bind="$attrs"
+      @change="$emit('update:modelValue', $event.target.checked)"
+    >
+    {{ label }}
+  </label>
 </template>
 
 <script>
@@ -14,12 +19,27 @@ export default {
   props: {
     label: {
       type: String,
-      default: ''
+      default: '',
     },
     modelValue: {
       type: Boolean,
-      default: false
-    }
-  }
+      default: false,
+    },
+  },
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.checkbox {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+</style>
\ No newline at end of file
diff --git a/tools/otagui/src/components/BaseFile.vue b/tools/otagui/src/components/BaseFile.vue
index dd072fbf4..7be515398 100644
--- a/tools/otagui/src/components/BaseFile.vue
+++ b/tools/otagui/src/components/BaseFile.vue
@@ -1,11 +1,19 @@
 <template>
-  <label class="file-select">
-    <div class="select-button">
-      <span v-if="label">{{ label }}</span>
+  <label class="file-select ma-5">
+    <div
+      class="select-button"
+      @dragover="dragover"
+      @dragleave="dragleave"
+      @drop="drop"
+    >
+      <span v-if="label">{{ !fileName ? label : '' }}</span>
       <span v-else>Select File</span>
+      <div v-if="fileName"> File selected: {{ fileName }}</div>
     </div>
     <input
+      ref="file"
       type="file"
+      accept=".zip"
       @change="handleFileChange"
     >
   </label>
@@ -16,31 +24,53 @@ export default {
   props: {
     label: {
       type: String,
-      default: ''
+      default: '',
+    },
+  },
+  data() {
+    return {
+      fileName: '',
     }
   },
   methods: {
-    handleFileChange(e) {
-      this.$emit('file-select', e.target.files)
-    }
-  }
+    handleFileChange(event) {
+      this.$emit('file-select', this.$refs.file.files)
+      this.fileName = this.$refs.file.files[0].name
+    },
+    dragover(event) {
+      event.preventDefault()
+      if (!event.currentTarget.classList.contains('file-hover')) {
+        event.currentTarget.classList.add('file-hover')
+      }
+    },
+    dragleave(event) {
+      event.currentTarget.classList.remove('file-hover')
+    },
+    drop(event) {
+      event.preventDefault()
+      this.$refs.file.files = event.dataTransfer.files
+      this.handleFileChange(event)
+      event.currentTarget.classList.remove('file-hover')
+    },
+  },
 }
 </script>
 
 <style scoped>
 .file-select > .select-button {
-  padding: 1rem;
-
-  color: white;
-  background-color: #2EA169;
-
-  border-radius: .3rem;
-
+  padding: 3rem;
+  border-radius: 0.3rem;
+  border: 4px dashed #eaebec;
   text-align: center;
   font-weight: bold;
+  cursor: pointer;
 }
 
-.file-select > input[type="file"] {
+.file-select > input[type='file'] {
   display: none;
 }
+
+.file-hover {
+  background-color: #95e995;
+}
 </style>
\ No newline at end of file
diff --git a/tools/otagui/src/components/BaseInput.vue b/tools/otagui/src/components/BaseInput.vue
index 069a3718b..da999653c 100644
--- a/tools/otagui/src/components/BaseInput.vue
+++ b/tools/otagui/src/components/BaseInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <label> {{ label }} </label>
+  <h3> {{ label }} </h3>
   <br>
   <input
     v-bind="$attrs"
@@ -24,3 +24,10 @@ export default{
   }
 }
 </script>
+
+<style scoped>
+input {
+  width: 100%;
+  background: #f2f2f2;
+}
+</style>
\ No newline at end of file
diff --git a/tools/otagui/src/components/FileSelect.vue b/tools/otagui/src/components/FileSelect.vue
index 42e39a9fa..056010599 100644
--- a/tools/otagui/src/components/FileSelect.vue
+++ b/tools/otagui/src/components/FileSelect.vue
@@ -1,20 +1,24 @@
 <template>
-  <label v-if="label"> {{ label }} </label>
-  <select
-    :value="modelValue"
-    class="field"
-    v-bind="$attrs"
-    @change="$emit('update:modelValue', $event.target.value)"
-  >
-    <option
-      v-for="option in options"
-      :key="option.file_name"
-      :value="option.path"
-      :selected="option.path === modelValue"
+  <h3 v-if="label">
+    {{ label }}
+  </h3>
+  <div class="dropdown">
+    <select
+      :value="modelValue"
+      class="dropdown-select"
+      v-bind="$attrs"
+      @change="$emit('update:modelValue', $event.target.value)"
     >
-      {{ option.file_name }}
-    </option>
-  </select>
+      <option
+        v-for="option in options"
+        :key="option.file_name"
+        :value="option.path"
+        :selected="option.path === modelValue"
+      >
+        {{ option.file_name }}
+      </option>
+    </select>
+  </div>
 </template>
 
 
@@ -28,12 +32,88 @@ export default {
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     options: {
       type: Array,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.dropdown {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  background: #f2f2f2;
+  border: 1px solid;
+  border-color: white #f7f7f7 whitesmoke;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+}
+
+.dropdown:before,
+.dropdown:after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  top: 9px;
+  right: 10px;
+  width: 0;
+  border: 4px dashed;
+  border-color: #888888 transparent;
+  pointer-events: none;
+}
+
+.dropdown:before {
+  border-bottom-style: solid;
+  border-top: none;
+}
+
+.dropdown:after {
+  margin-top: 7px;
+  border-top-style: solid;
+  border-bottom: none;
+}
+
+.dropdown-select {
+  position: relative;
+  width: 130%;
+  margin: 0;
+  padding: 6px 8px 6px 10px;
+  color: #62717a;
+  text-shadow: 0 1px white;
+  background: #f2f2f2;
+  background: rgba(
+    0,
+    0,
+    0,
+    0
+  ) !important;
+  border: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+}
+
+.dropdown-select:focus {
+  z-index: 3;
+  width: 100%;
+  color: #394349;
+  outline: 2px solid #49aff2;
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.dropdown-select > option {
+  margin: 3px;
+  padding: 6px 8px;
+  text-shadow: none;
+  background: #f2f2f2;
+  border-radius: 3px;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/tools/otagui/src/components/JobConfiguration.vue b/tools/otagui/src/components/JobConfiguration.vue
index e1fc1539a..b82e5953d 100644
--- a/tools/otagui/src/components/JobConfiguration.vue
+++ b/tools/otagui/src/components/JobConfiguration.vue
@@ -1,21 +1,21 @@
 <template>
   <ul v-if="job">
-    <li>Start Time: {{ formDate(job.start_time) }}</li>
+    <li> <strong> Start Time: </strong> {{ formDate(job.start_time) }}</li>
     <li v-if="job.finish_time > 0">
-      Finish Time: {{ formDate(job.finish_time) }}
+      <strong> Finish Time: </strong> {{ formDate(job.finish_time) }}
     </li>
     <li v-if="job.isIncremental">
-      Incremental source: {{ job.incremental_name }}
+      <strong> Incremental source: </strong> {{ job.incremental_name }}
     </li>
     <li v-if="job.isIncremental && buildDetail">
-      Incremental source version: {{ job.incremental_build_version }}
+      <strong> Incremental source version: </strong> {{ job.incremental_build_version }}
     </li>
-    <li>Target source: {{ job.target_name }}</li>
+    <li> <strong> Target source: </strong> {{ job.target_name }}</li>
     <li v-if="buildDetail">
-      Target source version: {{ job.target_build_version }}
+      <strong> Target source version: </strong> {{ job.target_build_version }}
     </li>
     <li v-if="job.isPartial">
-      Partial: {{ job.partial }}
+      <strong> Partial: </strong> {{ job.partial }}
     </li>
   </ul>
 </template>
@@ -41,4 +41,11 @@ export default {
     },
   },
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+ul > li {
+  list-style: none;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/tools/otagui/src/components/JobDisplay.vue b/tools/otagui/src/components/JobDisplay.vue
index 83a1aa812..ee4abb601 100644
--- a/tools/otagui/src/components/JobDisplay.vue
+++ b/tools/otagui/src/components/JobDisplay.vue
@@ -4,6 +4,7 @@
       <span>Status of Job.{{ job.id }}</span>
       <h4>{{ job.status }}</h4>
       <div v-show="active">
+        <v-divider class="my-3" />
         <JobConfiguration
           :job="job"
           :build-detail="false"
diff --git a/tools/otagui/src/components/PartialCheckbox.vue b/tools/otagui/src/components/PartialCheckbox.vue
index 3cd2de887..b6b922341 100644
--- a/tools/otagui/src/components/PartialCheckbox.vue
+++ b/tools/otagui/src/components/PartialCheckbox.vue
@@ -1,24 +1,32 @@
 <template>
-  <ul v-bind="$attrs">
-    <button
-      type="button"
-      @click="revertAllSelection"
-      v-text="selectAllText[selectAll]"
-    />
-    <br>
-    <li
+  <v-btn
+    block
+    type="button"
+    class="my-5"
+    @click="revertAllSelection"
+  >
+    {{ selectAllText[selectAll] }}
+  </v-btn>
+  <v-row class="mb-5">
+    <v-col
       v-for="label in labels"
       :key="label"
+      cols="4"
     >
-      <input
-        type="checkbox"
-        :value="label"
-        :checked="modelValue.get(label)"
-        @change="updateSelected($event.target.value)"
+      <label
+        v-if="label"
+        class="checkbox"
       >
-      <label v-if="label"> {{ label }} </label>
-    </li>
-  </ul>
+        <input
+          type="checkbox"
+          :value="label"
+          :checked="modelValue.get(label)"
+          @change="updateSelected($event.target.value)"
+        >
+        {{ label }}
+      </label>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
@@ -69,4 +77,17 @@ ul > li {
   top: 0px;
   height: 50px;
 }
+
+.checkbox {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition: all 0.2s ease;
+}
 </style>
\ No newline at end of file
diff --git a/tools/otagui/src/views/JobDetails.vue b/tools/otagui/src/views/JobDetails.vue
index 8baf9b561..11d426544 100644
--- a/tools/otagui/src/views/JobDetails.vue
+++ b/tools/otagui/src/views/JobDetails.vue
@@ -5,8 +5,9 @@
       :job="job"
       :build-detail="true"
     />
+    <v-divider class="my-5" />
     <div>
-      <h4>STDERR</h4>
+      <h3>STDERR</h3>
       <div
         ref="stderr"
         class="stderr"
@@ -14,7 +15,7 @@
         {{ job.stderr }}
         <p ref="stderrBottom" />
       </div>
-      <h4>STDOUT</h4>
+      <h3>STDOUT</h3>
       <div
         ref="stdout"
         class="stdout"
@@ -23,11 +24,13 @@
         <p ref="stdoutBottom" />
       </div>
     </div>
-    <br>
-    <a
-      v-if="job.status == 'Finished'"
-      :href="download"
-    > Download </a>
+    <v-divider class="my-5" />
+    <div class="download">
+      <a
+        v-if="job.status == 'Finished'"
+        :href="download"
+      > Download </a>
+    </div>
   </div>
 </template>
 
@@ -101,6 +104,12 @@ export default {
 .stderr,
 .stdout {
   overflow: scroll;
-  height: 200px;
+  height: 160px;
+}
+
+.download {
+  margin: auto;
+  text-align: center;
+  font-size: 160%;
 }
 </style>
\ No newline at end of file
diff --git a/tools/otagui/src/views/JobList.vue b/tools/otagui/src/views/JobList.vue
index 53450a944..9cdf2ae36 100644
--- a/tools/otagui/src/views/JobList.vue
+++ b/tools/otagui/src/views/JobList.vue
@@ -8,9 +8,12 @@
       @mouseover="mouseOver(job.id, true)"
       @mouseout="mouseOver(job.id, false)"
     />
-    <button @click="updateStatus">
+    <v-btn
+      block
+      @click="updateStatus"
+    >
       Update
-    </button>
+    </v-btn>
   </div>
 </template>
 
diff --git a/tools/otagui/src/views/SimpleForm.vue b/tools/otagui/src/views/SimpleForm.vue
index 3ade7d5a5..8326e311e 100644
--- a/tools/otagui/src/views/SimpleForm.vue
+++ b/tools/otagui/src/views/SimpleForm.vue
@@ -1,98 +1,106 @@
 <template>
-  <div>
-    <form @submit.prevent="sendForm">
-      <UploadFile @file-uploaded="fetchTargetList" />
-      <br>
-      <FileSelect
-        v-if="input.isIncremental"
-        v-model="input.incremental"
-        label="Select the source file"
-        :options="targetDetails"
-      />
-      <FileSelect
-        v-model="input.target"
-        label="Select the target file"
-        :options="targetDetails"
-      />
-      <button
-        type="button"
-        @click="fetchTargetList"
-      >
-        Update File List
-      </button>
-      <div>
-        <BaseCheckbox
-          v-model="input.verbose"
-          :label="'Verbose'"
-        /> &emsp;
-        <BaseCheckbox
-          v-model="input.isIncremental"
-          :label="'Incremental'"
+  <v-row>
+    <v-col cols="6">
+      <form @submit.prevent="sendForm">
+        <FileSelect
+          v-if="input.isIncremental"
+          v-model="input.incremental"
+          label="Select the source file"
+          :options="targetDetails"
         />
-      </div>
-      <div>
-        <BaseCheckbox
-          v-model="input.isPartial"
-          :label="'Partial'"
+        <FileSelect
+          v-model="input.target"
+          label="Select a target file"
+          :options="targetDetails"
         />
-        <PartialCheckbox
-          v-if="input.isPartial"
-          v-model="partitionInclude"
-          :labels="updatePartitions"
-        />
-        <div v-if="input.isPartial">
-          Partial list: {{ partitionList }}
-        </div>
-      </div>
-      <br>
-      <BaseInput
-        v-model="input.extra"
-        :label="'Extra Configurations'"
-      />
-      <br>
-      <button type="submit">
-        Submit
-      </button>
-    </form>
-  </div>
-  <div>
-    <ul>
-      <h4>Build Library</h4>
-      <strong>
-        Careful: Use a same filename will overwrite the original build.
-      </strong>
-      <br>
-      <button @click="updateBuildLib">
-        Refresh the build Library (use with cautions)
-      </button>
-      <li
-        v-for="targetDetail in targetDetails"
-        :key="targetDetail.file_name"
-      >
-        <div>
-          <h5>Build File Name: {{ targetDetail.file_name }}</h5>
-          Uploaded time: {{ formDate(targetDetail.time) }}
-          <br>
-          Build ID: {{ targetDetail.build_id }}
-          <br>
-          Build Version: {{ targetDetail.build_version }}
-          <br>
-          Build Flavor: {{ targetDetail.build_flavor }}
-          <br>
-          <button
-            :disabled="!input.isIncremental"
-            @click="selectIncremental(targetDetail.path)"
+        <v-row>
+          <v-col
+            cols="4"
+            align="center"
           >
-            Select as Incremental File
-          </button>
-          &emsp;
-          <button @click="selectTarget(targetDetail.path)">
-            Select as Target File
-          </button>
+            <BaseCheckbox
+              v-model="input.verbose"
+              :label="'Verbose'"
+            />
+          </v-col>
+          <v-col
+            cols="4"
+            align="center"
+          >
+            <BaseCheckbox
+              v-model="input.isIncremental"
+              :label="'Incremental'"
+            />
+          </v-col>
+          <v-col
+            cols="4"
+            align="center"
+          >
+            <BaseCheckbox
+              v-model="input.isPartial"
+              :label="'Partial'"
+            />
+          </v-col>
+        </v-row>
+        <div>
+          <PartialCheckbox
+            v-if="input.isPartial"
+            v-model="partitionInclude"
+            :labels="updatePartitions"
+          />
         </div>
-      </li>
-    </ul>
-  </div>
+        <v-divider class="my-5" />
+        <BaseInput
+          v-model="input.extra"
+          :label="'Extra Configurations'"
+        />
+        <v-divider class="my-5" />
+        <v-btn
+          block
+          type="submit"
+        >
+          Submit
+        </v-btn>
+      </form>
+    </v-col>
+    <v-divider vertical />
+    <v-col cols="6">
+      <ul>
+        <h3>Build Library</h3>
+        <UploadFile @file-uploaded="fetchTargetList" />
+        <li
+          v-for="targetDetail in targetDetails"
+          :key="targetDetail.file_name"
+        >
+          <div>
+            <h3> Build File Name: {{ targetDetail.file_name }} </h3>
+            <strong> Uploaded time: </strong> {{ formDate(targetDetail.time) }}
+            <br>
+            <strong> Build ID: </strong> {{ targetDetail.build_id }}
+            <br>
+            <strong> Build Version: </strong> {{ targetDetail.build_version }}
+            <br>
+            <strong> Build Flavor: </strong> {{ targetDetail.build_flavor }}
+            <br>
+            <v-btn
+              :disabled="!input.isIncremental"
+              @click="selectIncremental(targetDetail.path)"
+            >
+              Select as Incremental File
+            </v-btn>
+            &emsp;
+            <v-btn @click="selectTarget(targetDetail.path)">
+              Select as Target File
+            </v-btn>
+          </div>
+          <v-divider class="my-5" />
+        </li>
+        <v-btn @click="updateBuildLib">
+          Refresh the build Library (use with cautions)
+        </v-btn>
+      </ul>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
@@ -146,7 +154,7 @@ export default {
       handler: function () {
         this.input.partial = this.partitionList
       },
-    }
+    },
   },
   created() {
     this.resetInput()
@@ -213,4 +221,7 @@ export default {
 </script>
 
 <style scoped>
+ul > li {
+  list-style: none
+}
 </style>
\ No newline at end of file