From 48877534d1a41d351b267c0dab925046ca984179 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 11 Aug 2022 11:14:43 +0200
Subject: [PATCH] feat(UI): connection name on left bar, closes #382 #414

---
 src/renderer/components/TheSettingBar.vue | 246 +++++++++++-----------
 src/renderer/scss/_variables.scss         |   2 +-
 src/renderer/scss/themes/dark-theme.scss  |  41 ++--
 src/renderer/scss/themes/light-theme.scss |  22 +-
 4 files changed, 148 insertions(+), 163 deletions(-)

diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index c276226c..8b51cdb3 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -14,17 +14,20 @@
                @start="isDragging = true"
                @end="dragStop"
             >
-               <template #item="{element}">
+               <template #item="{ element }">
                   <li
                      :draggable="true"
-                     class="settingbar-element btn btn-link ex-tooltip"
-                     :class="{'selected': element.uid === selectedWorkspace}"
+                     class="settingbar-element btn btn-link"
+                     :class="{ 'selected': element.uid === selectedWorkspace }"
+                     :title="getConnectionName(element.uid)"
                      @click.stop="selectWorkspace(element.uid)"
                      @contextmenu.prevent="contextMenu($event, element)"
-                     @mouseover.self="tooltipPosition"
                   >
-                     <i class="settingbar-element-icon dbi" :class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]" />
-                     <span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(element.uid) }}</span>
+                     <i
+                        class="settingbar-element-icon dbi"
+                        :class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]"
+                     />
+                     <small class="settingbar-element-name">{{ getConnectionName(element.uid) }}</small>
                   </li>
                </template>
             </Draggable>
@@ -34,14 +37,17 @@
             <li
                v-for="connection in unpinnedConnectionsArr"
                :key="connection.uid"
-               class="settingbar-element btn btn-link ex-tooltip"
-               :class="{'selected': connection.uid === selectedWorkspace}"
+               class="settingbar-element btn btn-link"
+               :class="{ 'selected': connection.uid === selectedWorkspace }"
+               :title="getConnectionName(connection.uid)"
                @click.stop="selectWorkspace(connection.uid)"
                @contextmenu.prevent="contextMenu($event, connection)"
-               @mouseover.self="tooltipPosition"
             >
-               <i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]" />
-               <span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
+               <i
+                  class="settingbar-element-icon dbi"
+                  :class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]"
+               />
+               <small class="settingbar-element-name">{{ getConnectionName(connection.uid) }}</small>
             </li>
          </ul>
       </div>
@@ -50,21 +56,19 @@
          <ul class="settingbar-elements">
             <li
                v-if="isScrollable"
-               class="settingbar-element btn btn-link ex-tooltip"
+               class="settingbar-element btn btn-link"
+               :title="t('message.allConnections')"
                @click="emit('show-connections-modal')"
-               @mouseover.self="tooltipPosition"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
-               <span class="ex-tooltip-content">{{ t('message.allConnections') }} (Shift+CTRL+Space)</span>
             </li>
             <li
-               class="settingbar-element btn btn-link ex-tooltip"
-               :class="{'selected': 'NEW' === selectedWorkspace}"
+               class="settingbar-element btn btn-link"
+               :class="{ 'selected': 'NEW' === selectedWorkspace }"
+               :title="t('message.addConnection')"
                @click="selectWorkspace('NEW')"
-               @mouseover.self="tooltipPosition"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
-               <span class="ex-tooltip-content">{{ t('message.addConnection') }}</span>
             </li>
          </ul>
       </div>
@@ -73,15 +77,21 @@
          <ul class="settingbar-elements">
             <li
                v-if="!disableScratchpad"
-               class="settingbar-element btn btn-link ex-tooltip"
+               class="settingbar-element btn btn-link"
+               :title="t('word.scratchpad')"
                @click="showScratchpad"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
-               <span class="ex-tooltip-content">{{ t('word.scratchpad') }}</span>
             </li>
-            <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
-               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
-               <span class="ex-tooltip-content">{{ t('word.settings') }}</span>
+            <li
+               class="settingbar-element btn btn-link"
+               :title="t('word.settings')"
+               @click="showSettingModal('general')"
+            >
+               <i
+                  class="settingbar-element-icon mdi mdi-24px mdi-cog text-light"
+                  :class="{ ' badge badge-update': hasUpdates }"
+               />
             </li>
          </ul>
       </div>
@@ -98,7 +108,7 @@ import { useSettingsStore } from '@/stores/settings';
 import * as Draggable from 'vuedraggable';
 import SettingBarContext from '@/components/SettingBarContext.vue';
 import { ConnectionParams } from 'common/interfaces/antares';
-import { useElementBounding, useScroll } from '@vueuse/core';
+import { useElementBounding } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -125,7 +135,6 @@ const sidebarConnections: Ref<HTMLDivElement> = ref(null);
 const isContext: Ref<boolean> = ref(false);
 const isDragging: Ref<boolean> = ref(false);
 const isScrollable: Ref<boolean> = ref(false);
-const isScrolling = ref(useScroll(sidebarConnections)?.isScrolling);
 const contextEvent: Ref<MouseEvent> = ref(null);
 const contextConnection: Ref<ConnectionParams> = ref(null);
 const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height);
@@ -240,32 +249,32 @@ watch(selectedWorkspace, (newVal, oldVal) => {
 </script>
 
 <style lang="scss">
-  #settingbar {
-    width: $settingbar-width;
-    height: calc(100vh - #{$excluding-size});
-    display: flex;
-    flex-direction: column;
-    //  justify-content: space-between;
-    align-items: center;
-    padding: 0;
-    z-index: 9;
+#settingbar {
+   width: $settingbar-width;
+   height: calc(100vh - #{$excluding-size});
+   display: flex;
+   flex-direction: column;
+   //  justify-content: space-between;
+   align-items: center;
+   padding: 0;
+   z-index: 9;
 
-    .settingbar-top-elements {
+   .settingbar-top-elements {
       overflow-x: hidden;
       overflow-y: overlay;
       // max-height: calc((100vh - 3.5rem) - #{$excluding-size});
 
       &::-webkit-scrollbar {
-        width: 3px;
+         width: 3px;
       }
-    }
+   }
 
-    .settingbar-bottom-elements {
+   .settingbar-bottom-elements {
       z-index: 1;
       margin-top: auto;
-    }
+   }
 
-    .settingbar-elements {
+   .settingbar-elements {
       list-style: none;
       text-align: center;
       width: $settingbar-width;
@@ -273,101 +282,84 @@ watch(selectedWorkspace, (newVal, oldVal) => {
       margin: 0;
 
       .settingbar-element {
-        height: $settingbar-width;
-        width: 100%;
-        margin: 0;
-        opacity: 0.5;
-        transition: opacity 0.2s;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        border-radius: 0;
-        padding: 0;
+         height: $settingbar-width;
+         width: 100%;
+         margin: 0;
+         opacity: 0.6;
+         transition: opacity 0.2s;
+         display: flex;
+         align-items: center;
+         justify-content: flex-start;
+         border-radius: 0;
+         padding: 0;
+         position: relative;
 
-        &:hover {
-          opacity: 1;
-        }
+         &:hover {
+            opacity: 1;
+         }
 
-        &.selected {
-          opacity: 1;
+         &.selected {
+            opacity: 1;
 
-          &::before {
-            height: $settingbar-width;
-          }
-        }
+            &::before {
+               height: $settingbar-width;
+            }
+         }
 
-        &::before {
-          content: "";
-          height: 0;
-          width: 3px;
-          transition: height 0.2s;
-          background-color: $primary-color;
-          border-radius: $border-radius;
-        }
+         &::before {
+            content: "";
+            height: 0;
+            width: 3px;
+            transition: height 0.2s;
+            background-color: $primary-color;
+            border-radius: $border-radius;
+         }
 
-        .settingbar-element-icon {
-          margin: 0 auto;
+         .settingbar-element-icon {
+            margin: 0 auto;
 
-          &.badge::after {
-            bottom: -10px;
-            right: 0;
+            &.badge::after {
+               top: 5px;
+               right: -4px;
+               position: absolute;
+            }
+
+            &.badge-update::after {
+               bottom: initial;
+            }
+         }
+
+         .settingbar-element-name {
+            font-size: 65%;
+            bottom: 5px;
+            left: 7px;
             position: absolute;
-          }
+            font-style: normal;
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            width: calc($settingbar-width - 15px);
+            text-align: left;
+            line-height: 1.1;
+            color: rgba($body-font-color-dark, 0.8);
+         }
 
-          &.badge-update::after {
-            bottom: initial;
-          }
-        }
+         .settingbar-element-pin {
+            margin: 0 auto;
 
-        .settingbar-element-pin {
-          margin: 0 auto;
-
-          &::before {
-            font: normal normal normal 14px/1 "Material Design Icons";
-            content: "\F0403";
-            color: $body-font-color-dark;
-            transform: rotate(45deg);
-            opacity: 0.25;
-            bottom: -8px;
-            left: -4px;
-            position: absolute;
-          }
-        }
+            &::before {
+               font: normal normal normal 14px/1 "Material Design Icons";
+               content: "\F0403";
+               color: $body-font-color-dark;
+               transform: rotate(45deg);
+               opacity: 0.25;
+               top: -8px;
+               left: -10px;
+               position: absolute;
+            }
+         }
       }
-    }
-  }
-
-  .ex-tooltip {// Because both overflow-x: visible and overflow-y:auto are evil!!!
-    .ex-tooltip-content {
-      z-index: 999;
-      visibility: hidden;
-      opacity: 0;
-      display: block;
-      position: absolute;
-      text-align: center;
-      margin: 0 0 0 calc(#{$settingbar-width} - 5px);
-      left: 0;
-      padding: 0.2rem 0.4rem;
-      font-size: 0.7rem;
-      background: rgba(48, 55, 66, 0.95);
-      border-radius: $border-radius;
-      color: #fff;
-      max-width: 320px;
-      pointer-events: none;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transition: opacity 0.2s;
-    }
-
-    &.sortable-chosen {
-      .ex-tooltip-content {
-        opacity: 0 !important;
-      }
-    }
-
-    &:hover:not(.selected) .ex-tooltip-content {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
+   }
+}
 </style>
diff --git a/src/renderer/scss/_variables.scss b/src/renderer/scss/_variables.scss
index aa024091..cf673c98 100644
--- a/src/renderer/scss/_variables.scss
+++ b/src/renderer/scss/_variables.scss
@@ -24,7 +24,7 @@ $unknown-color: gray;
 /* Sizes */
 $border-radius: 0.3rem;
 $titlebar-height: 1.5rem;
-$settingbar-width: 3rem;
+$settingbar-width: 3.5rem;
 $explorebar-width: 14rem;
 $footer-height: 1.5rem;
 
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index 28e1afb8..8d9a0b72 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable function-no-unknown */
 .theme-dark {
   color: $body-font-color-dark;
   background: $body-bg-dark;
@@ -7,10 +9,10 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: rgba($color: #fff, $alpha: 0.5);
+    background: rgba($color: #fff, $alpha: 50%);
 
     &:hover {
-      background: rgba($color: #fff, $alpha: 1);
+      background: rgba($color: #fff, $alpha: 100%);
     }
   }
 
@@ -25,7 +27,7 @@
     background-color: $bg-color-gray;
   }
 
-  // Override Spectre.css
+  /* Override Spectre.css */
   .menu {
     background: $bg-color-light-dark;
 
@@ -79,7 +81,7 @@
   .modal {
     .modal-overlay,
     &.active .modal-overlay {
-      background: rgba(255, 255, 255, 0.15);
+      background: rgb(255 255 255 / 15%);
     }
 
     .modal-container,
@@ -100,7 +102,7 @@
 
   .form-select,
   .form-input,
-  .form-select:not([multiple]):not([size]),
+  .form-select:not([multiple], [size]),
   .form-checkbox .form-icon,
   .form-radio .form-icon {
     border-color: $bg-color-light-dark;
@@ -108,6 +110,10 @@
     color: $body-font-color-dark;
   }
 
+  .form-select:not([multiple], [size]) {
+    background-color: $bg-color-gray !important;
+  }
+
   .form-input.is-error,
   .form-select.is-error {
     background-color: $bg-color-gray;
@@ -117,7 +123,7 @@
     background: $bg-color-gray;
   }
 
-  .form-select:not([multiple]):not([size]):focus {
+  .form-select:not([multiple], [size]):focus {
     border-color: $primary-color;
   }
 
@@ -161,7 +167,7 @@
     color: rgba($body-font-color-dark, 0.7);
   }
 
-  // Antares
+  /* Antares */
   .workspace {
     .workspace-explorebar {
       background: $bg-color-gray;
@@ -191,7 +197,7 @@
           &:hover,
           &.selected {
             color: $body-font-color-dark;
-            background: rgba($color: #fff, $alpha: 0.05);
+            background: rgba($color: #fff, $alpha: 5%);
           }
         }
       }
@@ -238,12 +244,12 @@
           &:focus,
           &.selected {
             box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
-            background-color: rgba($color: #000, $alpha: 0.3);
+            background-color: rgba($color: #000, $alpha: 30%);
           }
 
           .editable-field {
             box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
-            background-color: rgba($color: #000, $alpha: 0.3);
+            background-color: rgba($color: #000, $alpha: 30%);
           }
         }
       }
@@ -264,7 +270,7 @@
 
   .bg-checkered {
     background-image:
-      linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
+      linear-gradient(to right, rgb(192 192 192 / 75%), rgb(192 192 192 / 75%)),
       linear-gradient(to right, black 50%, white 50%),
       linear-gradient(to bottom, black 50%, white 50%);
     background-blend-mode: normal, difference, normal;
@@ -385,7 +391,7 @@
       .titlebar-element {
         &:hover {
           opacity: 1;
-          background: rgba($color: #fff, $alpha: 0.1);
+          background: rgba($color: #fff, $alpha: 10%);
         }
 
         &.close-button:hover {
@@ -430,14 +436,7 @@
 
       .settingbar-element {
         .settingbar-element-icon {
-          &.badge::after {
-            bottom: -10px;
-            right: 0;
-            position: absolute;
-          }
-
           &.badge-update::after {
-            bottom: initial;
             background: $primary-color;
           }
         }
@@ -447,7 +446,7 @@
 
   .ex-tooltip {
     .ex-tooltip-content {
-      background: rgba(48, 55, 66, 0.95);
+      background: rgb(48 55 66 / 95%);
       color: #fff;
     }
   }
@@ -460,7 +459,7 @@
       .footer-element {
         &.footer-link {
           &:hover {
-            background: rgba($color: #fff, $alpha: 0.1);
+            background: rgba($color: #fff, $alpha: 10%);
           }
         }
       }
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index 55fad7aa..830cc884 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -1,13 +1,14 @@
+/* stylelint-disable function-no-unknown */
 .theme-light {
   ::-webkit-scrollbar-track {
     background: #fff;
   }
 
   ::-webkit-scrollbar-thumb {
-    background: rgba($color: $bg-color-light-dark, $alpha: 0.5);
+    background: rgba($color: $bg-color-light-dark, $alpha: 50%);
 
     &:hover {
-      background: rgba($color: $bg-color-light-dark, $alpha: 1);
+      background: rgba($color: $bg-color-light-dark, $alpha: 100%);
     }
   }
 
@@ -38,7 +39,7 @@
     .menu-item a {
       &:hover {
         color: $body-font-color;
-        background: rgba($color: #000, $alpha: 0.1);
+        background: rgba($color: #000, $alpha: 10%);
       }
     }
   }
@@ -148,7 +149,7 @@
       .titlebar-element {
         &:hover {
           opacity: 1;
-          background: rgba($color: rgb(172, 172, 172), $alpha: 0.3);
+          background: rgba($color: rgb(172 172 172), $alpha: 30%);
         }
 
         &.close-button:hover {
@@ -193,14 +194,7 @@
 
       .settingbar-element {
         .settingbar-element-icon {
-          &.badge::after {
-            bottom: -10px;
-            right: 0;
-            position: absolute;
-          }
-
           &.badge-update::after {
-            bottom: initial;
             background: $primary-color;
           }
         }
@@ -210,7 +204,7 @@
 
   .ex-tooltip {
     .ex-tooltip-content {
-      background: rgba(48, 55, 66, 0.95);
+      background: rgb(48 55 66 / 95%);
       color: #fff;
     }
   }
@@ -228,7 +222,7 @@
         .menu-item {
           &:hover,
           &.selected {
-            background: rgba($color: #000, $alpha: 0.05);
+            background: rgba($color: #000, $alpha: 5%);
           }
         }
 
@@ -365,7 +359,7 @@
       .footer-element {
         &.footer-link {
           &:hover {
-            background: rgba($color: #fff, $alpha: 0.1);
+            background: rgba($color: #fff, $alpha: 10%);
           }
         }
       }