feat(UI): new settimgbar tooltips

antares-sql · Nov 28, 2022 · 6728964 · 6728964
1 parent b06bafe
commit 6728964
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -131,6 +131,7 @@
     "electron-updater": "~4.6.5",
     "electron-window-state": "~5.0.3",
     "encoding": "~0.1.13",
+    "floating-vue": "~2.0.0-beta.20",
     "leaflet": "~1.7.1",
     "marked": "~4.0.19",
     "moment": "~2.29.4",

diff --git a/src/renderer/components/SettingBarConnections.vue b/src/renderer/components/SettingBarConnections.vue
@@ -20,9 +20,15 @@
          >
             <div
                v-if="!element.isFolder && !folderedConnections.includes(element.uid)"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: getConnectionName(element.uid)
+               }"
                class="settingbar-element btn btn-link"
                :class="{ 'selected': element.uid === selectedWorkspace }"
-               :title="getConnectionName(element.uid)"
+               placement="right"
+               strategy="fixed"
                @click.stop="selectWorkspace(element.uid)"
             >
                <!-- Creates a new folder -->

diff --git a/src/renderer/components/SettingBarConnectionsFolder.vue b/src/renderer/components/SettingBarConnectionsFolder.vue
@@ -1,9 +1,14 @@
 <template>
    <div
+      v-tooltip="{
+         strategy: 'fixed',
+         placement: 'right',
+         content: folder.name,
+         disabled: isOpen || !folder.name
+      }"
       class="settingbar-element folder btn btn-link p-1"
       :class="[{ 'selected-inside': hasSelectedInside && !isOpen }]"
       :style="isOpen ? `height: auto; opacity: 1;` : null"
-      :title="folder.name"
    >
       <Draggable
          class="folder-container"
@@ -40,6 +45,11 @@
          <template #item="{ element }">
             <div
                :key="element"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: getConnectionName(element)
+               }"
                class="folder-element"
                :class="{ 'selected': element === selectedWorkspace }"
                @click="emit('select-workspace', element)"

diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
@@ -19,18 +19,26 @@
          <ul class="settingbar-elements">
             <li
                v-if="isScrollable"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('message.allConnections')
+               }"
                class="settingbar-element btn btn-link"
-               :title="t('message.allConnections')"
                @click="emit('show-connections-modal')"
             >
                <div class="settingbar-element-icon-wrapper">
                   <i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
                </div>
             </li>
             <li
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('message.addConnection')
+               }"
                class="settingbar-element btn btn-link"
                :class="{ 'selected': 'NEW' === selectedWorkspace }"
-               :title="t('message.addConnection')"
                @click="selectWorkspace('NEW')"
             >
                <div class="settingbar-element-icon-wrapper">
@@ -44,15 +52,23 @@
          <ul class="settingbar-elements">
             <li
                v-if="!disableScratchpad"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('word.scratchpad')
+               }"
                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" />
             </li>
             <li
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('word.settings')
+               }"
                class="settingbar-element btn btn-link"
-               :title="t('word.settings')"
                @click="showSettingModal('general')"
             >
                <i

diff --git a/src/renderer/index.ts b/src/renderer/index.ts
@@ -3,7 +3,9 @@ import { ipcRenderer } from 'electron';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { VueMaskDirective } from 'v-mask';
+import * as FloatingVue from 'floating-vue';
 import '@mdi/font/css/materialdesignicons.css';
+import 'floating-vue/dist/style.css';
 import 'leaflet/dist/leaflet.css';
 import '@/scss/main.scss';
 
@@ -27,6 +29,7 @@ createApp(App)
    .directive('mask', vMaskV3)
    .use(createPinia())
    .use(i18n)
+   .use(FloatingVue)
    .mount('#app');
 
 const { locale } = useSettingsStore();