Replaced navigation with a single universal tab bar

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;