From 2327b9b8bf832f2ab1018e98507c4d3faac420ed Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Mon, 10 Jun 2019 19:26:19 +0100
Subject: [PATCH] Tidied up component structure

---
 src/App.vue                                   | 165 +-------------
 src/assets/less/theme.less                    |   2 +-
 .../{ => controlComponents}/paneCapture.vue   |   0
 .../{ => controlComponents}/paneConnect.vue   |  23 +-
 .../{ => controlComponents}/paneNavigate.vue  |   0
 .../{ => controlComponents}/panePlugins.vue   |   0
 .../{ => controlComponents}/paneSettings.vue  |   9 +-
 .../settingsComponents}/appSettings.vue       |   0
 .../settingsComponents}/cameraSettings.vue    |   0
 .../microscopeSettings.vue                    |   0
 .../settingsComponents}/streamSettings.vue    |   0
 .../{ => genericComponents}/tabContent.vue    |  16 +-
 .../{ => genericComponents}/tabIcon.vue       |   8 +-
 .../paneDisplayComponents/streamDisplay.vue   | 203 ------------------
 src/components/panelLeft.vue                  | 111 ++++++++++
 src/components/panelRight.vue                 |  66 ++++++
 .../galleryComponents/captureCard.vue         |   0
 .../galleryComponents/scanCard.vue            |   0
 .../galleryDisplay.vue                        |   0
 19 files changed, 224 insertions(+), 379 deletions(-)
 rename src/components/{ => controlComponents}/paneCapture.vue (100%)
 rename src/components/{ => controlComponents}/paneConnect.vue (95%)
 rename src/components/{ => controlComponents}/paneNavigate.vue (100%)
 rename src/components/{ => controlComponents}/panePlugins.vue (100%)
 rename src/components/{ => controlComponents}/paneSettings.vue (73%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/appSettings.vue (100%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/cameraSettings.vue (100%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/microscopeSettings.vue (100%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/streamSettings.vue (100%)
 rename src/components/{ => genericComponents}/tabContent.vue (58%)
 rename src/components/{ => genericComponents}/tabIcon.vue (81%)
 delete mode 100644 src/components/paneDisplayComponents/streamDisplay.vue
 create mode 100644 src/components/panelLeft.vue
 create mode 100644 src/components/panelRight.vue
 rename src/components/{paneDisplayComponents => viewComponents}/galleryComponents/captureCard.vue (100%)
 rename src/components/{paneDisplayComponents => viewComponents}/galleryComponents/scanCard.vue (100%)
 rename src/components/{paneDisplayComponents => viewComponents}/galleryDisplay.vue (100%)

diff --git a/src/App.vue b/src/App.vue
index 26b8f1d9..6a7a658b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,50 +3,8 @@
 
     <!-- Grid managing whole app -->
     <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
-
-      <!-- Grid managing the left panel -->
-      <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
-
-        <!-- Vertical tab bar -->
-        <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
-          <tabIcon id="connect" name="Connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
-          <tabIcon id="navigate" name="Navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-          <tabIcon id="capture" name="Capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-          <tabIcon id="settings" name="Settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
-        </div>
-
-        <!-- Corresponding vertical tab content -->
-        <div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
-          <div id="component-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
-            <tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
-              <paneConnect/>
-            </tabContent>
-            <tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
-              <paneNavigate/>
-            </tabContent>
-            <tabContent id="capture" :requireConnection="true" :currentTab="currentTab">
-              <paneCapture/>
-            </tabContent>
-            <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
-              <paneSettings/>
-            </tabContent>
-          </div>
-        </div>
-
-      </div>
-
-      <!-- Tabbed panel for gallery and live views -->
-      <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
-        <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
-          <li><a href="#" uk-switcher-item="preview">Live</a></li>
-          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
-        </ul>
-        <ul class="uk-switcher uk-flex uk-flex-1">
-          <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
-          <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
-        </ul>
-      </div>
-
+      <panelLeft/>
+      <panelRight/>
     </div>
 
   </div>
@@ -55,105 +13,29 @@
 <script>
 // Import axios for HTTP requests
 import axios from 'axios'
-// Import basic UIkit
-import UIkit from 'uikit';
 
 // Import components
-import tabIcon from './components/tabIcon.vue'
-import tabContent from './components/tabContent.vue'
-
-// Import components
-import paneConnect from './components/paneConnect.vue'
-import paneNavigate from './components/paneNavigate.vue'
-import paneCapture from './components/paneCapture.vue'
-import panePlugins from './components/panePlugins.vue'
-import paneSettings from './components/paneSettings.vue'
-// Import components
-import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
-import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'
+import panelLeft from './components/panelLeft.vue'
+import panelRight from './components/panelRight.vue'
 
 // Export main app
 export default {
   name: 'app',
 
   components: {
-    tabIcon,
-    tabContent,
-    streamDisplay,
-    galleryDisplay,
-    paneConnect,
-    paneNavigate,
-    paneCapture,
-    panePlugins,
-    paneSettings
+    panelRight,
+    panelLeft
   },
 
   data: function () {
-    return {
-      currentTab: 'connect',
-      showControlBar: true,
-      window: {
-        width: 0,
-        height: 0
-      }
-    }  
+    return {}  
   },
 
   created: function () {
-    var context = this
-
-    window.addEventListener('resize', this.handleResize)
-    this.handleResize();
-
     window.addEventListener('beforeunload', this.handleExit)
   },
 
-  mounted() {
-    // Attach methods to UIkit events for tab switching
-    var context = this;
-    // Gallery tab
-    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
-      console.log("Gallery tab entered")
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', false)
-      }
-      context.$root.$emit('globalUpdateCaptureList');
-    });
-
-    // Stream tab
-    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
-      console.log("Stream tab entered")
-      UIkit.update()
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', true)
-      }
-    });
-
-  },
-
-  beforeDestroy: function () {
-    window.removeEventListener('resize', this.handleResize)
-  },
-
   methods: {
-    setTab: function(event, tab) {
-      console.log(event)
-      console.log(tab)
-      if (this.currentTab == tab) {
-        this.showControlBar = !this.showControlBar
-        this.currentTab = 'none'
-      }
-      else {
-        this.showControlBar = true
-        this.currentTab = tab
-      }
-    },
-
-    handleResize: function(event) {
-      this.window.width = window.innerWidth;
-      this.window.height = window.innerHeight;
-    },
-
     handleExit: function(event) {
       console.log("Triggered beforeunload")
       this.$root.$emit('globalTogglePreview', false)
@@ -166,14 +48,6 @@ export default {
         'uk-light': this.$store.state.globalSettings.darkMode,
         'uk-background-secondary': this.$store.state.globalSettings.darkMode
       }
-    },
-    disableIfDisconnected: function () {
-      return {
-        'uk-disabled': !this.$store.getters.ready
-      }
-    },
-    onMobile: function () {
-      return (this.window.width <= 800) ? true : false 
     }
   }
 
@@ -204,29 +78,4 @@ body, html {
   opacity: 0.4;
 }
 
-.uk-tab {
-  padding-left: 0;
-}
-#component-left {
-  width: 300px;
-}
-
-#container-left {
-  overflow: hidden auto;
-}
-
-#container-left, #switcher-left {
-  border-width: 0 1px 0 0;
-  border-style: solid;
-  border-color: rgba(180, 180, 180, 0.25)
-}
-
-#switcher-left a{
-  padding: 12px 20px;
-}
-
-#switcher-left{
-  background-color: rgba(180, 180, 180, 0.1);
-}
-
 </style>
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index d13bd7b1..bc48ab18 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -188,7 +188,7 @@
 
 .hook-inverse() {
     .uk-button-primary{
-        background-color: rgba(180, 180, 180, 0.1);
+        background-color: rgba(180, 180, 180, 0.15);
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
diff --git a/src/components/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
similarity index 100%
rename from src/components/paneCapture.vue
rename to src/components/controlComponents/paneCapture.vue
diff --git a/src/components/paneConnect.vue b/src/components/controlComponents/paneConnect.vue
similarity index 95%
rename from src/components/paneConnect.vue
rename to src/components/controlComponents/paneConnect.vue
index 41de7f1c..ffcb8824 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/controlComponents/paneConnect.vue
@@ -2,8 +2,6 @@
 <div class="host-input">
   <div class="uk-margin">
 
-    <h4>Connect</h4>
-
     <form @submit.prevent="handleSubmit">
       <div class="uk-form-controls uk-margin">
         <label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="true"> Connect locally</label><br>
@@ -23,10 +21,11 @@
           <div class="uk-accordion-content">
             <label class="uk-form-label" for="form-stacked-text">Port</label>
             <div class="uk-form-controls">
-              <input v-model="computedPort" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>
+              <input v-model="computedPort" class="uk-input uk-form-small" id="form-stacked-text" type="number" value=5000>
             </div>
           </div>
         </li>
+
         <li>
           <a class="uk-accordion-title" href="#">Status</a>
           <div class="uk-accordion-content">
@@ -35,23 +34,23 @@
               <p><b>Base URI:</b> {{ $store.getters.uri }}</p>
               <p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
             </div>
-
             <div v-else-if="$store.state.waiting"><div uk-spinner></div></div>
             <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
             <div v-else>No active connection</div>
           </div>
         </li>
+
         <li v-if="!localMode" class="uk-open">
           <a class="uk-accordion-title" href="#">Saved hosts</a>
           <div class="uk-accordion-content">
             <button v-if="$store.getters.ready" v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">Save Current</button>
-
             <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
-              <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
-              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto" uk-icon="trash"></a> 
+              <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
+              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto host-delete" uk-icon="trash"></a> 
             </div>
           </div>
         </li>
+
       </ul>
 
       <button class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">Connect</button>
@@ -246,4 +245,14 @@ export default {
 .host-input {
   text-align: left;
 }
+
+.host-description {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.host-delete {
+  padding: 0 2px 0 10px;
+}
+
 </style>
diff --git a/src/components/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue
similarity index 100%
rename from src/components/paneNavigate.vue
rename to src/components/controlComponents/paneNavigate.vue
diff --git a/src/components/panePlugins.vue b/src/components/controlComponents/panePlugins.vue
similarity index 100%
rename from src/components/panePlugins.vue
rename to src/components/controlComponents/panePlugins.vue
diff --git a/src/components/paneSettings.vue b/src/components/controlComponents/paneSettings.vue
similarity index 73%
rename from src/components/paneSettings.vue
rename to src/components/controlComponents/paneSettings.vue
index c0c6e9ce..f24b80cb 100644
--- a/src/components/paneSettings.vue
+++ b/src/components/controlComponents/paneSettings.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="paneSettings">
     
-    <h3>Settings</h3>
     <appSettings/>
 
     <ul uk-accordion="multiple: true">
@@ -26,10 +25,10 @@
 </template>
 
 <script>
-import streamSettings from './paneSettingsComponents/streamSettings.vue'
-import microscopeSettings from './paneSettingsComponents/microscopeSettings.vue'
-import cameraSettings from './paneSettingsComponents/cameraSettings.vue'
-import appSettings from './paneSettingsComponents/appSettings.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'
 
 // Export main app
 export default {
diff --git a/src/components/paneSettingsComponents/appSettings.vue b/src/components/controlComponents/settingsComponents/appSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/appSettings.vue
rename to src/components/controlComponents/settingsComponents/appSettings.vue
diff --git a/src/components/paneSettingsComponents/cameraSettings.vue b/src/components/controlComponents/settingsComponents/cameraSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/cameraSettings.vue
rename to src/components/controlComponents/settingsComponents/cameraSettings.vue
diff --git a/src/components/paneSettingsComponents/microscopeSettings.vue b/src/components/controlComponents/settingsComponents/microscopeSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/microscopeSettings.vue
rename to src/components/controlComponents/settingsComponents/microscopeSettings.vue
diff --git a/src/components/paneSettingsComponents/streamSettings.vue b/src/components/controlComponents/settingsComponents/streamSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/streamSettings.vue
rename to src/components/controlComponents/settingsComponents/streamSettings.vue
diff --git a/src/components/tabContent.vue b/src/components/genericComponents/tabContent.vue
similarity index 58%
rename from src/components/tabContent.vue
rename to src/components/genericComponents/tabContent.vue
index 2a62409e..77c0d575 100644
--- a/src/components/tabContent.vue
+++ b/src/components/genericComponents/tabContent.vue
@@ -5,7 +5,9 @@
     v-bind:hidden="currentTab!=id" 
     class="uk-width-expand"
   >
-    <slot></slot>
+    <div class="section-heading">{{ id }}</div>
+    <div class="section-content"><slot></slot></div>
+    
   </div>
 
 </template>
@@ -28,4 +30,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
+.section-heading {
+  display: block;
+  font-size: 12px;
+  text-transform: uppercase;
+  line-height: 20px;
+}
+
+.section-content, .section-heading {
+  padding: 9px 10px;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/tabIcon.vue b/src/components/genericComponents/tabIcon.vue
similarity index 81%
rename from src/components/tabIcon.vue
rename to src/components/genericComponents/tabIcon.vue
index 2d892a16..40e28478 100644
--- a/src/components/tabIcon.vue
+++ b/src/components/genericComponents/tabIcon.vue
@@ -16,8 +16,7 @@ export default {
   props: {
     id: String,
     currentTab: String,
-    requireConnection: Boolean,
-    name: String
+    requireConnection: Boolean
   },
 
   methods: {
@@ -28,7 +27,8 @@ export default {
 
   computed: {
     tooltipOptions: function () {
-      return `pos: right; title: ${this.name}; delay: 500`
+      var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
+      return `pos: right; title: ${title}; delay: 500`
     },
 
     classObject: function () {
@@ -45,7 +45,7 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../assets/less/theme.less";
+@import "../../assets/less/theme.less";
 
 .tabicon-active {
   color: @global-primary-background !important;
diff --git a/src/components/paneDisplayComponents/streamDisplay.vue b/src/components/paneDisplayComponents/streamDisplay.vue
deleted file mode 100644
index 8ccbb654..00000000
--- a/src/components/paneDisplayComponents/streamDisplay.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<template>
-	<div class="streamDisplay uk-width-1-1 uk-height-1-1 scrollTarget" id="streamDisplay" ref="streamDisplay">
-
-		<img class="uk-align-center uk-margin-remove-bottom" v-on:dblclick="clickmonitor" v-if="showStream" v-bind:src="streamImgUri" alt="Stream">
-
-		<div v-else-if="$store.state.waiting" class="uk-position-center">
-			<div uk-spinner="ratio: 4.5" ></div>
-		</div>
-
-		<div v-else-if="$store.state.globalSettings.disableStream" class="uk-position-center position-relative text-center">
-			Stream preview disabled
-		</div>
-
-		<div v-else class="uk-position-center position-relative text-center">
-			No active connection
-		</div>
-
-	</div>
-</template>
-
-<script>
-import axios from 'axios'
-
-// Export main app
-export default {
-  name: 'streamDisplay',
-
-  data: function () {
-    return {
-			displaySize: [0, 0],
-			displayPosition: [0, 0],
-			GpuPreviewActive: false,
-      resizeTeimoutId: setTimeout(this.doneResizing, 500)
-    }
-  },
-
-  mounted() {
-		// A global signal listener to change the GPU preview state
-    this.$root.$on('globalResizePreview', (state) => {
-			this.handleDoneResize()
-		})
-    // A global signal listener to change the GPU preview state
-    this.$root.$on('globalTogglePreview', (state) => {
-			console.log(`Toggling preview to ${state}`)
-			this.previewRequest(state)
-		})
-	},
-
-	created: function () {
-		// Add resize listener
-		window.addEventListener('resize', this.handleResize);
-		
-		// Watch for host 'ready'
-		this.$store.watch(
-			(state)=>{
-				return this.$store.getters.ready
-			},
-			(newValue, oldValue)=>{
-				// 'ready' changed, so do something
-				console.log(oldValue)
-				console.log(newValue)
-				this.previewRequest(this.$store.state.globalSettings.autoGpuPreview)
-			}
-		)
-	},
-
-	beforeDestroy: function () {
-		// Remove resize listener
-		window.removeEventListener('resize', this.handleResize)
-	},
-
-  methods: {
-    clickmonitor: function(event) {
-			// Calculate steps from event coordinates and store config FOV
-			var xCoordinate = event.offsetX;
-			var yCoordinate = event.offsetY;
-
-			var xRelative = (0.5*event.target.offsetWidth - xCoordinate)/event.target.offsetWidth;
-			var yRelative = (0.5*event.target.offsetHeight - yCoordinate)/event.target.offsetHeight;
-
-			var xSteps = xRelative * this.$store.state.apiConfig.fov[0];
-			var ySteps = yRelative * this.$store.state.apiConfig.fov[1];
-
-			// Emit a signal to move, acted on by panelNavigate.vue
-			this.$root.$emit('globalMoveEvent', xSteps, ySteps, 0, false)
-		},
-		
-		handleResize: function(event) {
-			// Only fires resize event after no resize in 500ms (prevents resize event spam)
-			clearTimeout(this.resizeTeimoutId);
-			this.resizeTeimoutId = setTimeout(this.handleDoneResize, 500)
-		},
-
-		handleDoneResize: function() {
-			// Recalculate size
-			this.recalculateSize();
-			if (this.$store.state.globalSettings.autoGpuPreview == true && this.GpuPreviewActive == true) {
-				// Reload preview
-				this.$root.$emit('globalTogglePreview', true)
-			}
-		},
-
-		recalculateSize: function () {
-			console.log("Recalculating window dimensions...")
-			// Stacking parentNode is a hacky fix
-			// For some reason, when switching tabs, width was always half what it should be,
-			// until the size was recalculated at some later time. Probably something to do
-			// with tab transition. This parentNode stuff instead reads the size of the tab
-			// container, irrespective of WHICH tab is selected. It's nasty, but works.
-			let element = this.$refs.streamDisplay.parentNode.parentNode;
-
-			let size = [element.clientWidth, element.clientHeight];
-
-			let elem_pos = [element.getBoundingClientRect().left, element.getBoundingClientRect().top];
-			let wind_pos = [window.screenX, window.screenY];
-			let navHeight = window.outerHeight - window.innerHeight;
-			let position = [Math.max(0, wind_pos[0] + elem_pos[0]), Math.max(0, wind_pos[1] + elem_pos[1] + navHeight)];
-
-			this.displaySize = size;
-			this.displayPosition = position;
-		},
-
-    previewRequest: function(state) {
-			if (this.$store.getters.ready == true) {
-				// Create URI and set this.GpuPreviewActive depending on if starting or stopping preview
-				if (state == true) {
-					this.GpuPreviewActive = true
-					var requestUri = this.startPreviewUri;
-				}
-				else {
-					this.GpuPreviewActive = false;
-					var requestUri = this.stopPreviewUri;
-				}
-
-				// Generate payload if tracking window position
-				if (this.$store.state.globalSettings.trackWindow == true && state == true) {
-					// Recalculate frame dimensions and position
-					this.recalculateSize()
-					// Copy data into payload array
-					var payload = {
-						window : [
-							this.displayPosition[0],
-							this.displayPosition[1],
-							this.displaySize[0],
-							this.displaySize[1],
-						]
-					}
-				}
-				else {
-					var letpayload = {}
-				}
-
-				// Send preview request
-				axios.post(requestUri, payload)
-				.then(response => { 
-					this.$store.dispatch('updateState');  // Update store state
-				})
-				.catch(error => {
-					this.modalError(error) // Let mixin handle error
-				})
-			}
-    },
-
-  },
-
-  computed: {
-		showStream: function () {
-			return this.$store.getters.ready && !this.$store.state.globalSettings.disableStream
-		},
-    streamImgUri: function () {
-      return this.$store.getters.uri + "/stream"
-		},
-		startPreviewUri: function () {
-			return this.$store.getters.uri + "/camera/preview/start"
-		},
-		stopPreviewUri: function () {
-			return this.$store.getters.uri + "/camera/preview/stop"
-		}
-	}
-
-}
-</script>
-
-<style scoped lang="less">
-.streamDisplay img {
-	height: 100%;
-	text-align: center;
-	object-fit: contain
-}
-
-.streamDisplay {
-	width: 100%;
-	height: 100%;
-}
-
-.position-relative {
-	position: relative !important;
-}
-
-.text-center {
-	text-align: center;
-}
-</style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
new file mode 100644
index 00000000..9336cddd
--- /dev/null
+++ b/src/components/panelLeft.vue
@@ -0,0 +1,111 @@
+<template>
+  <div id="panel-left" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
+
+    <!-- Vertical tab bar -->
+    <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
+      <tabIcon id="connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+    </div>
+
+    <!-- Corresponding vertical tab content -->
+    <div v-bind:hidden="!showControlBar" 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" :requireConnection="false" :currentTab="currentTab">
+          <paneConnect/>
+        </tabContent>
+        <tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
+          <paneNavigate/>
+        </tabContent>
+        <tabContent id="capture" :requireConnection="true" :currentTab="currentTab">
+          <paneCapture/>
+        </tabContent>
+        <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
+          <paneSettings/>
+        </tabContent>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+// Import axios for HTTP requests
+import axios from 'axios'
+
+// Import generic components
+import tabIcon from './genericComponents/tabIcon.vue'
+import tabContent from './genericComponents/tabContent.vue'
+
+// Import pane components
+import paneConnect from './controlComponents/paneConnect.vue'
+import paneNavigate from './controlComponents/paneNavigate.vue'
+import paneCapture from './controlComponents/paneCapture.vue'
+import paneSettings from './controlComponents/paneSettings.vue'
+
+// Export main app
+export default {
+  name: 'panelLeft',
+
+  components: {
+    tabIcon,
+    tabContent,
+    paneConnect,
+    paneNavigate,
+    paneCapture,
+    paneSettings
+  },
+
+  data: function () {
+    return {
+      currentTab: 'connect',
+      showControlBar: true,
+    }  
+  },
+
+  methods: {
+    setTab: function(event, tab) {
+      if (this.currentTab == tab) {
+        this.showControlBar = !this.showControlBar
+        this.currentTab = 'none'
+      }
+      else {
+        this.showControlBar = true
+        this.currentTab = tab
+      }
+    }
+
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+
+#component-left {
+  width: 300px;
+}
+
+#container-left {
+  overflow: hidden auto;
+  background-color: rgba(180, 180, 180, 0.025);
+}
+
+#container-left, #switcher-left {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25)
+}
+
+#switcher-left a{
+  padding: 12px 20px;
+}
+
+#switcher-left{
+  background-color: rgba(180, 180, 180, 0.1);
+  padding-top: 2px !important;
+}
+
+</style>
diff --git a/src/components/panelRight.vue b/src/components/panelRight.vue
new file mode 100644
index 00000000..f3db8871
--- /dev/null
+++ b/src/components/panelRight.vue
@@ -0,0 +1,66 @@
+<template>
+  <!-- Tabbed panel for gallery and live views -->
+  <div id="panel-right" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
+    <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
+        <li><a href="#" uk-switcher-item="preview">Live</a></li>
+        <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
+    </ul>
+    <ul class="uk-switcher uk-flex uk-flex-1">
+        <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
+        <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+// Import axios for HTTP requests
+import axios from 'axios'
+// Import basic UIkit
+import UIkit from 'uikit';
+
+// Import components
+import streamDisplay from './viewComponents/streamDisplay.vue'
+import galleryDisplay from './viewComponents/galleryDisplay.vue'
+
+// Export main app
+export default {
+  name: 'panelRight',
+
+  components: {
+    streamDisplay,
+    galleryDisplay,
+  },
+
+  mounted() {
+    // Attach methods to UIkit events for tab switching
+    var context = this;
+    // Gallery tab
+    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
+      console.log("Gallery tab entered")
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', false)
+      }
+      context.$root.$emit('globalUpdateCaptureList');
+    });
+
+    // Stream tab
+    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
+      console.log("Stream tab entered")
+      UIkit.update()
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', true)
+      }
+    });
+
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+
+.uk-tab {
+  padding-left: 0;
+}
+
+</style>
diff --git a/src/components/paneDisplayComponents/galleryComponents/captureCard.vue b/src/components/viewComponents/galleryComponents/captureCard.vue
similarity index 100%
rename from src/components/paneDisplayComponents/galleryComponents/captureCard.vue
rename to src/components/viewComponents/galleryComponents/captureCard.vue
diff --git a/src/components/paneDisplayComponents/galleryComponents/scanCard.vue b/src/components/viewComponents/galleryComponents/scanCard.vue
similarity index 100%
rename from src/components/paneDisplayComponents/galleryComponents/scanCard.vue
rename to src/components/viewComponents/galleryComponents/scanCard.vue
diff --git a/src/components/paneDisplayComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
similarity index 100%
rename from src/components/paneDisplayComponents/galleryDisplay.vue
rename to src/components/viewComponents/galleryDisplay.vue