Move progress bar into the action button to stop components jumping

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 {

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">
+    <button
-      <action-progress-bar
+      type="button"
-        v-if="taskStarted && hideOnRun"
+      :disabled="buttonDisabled"
-        :progress="progress"
+      class="uk-button uk-width-1-1 uk-position-relative"
-        :task-status="taskStatus"
+      :class="buttonClasses"
-      />
+      @click="handleClick"
-      <!-- hideOnRun selects if the button hides, don't show progress bar if button doesn't hide. -->
+    >
-      <button
+      <action-progress-bar :progress="progress" :task-status="taskStatus" :in-button="true" />
-        v-if="canTerminate && taskRunning"
+      {{ buttonLabel }}
-        type="button"
+    </button>
-        class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
-        @click="terminateTask"
-      >
-        Cancel
-      </button>
-    </div>
 
-    <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() {
+    buttonDisabled() {
-      return this.thingActionUrl(this.thing, this.action);
+      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();

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;

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>

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"