feat: button Tooltip (#70)

devlzl · Jan 16, 2024 · e9ca778 · e9ca778
1 parent fcd43aa
commit e9ca778
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 90 deletions.
diff --git a/src/Lang/Locale/en-US/ToolBar.json b/src/Lang/Locale/en-US/ToolBar.json
@@ -76,7 +76,8 @@
         "title": "Link"
       },
       "textBox": {
-        "title": "Text Box"
+        "title": "Text",
+        "textBox": "Text Box"
       },
       "footer": {
         "title": "Footer"

diff --git a/src/Lang/Locale/zh-CN/ToolBar.json b/src/Lang/Locale/zh-CN/ToolBar.json
@@ -76,7 +76,8 @@
         "title": "链接"
       },
       "textBox": {
-        "title": "文本框"
+        "title": "文本",
+        "textBox": "文本框"
       },
       "footer": {
         "title": "页脚"

diff --git a/src/UserInterface/ToolBar/components/Home/FontStyle.vue b/src/UserInterface/ToolBar/components/Home/FontStyle.vue
@@ -22,6 +22,7 @@ import {
   FONT_FAMILY_RANGE,
   FONT_SIZE_RANGE,
 } from '@Const/font'
+import Tooltip from '@UserInterface/components/Tooltip.vue'
 
 const buttonStyle = 'menu-btn w-[32px] h-[30px]'
 const activeButtonStyle = 'border border-black bg-gray-200'
@@ -103,65 +104,84 @@ richTextObserver.on(async (newState) => {
       <button class="menu-btn">
         <AddText theme="outline" size="20" :strokeWidth="2" />
       </button> -->
-      <button :class="buttonStyle" @click="clearFormat">
-        <ClearFormat theme="two-tone" size="20" :fill="['#333', '#DE6C00']" :strokeWidth="2" />
-      </button>
-      <button
-        :class="{
-          [buttonStyle]: true,
-          [activeButtonStyle]: fontStyle.bold,
-        }"
-        @click="format('bold', !fontStyle.bold)"
-      >
-        <TextBold size="20" :strokeWidth="4" />
-      </button>
-      <button
-        :class="{
-          [buttonStyle]: true,
-          [activeButtonStyle]: fontStyle.italic,
-        }"
-        @click="format('italic', !fontStyle.italic)"
-      >
-        <TextItalic size="20" :strokeWidth="2" />
-      </button>
-      <button
-        :class="{
-          [buttonStyle]: true,
-          [activeButtonStyle]: fontStyle.underline,
-        }"
-        @click="format('underline', !fontStyle.underline)"
-      >
-        <TextUnderline size="20" :strokeWidth="2" />
-      </button>
-      <button
-        :class="{
-          [buttonStyle]: true,
-          [activeButtonStyle]: fontStyle.strike,
-        }"
-        @click="format('strike', !fontStyle.strike)"
-      >
-        <Strikethrough size="20" :strokeWidth="2" />
-      </button>
 
-      <button :class="buttonStyle" @click="colorInputRef?.click()">
-        <write theme="two-tone" size="20" :fill="['#ff0000', '#ffffff']" />
-        <input
-          ref="colorInputRef"
-          type="color"
-          :style="{ visibility: 'hidden' }"
-          @input="(event) => format('color', (event.target as HTMLInputElement).value)"
-        />
-      </button>
+      <Tooltip text="Clear All Formatting">
+        <button :class="buttonStyle" @click="clearFormat">
+          <ClearFormat theme="two-tone" size="20" :fill="['#333', '#DE6C00']" :strokeWidth="2" />
+        </button>
+      </Tooltip>
 
-      <button :class="buttonStyle" @click="backgroundInputRef?.click()">
-        <Platte theme="filled" size="20" fill="#f9da74" :strokeWidth="2" />
-        <input
-          ref="backgroundInputRef"
-          type="color"
-          :style="{ visibility: 'hidden' }"
-          @input="(event) => format('background', (event.target as HTMLInputElement).value)"
-        />
-      </button>
+      <Tooltip text="Bold">
+        <button
+          :class="{
+            [buttonStyle]: true,
+            [activeButtonStyle]: fontStyle.bold,
+          }"
+          @click="format('bold', !fontStyle.bold)"
+        >
+          <TextBold size="20" :strokeWidth="4" />
+        </button>
+      </Tooltip>
+
+      <Tooltip text="Italic">
+        <button
+          :class="{
+            [buttonStyle]: true,
+            [activeButtonStyle]: fontStyle.italic,
+          }"
+          @click="format('italic', !fontStyle.italic)"
+        >
+          <TextItalic size="20" :strokeWidth="2" />
+        </button>
+      </Tooltip>
+
+      <Tooltip text="Underline">
+        <button
+          :class="{
+            [buttonStyle]: true,
+            [activeButtonStyle]: fontStyle.underline,
+          }"
+          @click="format('underline', !fontStyle.underline)"
+        >
+          <TextUnderline size="20" :strokeWidth="2" />
+        </button>
+      </Tooltip>
+
+      <Tooltip text="Strike">
+        <button
+          :class="{
+            [buttonStyle]: true,
+            [activeButtonStyle]: fontStyle.strike,
+          }"
+          @click="format('strike', !fontStyle.strike)"
+        >
+          <Strikethrough size="20" :strokeWidth="2" />
+        </button>
+      </Tooltip>
+
+      <Tooltip text="Font Color">
+        <button :class="buttonStyle" @click="colorInputRef?.click()">
+          <write theme="two-tone" size="20" :fill="['#ff0000', '#ffffff']" />
+          <input
+            ref="colorInputRef"
+            type="color"
+            :style="{ visibility: 'hidden' }"
+            @input="(event) => format('color', (event.target as HTMLInputElement).value)"
+          />
+        </button>
+      </Tooltip>
+
+      <Tooltip text="Text Highlight Color">
+        <button :class="buttonStyle" @click="backgroundInputRef?.click()">
+          <Platte theme="filled" size="20" fill="#f9da74" :strokeWidth="2" />
+          <input
+            ref="backgroundInputRef"
+            type="color"
+            :style="{ visibility: 'hidden' }"
+            @input="(event) => format('background', (event.target as HTMLInputElement).value)"
+          />
+        </button>
+      </Tooltip>
     </div>
   </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Paragraph.vue b/src/UserInterface/ToolBar/components/Home/Paragraph.vue
@@ -15,6 +15,7 @@ import { AlignType, TextBoxBlock } from '@BlockHub/TextBoxBlock/TextBoxBlock'
 import { selectionManager } from '@Kernel/index'
 import { ref, shallowRef } from 'vue'
 import { computed } from 'vue'
+import Tooltip from '@UserInterface/components/Tooltip.vue'
 
 const buttonStyle = 'menu-btn w-[34px] h-[34px]'
 const activeButtonStyle = 'border border-black bg-gray-200'
@@ -74,36 +75,45 @@ const updateAlign = (value: AlignType) => {
       <button class="menu-btn">
         <row-height size="24" :strokeWidth="2" />
       </button> -->
-      <button
-        class="menu-btn"
-        @click="updateAlign('left')"
-        :class="{
-          [buttonStyle]: true,
-          [activeButtonStyle]: alignState === 'left',
-        }"
-      >
-        <align-text-left size="24" :strokeWidth="2" />
-      </button>
-      <button
-        class="menu-btn"
-        @click="updateAlign('center')"
-        :class="{
-          [buttonStyle]: true,
-          [activeButtonStyle]: alignState === 'center',
-        }"
-      >
-        <align-text-center size="24" :strokeWidth="2" />
-      </button>
-      <button
-        class="menu-btn"
-        @click="updateAlign('right')"
-        :class="{
-          [buttonStyle]: true,
-          [activeButtonStyle]: alignState === 'right',
-        }"
-      >
-        <align-text-right size="24" :strokeWidth="2" />
-      </button>
+      <Tooltip text="Align Left">
+        <button
+          class="menu-btn"
+          @click="updateAlign('left')"
+          :class="{
+            [buttonStyle]: true,
+            [activeButtonStyle]: alignState === 'left',
+          }"
+        >
+          <AlignTextLeft size="24" :strokeWidth="2" />
+        </button>
+      </Tooltip>
+
+      <Tooltip text="Center Text">
+        <button
+          class="menu-btn"
+          @click="updateAlign('center')"
+          :class="{
+            [buttonStyle]: true,
+            [activeButtonStyle]: alignState === 'center',
+          }"
+        >
+          <AlignTextCenter size="24" :strokeWidth="2" />
+        </button>
+      </Tooltip>
+
+      <Tooltip text="Align Right">
+        <button
+          class="menu-btn"
+          @click="updateAlign('right')"
+          :class="{
+            [buttonStyle]: true,
+            [activeButtonStyle]: alignState === 'right',
+          }"
+        >
+          <AlignTextRight size="24" :strokeWidth="2" />
+        </button>
+      </Tooltip>
+
       <!-- <button class="menu-btn">
         <align-text-both size="24" :strokeWidth="2" />
       </button> -->

diff --git a/src/UserInterface/ToolBar/components/Insert/Text.vue b/src/UserInterface/ToolBar/components/Insert/Text.vue
@@ -17,7 +17,7 @@ import ToolButton from '../ToolButton.vue'
           :strokeWidth="2"
         />
       </template>
-      <template #name>{{ $t('ToolBar.insert.textBox.title') }}</template>
+      <template #name>{{ $t('ToolBar.insert.textBox.textBox') }}</template>
     </ToolButton>
   </ButtonGroup>
 </template>
diff --git a/src/UserInterface/components/Tooltip.vue b/src/UserInterface/components/Tooltip.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const { text } = defineProps<{
+  text: string
+}>()
+
+const showTooltip = ref(false)
+</script>
+
+<template>
+  <div class="relative" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
+    <slot></slot>
+    <div
+      v-if="showTooltip"
+      class="absolute bottom-[-24px] bg-secondary border px-[3px] rounded-[2px]"
+      :style="{ textWrap: 'nowrap' }"
+    >
+      {{ text }}
+    </div>
+  </div>
+</template>