Fix tooltip location close on click.

indoorequal · May 22, 2024 · b389e28 · b389e28
1 parent 1c0a2f2
commit b389e28
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/js/preview/preview_toolbar.vue b/js/preview/preview_toolbar.vue
@@ -2,7 +2,7 @@
   <v-card class="pa-2">
     <div class="d-flex align-center">
       <span class="text-h6 flex-grow-1">{{ t('preview.title') }}</span>
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template v-slot:activator="{ props }">
           <v-btn
             :href="fileUrl"
@@ -16,7 +16,7 @@
         </template>
         <span>{{ t('preview.download') }}</span>
       </v-tooltip>
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template v-slot:activator="{ props }">
           <v-btn
             icon

diff --git a/js/sidebar.vue b/js/sidebar.vue
@@ -23,7 +23,7 @@
               class="logo"
             />
           </h1>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-btn
                 icon

diff --git a/js/toolbar.vue b/js/toolbar.vue
@@ -1,6 +1,9 @@
 <template>
   <v-card class="d-flex align-center pa-1">
-    <v-tooltip bottom>
+    <v-tooltip
+      :disabled="menu"
+      location="bottom"
+    >
       <template v-slot:activator="{ props }">
         <v-btn
           icon
@@ -26,20 +29,19 @@
       class="mx-2"
       @updateBounds="updateBounds"
     />
-    <v-menu>
-      <template v-slot:activator="{ props: menu, value }">
-        <v-tooltip bottom :disabled="value">
+    <v-menu v-model="editOpen">
+      <template v-slot:activator="{ props: menu }">
+        <v-tooltip location="bottom" :disabled="editOpen">
           <template v-slot:activator="{ props: tooltip }">
-            <div v-bind="tooltip">
-              <v-btn
-                :disabled="editDisabled"
-                icon
-                variant="plain"
-                v-bind="menu"
+            <v-btn
+              :disabled="editDisabled"
+              icon
+              variant="plain"
+              v-bind="mergeProps(tooltip, menu)"
               >
-                <v-icon>{{ mdiPencilOutline }}</v-icon>
-              </v-btn>
-            </div>
+              {{ value }}
+              <v-icon>{{ mdiPencilOutline }}</v-icon>
+            </v-btn>
           </template>
           <span>{{ editDisabled ? $t('toolbar.zoom_to_edit') : $t('toolbar.edit') }}</span>
         </v-tooltip>
@@ -69,19 +71,19 @@
 </template>
 
 <script>
+import { mergeProps } from 'vue';
 import { mdiPencilOutline } from '@mdi/js';
 import GeocoderInput from './geocoder';
 import { useNews } from './news';
 import equalLogo from 'data-url:../icons/equal.svg';
-
 export default {
   components: {
     GeocoderInput
   },
 
   setup() {
     const { hasUnreadNews } = useNews();
-    return { hasUnreadNews};
+    return { hasUnreadNews, mergeProps };
   },
 
   props: {
@@ -117,7 +119,7 @@ export default {
   },
 
   data() {
-    return { equalLogo, mdiPencilOutline };
+    return { equalLogo, mdiPencilOutline, editOpen: false };
   },
 
   computed: {