From 2937010e955b7c295074204bed5ec90b9a11c065 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Sun, 9 Nov 2025 18:19:16 +0000
Subject: [PATCH] Move progress bar into the action button to stop components
 jumping

---
 webapp/src/assets/less/theme.less             |  3 +-
 .../labThingsComponents/actionButton.vue      | 74 +++++++++----------
 .../labThingsComponents/actionProgressBar.vue | 22 +++++-
 .../csmSteps/focusStep.vue                    |  2 -
 .../controlComponents/autofocusControl.vue    |  1 -
 5 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/webapp/src/assets/less/theme.less b/webapp/src/assets/less/theme.less
index c3c89bf6..237f0649 100644
--- a/webapp/src/assets/less/theme.less
+++ b/webapp/src/assets/less/theme.less
@@ -343,7 +343,7 @@ a:hover {
     border-radius: @button-border-radius;
     padding: 0 8px;
     border-color: @global-border;
-    margin-bottom: 2px;
+    margin-bottom: 4px;
     text-transform:none !important;
 }
 
@@ -356,7 +356,6 @@ a:hover {
     background-color: rgba(180, 180, 180, 0.10);
     border-color: @global-primary-background;
     color: @button-text-color;
-    margin-bottom: 4px;
 }
 
 .uk-button-danger {
diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index a9550f23..e15d57dc 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -1,37 +1,16 @@
 <template>
   <div v-observe-visibility="visibilityChanged" class="uk-margin-remove uk-padding-remove">
-    <div v-if="taskStarted" ref="isPollingElement">
-      <action-progress-bar
-        v-if="taskStarted && hideOnRun"
-        :progress="progress"
-        :task-status="taskStatus"
-      />
-      <!-- hideOnRun selects if the button hides, don't show progress bar if button doesn't hide. -->
-      <button
-        v-if="canTerminate && taskRunning"
-        type="button"
-        class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
-        @click="terminateTask"
-      >
-        Cancel
-      </button>
-    </div>
+    <button
+      type="button"
+      :disabled="buttonDisabled"
+      class="uk-button uk-width-1-1 uk-position-relative"
+      :class="buttonClasses"
+      @click="handleClick"
+    >
+      <action-progress-bar :progress="progress" :task-status="taskStatus" :in-button="true" />
+      {{ buttonLabel }}
+    </button>
 
-    <div>
-      <button
-        type="button"
-        :disabled="isDisabled"
-        :hidden="taskStarted && hideOnRun"
-        class="uk-button uk-width-1-1"
-        :class="[
-          isDisabled ? 'uk-button-disabled' : '',
-          buttonPrimary ? 'uk-button-primary' : 'uk-button-default',
-        ]"
-        @click="bootstrapTask"
-      >
-        {{ submitLabel }}
-      </button>
-    </div>
     <action-status-modal
       ref="statusModal"
       :title="submitLabel"
@@ -113,11 +92,6 @@ export default {
       required: false,
       default: false,
     },
-    hideOnRun: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
   },
 
   data: function () {
@@ -132,8 +106,25 @@ export default {
   },
 
   computed: {
-    submitUrl() {
-      return this.thingActionUrl(this.thing, this.action);
+    buttonDisabled() {
+      return this.isDisabled || (this.taskRunning && !this.canTerminate);
+    },
+    buttonLabel() {
+      return this.taskRunning && this.canTerminate ? "Cancel" : this.submitLabel;
+    },
+    buttonClasses() {
+      const classes = [];
+      if (this.buttonDisabled) {
+        classes.push("uk-button-disabled");
+      }
+      if (this.taskRunning && this.canTerminate) {
+        classes.push("uk-button-danger");
+      } else if (this.buttonPrimary) {
+        classes.push("uk-button-primary");
+      } else {
+        classes.push("uk-button-default");
+      }
+      return classes.join(" ");
     },
   },
 
@@ -177,6 +168,13 @@ export default {
   },
 
   methods: {
+    handleClick() {
+      if (this.taskStarted) {
+        this.terminateTask();
+      } else {
+        this.bootstrapTask();
+      }
+    },
     visibilityChanged(isVisible) {
       if (isVisible && this.taskStarted != true) {
         this.checkExistingTasks();
diff --git a/webapp/src/components/labThingsComponents/actionProgressBar.vue b/webapp/src/components/labThingsComponents/actionProgressBar.vue
index 00afc787..d997b5d7 100644
--- a/webapp/src/components/labThingsComponents/actionProgressBar.vue
+++ b/webapp/src/components/labThingsComponents/actionProgressBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="progress uk-margin-small">
+  <div class="progress uk-margin-small" :class="inButton ? 'in-button' : 'stand-alone'">
     <div v-if="indeterminateProgressBar" class="indeterminate"></div>
     <div v-else class="determinate" :style="barWidthFromProgress"></div>
   </div>
@@ -19,6 +19,11 @@ export default {
       type: String,
       required: true,
     },
+    inButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   computed: {
@@ -41,7 +46,20 @@ export default {
 <style lang="less" scoped>
 @import "../../assets/less/theme.less";
 
-.progress {
+.in-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: transparent;
+  border-radius: 0;
+  margin: 0;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.stand-alone {
   position: relative;
   height: 5px;
   display: block;
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
index 2f8584a7..9d77c15b 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
@@ -11,7 +11,6 @@
           :button-primary="false"
           :submit-data="{ x: 0, y: 0, z: -100 }"
           :submit-label="' - '"
-          :hide-on-run="false"
           :can-terminate="false"
         />
         <action-button
@@ -22,7 +21,6 @@
           :submit-data="{ x: 0, y: 0, z: 100 }"
           :submit-label="'+'"
           :can-terminate="false"
-          :hide-on-run="false"
         />
       </div>
     </template>
diff --git a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
index c2e5256e..ef70d6c6 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
@@ -9,7 +9,6 @@
         :submit-label="'Autofocus'"
         :button-primary="true"
         :submit-on-event="'globalFastAutofocusEvent'"
-        :is-disabled="isAutofocusing"
         @taskStarted="onAutofocus"
         @finished="afterAutofocus"
         @error="modalError"