From 07c4399bbf6fde4ed4abf274ca4d291da9ce3b02 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 24 Apr 2020 11:19:46 +0100
Subject: [PATCH] Further layout improvements

---
 .../controlComponents/paneCapture.vue         |   2 +-
 .../controlComponents/paneNavigate.vue        |  15 +-
 .../genericComponents/taskSubmitter.vue       |   4 +-
 src/components/pluginComponents/JsonForm.vue  |   2 +-
 .../settingsComponents/appSettings.vue        |   1 +
 .../settingsComponents/cameraSettings.vue     | 142 +++++++++---------
 .../cameraStageMappingSettings.vue            |  12 +-
 .../settingsComponents/statusPane.vue         |   7 +-
 .../settingsComponents/streamSettings.vue     |  40 +++--
 .../viewComponents/settingsDisplay.vue        |   5 -
 10 files changed, 121 insertions(+), 109 deletions(-)

diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
index 5b415c2b..fcc3164b 100644
--- a/src/components/controlComponents/paneCapture.vue
+++ b/src/components/controlComponents/paneCapture.vue
@@ -247,7 +247,7 @@
 
     <button
       v-else
-      class="uk-button uk-button-primary uk-form-small uk-margin uk-margin-remove-top uk-width-1-1"
+      class="uk-button uk-button-primary uk-margin uk-margin-remove-top uk-width-1-1"
       @click="handleCapture()"
     >
       Capture
diff --git a/src/components/controlComponents/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue
index 437db9a3..aa8a5d66 100644
--- a/src/components/controlComponents/paneNavigate.vue
+++ b/src/components/controlComponents/paneNavigate.vue
@@ -36,7 +36,7 @@
             </div>
 
             <button
-              class="uk-button uk-button-default uk-form-small uk-margin uk-width-1-1"
+              class="uk-button uk-button-default uk-margin uk-width-1-1"
               @click="zeroRequest()"
             >
               Zero coordinates
@@ -91,7 +91,7 @@
               <p>
                 <button
                   type="submit"
-                  class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1"
+                  class="uk-button uk-button-default uk-float-right uk-width-1-1"
                 >
                   Move
                 </button>
@@ -265,15 +265,17 @@ export default {
         // Lock move requests
         this.moveLock = true;
 
-        if (!this.moveInImageCoordinatesUri){
-          this.modalError("Moving in image coordinates is not supported - you will need to upgrade your microscope's software.");
+        if (!this.moveInImageCoordinatesUri) {
+          this.modalError(
+            "Moving in image coordinates is not supported - you will need to upgrade your microscope's software."
+          );
         }
 
         // Send move request
         axios
           .post(this.moveInImageCoordinatesUri, {
             x: y, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped.
-            y: x,
+            y: x
           })
           .then(() => {
             this.updatePosition(); // Update the position in text boxes
@@ -340,7 +342,8 @@ export default {
           );
           if (foundExtension) {
             // Get plugin action link
-            this.moveInImageCoordinatesUri = foundExtension.links.move_in_image_coordinates.href;
+            this.moveInImageCoordinatesUri =
+              foundExtension.links.move_in_image_coordinates.href;
           }
         })
         .catch(error => {
diff --git a/src/components/genericComponents/taskSubmitter.vue b/src/components/genericComponents/taskSubmitter.vue
index 9ce03642..59d7e9c5 100644
--- a/src/components/genericComponents/taskSubmitter.vue
+++ b/src/components/genericComponents/taskSubmitter.vue
@@ -13,7 +13,7 @@
       <button
         v-if="canTerminate"
         type="button"
-        class="uk-button uk-button-danger uk-form-small uk-margin-remove uk-float-right uk-width-1-1"
+        class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
         @click="terminateTask()"
       >
         Terminate
@@ -24,7 +24,7 @@
       <button
         type="button"
         :hidden="taskRunning"
-        class="uk-button uk-form-small uk-margin-remove uk-width-1-1"
+        class="uk-button uk-margin-remove uk-width-1-1"
         :class="[buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
         @click="bootstrapTask()"
       >
diff --git a/src/components/pluginComponents/JsonForm.vue b/src/components/pluginComponents/JsonForm.vue
index 5d93e950..70262bd8 100644
--- a/src/components/pluginComponents/JsonForm.vue
+++ b/src/components/pluginComponents/JsonForm.vue
@@ -49,7 +49,7 @@
       <div v-else class="uk-margin">
         <button
           type="button"
-          class="uk-button uk-button-primary uk-form-small uk-width-1-1"
+          class="uk-button uk-button-primary uk-width-1-1"
           @click="newQuickRequest(formData)"
         >
           {{ submitLabel }}
diff --git a/src/components/viewComponents/settingsComponents/appSettings.vue b/src/components/viewComponents/settingsComponents/appSettings.vue
index 08ac791f..b47e42ee 100644
--- a/src/components/viewComponents/settingsComponents/appSettings.vue
+++ b/src/components/viewComponents/settingsComponents/appSettings.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="appSettings">
+    <h3>Appearance</h3>
     <p>
       <label>
         Theme
diff --git a/src/components/viewComponents/settingsComponents/cameraSettings.vue b/src/components/viewComponents/settingsComponents/cameraSettings.vue
index 38610f61..234512f4 100644
--- a/src/components/viewComponents/settingsComponents/cameraSettings.vue
+++ b/src/components/viewComponents/settingsComponents/cameraSettings.vue
@@ -1,62 +1,64 @@
 <template>
   <div v-if="settings" id="cameraSettings">
-    <form @submit.prevent="applyConfigRequest">
-      <div v-if="settings.picamera">
-        <!--PiCamera settings block-->
-        <div v-if="settings.picamera.shutter_speed !== undefined">
-          <label class="uk-form-label" for="form-stacked-text"
-            >Exposure time</label
-          >
-          <div class="uk-form-controls">
-            <input
-              v-model="settings.picamera.shutter_speed"
-              class="uk-input uk-form-small"
-              type="number"
-            />
+    <div>
+      <h3>Manual camera settings</h3>
+      <form @submit.prevent="applyConfigRequest">
+        <div v-if="settings.picamera">
+          <!--PiCamera settings block-->
+          <div v-if="settings.picamera.shutter_speed !== undefined">
+            <label class="uk-form-label" for="form-stacked-text"
+              >Exposure time</label
+            >
+            <div class="uk-form-controls">
+              <input
+                v-model="settings.picamera.shutter_speed"
+                class="uk-input uk-form-small"
+                type="number"
+              />
+            </div>
+          </div>
+
+          <div v-if="settings.picamera.analog_gain !== undefined">
+            <label class="uk-form-label" for="form-stacked-text"
+              >Analogue gain</label
+            >
+            <div class="uk-form-controls">
+              <input
+                v-model="settings.picamera.analog_gain"
+                class="uk-input uk-form-small"
+                type="number"
+                step="0.000001"
+              />
+            </div>
+          </div>
+
+          <div v-if="settings.picamera.digital_gain !== undefined">
+            <label class="uk-form-label" for="form-stacked-text"
+              >Digital gain</label
+            >
+            <div class="uk-form-controls">
+              <input
+                v-model="settings.picamera.digital_gain"
+                class="uk-input uk-form-small"
+                type="number"
+                step="0.000001"
+              />
+            </div>
           </div>
         </div>
 
-        <div v-if="settings.picamera.analog_gain !== undefined">
-          <label class="uk-form-label" for="form-stacked-text"
-            >Analogue gain</label
-          >
-          <div class="uk-form-controls">
-            <input
-              v-model="settings.picamera.analog_gain"
-              class="uk-input uk-form-small"
-              type="number"
-              step="0.000001"
-            />
-          </div>
-        </div>
-
-        <div v-if="settings.picamera.digital_gain !== undefined">
-          <label class="uk-form-label" for="form-stacked-text"
-            >Digital gain</label
-          >
-          <div class="uk-form-controls">
-            <input
-              v-model="settings.picamera.digital_gain"
-              class="uk-input uk-form-small"
-              type="number"
-              step="0.000001"
-            />
-          </div>
-        </div>
-      </div>
-
-      <button
-        type="submit"
-        class="uk-button uk-button-primary uk-form-small uk-margin-small uk-width-1-1"
-      >
-        Apply Settings
-      </button>
-    </form>
-
-    <hr />
+        <button
+          type="submit"
+          class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
+        >
+          Apply Settings
+        </button>
+      </form>
+    </div>
 
     <!--Show auto calibrate if default plugin is enabled-->
     <div v-if="'recalibrate' in recalibrationLinks" class="uk-margin-small">
+      <h3>Automatic calibration</h3>
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="true"
@@ -71,28 +73,24 @@
       </taskSubmitter>
     </div>
 
-    <div
-      v-if="'flatten_lens_shading_table' in recalibrationLinks"
-      class="uk-margin-small"
-    >
-      <button
-        class="uk-button uk-button-danger uk-form-small uk-width-1-1"
-        @click="flattenLensShadingTableRequest"
-      >
-        Disable flat-field correction
-      </button>
-    </div>
+    <div class="uk-child-width-expand" uk-grid>
+      <div v-if="'flatten_lens_shading_table' in recalibrationLinks">
+        <button
+          class="uk-button uk-button-danger uk-width-1-1"
+          @click="flattenLensShadingTableRequest"
+        >
+          Disable flat-field correction
+        </button>
+      </div>
 
-    <div
-      v-if="'delete_lens_shading_table' in recalibrationLinks"
-      class="uk-margin-small"
-    >
-      <button
-        class="uk-button uk-button-danger uk-form-small uk-width-1-1"
-        @click="deleteLensShadingTableRequest"
-      >
-        Adaptive flat-field correction
-      </button>
+      <div v-if="'delete_lens_shading_table' in recalibrationLinks">
+        <button
+          class="uk-button uk-button-danger uk-width-1-1"
+          @click="deleteLensShadingTableRequest"
+        >
+          Adaptive flat-field correction
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/viewComponents/settingsComponents/cameraStageMappingSettings.vue b/src/components/viewComponents/settingsComponents/cameraStageMappingSettings.vue
index 84ee70eb..61995262 100644
--- a/src/components/viewComponents/settingsComponents/cameraStageMappingSettings.vue
+++ b/src/components/viewComponents/settingsComponents/cameraStageMappingSettings.vue
@@ -1,8 +1,11 @@
 <template>
   <div id="cameraStageMappingSettings">
+    <h3>Camera/stage mapping</h3>
+    <p>
+      Camera/stage mapping allows the stage to move relative to the camera view.
+      This enables functions like click-to-move, and more precise tile scans.
+    </p>
     <form @submit.prevent="applyConfigRequest">
-     
-
       <!--Show auto calibrate if default plugin is enabled-->
       <div v-if="'calibrate_xy' in recalibrationLinks" class="uk-margin-small">
         <taskSubmitter
@@ -61,7 +64,8 @@ export default {
       axios
         .get(this.settingsUri)
         .then(response => {
-          this.settings = response.data.extensions['org.openflexure.camera_stage_mapping'];
+          this.settings =
+            response.data.extensions["org.openflexure.camera_stage_mapping"];
         })
         .catch(error => {
           this.modalError(error); // Let mixin handle error
@@ -82,7 +86,7 @@ export default {
             // Get plugin action link
             this.recalibrationLinks = foundExtension.links;
           } else {
-            this.recalibrationLinks = {}
+            this.recalibrationLinks = {};
           }
         })
         .catch(error => {
diff --git a/src/components/viewComponents/settingsComponents/statusPane.vue b/src/components/viewComponents/settingsComponents/statusPane.vue
index 0855025c..2a43388b 100644
--- a/src/components/viewComponents/settingsComponents/statusPane.vue
+++ b/src/components/viewComponents/settingsComponents/statusPane.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="host-input uk-padding-small">
+  <div class="host-input">
+    <h3>Status</h3>
     <div v-if="configuration && $store.getters.ready">
       <div>
         <div class="uk-margin-small-bottom">
@@ -49,7 +50,7 @@
         <div>
           <button
             v-show="'shutdown' in systemActionLinks"
-            class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
+            class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
             @click="shutdownRequest"
           >
             Shutdown
@@ -59,7 +60,7 @@
         <div>
           <button
             v-show="'reboot' in systemActionLinks"
-            class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
+            class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
             @click="rebootRequest"
           >
             Restart
diff --git a/src/components/viewComponents/settingsComponents/streamSettings.vue b/src/components/viewComponents/settingsComponents/streamSettings.vue
index 95016673..91669d2a 100644
--- a/src/components/viewComponents/settingsComponents/streamSettings.vue
+++ b/src/components/viewComponents/settingsComponents/streamSettings.vue
@@ -1,26 +1,36 @@
 <template>
   <div id="streamSettings">
-    <p>
+    <div>
+      <h3>Stream settings</h3>
       <label
         ><input v-model="disableStream" class="uk-checkbox" type="checkbox" />
         Disable live stream</label
       >
-    </p>
+    </div>
 
-    <hr />
+    <br />
 
-    <p>
-      <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
-        ><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox" />
-        GPU preview</label
-      >
-    </p>
-    <p>
-      <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
-        ><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
-        Track window</label
-      >
-    </p>
+    <div>
+      <h3>Microscope display output</h3>
+      <div uk-grid>
+        <div>
+          <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
+            ><input
+              v-model="autoGpuPreview"
+              class="uk-checkbox"
+              type="checkbox"
+            />
+            Enable GPU preview</label
+          >
+        </div>
+        <div>
+          <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
+            ><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
+            Track window</label
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/viewComponents/settingsDisplay.vue b/src/components/viewComponents/settingsDisplay.vue
index 744359e6..0759a176 100644
--- a/src/components/viewComponents/settingsDisplay.vue
+++ b/src/components/viewComponents/settingsDisplay.vue
@@ -79,7 +79,6 @@
         :current-tab="currentTab"
       >
         <div class="settings-pane uk-padding-small">
-          <h3>Status</h3>
           <statusPane />
         </div>
       </tabContent>
@@ -90,9 +89,7 @@
         :current-tab="currentTab"
       >
         <div class="settings-pane uk-padding-small">
-          <h3>Display settings</h3>
           <appSettings />
-          <hr />
           <streamSettings />
         </div>
       </tabContent>
@@ -103,7 +100,6 @@
         :current-tab="currentTab"
       >
         <div class="settings-pane uk-padding-small">
-          <h3>Camera settings</h3>
           <cameraSettings />
         </div>
       </tabContent>
@@ -114,7 +110,6 @@
         :current-tab="currentTab"
       >
         <div class="settings-pane uk-padding-small">
-          <h3>Camera/stage mapping settings</h3>
           <cameraStageMappingSettings />
         </div>
       </tabContent>