Further layout improvements

2020-04-24 11:19:46 +01:00 · 2020-04-24 11:19:46 +01:00 · 07c4399bbf
commit 07c4399bbf
parent a992f88aea
10 changed files with 121 additions and 109 deletions
--- 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
--- 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 => {
--- 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()"
      >
--- 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 }}
--- 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
--- 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>
--- 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 => {
--- 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
--- 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>

--- 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>