From 3679a0f9cdcf085aee16b05152b6e7180b9bb6ef Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 13:46:14 +0000
Subject: [PATCH] Replaced navigation with a single universal tab bar

---
 src/App.vue                                   |  37 ++--
 .../controlComponents/paneCapture.vue         |   2 +-
 .../controlComponents/paneNavigate.vue        |   2 +-
 .../controlComponents/paneSettings.vue        |  43 -----
 .../controlComponents/paneStatus.vue          |   2 +-
 .../genericComponents/tabContent.vue          |   9 +-
 src/components/panelLeft.vue                  | 159 ++++++++++--------
 .../tabContentComponents/captureContent.vue   |  25 +++
 .../tabContentComponents/connectContent.vue   |  20 +++
 .../tabContentComponents/galleryContent.vue   |  19 +++
 .../tabContentComponents/navigateContent.vue  |  25 +++
 .../tabContentComponents/settingsContent.vue  |  25 +++
 .../galleryComponents/zipDownloader.vue       |  15 +-
 .../settingsComponents/appSettings.vue        |   0
 .../settingsComponents/cameraSettings.vue     |   0
 .../settingsComponents/microscopeSettings.vue |   0
 .../settingsComponents/streamSettings.vue     |   0
 .../viewComponents/settingsDisplay.vue        |  40 +++++
 18 files changed, 286 insertions(+), 137 deletions(-)
 delete mode 100644 src/components/controlComponents/paneSettings.vue
 create mode 100644 src/components/tabContentComponents/captureContent.vue
 create mode 100644 src/components/tabContentComponents/connectContent.vue
 create mode 100644 src/components/tabContentComponents/galleryContent.vue
 create mode 100644 src/components/tabContentComponents/navigateContent.vue
 create mode 100644 src/components/tabContentComponents/settingsContent.vue
 rename src/components/{controlComponents => viewComponents}/settingsComponents/appSettings.vue (100%)
 rename src/components/{controlComponents => viewComponents}/settingsComponents/cameraSettings.vue (100%)
 rename src/components/{controlComponents => viewComponents}/settingsComponents/microscopeSettings.vue (100%)
 rename src/components/{controlComponents => viewComponents}/settingsComponents/streamSettings.vue (100%)
 create mode 100644 src/components/viewComponents/settingsDisplay.vue

diff --git a/src/App.vue b/src/App.vue
index c2a31018..4ec5e9c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,22 @@
 <template>
-  <div id="app" :class="handleTheme">
-    <!-- Grid managing whole app -->
-    <div
-      uk-grid
-      class="uk-height-1-1 uk-margin-remove uk-padding-remove"
-      margin="0"
-    >
-      <panelLeft />
-      <panelRight />
-    </div>
+  <div
+    id="app"
+    class="uk-height-1-1 uk-margin-remove uk-padding-remove"
+    :class="handleTheme"
+  >
+    <panelLeft />
   </div>
 </template>
 
 <script>
 // Import components
 import panelLeft from "./components/panelLeft.vue";
-import panelRight from "./components/panelRight.vue";
 
 // Export main app
 export default {
   name: "App",
 
   components: {
-    panelRight,
     panelLeft
   },
 
@@ -131,4 +125,23 @@ html {
   pointer-events: none;
   opacity: 0.4;
 }
+
+.control-component {
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 300px;
+  height: 100%;
+  padding: 0;
+  background-color: rgba(180, 180, 180, 0.055);
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
+}
+
+.view-component {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  padding: 0;
+}
 </style>
diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
index 0d70138f..ac549961 100644
--- a/src/components/controlComponents/paneCapture.vue
+++ b/src/components/controlComponents/paneCapture.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="paneCapture">
+  <div id="paneCapture" class="uk-padding-small">
     <div>
       <label class="uk-form-label" for="form-stacked-text">Filename</label>
       <input
diff --git a/src/components/controlComponents/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue
index 6e304952..64b3c6af 100644
--- a/src/components/controlComponents/paneNavigate.vue
+++ b/src/components/controlComponents/paneNavigate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="paneNavigate">
+  <div id="paneNavigate" class="uk-padding-small">
     <div v-if="setPosition">
       <ul uk-accordion="multiple: true; animation: false">
         <li>
diff --git a/src/components/controlComponents/paneSettings.vue b/src/components/controlComponents/paneSettings.vue
deleted file mode 100644
index ca8fd408..00000000
--- a/src/components/controlComponents/paneSettings.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div id="paneSettings">
-    <appSettings />
-
-    <ul uk-accordion="multiple: true; animation: false">
-      <li>
-        <a class="uk-accordion-title" href="#">Stream settings</a>
-        <div class="uk-accordion-content"><streamSettings /></div>
-      </li>
-
-      <li v-if="$store.getters.ready">
-        <a class="uk-accordion-title" href="#">Camera settings</a>
-        <div class="uk-accordion-content"><cameraSettings /></div>
-      </li>
-
-      <li v-if="$store.getters.ready">
-        <a class="uk-accordion-title" href="#">Microscope settings</a>
-        <div class="uk-accordion-content"><microscopeSettings /></div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import streamSettings from "./settingsComponents/streamSettings.vue";
-import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
-import cameraSettings from "./settingsComponents/cameraSettings.vue";
-import appSettings from "./settingsComponents/appSettings.vue";
-
-// Export main app
-export default {
-  name: "PaneSettings",
-
-  components: {
-    streamSettings,
-    cameraSettings,
-    microscopeSettings,
-    appSettings
-  }
-};
-</script>
-
-<style lang="less"></style>
diff --git a/src/components/controlComponents/paneStatus.vue b/src/components/controlComponents/paneStatus.vue
index ea597bd8..fbf4a035 100644
--- a/src/components/controlComponents/paneStatus.vue
+++ b/src/components/controlComponents/paneStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="host-input">
+  <div class="host-input uk-padding-small">
     <div v-if="configuration && $store.getters.ready">
       <div>
         <div class="uk-margin-small-bottom">
diff --git a/src/components/genericComponents/tabContent.vue b/src/components/genericComponents/tabContent.vue
index 144aad70..1b09d514 100644
--- a/src/components/genericComponents/tabContent.vue
+++ b/src/components/genericComponents/tabContent.vue
@@ -2,9 +2,8 @@
   <div
     v-if="!(requireConnection && !$store.getters.ready)"
     :hidden="currentTab != id"
-    class="uk-width-expand"
+    class="uk-width-expand uk-height-1-1"
   >
-    <div class="section-heading">{{ id }}</div>
     <div class="section-content"><slot></slot></div>
   </div>
 </template>
@@ -39,8 +38,8 @@ export default {
   cursor: default;
 }
 
-.section-content,
-.section-heading {
-  padding: 9px 10px;
+.section-content {
+  padding: 0;
+  height: 100%;
 }
 </style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 97901d61..7c81f70e 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -10,13 +10,24 @@
       class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
     >
       <tabIcon
-        id="status"
+        id="connect"
         :require-connection="false"
         :current-tab="currentTab"
         @set-tab="setTab"
       >
         <i class="material-icons">bug_report</i>
       </tabIcon>
+      <tabIcon
+        id="gallery"
+        :require-connection="true"
+        :current-tab="currentTab"
+        @set-tab="setTab"
+      >
+        <i class="material-icons">photo_library</i>
+      </tabIcon>
+
+      <hr />
+
       <tabIcon
         id="navigate"
         :require-connection="true"
@@ -63,66 +74,66 @@
       id="container-left"
       class="uk-padding-remove uk-height-1-1 uk-width-expand"
     >
-      <div
-        id="component-left"
-        class="uk-padding-remove uk-flex uk-flex-1 panel-content"
+      <tabContent
+        id="connect"
+        :require-connection="false"
+        :current-tab="currentTab"
       >
-        <tabContent
-          id="status"
-          :require-connection="false"
-          :current-tab="currentTab"
-        >
-          <paneStatus />
-        </tabContent>
-        <tabContent
-          id="navigate"
-          :require-connection="true"
-          :current-tab="currentTab"
-        >
-          <paneNavigate />
-        </tabContent>
-        <tabContent
-          id="capture"
-          :require-connection="true"
-          :current-tab="currentTab"
-        >
-          <paneCapture />
-        </tabContent>
-        <tabContent
-          id="settings"
-          :require-connection="false"
-          :current-tab="currentTab"
-        >
-          <paneSettings />
-        </tabContent>
+        <connectContent />
+      </tabContent>
+      <tabContent
+        id="gallery"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <galleryContent />
+      </tabContent>
+      <tabContent
+        id="navigate"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <navigateContent />
+      </tabContent>
+      <tabContent
+        id="capture"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <captureContent />
+      </tabContent>
+      <tabContent
+        id="settings"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <settingsContent />
+      </tabContent>
 
-        <tabContent
-          v-for="plugin in pluginsGuiList"
-          :id="plugin.id"
-          :key="plugin.id"
-          :require-connection="plugin.requiresConnection"
-          :current-tab="currentTab"
+      <tabContent
+        v-for="plugin in pluginsGuiList"
+        :id="plugin.id"
+        :key="plugin.id"
+        :require-connection="plugin.requiresConnection"
+        :current-tab="currentTab"
+      >
+        <div
+          v-for="form in plugin.forms"
+          :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
+          class="uk-flex uk-flex-column"
         >
-          <div
-            v-for="form in plugin.forms"
-            :key="
-              `${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()
-            "
-            class="uk-flex uk-flex-column"
-          >
-            <JsonForm
-              :name="form.name"
-              :route="form.route"
-              :is-task="form.isTask"
-              :submit-label="form.submitLabel"
-              :schema="form.schema"
-              :emit-on-response="form.emitOnResponse"
-              @reloadForms="updatePlugins()"
-            />
-            <hr />
-          </div>
-        </tabContent>
-      </div>
+          <JsonForm
+            :name="form.name"
+            :route="form.route"
+            :is-task="form.isTask"
+            :submit-label="form.submitLabel"
+            :schema="form.schema"
+            :emit-on-response="form.emitOnResponse"
+            @reloadForms="updatePlugins()"
+          />
+          <hr />
+        </div>
+      </tabContent>
     </div>
   </div>
 </template>
@@ -135,16 +146,15 @@ import tabIcon from "./genericComponents/tabIcon";
 import tabContent from "./genericComponents/tabContent";
 
 // Import control components
-import paneStatus from "./controlComponents/paneStatus";
 import paneNavigate from "./controlComponents/paneNavigate";
 import paneCapture from "./controlComponents/paneCapture";
-import paneSettings from "./controlComponents/paneSettings";
 
-// Import view components
-import connectDisplay from "./viewComponents/connectDisplay.vue";
-import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
-import streamDisplay from "./viewComponents/streamDisplay.vue";
-import galleryDisplay from "./viewComponents/galleryDisplay.vue";
+// Import new content components
+import connectContent from "./tabContentComponents/connectContent.vue";
+import navigateContent from "./tabContentComponents/navigateContent.vue";
+import captureContent from "./tabContentComponents/captureContent.vue";
+import settingsContent from "./tabContentComponents/settingsContent.vue";
+import galleryContent from "./tabContentComponents/galleryContent.vue";
 
 // Import plugin components
 import JsonForm from "./pluginComponents/JsonForm";
@@ -156,17 +166,20 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    paneStatus,
     paneNavigate,
     paneCapture,
-    paneSettings,
-    JsonForm
+    JsonForm,
+    connectContent,
+    navigateContent,
+    captureContent,
+    settingsContent,
+    galleryContent
   },
 
   data: function() {
     return {
       plugins: [],
-      currentTab: "status",
+      currentTab: "connect",
       unwatchStoreFunction: null
     };
   },
@@ -201,7 +214,7 @@ export default {
           console.log("Left panel now ready");
         } else {
           console.log("Right panel now disabled");
-          this.currentTab = "status";
+          this.currentTab = "connect";
         }
       }
     );
@@ -240,14 +253,16 @@ export default {
 <style scoped lang="less">
 #component-left {
   width: 100%;
+  height: 100%;
 }
 
 #container-left {
-  overflow: hidden auto;
+  overflow: hidden;
   background-color: rgba(180, 180, 180, 0.025);
+  width: 100%;
+  height: 100%;
 }
 
-#container-left,
 #switcher-left {
   border-width: 0 1px 0 0;
   border-style: solid;
diff --git a/src/components/tabContentComponents/captureContent.vue b/src/components/tabContentComponents/captureContent.vue
new file mode 100644
index 00000000..a2959bd2
--- /dev/null
+++ b/src/components/tabContentComponents/captureContent.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component">
+      <paneCapture />
+    </div>
+    <div class="view-component uk-width-expand">
+      <streamDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneCapture from "../controlComponents/paneCapture";
+import streamDisplay from "../viewComponents/streamDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    paneCapture,
+    streamDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/connectContent.vue b/src/components/tabContentComponents/connectContent.vue
new file mode 100644
index 00000000..db98b3fc
--- /dev/null
+++ b/src/components/tabContentComponents/connectContent.vue
@@ -0,0 +1,20 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="view-component uk-width-expand">
+      <connectDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import connectDisplay from "../viewComponents/connectDisplay.vue";
+
+export default {
+  name: "ConnectContent",
+
+  components: {
+    connectDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/galleryContent.vue b/src/components/tabContentComponents/galleryContent.vue
new file mode 100644
index 00000000..c7454cff
--- /dev/null
+++ b/src/components/tabContentComponents/galleryContent.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- Grid managing tab content -->
+
+  <div class="view-component uk-height-1-1 uk-width-expand">
+    <galleryDisplay />
+  </div>
+</template>
+
+<script>
+import galleryDisplay from "../viewComponents/galleryDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    galleryDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/navigateContent.vue b/src/components/tabContentComponents/navigateContent.vue
new file mode 100644
index 00000000..f29d4c5f
--- /dev/null
+++ b/src/components/tabContentComponents/navigateContent.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component">
+      <paneNavigate />
+    </div>
+    <div class="view-component uk-width-expand">
+      <streamDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneNavigate from "../controlComponents/paneNavigate";
+import streamDisplay from "../viewComponents/streamDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    paneNavigate,
+    streamDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/settingsContent.vue b/src/components/tabContentComponents/settingsContent.vue
new file mode 100644
index 00000000..0ca131ce
--- /dev/null
+++ b/src/components/tabContentComponents/settingsContent.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component">
+      <paneStatus />
+    </div>
+    <div class="view-component uk-width-expand uk-padding-small">
+      <settingsDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneStatus from "../controlComponents/paneStatus";
+import settingsDisplay from "../viewComponents/settingsDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    paneStatus,
+    settingsDisplay
+  }
+};
+</script>
diff --git a/src/components/viewComponents/galleryComponents/zipDownloader.vue b/src/components/viewComponents/galleryComponents/zipDownloader.vue
index 7a83c927..f9242565 100644
--- a/src/components/viewComponents/galleryComponents/zipDownloader.vue
+++ b/src/components/viewComponents/galleryComponents/zipDownloader.vue
@@ -63,8 +63,19 @@ export default {
     }
   },
 
-  mounted() {
-    this.updateZipperUri();
+  created: function() {
+    // Watch for host 'ready', then update status
+    this.unwatchStoreFunction = this.$store.watch(
+      (state, getters) => {
+        return getters.ready;
+      },
+      ready => {
+        if (ready) {
+          // If the connection is now ready, update zipper URL
+          this.updateZipperUri();
+        }
+      }
+    );
   },
 
   methods: {
diff --git a/src/components/controlComponents/settingsComponents/appSettings.vue b/src/components/viewComponents/settingsComponents/appSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/appSettings.vue
rename to src/components/viewComponents/settingsComponents/appSettings.vue
diff --git a/src/components/controlComponents/settingsComponents/cameraSettings.vue b/src/components/viewComponents/settingsComponents/cameraSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/cameraSettings.vue
rename to src/components/viewComponents/settingsComponents/cameraSettings.vue
diff --git a/src/components/controlComponents/settingsComponents/microscopeSettings.vue b/src/components/viewComponents/settingsComponents/microscopeSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/microscopeSettings.vue
rename to src/components/viewComponents/settingsComponents/microscopeSettings.vue
diff --git a/src/components/controlComponents/settingsComponents/streamSettings.vue b/src/components/viewComponents/settingsComponents/streamSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/streamSettings.vue
rename to src/components/viewComponents/settingsComponents/streamSettings.vue
diff --git a/src/components/viewComponents/settingsDisplay.vue b/src/components/viewComponents/settingsDisplay.vue
new file mode 100644
index 00000000..fca7c060
--- /dev/null
+++ b/src/components/viewComponents/settingsDisplay.vue
@@ -0,0 +1,40 @@
+<template>
+  <div id="settingsDisplay" class="uk-padding">
+    <div class="uk-child-width-expand@m" uk-grid>
+      <div>
+        <h3>System settings</h3>
+        <appSettings />
+        <streamSettings />
+      </div>
+      <div v-if="$store.getters.ready">
+        <h3>Camera settings</h3>
+        <cameraSettings />
+      </div>
+      <div v-if="$store.getters.ready">
+        <h3>Microscope settings</h3>
+        <microscopeSettings />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import streamSettings from "./settingsComponents/streamSettings.vue";
+import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
+import cameraSettings from "./settingsComponents/cameraSettings.vue";
+import appSettings from "./settingsComponents/appSettings.vue";
+
+// Export main app
+export default {
+  name: "SettingsDisplay",
+
+  components: {
+    streamSettings,
+    cameraSettings,
+    microscopeSettings,
+    appSettings
+  }
+};
+</script>
+
+<style lang="less"></style>