From 04fc1bbee0cdc3b02288ff5d3b2c402633cae1f1 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 5 Aug 2021 12:09:54 +0200
Subject: [PATCH] feat(UI): automatic scroll to selected tab element in left
 bar

---
 .../components/WorkspaceExploreBarSchema.vue  | 43 +++++++++++++++---
 src/renderer/scss/themes/dark-theme.scss      |  3 +-
 src/renderer/scss/themes/light-theme.scss     | 44 +++++++++++++------
 3 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/src/renderer/components/WorkspaceExploreBarSchema.vue b/src/renderer/components/WorkspaceExploreBarSchema.vue
index d2f8b85f..7199cb3b 100644
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@@ -16,9 +16,10 @@
             <ul class="menu menu-nav pt-0">
                <li
                   v-for="table of filteredTables"
+                  :ref="breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name) ? 'explorebar-selected' : ''"
                   :key="table.name"
                   class="menu-item"
-                  :class="{'text-bold': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
+                  :class="{'selected': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
                   @mousedown.left="selectTable({schema: database.name, table})"
                   @dblclick="openDataTab({schema: database.name, table})"
                   @contextmenu.prevent="showTableContext($event, table)"
@@ -59,8 +60,9 @@
                         <li
                            v-for="trigger of filteredTriggers"
                            :key="trigger.name"
+                           :ref="breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name ? 'explorebar-selected' : ''"
                            class="menu-item"
-                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name}"
+                           :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name}"
                            @mousedown="selectMisc({schema: database.name, misc: trigger, type: 'trigger'})"
                            @dblclick="openMiscPermanentTab({schema: database.name, misc: trigger, type: 'trigger'})"
                            @contextmenu.prevent="showMiscContext($event, {...trigger, type: 'trigger'})"
@@ -92,8 +94,9 @@
                         <li
                            v-for="(procedure, i) of filteredProcedures"
                            :key="`${procedure.name}-${i}`"
+                           :ref="breadcrumbs.schema === database.name && breadcrumbs.routine === procedure.name ? 'explorebar-selected' : ''"
                            class="menu-item"
-                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.routine === procedure.name}"
+                           :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.routine === procedure.name}"
                            @mousedown="selectMisc({schema: database.name, misc: procedure, type: 'routine'})"
                            @dblclick="openMiscPermanentTab({schema: database.name, misc: procedure, type: 'routine'})"
                            @contextmenu.prevent="showMiscContext($event, {...procedure, type: 'procedure'})"
@@ -125,8 +128,9 @@
                         <li
                            v-for="(func, i) of filteredTriggerFunctions"
                            :key="`${func.name}-${i}`"
+                           :ref="breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name ? 'explorebar-selected' : ''"
                            class="menu-item"
-                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name}"
+                           :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name}"
                            @mousedown="selectMisc({schema: database.name, misc: func, type: 'triggerFunction'})"
                            @dblclick="openMiscPermanentTab({schema: database.name, misc: func, type: 'triggerFunction'})"
                            @contextmenu.prevent="showMiscContext($event, {...func, type: 'triggerFunction'})"
@@ -158,8 +162,9 @@
                         <li
                            v-for="(func, i) of filteredFunctions"
                            :key="`${func.name}-${i}`"
+                           :ref="breadcrumbs.schema === database.name && breadcrumbs.function === func.name ? 'explorebar-selected' : ''"
                            class="menu-item"
-                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.function === func.name}"
+                           :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.function === func.name}"
                            @mousedown="selectMisc({schema: database.name, misc: func, type: 'function'})"
                            @dblclick="openMiscPermanentTab({schema: database.name, misc: func, type: 'function'})"
                            @contextmenu.prevent="showMiscContext($event, {...func, type: 'function'})"
@@ -191,8 +196,9 @@
                         <li
                            v-for="scheduler of filteredSchedulers"
                            :key="scheduler.name"
+                           :ref="breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name ? 'explorebar-selected' : ''"
                            class="menu-item"
-                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name}"
+                           :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name}"
                            @mousedown="selectMisc({schema: database.name, misc: scheduler, type: 'scheduler'})"
                            @dblclick="openMiscPermanentTab({schema: database.name, misc: scheduler, type: 'scheduler'})"
                            @contextmenu.prevent="showMiscContext($event, {...scheduler, type: 'scheduler'})"
@@ -278,6 +284,27 @@ export default {
          return this.database.tables.reduce((acc, curr) => acc + curr.size, 0);
       }
    },
+   watch: {
+      breadcrumbs (newVal, oldVal) {
+         if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+            setTimeout(() => {
+               const element = this.$refs['explorebar-selected'] ? this.$refs['explorebar-selected'][0] : null;
+               if (element) {
+                  const rect = element.getBoundingClientRect();
+                  const elemTop = rect.top;
+                  const elemBottom = rect.bottom;
+                  const isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
+
+                  if (!isVisible) {
+                     element.setAttribute('tabindex', '-1');
+                     element.focus();
+                     element.removeAttribute('tabindex');
+                  }
+               }
+            }, 50);
+         }
+      }
+   },
    methods: {
       ...mapActions({
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
@@ -386,6 +413,10 @@ export default {
 
 <style lang="scss">
 .workspace-explorebar-database {
+  .selected {
+    font-weight: 700;
+  }
+
   .database-name {
     position: sticky;
     top: 0;
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index eeba6855..fcf9780c 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -167,7 +167,8 @@
         }
 
         .menu-item {
-          &:hover {
+          &:hover,
+          &.selected {
             color: $body-font-color-dark;
             background: rgba($color: #fff, $alpha: 0.05);
           }
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index 10e23ff4..eba79eed 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -18,20 +18,11 @@
     background: #ababab;
   }
 
-  #titlebar {
-    background: $bg-color-light;
-    box-shadow: 0 0 1px 0 #000;
-
-    .titlebar-elements {
-      .titlebar-element {
-        &:hover {
-          opacity: 1;
-          background: rgba($color: rgb(172, 172, 172), $alpha: 0.2);
-        }
-
-        &.close-button:hover {
-          background: red;
-        }
+  .menu {
+    .menu-item a {
+      &:hover {
+        color: $body-font-color;
+        background: rgba($color: #000, $alpha: 0.1);
       }
     }
   }
@@ -111,6 +102,24 @@
     }
   }
 
+  #titlebar {
+    background: $bg-color-light;
+    box-shadow: 0 0 1px 0 #000;
+
+    .titlebar-elements {
+      .titlebar-element {
+        &:hover {
+          opacity: 1;
+          background: rgba($color: rgb(172, 172, 172), $alpha: 0.2);
+        }
+
+        &.close-button:hover {
+          background: red;
+        }
+      }
+    }
+  }
+
   #settingbar {
     width: $settingbar-width;
     height: calc(100vh - #{$excluding-size});
@@ -180,6 +189,13 @@
           background: $bg-color-light-gray;
         }
 
+        .menu-item {
+          &:hover,
+          &.selected {
+            background: rgba($color: #000, $alpha: 0.05);
+          }
+        }
+
         .table-size {
           opacity: 0.4;
         }