From 5ca9e3d053f395b54ff3e12fea8807def3781913 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 7 Feb 2019 14:44:04 +0000
Subject: [PATCH] Moved connect to a tabbed panel

---
 src/App.vue                                   | 16 ++++----
 src/assets/less/theme.less                    |  2 +-
 src/components/paneConnect.vue                | 25 ++++++++++++
 .../hostDisplay.vue                           |  0
 .../{ => paneConnectComponents}/hostInput.vue |  0
 src/components/panelLeft.vue                  | 39 +++++++++++++++++++
 6 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 src/components/paneConnect.vue
 rename src/components/{ => paneConnectComponents}/hostDisplay.vue (100%)
 rename src/components/{ => paneConnectComponents}/hostInput.vue (100%)
 create mode 100644 src/components/panelLeft.vue

diff --git a/src/App.vue b/src/App.vue
index 41d334fe..53ed662e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <hostInput/>
-    <hostDisplay/>
+    <panelLeft/>
   </div>
 </template>
 
@@ -15,15 +14,13 @@ import Icons from 'uikit/dist/js/uikit-icons';
 UIkit.use(Icons);
 
 // Import components
-import hostInput from './components/hostInput.vue'
-import hostDisplay from './components/hostDisplay'
+import panelLeft from './components/panelLeft.vue'
 
 // Export main app
 export default {
   name: 'app',
   components: {
-    hostInput,
-    hostDisplay
+    panelLeft
   }
 }
 </script>
@@ -38,6 +35,11 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: left;
-  padding-left: 20px;
+  height: 100%
 }
+
+body, html {
+  height: 100%
+}
+
 </style>
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 3429e5f1..459da018 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -71,7 +71,7 @@
 // Tab
 //
 
-@tab-item-padding-horizontal:                   20px;
+@tab-item-padding-horizontal:                   10px;
 @tab-item-padding-vertical:                     9px;
 @tab-item-border-width:                         2px;
 @tab-item-font-size:                            12px;
diff --git a/src/components/paneConnect.vue b/src/components/paneConnect.vue
new file mode 100644
index 00000000..3ca9e52f
--- /dev/null
+++ b/src/components/paneConnect.vue
@@ -0,0 +1,25 @@
+<template>
+  <div id="paneConnect">
+    <hostInput/>
+    <hostDisplay/>
+  </div>
+</template>
+
+<script>
+// Import components
+import hostInput from './paneConnectComponents/hostInput.vue'
+import hostDisplay from './paneConnectComponents/hostDisplay'
+
+// Export main app
+export default {
+  name: 'paneConnect',
+  components: {
+    hostInput,
+    hostDisplay
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
diff --git a/src/components/hostDisplay.vue b/src/components/paneConnectComponents/hostDisplay.vue
similarity index 100%
rename from src/components/hostDisplay.vue
rename to src/components/paneConnectComponents/hostDisplay.vue
diff --git a/src/components/hostInput.vue b/src/components/paneConnectComponents/hostInput.vue
similarity index 100%
rename from src/components/hostInput.vue
rename to src/components/paneConnectComponents/hostInput.vue
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
new file mode 100644
index 00000000..26bad493
--- /dev/null
+++ b/src/components/panelLeft.vue
@@ -0,0 +1,39 @@
+<template>
+  <div id="panelLeft">
+    <ul class="uk-flex-center" uk-tab>
+      <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>
+      <li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
+      <li><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
+      <li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
+      <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>
+    </ul>
+    <ul class="uk-switcher uk-margin">
+      <li><paneConnect/></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+// Import components
+import paneConnect from './paneConnect.vue'
+
+// Export main app
+export default {
+  name: 'panelLeft',
+  components: {
+    paneConnect,
+  }
+}
+</script>
+
+<style lang="less">
+#panelLeft {
+  width: 300px;
+  height:100%;
+  padding: 0 20px 0 20px;
+  background-color: #fafafa
+}
+.uk-tab {
+    padding-left: 0;
+}
+</style>