From 9ccb9cf0c9a2f2a21647e1a9012d6d1d69237699 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 8 Feb 2019 13:04:56 +0000
Subject: [PATCH] Added tabs to display panel, and general layout improvements

---
 src/App.vue                                   | 20 ++++++--------
 .../paneDisplayComponents/streamDisplay.vue   | 27 ++++++++++---------
 src/components/panelDisplay.vue               | 16 ++++++-----
 src/components/panelLeft.vue                  | 14 ++++++----
 4 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1e87f210..9acca9c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,14 @@
 <template>
   <div id="app">
-    <div id="overlay-toggle">
-      <a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
-    </div>
-    <div uk-grid class="uk-height-1-1" margin=0>
-      <div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-card uk-card-default uk-card-body uk-padding-remove-top uk-padding-remove-right uk-width-auto uk-height-1-1">
-        <div class="uk-card-header">
-            <h3 class="uk-card-title"><b>OpenFlexure</b> Microscope</h3>
-        </div>
+    <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
+      <div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-first-column uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1">
         <panelLeft/>
       </div>
-      <div class="uk-width-expand">
-        <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
-          <panelDisplay/>
+      <div class="uk-padding-remove uk-height-1-1 uk-width-expand">
+        <div id="overlay-toggle">
+          <a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
         </div>
+        <panelDisplay/>
       </div>
     </div>
   </div>
@@ -106,7 +101,8 @@ body, html {
   height: 30px;
   position: fixed;
   right: 0;
-  margin: 20px;
+  margin-right: 20px;
+  margin-top: 12px;
   z-index: 999
 }
 
diff --git a/src/components/paneDisplayComponents/streamDisplay.vue b/src/components/paneDisplayComponents/streamDisplay.vue
index 8c6bf3a4..c6339345 100644
--- a/src/components/paneDisplayComponents/streamDisplay.vue
+++ b/src/components/paneDisplayComponents/streamDisplay.vue
@@ -1,7 +1,10 @@
 <template>
 	<div class="streamDisplay">
-		<div class="streamContainer" v-if="$store.state.connected">
-			<img v-bind:src="streamImgUri" alt="Stream">
+
+		<img v-if="$store.state.connected" 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>
 </template>
@@ -9,7 +12,7 @@
 <script>
 // Export main app
 export default {
-  name: 'streanmDisplay',
+  name: 'streamDisplay',
 
   computed: {
     // a computed getter
@@ -23,14 +26,14 @@ export default {
 </script>
 
 <style scoped lang="less">
-	.streamContainer img {
-		width: 100%;
-		height: 100%;
-		object-fit: contain
-	}
+.streamDisplay img {
+	width: 100%;
+	height: 100%;
+	object-fit: contain
+}
 
-	.streamContainer, .streamDisplay {
-		width: 100%;
-		height: 100%;
-	}
+.streamDisplay {
+	width: 100%;
+	height: 100%;
+}
 </style>
diff --git a/src/components/panelDisplay.vue b/src/components/panelDisplay.vue
index d7808936..938ed1a9 100644
--- a/src/components/panelDisplay.vue
+++ b/src/components/panelDisplay.vue
@@ -1,6 +1,12 @@
 <template>
-  <div id="panelDisplay">
-    <streamDisplay/>
+  <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
+    <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom" uk-tab>
+      <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="Live"></a></li>
+      <li><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
+    </ul>
+    <ul class="uk-switcher uk-flex uk-flex-1">
+      <li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>
+    </ul>
   </div>
 </template>
 
@@ -19,9 +25,5 @@ export default {
 }
 </script>
 
-<style lang="less">
-#panelDisplay {
-	width: 100%;
-	height: 100%;
-}
+<style scoped lang="less">
 </style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 0fbe2382..ccb88a26 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -1,14 +1,17 @@
 <template>
-  <div id="panelLeft" class="uk-margin-remove uk-padding-remove">
-    <ul class="uk-flex-center" uk-tab>
+  <div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
+    <div class="uk-flex-none uk-card-header">
+      <h3 class="uk-card-title uk-align-center"><b>OpenFlexure</b> Microscope</h3>
+    </div>
+    <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
       <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-padding-small panel-content">
-      <li><paneConnect/></li>
+    <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
+      <li class="uk-width-expand"><paneConnect/></li>
     </ul>
   </div>
 </template>
@@ -28,12 +31,13 @@ export default {
 
 <style lang="less">
 #panelLeft {
-  height:100%;
+  
 }
 .uk-tab {
     padding-left: 0;
 }
 .panel-content {
   width: 300px;
+  overflow: auto;
 }
 </style>