From 56c02a4f6cc928fbc8773851ab1132c40719bb11 Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 16:06:38 +0800
Subject: [PATCH 1/3] feat: ToolButton menu

---
 .../ToolBar/components/Home/Draw.vue          |  3 +-
 .../ToolBar/components/ToolButton.vue         | 35 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/UserInterface/ToolBar/components/Home/Draw.vue b/src/UserInterface/ToolBar/components/Home/Draw.vue
index 55617e0..b4cb6e1 100644
--- a/src/UserInterface/ToolBar/components/Home/Draw.vue
+++ b/src/UserInterface/ToolBar/components/Home/Draw.vue
@@ -7,11 +7,12 @@ import ToolButton from '../ToolButton.vue'
 <template>
   <ButtonGroup :name="$t('ToolBar.home.drawing.title')">
     <div class="flex">
-      <ToolButton :clickHandler="() => {}">
+      <ToolButton :hasMenu="true">
         <template #icon>
           <GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
         </template>
         <template #name>{{ $t('ToolBar.home.drawing.shapes') }}</template>
+        <template #menu> this is aadslfjaslfjasdlfja ;slfdjal; djfs l;asjfl; asdf; adsjf;l ajf; menu </template>
       </ToolButton>
 
       <!-- <button class="menu-btn flex flex-col items-center justify-center">
diff --git a/src/UserInterface/ToolBar/components/ToolButton.vue b/src/UserInterface/ToolBar/components/ToolButton.vue
index b69d065..4c3c89c 100644
--- a/src/UserInterface/ToolBar/components/ToolButton.vue
+++ b/src/UserInterface/ToolBar/components/ToolButton.vue
@@ -1,23 +1,40 @@
 <script setup lang="ts">
 import { Down } from '@icon-park/vue-next'
+import { ref } from 'vue'
 
-const { clickHandler } = defineProps<{
+const props = defineProps<{
   clickHandler?: (event: MouseEvent) => void
   disabled?: boolean
   hasMenu?: boolean
 }>()
+
+const showMenu = ref(false)
+const onClick = (event: MouseEvent) => {
+  if (props.hasMenu) {
+    showMenu.value = !showMenu.value
+  } else {
+    props.clickHandler?.(event)
+  }
+}
 </script>
 
 <template>
-  <div class="tool-button">
-    <button class="menu-btn flex flex-col items-center" @click="clickHandler" :disabled="disabled">
-      <slot name="icon"></slot>
-      <span class="text-xs">
-        <slot name="name"></slot>
-      </span>
+  <div class="tool-button relative">
+    <button class="menu-btn flex items-center" @click="onClick" :disabled="disabled">
+      <div class="flex flex-col">
+        <slot name="icon"></slot>
+        <span class="text-xs">
+          <slot name="name"></slot>
+        </span>
+      </div>
       <Down v-if="hasMenu" class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-
-    <slot name="menu"></slot>
+    <div
+      v-if="showMenu"
+      class="absolute left-0 top-[50px] bg-white shadow-lg"
+      :style="{ width: '200px', height: '200px' }"
+    >
+      <slot name="menu"></slot>
+    </div>
   </div>
 </template>

From 33ac78022778f3987e2b4f6c236b021341d29142 Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 17:43:31 +0800
Subject: [PATCH 2/3] fix: z-index

---
 src/UserInterface/ToolBar/components/TabContent.vue | 2 +-
 src/UserInterface/ToolBar/components/ToolButton.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/UserInterface/ToolBar/components/TabContent.vue b/src/UserInterface/ToolBar/components/TabContent.vue
index 232d554..73cf35c 100644
--- a/src/UserInterface/ToolBar/components/TabContent.vue
+++ b/src/UserInterface/ToolBar/components/TabContent.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div class="px-2">
-    <div class="h-[100px] py-2 mb-1 bg-white rounded-md shadow translate-y-1 flex">
+    <div class="h-[100px] py-2 mb-1 bg-white rounded-md shadow flex">
       <slot />
     </div>
   </div>
diff --git a/src/UserInterface/ToolBar/components/ToolButton.vue b/src/UserInterface/ToolBar/components/ToolButton.vue
index 4c3c89c..6f6a969 100644
--- a/src/UserInterface/ToolBar/components/ToolButton.vue
+++ b/src/UserInterface/ToolBar/components/ToolButton.vue
@@ -31,7 +31,7 @@ const onClick = (event: MouseEvent) => {
     </button>
     <div
       v-if="showMenu"
-      class="absolute left-0 top-[50px] bg-white shadow-lg"
+      class="absolute left-0 top-[50px] bg-white shadow-lg z-[1]"
       :style="{ width: '200px', height: '200px' }"
     >
       <slot name="menu"></slot>

From 57fd515576c2b2a48e07ca4dfc0c4eb7ba281c70 Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 18:30:15 +0800
Subject: [PATCH 3/3] fix: ui

---
 .../ToolBar/components/Home/Draw.vue          |  2 +-
 .../ToolBar/components/ToolButton.vue         | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/UserInterface/ToolBar/components/Home/Draw.vue b/src/UserInterface/ToolBar/components/Home/Draw.vue
index b4cb6e1..505a479 100644
--- a/src/UserInterface/ToolBar/components/Home/Draw.vue
+++ b/src/UserInterface/ToolBar/components/Home/Draw.vue
@@ -12,7 +12,7 @@ import ToolButton from '../ToolButton.vue'
           <GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
         </template>
         <template #name>{{ $t('ToolBar.home.drawing.shapes') }}</template>
-        <template #menu> this is aadslfjaslfjasdlfja ;slfdjal; djfs l;asjfl; asdf; adsjf;l ajf; menu </template>
+        <template #menu>draw menu test</template>
       </ToolButton>
 
       <!-- <button class="menu-btn flex flex-col items-center justify-center">
diff --git a/src/UserInterface/ToolBar/components/ToolButton.vue b/src/UserInterface/ToolBar/components/ToolButton.vue
index 6f6a969..109dc74 100644
--- a/src/UserInterface/ToolBar/components/ToolButton.vue
+++ b/src/UserInterface/ToolBar/components/ToolButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Down } from '@icon-park/vue-next'
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps<{
   clickHandler?: (event: MouseEvent) => void
@@ -16,11 +16,21 @@ const onClick = (event: MouseEvent) => {
     props.clickHandler?.(event)
   }
 }
+
+const hideMenu = () => {
+  showMenu.value = false
+}
+onMounted(() => {
+  document.addEventListener('click', hideMenu)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', hideMenu)
+})
 </script>
 
 <template>
   <div class="tool-button relative">
-    <button class="menu-btn flex items-center" @click="onClick" :disabled="disabled">
+    <button class="menu-btn flex items-center" @click.stop="onClick" :disabled="disabled">
       <div class="flex flex-col">
         <slot name="icon"></slot>
         <span class="text-xs">
@@ -29,11 +39,7 @@ const onClick = (event: MouseEvent) => {
       </div>
       <Down v-if="hasMenu" class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-    <div
-      v-if="showMenu"
-      class="absolute left-0 top-[50px] bg-white shadow-lg z-[1]"
-      :style="{ width: '200px', height: '200px' }"
-    >
+    <div v-if="showMenu" class="absolute left-0 top-[90px] min-w-[50px] min-h-[50px] bg-white shadow-lg border z-[1]">
       <slot name="menu"></slot>
     </div>
   </div>