Replaced navigation with a single universal tab bar

src/App.vue

@@ -1,28 +1,22 @@
 <template>
-  <div id="app" :class="handleTheme">
+  <div
-    <!-- Grid managing whole app -->
+    id="app"
-    <div
+    class="uk-height-1-1 uk-margin-remove uk-padding-remove"
-      uk-grid
+    :class="handleTheme"
-      class="uk-height-1-1 uk-margin-remove uk-padding-remove"
+  >
-      margin="0"
+    <panelLeft />
-    >
-      <panelLeft />
-      <panelRight />
-    </div>
   </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>

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

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>

src/components/controlComponents/paneSettings.vue

@@ -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>

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">

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-content {
-.section-heading {
+  padding: 0;
-  padding: 9px 10px;
+  height: 100%;
 }
 </style>

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
+      <tabContent
-        id="component-left"
+        id="connect"
-        class="uk-padding-remove uk-flex uk-flex-1 panel-content"
+        :require-connection="false"
+        :current-tab="currentTab"
       >
-        <tabContent
+        <connectContent />
-          id="status"
+      </tabContent>
-          :require-connection="false"
+      <tabContent
-          :current-tab="currentTab"
+        id="gallery"
-        >
+        :require-connection="false"
-          <paneStatus />
+        :current-tab="currentTab"
-        </tabContent>
+      >
-        <tabContent
+        <galleryContent />
-          id="navigate"
+      </tabContent>
-          :require-connection="true"
+      <tabContent
-          :current-tab="currentTab"
+        id="navigate"
-        >
+        :require-connection="true"
-          <paneNavigate />
+        :current-tab="currentTab"
-        </tabContent>
+      >
-        <tabContent
+        <navigateContent />
-          id="capture"
+      </tabContent>
-          :require-connection="true"
+      <tabContent
-          :current-tab="currentTab"
+        id="capture"
-        >
+        :require-connection="true"
-          <paneCapture />
+        :current-tab="currentTab"
-        </tabContent>
+      >
-        <tabContent
+        <captureContent />
-          id="settings"
+      </tabContent>
-          :require-connection="false"
+      <tabContent
-          :current-tab="currentTab"
+        id="settings"
-        >
+        :require-connection="false"
-          <paneSettings />
+        :current-tab="currentTab"
-        </tabContent>
+      >
+        <settingsContent />
+      </tabContent>
 
-        <tabContent
+      <tabContent
-          v-for="plugin in pluginsGuiList"
+        v-for="plugin in pluginsGuiList"
-          :id="plugin.id"
+        :id="plugin.id"
-          :key="plugin.id"
+        :key="plugin.id"
-          :require-connection="plugin.requiresConnection"
+        :require-connection="plugin.requiresConnection"
-          :current-tab="currentTab"
+        :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
+          <JsonForm
-            v-for="form in plugin.forms"
+            :name="form.name"
-            :key="
+            :route="form.route"
-              `${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()
+            :is-task="form.isTask"
-            "
+            :submit-label="form.submitLabel"
-            class="uk-flex uk-flex-column"
+            :schema="form.schema"
-          >
+            :emit-on-response="form.emitOnResponse"
-            <JsonForm
+            @reloadForms="updatePlugins()"
-              :name="form.name"
+          />
-              :route="form.route"
+          <hr />
-              :is-task="form.isTask"
+        </div>
-              :submit-label="form.submitLabel"
+      </tabContent>
-              :schema="form.schema"
-              :emit-on-response="form.emitOnResponse"
-              @reloadForms="updatePlugins()"
-            />
-            <hr />
-          </div>
-        </tabContent>
-      </div>
     </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 new content components
-import connectDisplay from "./viewComponents/connectDisplay.vue";
+import connectContent from "./tabContentComponents/connectContent.vue";
-import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
+import navigateContent from "./tabContentComponents/navigateContent.vue";
-import streamDisplay from "./viewComponents/streamDisplay.vue";
+import captureContent from "./tabContentComponents/captureContent.vue";
-import galleryDisplay from "./viewComponents/galleryDisplay.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;

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>

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>

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>

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>

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>

src/components/viewComponents/galleryComponents/zipDownloader.vue

@@ -63,8 +63,19 @@ export default {
     }
   },
 
-  mounted() {
+  created: function() {
-    this.updateZipperUri();
+    // 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: {

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>