Moved control tab content into components

src/App.vue

@@ -4,49 +4,28 @@
     <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
 
       <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
-        <div class="uk-padding-remove uk-height-1-1 uk-width-auto">
+
-          <div id="switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
+        <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
-            <tabIcon 
+          <tabIcon id="connect" name="Connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
-              id="connect"
+          <tabIcon id="navigate" name="Navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-              name="Connect"
+          <tabIcon id="capture" name="Capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-              uk-icon="server"
+          <tabIcon id="settings" name="Settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
-              :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>
         </div>
 
         <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">
-            <div v-bind:hidden="currentTab!='connect'" class="uk-width-expand"><paneConnect/></div>
+            <tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
-            <div v-bind:hidden="currentTab!='navigate'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneNavigate/></div>
+              <paneConnect/>
-            <div v-bind:hidden="currentTab!='capture'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneCapture/></div>
+            </tabContent>
-            <div v-bind:hidden="currentTab!='settings'" class="uk-width-expand"><paneSettings/></div>
+            <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>
 
@@ -76,6 +55,7 @@ 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'
@@ -93,6 +73,7 @@ export default {
 
   components: {
     tabIcon,
+    tabContent,
     streamDisplay,
     galleryDisplay,
     paneConnect,
@@ -214,12 +195,12 @@ body, html {
 }
 
 .uk-disabled {
-    pointer-events: none;
+  pointer-events: none;
-    opacity: 0.5;
+  opacity: 0.4;
 }
 
 .uk-tab {
-    padding-left: 0;
+  padding-left: 0;
 }
 #component-left {
   width: 300px;

src/components/tabContent.vue

@@ -0,0 +1,31 @@
+<template>
+  
+  <div 
+    v-if="!(this.requireConnection && !this.$store.getters.ready)"
+    v-bind:hidden="currentTab!=id" 
+    class="uk-width-expand"
+  >
+    <slot></slot>
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: 'tabContent',
+
+  props: {
+    id: String,
+    currentTab: String,
+    requireConnection: Boolean,
+  },
+
+  methods: {},
+  computed: {}
+}
+
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/tabIcon.vue

@@ -12,6 +12,7 @@
 
 export default {
   name: 'tabIcon',
+
   props: {
     id: String,
     currentTab: String,