Merge branch 'pause-logger' into 'v3'

Make log display pause on hover

See merge request openflexure/openflexure-microscope-server!332

webapp/src/components/labThingsComponents/actionLogDisplay.vue

@@ -1,4 +1,9 @@
 <template>
+  <div
+    class="log-wrapper"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
   <div
     ref="logContainer"
     class="log-container uk-margin-left uk-margin-right uk-margin"
@@ -16,6 +21,12 @@
     </div>
     <div v-if="taskStatus == 'completed'" class="uk-alert uk-alert-success">
       The task completed successfully.
+      </div>
+      
+      <!-- Paused banner outside scroll container, positioned relative to wrapper -->
+    <div v-if="userIsHovering" class="paused-banner">
+      Auto-scroll paused
+      </div>
     </div>
   </div>
 </template>
@@ -35,6 +46,12 @@ export default {
     }
   },
 
+  data() {
+    return {
+      userIsHovering: false,
+    };
+  },
+
   watch: {
     log: function() {
       this.scrollToBottom();
@@ -45,9 +62,19 @@ export default {
   },
 
   methods: {
+    onMouseEnter() {
+      this.userIsHovering = true;
+    },
+    onMouseLeave() {
+      this.userIsHovering = false;
+    },
+
     scrollToBottom() {
-      this.$nextTick(function() {
-        let viewer = this.$refs.logContainer;
+    /*Scroll to bottom of log unless the user is hovering over the log.*/
+      this.$nextTick(() => {
+        if (this.userIsHovering) return;
+
+        const viewer = this.$refs.logContainer;
         viewer.scrollTop = viewer.scrollHeight;
       });
     }
@@ -56,13 +83,38 @@ export default {
 </script>
 
 <style scoped>
-.log-container {
+.log-wrapper {
   position: relative;
+  height: 200px;
+  overflow: hidden;
+  margin-bottom: 1em;
+  margin-top: 1em;
+}
+
+.log-container {
+  height: 100%;
   overflow-y: auto;
   overflow-x: auto;
   background-color: white;
   color: black;
   padding: 0.5em;
   border: 1px solid black;
+  box-sizing: border-box;
+}
+
+/* Floating banner fixed at top-right of wrapper, not affected by scroll */
+.paused-banner {
+  position: absolute;
+  top: 8px;
+  right: 40px;
+  color: black;
+  font-weight: bold;
+  padding: 4px;
+  border-radius: 4px;
+  z-index: 10;
+  font-size: 0.85em;
+  pointer-events: none;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  background-color: white;
 }
 </style>