Merge branch 'deduplicate-tabs-and-scroll' into 'v3'

De-duplicate HTML for tab content, add way for tab to request scroll to top

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

webapp/src/components/appContent.vue

@@ -56,29 +56,20 @@
     </div>
 
     <!-- Corresponding vertical tab content -->
-    <div id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
-      <!-- For each top tab -->
+    <div
+      id="container-left"
+      ref="containerLeft"
+      class="uk-padding-remove uk-height-1-1 uk-width-expand"
+    >
       <tabContent
-        v-for="item in topTabs"
+        v-for="item in allTabs"
         :id="item.id + '-tab-content'"
         :key="item.id + '-tab-content'"
         :tab-i-d="item.id"
         :require-connection="true"
         :current-tab="currentTab"
       >
-        <component :is="item.component"></component>
-      </tabContent>
-
-      <!-- For each bottom tab -->
-      <tabContent
-        v-for="item in bottomTabs"
-        :id="item.id + '-tab-content'"
-        :key="item.id + '-tab-content'"
-        :tab-i-d="item.id"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <component :is="item.component"></component>
+        <component :is="item.component" @scrollTop="scrollToTop"></component>
       </tabContent>
     </div>
   </div>
@@ -195,7 +186,9 @@ export default {
       }
       return tabs;
     },
-
+    allTabs() {
+      return [...this.topTabs, ...this.bottomTabs];
+    },
     currentTabIndex: function() {
       return this.tabOrder.indexOf(this.currentTab);
     },
@@ -238,6 +231,9 @@ export default {
     enterApp: function() {
       // Stuff to do once connected and all init modals are finished
     },
+    scrollToTop() {
+      this.$refs.containerLeft.scrollTo({ top: 0 });
+    },
   },
 };
 </script>

webapp/src/components/tabContentComponents/loggingContent.vue

@@ -72,7 +72,7 @@
         :page-class="'page-item'"
         :active-class="'uk-active'"
         :disabled-class="'uk-disabled'"
-        :click-handler="scrollToTop()"
+        :click-handler="scrollToTop"
       >
       </Paginate>
     </div>
@@ -135,10 +135,7 @@ export default {
 
   methods: {
     scrollToTop() {
-      const el = document.querySelector("#container-left");
-      if (el) {
-        el.scrollTop = 0;
-      }
+      this.$emit("scrollTop");
     },
     visibilityChanged(isVisible) {
       if (isVisible) {