Rework UI into a new, responsive layout

PhotonVision · Jul 14, 2020 · 8591dc1 · 8591dc1
1 parent aed92e7
commit 8591dc1
Show file tree

Hide file tree

Showing 30 changed files with 993 additions and 602 deletions.
diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
@@ -1,36 +1,86 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      dense
-      clipped-left
-      color="#006492"
+    <!-- Although most of the app runs with the "light" theme, the navigation drawer needs to have white text and icons so it uses the dark theme-->
+    <v-navigation-drawer
       dark
+      app
+      permanent
+      :mini-variant="compact"
+      color="primary"
     >
-      <img
-        class="imgClass"
-        src="./assets/logo.png"
-      >
-      <div class="flex-grow-1" />
-      <v-toolbar-items>
-        <v-tabs
-          background-color="#006492"
-          dark
-          height="48"
-          slider-color="#ffd843"
+      <v-list>
+        <!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
+        <v-list-item :class="compact ? 'pr-0 pl-0' : ''">
+          <v-list-item-icon class="mr-0">
+            <img
+              v-if="!compact"
+              class="logo"
+              src="./assets/logoLarge.png"
+            >
+            <img
+              v-else
+              class="logo"
+              src="./assets/logoSmall.png"
+            >
+          </v-list-item-icon>
+        </v-list-item>
+
+        <v-divider />
+
+        <v-list-item
+          link
+          to="dashboard"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-view-dashboard</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Dashboard</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item
+          link
+          to="settings"
+        >
+          <!-- TODO: Expandable sub-elements? -->
+          <v-list-item-icon>
+            <v-icon>mdi-settings</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Settings</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item
+          link
+          to="docs"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-bookshelf</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Documentation</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+
+        <v-list-item
+          v-if="this.$vuetify.breakpoint.mdAndUp"
+          link
+          @click.stop="toggleCompactMode"
         >
-          <v-tab to="vision">
-            Vision
-          </v-tab>
-          <v-tab to="settings">
-            Settings
-          </v-tab>
-          <v-tab to="docs">
-            Docs
-          </v-tab>
-        </v-tabs>
-      </v-toolbar-items>
-    </v-app-bar>
+          <v-list-item-icon>
+            <v-icon v-if="compact">
+              mdi-chevron-right
+            </v-icon>
+            <v-icon v-else>
+              mdi-chevron-left
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Advanced Mode</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
     <v-content>
       <v-container
         fluid
@@ -43,7 +93,7 @@
               v-model="saveSnackbar"
               :timeout="1000"
               top
-              color="#ffd843"
+              color="accent"
             >
               <div style="text-align: center;width: 100%;">
                 <h4>Saved All changes</h4>
@@ -65,7 +115,7 @@
 </template>
 
 <script>
-    import logView from '@femessage/log-viewer'
+    import logView from '@femessage/log-viewer';
 
     export default {
         name: 'App',
@@ -75,7 +125,7 @@
         data: () => ({
             timer: undefined,
             isLogger: false,
-            log: ""
+            log: "",
         }),
         computed: {
             saveSnackbar: {
@@ -85,6 +135,15 @@
                 set(value) {
                     this.$store.commit("saveBar", value);
                 }
+            },
+            compact: {
+                get() {
+                    return this.$store.state.compactMode === undefined ? this.$vuetify.breakpoint.smAndDown : this.$store.state.compactMode || this.$vuetify.breakpoint.smAndDown;
+                },
+                set(value) {
+                    // compactMode is the user's preference for compact mode; it overrides screen size
+                    this.$store.commit("compactMode", value);
+                },
             }
         },
         created() {
@@ -138,6 +197,9 @@
                     }
                 }
             },
+            toggleCompactMode() {
+                this.compact = !this.compact;
+            },
             saveSettings() {
                 clearInterval(this.timer);
                 this.saveSnackbar = true;
@@ -163,12 +225,10 @@
 </style>
 
 <style>
-    
-    .imgClass {
-        width: auto;
-        height: 45px;
-        vertical-align: middle;
-        padding-right: 5px;
+    .logo {
+        width: 100%;
+        height: 70px;
+        object-fit: contain;
     }
 
     .loggerClass {
@@ -209,4 +269,11 @@
     span {
         color: white;
     }
+</style>
+
+<style>
+  /* Hack */
+  .v-divider {
+    border-color: #23add9 !important;
+  }
 </style>
diff --git a/photon-client/src/assets/logo.png → photon-client/src/assets/logoLarge.png b/photon-client/src/assets/logo.png → photon-client/src/assets/logoLarge.png
diff --git a/photon-client/src/assets/logoSmall.png b/photon-client/src/assets/logoSmall.png
diff --git a/photon-client/src/components/common/cv-image.vue b/photon-client/src/components/common/cv-image.vue
@@ -3,7 +3,6 @@
     id="CameraStream"
     :style="styleObject"
     :src="address"
-    crossorigin="Anonymous"
     alt=""
     @click="e => $emit('click', e)"
   >
@@ -13,19 +12,27 @@
     export default {
         name: "CvImage",
       // eslint-disable-next-line vue/require-prop-types
-        props: ['address', 'scale'],
+        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightXl'],
         data: () => {
             return {}
         },
         computed: {
             styleObject: {
                 get() {
-                    return {
-                        width: `${this.scale}%`,
-                        height: `${this.scale}%`,
-                        display: 'block',
-                        margin: 'auto'
+                    let ret = {
+                      "object-fit": "contain",
+                      "max-height": this.maxHeight,
+                      width: `${this.scale}%`,
+                      height: `${this.scale}%`,
+                    };
+
+                    if (this.$vuetify.breakpoint.xl) {
+                      ret["max-height"] = this.maxHeightXl;
+                    } else if (this.$vuetify.breakpoint.mdAndUp) {
+                      ret["max-height"] = this.maxHeightMd;
                     }
+
+                    return ret;
                 }
 
             }

diff --git a/photon-client/src/components/common/cv-input.vue b/photon-client/src/components/common/cv-input.vue
@@ -4,10 +4,10 @@
       dense
       align="center"
     >
-      <v-col :cols="3">
-        <span>{{ name }}</span>
+      <v-col cols="4">
+        <span class="ml-2">{{ name }}</span>
       </v-col>
-      <v-col :cols="9">
+      <v-col cols="8">
         <v-text-field
           v-model="localValue"
           dark

diff --git a/photon-client/src/components/common/cv-range-slider.vue b/photon-client/src/components/common/cv-range-slider.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <v-row dense align="center">
+    <v-row
+      dense
+      align="center"
+    >
       <v-col :cols="2">
         <span>{{ name }}</span>
       </v-col>

diff --git a/photon-client/src/components/common/cv-select.vue b/photon-client/src/components/common/cv-select.vue
@@ -4,18 +4,18 @@
       dense
       align="center"
     >
-      <v-col :cols="3">
+      <v-col :cols="12 - (selectCols || 9)">
         <span>{{ name }}</span>
       </v-col>
-      <v-col :cols="9">
+      <v-col :cols="selectCols || 9">
         <v-select
           v-model="localValue"
           :items="indexList"
           item-text="name"
           item-value="index"
           dark
-          color="#fcf6de"
-          item-color="blue"
+          color="accent"
+          item-color="secondary"
           :disabled="disabled"
           @change="$emit('rollback', localValue)"
         />
@@ -28,7 +28,7 @@
     export default {
         name: 'Select',
       // eslint-disable-next-line vue/require-prop-types
-        props: ['list', 'name', 'value', 'disabled'],
+        props: ['list', 'name', 'value', 'disabled', 'selectCols'],
         data() {
             return {}
         },

diff --git a/photon-client/src/components/common/cv-slider.vue b/photon-client/src/components/common/cv-slider.vue
@@ -1,18 +1,22 @@
 <template>
   <div>
-    <v-row dense align="center">
-      <v-col :cols="2">
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="12 - (sliderCols || 8)">
         <span>{{ name }}</span>
       </v-col>
-      <v-col :cols="10">
+      <v-col :cols="sliderCols || 8">
         <v-slider
           :value="localValue"
           dark
           class="align-center"
           :max="max"
           :min="min"
           hide-details
-          color="#ffd843"
+          color="accent"
+          :disabled="disabled"
           :step="step"
           @start="isClicked = true"
           @end="isClicked = false"
@@ -25,6 +29,7 @@
               dark
               :max="max"
               :min="min"
+              :disabled="disabled"
               :value="localValue"
               class="mt-0 pt-0"
               hide-details
@@ -47,7 +52,7 @@
 export default {
   name: "Slider",
   // eslint-disable-next-line vue/require-prop-types
-  props: ["min", "max", "name", "value", "step"],
+  props: ["min", "max", "name", "value", "step", "sliderCols", "disabled"],
   data() {
     return {
       isFocused: false,
@@ -63,7 +68,7 @@ export default {
       set(value) {
         this.$emit("input", value);
       }
-    }
+    },
   },
   methods: {
     handleChange(val) {