Merge "Add dependency for vuetify (material design UI)." am: 411c51574a

Original change: https://android-review.googlesource.com/c/platform/development/+/1764185

Change-Id: I2c20074db55276b5612b0f3f8513539739767b20

tools/otagui/package.json

@@ -8,15 +8,19 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@mdi/font": "5.9.55",
     "@zip.js/zip.js": "^2.3.6",
     "core-js": "^3.6.5",
     "echarts": "^5.1.2",
     "eslint-config-airbnb-base": "^14.2.1",
+    "material-design-icons": "^3.0.1",
     "protobufjs": "^6.11.2",
+    "roboto-fontface": "*",
     "vue": "^3.0.0-0",
     "vue-echarts": "^6.0.0-rc.6",
     "vue-router": "^4.0.0-0",
     "vue-uuid": "^2.0.2",
+    "vuetify": "^3.0.0-alpha.0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
@@ -32,7 +36,10 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-0",
-    "prettier": "^1.19.1"
+    "prettier": "^1.19.1",
+    "sass": "~1.32.0",
+    "sass-loader": "^10.0.0",
+    "vue-cli-plugin-vuetify": "~2.4.1"
   },
   "eslintConfig": {
     "root": true,

tools/otagui/src/App.vue

@@ -14,337 +14,3 @@
     <router-view />
   </div>
 </template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-
-h4 {
-  font-size: 20px;
-  text-align: center;
-}
-html {
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-body {
-  margin: 0;
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-}
-#app {
-  box-sizing: border-box;
-  width: 500px;
-  padding: 0 20px 20px;
-  margin: 0 auto;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-a {
-  color: #39b982;
-  font-weight: 600;
-  background-color: transparent;
-}
-img {
-  border-style: none;
-  width: 100%;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  display: flex;
-  align-items: center;
-  font-family: "Montserrat", sans-serif;
-}
-h1 {
-  font-size: 50px;
-  font-weight: 700;
-}
-h2 {
-  font-size: 38px;
-  font-weight: 700;
-}
-h3 {
-  font-size: 28px;
-  font-weight: 700;
-}
-h4 {
-  font-size: 21px;
-  font-weight: 700;
-}
-h5 {
-  font-size: 16px;
-  font-weight: 700;
-}
-h6 {
-  font-size: 15px;
-  font-weight: 700;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-small {
-  font-size: 80%;
-}
-.eyebrow {
-  font-size: 20px;
-}
-.-text-primary {
-  color: #39b982;
-}
-.-text-base {
-  color: #000;
-}
-.-text-error {
-  color: tomato;
-}
-.-text-gray {
-  color: rgba(0, 0, 0, 0.5);
-}
-.-shadow {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.13);
-}
-.badge {
-  display: inline-flex;
-  height: 26px;
-  width: auto;
-  padding: 0 7px;
-  margin: 0 5px;
-  background: transparent;
-  border-radius: 13px;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 26px;
-}
-.badge.-fill-gradient {
-  background: linear-gradient(to right, #16c0b0, #84cf6a);
-  color: #fff;
-}
-button,
-label,
-input,
-optgroup,
-select,
-textarea {
-  display: inline-flex;
-  font-family: "Open sans", sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: none;
-}
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 2px solid #39b982;
-}
-label {
-  color: rgba(0, 0, 0, 0.5);
-  font-weight: 700;
-}
-input,
-textarea {
-  box-sizing: border-box;
-  border: solid 1px rgba(0, 0, 0, 0.4);
-}
-input.error,
-select.error {
-  margin-bottom: 0;
-}
-input + p.errorMessage {
-  margin-bottom: 24px;
-}
-textarea {
-  width: 100%;
-  overflow: auto;
-  font-size: 20px;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-  margin-right: 0.5rem;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-[type="text"],
-[type="number"],
-[type="search"],
-[type="password"] {
-  height: 52px;
-  width: 100%;
-  padding: 0 10px;
-  font-size: 20px;
-}
-[type="text"]:focus,
-[type="number"]:focus,
-[type="search"]:focus,
-[type="password"]:focus {
-  border-color: #39b982;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-[hidden] {
-  display: none;
-}
-.error {
-  border: 1px solid red;
-}
-select {
-  width: 100%;
-  height: 52px;
-  padding: 0 24px 0 10px;
-  vertical-align: middle;
-  background: #fff
-    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
-    no-repeat right 12px center;
-  background-size: 8px 10px;
-  border: solid 1px rgba(0, 0, 0, 0.4);
-  border-radius: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-select:focus {
-  border-color: #39b982;
-  outline: 0;
-}
-select:focus::ms-value {
-  color: #000;
-  background: #fff;
-}
-select::ms-expand {
-  opacity: 0;
-}
-.field {
-  margin-bottom: 24px;
-}
-.error {
-  border: 1px solid red;
-}
-.errorMessage {
-  color: red;
-}
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 52px;
-  padding: 0 40px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  text-align: center;
-  font-weight: 600;
-  white-space: nowrap;
-  transition: all 0.2s linear;
-}
-.button:hover {
-  -webkit-transform: scale(1.02);
-  transform: scale(1.02);
-  box-shadow: 0 7px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-.button:active {
-  -webkit-transform: scale(1);
-  transform: scale(1);
-  box-shadow: none;
-}
-.button:focus {
-  outline: 0;
-}
-.button:disabled {
-  -webkit-transform: scale(1);
-  transform: scale(1);
-  box-shadow: none;
-}
-.button + .button {
-  margin-left: 1em;
-}
-.button.-fill-gradient {
-  background: linear-gradient(to right, #16c0b0, #84cf6a);
-  color: #ffffff;
-}
-.button.-fill-gray {
-  background: rgba(0, 0, 0, 0.5);
-  color: #ffffff;
-}
-.button.-size-small {
-  height: 32px;
-}
-.button.-icon-right {
-  text-align: left;
-  padding: 0 20px;
-}
-.button.-icon-right > .icon {
-  margin-left: 10px;
-}
-.button.-icon-left {
-  text-align: right;
-  padding: 0 20px;
-}
-.button.-icon-left > .icon {
-  margin-right: 10px;
-}
-.button.-icon-center {
-  padding: 0 20px;
-}
-</style>

tools/otagui/src/main.js

@@ -1,9 +1,12 @@
 import { createApp } from 'vue'
+import vuetify from './plugins/vuetify'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 
-createApp(App)
+const app = createApp(App)
-  .use(store)
+app.use(router)
-  .use(router)
+app.use(store)
-  .mount('#app')
+app.use(vuetify)
+
+app.mount('#app')

tools/otagui/src/plugins/vuetify.js

@@ -0,0 +1,10 @@
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/lib/styles/main.sass'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/lib/components'
+import * as directives from 'vuetify/lib/directives'
+
+export default createVuetify({
+  components,
+  directives,
+})