From 3de9927cd2e62935ae2114041b0574052e6ab1e9 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 17:00:26 +0100
Subject: [PATCH] Added a proper indeterminate progress bar

---
 .../controlComponents/paneNavigate.vue        |  10 +-
 .../settingsComponents/cameraSettings.vue     |  10 +-
 .../genericComponents/progressBar.vue         | 142 ++++++++++++++++++
 .../formComponents/JsonForm.vue               |   9 +-
 4 files changed, 164 insertions(+), 7 deletions(-)
 create mode 100644 src/components/genericComponents/progressBar.vue

diff --git a/src/components/controlComponents/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue
index 1adb59a0..11d1314a 100644
--- a/src/components/controlComponents/paneNavigate.vue
+++ b/src/components/controlComponents/paneNavigate.vue
@@ -66,9 +66,10 @@
       <a class="uk-accordion-title" href="#">Autofocus</a>
       <div class="uk-accordion-content">
 
-        <div class="uk-text-center uk-container" v-if="isAutofocusing">
-          <div class="center-spinner" uk-spinner></div>
+        <div v-if="isAutofocusing">
+          <progressBar/>
         </div>
+
         <div class="uk-grid-small uk-child-width-1-3" v-bind:hidden="isAutofocusing" uk-grid>
           <div>
             <button v-on:click="runFastAutofocus(2000, 300);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fast</button>
@@ -90,6 +91,7 @@
 
 <script>
 import axios from 'axios'
+import progressBar from "../genericComponents/progressBar"
 
 // Key Codes
 const keyCodes = {
@@ -107,6 +109,10 @@ const keyCodes = {
 export default {
   name: 'paneNavigate',
 
+  components: {
+    progressBar
+  },
+
   data: function () {
     return {
       keysDown: {},
diff --git a/src/components/controlComponents/settingsComponents/cameraSettings.vue b/src/components/controlComponents/settingsComponents/cameraSettings.vue
index 86c5ff5e..b8127113 100644
--- a/src/components/controlComponents/settingsComponents/cameraSettings.vue
+++ b/src/components/controlComponents/settingsComponents/cameraSettings.vue
@@ -24,9 +24,10 @@
 
     <button type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Apply Settings</button>
     
-    <div class="uk-text-center uk-container" v-if="isCalibrating">
-      <div class="center-spinner" uk-spinner></div>
+    <div v-if="isCalibrating">
+      <progressBar/>
     </div>
+
     <div v-bind:hidden="isCalibrating">
       <button type="button" v-on:click="recalibrateConfirm()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Auto-Calibrate</button>
     </div>
@@ -40,11 +41,16 @@
 
 <script>
 import axios from 'axios'
+import progressBar from "../../genericComponents/progressBar"
 
 // Export main app
 export default {
   name: 'microscopeSettings',
 
+  components: {
+    progressBar
+  },
+
   data: function () {
     return {
       shutterSpeed: this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed,
diff --git a/src/components/genericComponents/progressBar.vue b/src/components/genericComponents/progressBar.vue
new file mode 100644
index 00000000..6cd3e95d
--- /dev/null
+++ b/src/components/genericComponents/progressBar.vue
@@ -0,0 +1,142 @@
+<template>
+<div class="progress uk-margin-top uk-margin-horizontal-remove uk-padding-remove">
+  <div class="indeterminate"></div>
+</div>
+</template>
+
+<script>
+
+export default {
+  name: 'progressBar',
+
+  props: {},
+
+  methods: {
+    setThisTab(event, value) {
+      this.$emit('set-tab', event, this.id);
+    }
+  },
+
+  computed: {
+    tooltipOptions: function () {
+      var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
+      return `pos: right; title: ${title}; delay: 500`
+    },
+
+    classObject: function () {
+      return {
+        'tabicon-active': this.currentTab == this.id,
+        'uk-disabled': (this.requireConnection && !this.$store.getters.ready)
+      }
+    }
+
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/theme.less";
+
+.progress {
+  position: relative;
+  height: 5px;
+  display: block;
+  width: 100%;
+  background-color: rgba(180, 180, 180, 0.15);
+  border-radius: 2px;
+  background-clip: padding-box;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden; 
+}
+
+.progress .determinate {
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  bottom: 0;
+  transition: width .3s linear; 
+}
+
+.progress .indeterminate, .progress .determinate {
+  background-color: @global-primary-background; 
+}
+
+.hook-inverse() {
+    .progress .indeterminate, .progress .determinate{
+        background-color: @inverse-primary-muted-color;
+    }
+}
+
+.progress .indeterminate:before {
+  content: '';
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 
+}
+
+.progress .indeterminate:after {
+  content: '';
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
+          animation-delay: 1.15s; 
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 3f3e3fff..afc4ebf3 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -26,8 +26,8 @@
         </component>
       </div>
 
-      <div class="uk-text-center uk-container uk-margin-small" v-if="taskRunning">
-        <div class="center-spinner" uk-spinner></div>
+      <div v-if="taskRunning">
+        <progressBar/>
       </div>
 
       <button v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
@@ -48,6 +48,8 @@ import htmlBlock from "./fieldComponents/htmlBlock";
 import radioList from "./fieldComponents/radioList";
 import checkList from "./fieldComponents/checkList"
 
+import progressBar from "../../genericComponents/progressBar"
+
 export default {
   name: 'JsonForm',
 
@@ -57,7 +59,8 @@ export default {
     textInput,
     htmlBlock,
     radioList,
-    checkList
+    checkList,
+    progressBar
   },
 
   props: {