add button to node info in dropdown

liamcottle · Nov 17, 2024 · 848af9a · 848af9a
1 parent d4249b2
commit 848af9a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/src/components/DropDownMenu.vue b/src/components/DropDownMenu.vue
@@ -14,7 +14,7 @@
             leave-active-class="transition ease-in duration-75"
             leave-from-class="transform opacity-100 scale-100"
             leave-to-class="transform opacity-0 scale-95">
-            <div v-if="isShowingMenu" @click.stop="hideMenu" class="overflow-hidden absolute right-0 z-10 mr-4 w-56 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none" :class="[ dropdownClass ]">
+            <div v-if="isShowingMenu" @click.stop="hideMenu" class="overflow-hidden absolute right-0 z-10 mr-4 w-56 rounded-md bg-white shadow-md border border-gray-200 focus:outline-none" :class="[ dropdownClass ]">
                 <slot name="items"/>
             </div>
         </Transition>

diff --git a/src/components/DropDownMenuItem.vue b/src/components/DropDownMenuItem.vue
@@ -1,16 +1,6 @@
 <template>
-    <div class="cursor-pointer group flex items-center p-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:outline-none">
-
-        <!-- icon -->
-        <div class="mr-2 text-gray-400 group-hover:text-gray-500">
-            <slot name="icon"/>
-        </div>
-
-        <!-- label -->
-        <div>
-            <slot name="label"/>
-        </div>
-
+    <div class="cursor-pointer flex p-2 space-x-2 text-sm text-gray-500 hover:bg-gray-100">
+        <slot/>
     </div>
 </template>
 

diff --git a/src/components/nodes/NodesList.vue b/src/components/nodes/NodesList.vue
@@ -50,20 +50,31 @@
                         </IconButton>
                     </template>
                     <template v-slot:items>
-                        <div class="p-2">
+
+                        <!-- node details -->
+                        <div class="p-2 border-b">
                             <div class="text-sm text-gray-500 font-semibold">{{ getNodeLongName(node.num) }}</div>
                             <div class="text-sm text-gray-500">{{ getNodeHexId(node.num) }}</div>
                         </div>
-                        <DropDownMenuItem @click="onDeleteNode(node)">
-                            <template v-slot:icon>
-                                <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+
+                        <!-- node info button -->
+                        <RouterLink :to="{ name: 'node', params: { nodeId: node.num }}">
+                            <DropDownMenuItem>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                    <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
                                 </svg>
-                            </template>
-                            <template v-slot:label>
-                                <span class="text-red-500">Forget Node</span>
-                            </template>
+                                <span>Node Info</span>
+                            </DropDownMenuItem>
+                        </RouterLink>
+
+                        <!-- forget node button -->
+                        <DropDownMenuItem @click="onDeleteNode(node)">
+                            <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+                            </svg>
+                            <span class="text-red-500">Forget Node</span>
                         </DropDownMenuItem>
+
                     </template>
                 </DropDownMenu>