Updated settings to a navbar layout

src/App.vue

@@ -365,6 +365,11 @@ html {
   padding: 0;
 }
 
+.section-content {
+  padding: 0;
+  height: 100%;
+}
+
 // Style tour
 .v-tour__target--highlighted {
   box-shadow: 0px 40px 200px 30px rgba(0, 0, 0, 0.5),

src/components/appContent.vue

@@ -113,7 +113,7 @@
         :require-connection="false"
         :current-tab="currentTab"
       >
-        <settingsContent />
+        <settingsContent class="section-content" />
       </tabContent>
 
       <tabContent

src/components/genericComponents/tabContent.vue

@@ -4,7 +4,7 @@
     :hidden="currentTab != tabID"
     class="uk-width-expand uk-height-1-1"
   >
-    <div class="section-content"><slot></slot></div>
+    <slot></slot>
   </div>
 </template>
 
@@ -37,9 +37,4 @@ export default {
   line-height: 20px;
   cursor: default;
 }
-
-.section-content {
-  padding: 0;
-  height: 100%;
-}
 </style>

src/components/genericComponents/tabIcon.vue

@@ -7,7 +7,7 @@
     @click="setThisTab"
   >
     <slot></slot>
-    <div class="tabtitle">
+    <div v-if="showTitle" class="tabtitle">
       {{ computedTitle }}
     </div>
   </a>
@@ -27,6 +27,16 @@ export default {
       required: false,
       default: undefined
     },
+    showTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     currentTab: {
       type: String,
       required: true
@@ -52,7 +62,11 @@ export default {
     },
 
     tooltipOptions: function() {
-      return `pos: right; title: ${this.computedTitle}; delay: 500`;
+      if (this.showTooltip) {
+        return `pos: right; title: ${this.computedTitle}; delay: 500`;
+      } else {
+        return false;
+      }
     },
 
     classObject: function() {

src/components/tabContentComponents/settingsContent.vue

@@ -1,9 +1,6 @@
 <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>
@@ -11,14 +8,12 @@
 </template>
 
 <script>
-import paneStatus from "../controlComponents/paneStatus";
 import settingsDisplay from "../viewComponents/settingsDisplay.vue";
 
 export default {
   name: "NavigateContent",
 
   components: {
-    paneStatus,
     settingsDisplay
   }
 };

src/components/viewComponents/settingsComponents/statusPane.vue

@@ -79,10 +79,10 @@
 
 <script>
 import axios from "axios";
-import progressBar from "../genericComponents/progressBar";
+import progressBar from "../../genericComponents/progressBar";
 
 export default {
-  name: "PaneStatus",
+  name: "StatusPane",
 
   components: {
     progressBar

src/components/viewComponents/settingsDisplay.vue

@@ -1,53 +1,178 @@
 <template>
-  <div id="settingsDisplay" class="uk-padding uk-height-1-1">
-    <div class="uk-height-1-1 uk-child-width-expand@m" uk-grid>
-      <div class="uk-padding-remove">
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="settings-nav">
+      <ul class="uk-nav uk-nav-default">
+        <li class="uk-nav-header">Application settings</li>
+        <li>
+          <tabIcon
+            id="settings-status-icon"
+            tab-i-d="status"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="false"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Status
+          </tabIcon>
+        </li>
+        <li>
+          <tabIcon
+            id="settings-display-icon"
+            tab-i-d="display"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="false"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Display
+          </tabIcon>
+        </li>
+        <li class="uk-nav-header">Microscope settings</li>
+        <li>
+          <tabIcon
+            id="settings-camera-icon"
+            tab-i-d="camera"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Camera
+          </tabIcon>
+        </li>
+        <li>
+          <tabIcon
+            id="settings-mapping-icon"
+            tab-i-d="mapping"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Camera/stage mapping
+          </tabIcon>
+        </li>
+        <li>
+          <tabIcon
+            id="settings-microscope-icon"
+            tab-i-d="microscope"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            General
+          </tabIcon>
+        </li>
+      </ul>
+    </div>
+    <div class="view-component uk-width-expand uk-padding-small">
+      <tabContent
+        tab-i-d="status"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
         <div class="settings-pane uk-padding-small">
-          <h3>System settings</h3>
+          <h3>Status</h3>
+          <statusPane />
+        </div>
+      </tabContent>
+
+      <tabContent
+        tab-i-d="display"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <h3>Display settings</h3>
           <appSettings />
           <hr />
           <streamSettings />
         </div>
-      </div>
-      <div class="uk-padding-remove">
-        <div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
+      </tabContent>
+
+      <tabContent
+        tab-i-d="camera"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
           <h3>Camera settings</h3>
           <cameraSettings />
         </div>
-      </div>
-      <div class="uk-padding-remove">
-        <div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
+      </tabContent>
+
+      <tabContent
+        tab-i-d="mapping"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
           <h3>Camera/stage mapping settings</h3>
           <cameraStageMappingSettings />
         </div>
-      </div>
-      <div class="uk-padding-remove">
-        <div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
+      </tabContent>
+
+      <tabContent
+        tab-i-d="microscope"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
           <h3>Microscope settings</h3>
           <microscopeSettings />
         </div>
-      </div>
+      </tabContent>
     </div>
   </div>
 </template>
 
 <script>
+import statusPane from "./settingsComponents/statusPane.vue";
 import streamSettings from "./settingsComponents/streamSettings.vue";
 import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import appSettings from "./settingsComponents/appSettings.vue";
 import cameraStageMappingSettings from "./settingsComponents/cameraStageMappingSettings.vue";
 
+// Import generic components
+import tabIcon from "../genericComponents/tabIcon";
+import tabContent from "../genericComponents/tabContent";
+
 // Export main app
 export default {
   name: "SettingsDisplay",
 
   components: {
+    statusPane,
     streamSettings,
     cameraSettings,
     microscopeSettings,
     cameraStageMappingSettings,
-    appSettings
+    appSettings,
+    tabIcon,
+    tabContent
+  },
+
+  data: function() {
+    return {
+      selected: "status",
+      currentTab: "status"
+    };
+  },
+
+  methods: {
+    setTab: function(event, tab) {
+      if (!(this.currentTab == tab)) {
+        this.currentTab = tab;
+      }
+    }
   }
 };
 </script>
@@ -57,6 +182,16 @@ export default {
   border-width: 0 1px 0 0;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
-  min-height: 100%;
+}
+
+.settings-nav {
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 250px;
+  padding: 10px;
+  background-color: rgba(180, 180, 180, 0.03);
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
 }
 </style>