style(enhanced-readabilities): optimize UI/UX for tooltip

nolebase · Sep 17, 2023 · 1bb09cd · 1bb09cd
1 parent 8dbaf7c
commit 1bb09cd
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 15 deletions.
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/InlineHighlight.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/InlineHighlight.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 import { useI18n } from '../composables/i18n'
 import InlineHighlightHighlighter from './InlineHighlightHighlighter.vue'
 import MenuTitle from './MenuTitle.vue'
 import MenuOption from './MenuOption.vue'
 import MenuHelp from './MenuHelp.vue'
 
+const menuTitleElementRef = ref<HTMLDivElement>()
+const isMenuHelpPoppedUp = ref(false)
+
 const mounted = useMounted()
 const isLargerThanMobile = useMediaQuery('(min-width: 768px)')
 const inlineHighlightModeOn = useStorage('vitepress-nolebase-enhanced-readabilities-inline-highlight-mode', false)
@@ -30,15 +33,15 @@ watch(isLargerThanMobile, () => {
 <template>
   <div space-y-2 role="radiogroup">
     <InlineHighlightHighlighter v-if="mounted && inlineHighlightModeOn" :enabled="inlineHighlightModeOn" />
-    <div flex items-center relative>
+    <div flex items-center relative ref="menuTitleElementRef">
       <MenuTitle
         icon="i-icon-park-outline:click"
         :title="t('inlineHighlight.title')"
         :aria-label="t('inlineHighlight.titleArialLabel') || t('inlineHighlight.title')"
         flex="1"
         mr-4
       />
-      <MenuHelp>
+      <MenuHelp :menu-title-element-ref="menuTitleElementRef" v-model:is-popped-up="isMenuHelpPoppedUp">
         <h4 text-md font-semibold mb-1>
           {{ t('inlineHighlight.title') }}
         </h4>
@@ -63,7 +66,13 @@ watch(isLargerThanMobile, () => {
         </div>
       </MenuHelp>
     </div>
-    <fieldset flex="~ row" text="sm $vp-c-text-1" space-x-2 w-full appearance-none border-none>
+    <fieldset flex="~ row" text="sm $vp-c-text-1" space-x-2 w-full appearance-none border-none
+      outline="transparent 2px offset-4px dashed" transition="outline duration-200 ease"
+      :class="{
+        'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
+        'rounded-md': isMenuHelpPoppedUp
+      }"
+    >
       <MenuOption
         v-model="inlineHighlightModeOn"
         :title="t('inlineHighlight.optionOn')"

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 import { useI18n } from '../composables/i18n'
 import { LayoutMode } from '../types'
 import MenuOption from './MenuOption.vue'
 import MenuTitle from './MenuTitle.vue'
 import MenuHelp from './MenuHelp.vue'
 
+const menuTitleElementRef = ref<HTMLDivElement>()
+const isMenuHelpPoppedUp = ref(false)
+
 const mounted = useMounted()
 const isLargerThanMobile = useMediaQuery('(min-width: 768px)')
 const layoutMode = useStorage('vitepress-nolebase-enhanced-readabilities-layout-switch-mode', LayoutMode.FitContentWidth)
@@ -70,14 +73,14 @@ onMounted(() => {
 
 <template>
   <div space-y-2 role="radiogroup">
-    <div flex items-center>
+    <div flex items-center ref="menuTitleElementRef">
       <MenuTitle
         icon="i-icon-park-outline:layout-one"
         :title="t('layoutSwitch.title')"
         :aria-label="t('layoutSwitch.titleArialLabel') || t('layoutSwitch.title')"
         flex="1"
       />
-      <MenuHelp>
+      <MenuHelp :menu-title-element-ref="menuTitleElementRef" v-model:is-popped-up="isMenuHelpPoppedUp">
         <h4 text-md font-semibold mb-1>
           {{ t('layoutSwitch.title') }}
         </h4>
@@ -109,7 +112,13 @@ onMounted(() => {
         </div>
       </MenuHelp>
     </div>
-    <fieldset flex="~ row" text="sm $vp-c-text-1" space-x-2 w-full appearance-none border-none>
+    <fieldset flex="~ row" text="sm $vp-c-text-1" space-x-2 w-full appearance-none border-none
+      outline="transparent 2px offset-4px dashed" transition="outline duration-200 ease"
+      :class="{
+        'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
+        'rounded-md': isMenuHelpPoppedUp
+      }"
+    >
       <MenuOption
         v-model="layoutMode"
         icon="i-icon-park-outline:full-screen-one"

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuHelp.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuHelp.vue
@@ -1,20 +1,34 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import { useElementBounding, useMounted, useMouseInElement } from '@vueuse/core'
 
-const helpElementRef = ref<HTMLSpanElement>()
+const props = defineProps<{
+  menuTitleElementRef?: HTMLDivElement
+  isPoppedUp?: boolean
+}>()
 
-const mounted = useMounted()
-const { isOutside } = useMouseInElement(helpElementRef)
+const emits = defineEmits<{
+  (e: 'update:isPoppedUp', value: boolean): void
+}>()
+
+const menuTitleElementRef = toRef(props, 'menuTitleElementRef')
+const popupElementRef = ref<HTMLDivElement>()
 
-const bounding = useElementBounding(helpElementRef)
+const mounted = useMounted()
+const { isOutside } = useMouseInElement(menuTitleElementRef)
+const bounding = useElementBounding(menuTitleElementRef)
+const popupBounding = useElementBounding(popupElementRef)
 
 const helpPopupStyle = computed(() => {
   return {
     top: `${bounding.top.value}px`,
-    left: `${bounding.left.value + bounding.width.value + 8}px`,
+    left: `${bounding.left.value - popupBounding.width.value - 16}px`,
   }
 })
+
+watch(isOutside, (value) => {
+  emits('update:isPoppedUp', !value)
+})
 </script>
 
 <template>
@@ -27,10 +41,11 @@ const helpPopupStyle = computed(() => {
   <Teleport to="body">
     <Transition name="fade">
       <div
+        ref="popupElementRef"
         v-if="mounted"
         v-show="!isOutside"
         :style="helpPopupStyle"
-        fixed z-100 bg="white dark:zinc-800" text="dark:zinc-100" rounded-lg p-3 shadow-lg border="1 solid zinc-200 dark:zinc-700"
+        fixed z-100 bg="white dark:zinc-800" text="dark:zinc-100" rounded-lg p-4 shadow-lg border="1 solid zinc-200 dark:zinc-700"
         pointer-events-none
       >
         <slot />