Use tooltipText

Deltares · Jan 17, 2024 · 0269bfb · 0269bfb
1 parent 78c1271
commit 0269bfb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/src/components/general/ColumnMenu.vue b/src/components/general/ColumnMenu.vue
@@ -40,21 +40,16 @@
           >
             <v-list-item-title>{{ child.name }}</v-list-item-title>
             <template v-slot:append>
-              <v-tooltip v-if="child.tooltipText">
+              <v-tooltip v-if="item.tooltipText">
                 <template v-slot:activator="{ props }">
-                  <v-icon v-bind="props" class="allow-disabled-hover" size="x-small"
-                    >{{ child.icon }}</v-icon
+                  <v-icon
+                    v-bind="props"
+                    class="allow-disabled-hover"
+                    size="x-small"
+                    >{{ item.icon }}</v-icon
                   >
                 </template>
-                <div v-if="child.children">
-                  <div>{{ child.name }}'s children are missing data:</div>
-                  <ul class="ml-4">
-                    <li v-for="grandChild in child.children">
-                      {{ grandChild.name }}
-                    </li>
-                  </ul>
-                </div>
-                <span v-else>{{ child.name }} has no data.</span>
+                {{ item.tooltipText }}
               </v-tooltip>
               <div v-else>
                 <v-icon v-if="child.children">mdi-chevron-right</v-icon>
@@ -170,7 +165,7 @@ function recursiveFind(stack: ColumnItem[], id: string): boolean {
 }
 </script>
 
-<style scoped>
+<style>
 .allow-disabled-hover {
   pointer-events: auto;
 }

diff --git a/src/components/general/TreeMenuItem.vue b/src/components/general/TreeMenuItem.vue
@@ -13,11 +13,35 @@
     <v-list-item v-else-if="item.href" :href="item.href" target="_blank">
       <v-list-item-title>{{ item.name }}</v-list-item-title>
       <template v-slot:append>
-        <v-icon>mdi-share</v-icon>
+        <v-icon size="x-small">{{ item.icon }}</v-icon>
       </template>
     </v-list-item>
-    <v-list-item v-else :to="item.to" style="margin-right: 10px">
+    <v-list-item
+      v-else
+      :to="item.to"
+      style="margin-right: 10px"
+      :disabled="item.disabled"
+    >
       <v-list-item-title>{{ item.name }}</v-list-item-title>
+      <template v-slot:append>
+        <v-tooltip v-if="item.tooltipText">
+          <template v-slot:activator="{ props }">
+            <v-icon
+              v-bind="props"
+              class="allow-disabled-hover"
+              size="x-small"
+              >{{ item.icon }}</v-icon
+            >
+          </template>
+          {{ item.tooltipText }}
+        </v-tooltip>
+        <v-icon
+          v-else-if="item.icon"
+          size="x-small"
+          style="pointer-events: auto"
+          >{{ item.icon }}
+        </v-icon>
+      </template>
     </v-list-item>
   </template>
 </template>