From 5da74eaa65f175ca070545739e6696a5e6a8fa00 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Tue, 19 Dec 2023 01:31:24 +0800
Subject: [PATCH] feat(client): enhance mobile a11y, fold menu items

---
 packages/client/app/home/home.vue         |  5 ---
 packages/client/app/layout/header.vue     | 37 +++++++++++++++++++++--
 packages/client/app/layout/layout.vue     |  6 +++-
 packages/client/app/theme/menu/menu.vue   | 16 +++++-----
 plugins/config/client/components/tree.vue |  6 +++-
 5 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/packages/client/app/home/home.vue b/packages/client/app/home/home.vue
index a2e3bf12..e0b43612 100644
--- a/packages/client/app/home/home.vue
+++ b/packages/client/app/home/home.vue
@@ -34,11 +34,6 @@ import Welcome from './welcome.vue'
     margin: var(--card-margin);
   }
 
-  .k-card-body {
-    margin: var(--card-padding-vertical) 0;
-    padding: 0 var(--card-padding-horizontal);
-  }
-
   .k-card.connect {
     width: 400px;
     max-width: 400px;
diff --git a/packages/client/app/layout/header.vue b/packages/client/app/layout/header.vue
index be023c84..b46267e8 100644
--- a/packages/client/app/layout/header.vue
+++ b/packages/client/app/layout/header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-header">
+  <div class="layout-header" :class="{ 'has-menu': menuKey }">
     <div
       class="toggle-sidebar-button"
       role="button"
@@ -18,18 +18,31 @@
     <div class="right">
       <slot name="right"></slot>
     </div>
+    <div class="toggle-menu-button"
+      v-if="menuKey"
+      role="button"
+      tabindex="1"
+      @click.stop="trigger($event, menuData)"
+    >
+      <k-icon name="ellipsis"></k-icon>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 
 import { useRoute } from 'vue-router'
+import { useMenu } from '@koishijs/client'
 
-defineProps<{
+const props = defineProps<{
   isLeftAsideOpen: boolean
   isRightAsideOpen: boolean
+  menuKey?: string
+  menuData?: any
 }>()
 
+const trigger = useMenu(props.menuKey as any)
+
 defineEmits(['update:isLeftAsideOpen', 'update:isRightAsideOpen'])
 
 const route = useRoute()
@@ -70,10 +83,30 @@ const route = useRoute()
   }
 }
 
+.toggle-menu-button {
+  display: none;
+  height: 100%;
+  width: var(--header-height);
+  align-items: center;
+  justify-content: center;
+
+  .k-icon {
+    height: 1.25rem;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .toggle-sidebar-button {
     display: block;
   }
+
+  .toggle-menu-button {
+    display: flex;
+  }
+
+  .layout-header.has-menu .right {
+    display: none;
+  }
 }
 
 .layout-header {
diff --git a/packages/client/app/layout/layout.vue b/packages/client/app/layout/layout.vue
index 9bf6c361..ae606104 100644
--- a/packages/client/app/layout/layout.vue
+++ b/packages/client/app/layout/layout.vue
@@ -6,7 +6,11 @@
 
     <div class="main-container">
       <div class="aside-mask" @click="isLeftAsideOpen = !isLeftAsideOpen"></div>
-      <layout-header v-model:isLeftAsideOpen="isLeftAsideOpen" v-model:isRightAsideOpen="isRightAsideOpen">
+      <layout-header
+        v-model:isLeftAsideOpen="isLeftAsideOpen"
+        v-model:isRightAsideOpen="isRightAsideOpen"
+        :menu-key="typeof menu === 'string' ? menu : null"
+        :menu-data="menuData">
         <template #left>
           <slot name="header">{{ route.meta.activity?.name }}</slot>
         </template>
diff --git a/packages/client/app/theme/menu/menu.vue b/packages/client/app/theme/menu/menu.vue
index 9d1f7065..c981c616 100644
--- a/packages/client/app/theme/menu/menu.vue
+++ b/packages/client/app/theme/menu/menu.vue
@@ -1,12 +1,10 @@
 <template>
-  <transition name="el-zoom-in-top">
-    <div ref="el" v-show="el" class="k-menu" :style="getStyle()">
-      <template v-for="item of ctx.internal.menus[id]">
-        <div class="k-menu-separator" v-if="item.id === '@separator'"></div>
-        <menu-item v-else v-bind="{ prefix: id, ...item }"></menu-item>
-      </template>
-    </div>
-  </transition>
+  <div ref="el" class="k-menu" :style="getStyle()">
+    <template v-for="item of ctx.internal.menus[id]">
+      <div class="k-menu-separator" v-if="item.id === '@separator'"></div>
+      <menu-item v-else v-bind="{ prefix: id, ...item }"></menu-item>
+    </template>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -22,7 +20,7 @@ const ctx = useContext()
 const el = ref<HTMLElement>()
 
 const getStyle = () => {
-  if (!el.value) return {}
+  if (!el.value) return { visibility: 'hidden' }
   const { height, width } = el.value.getBoundingClientRect()
   const style: any = {}
   if (props.relative.right + width > window.innerWidth) {
diff --git a/plugins/config/client/components/tree.vue b/plugins/config/client/components/tree.vue
index f24d835f..cb546b5d 100644
--- a/plugins/config/client/components/tree.vue
+++ b/plugins/config/client/components/tree.vue
@@ -86,8 +86,12 @@ function allowDrop(source: Node, target: Node, type: 'inner' | 'prev' | 'next')
   return target.data.id.startsWith('group:')
 }
 
-function handleClick(tree: Tree) {
+function handleClick(tree: Tree, target: Node, instance: any, event: MouseEvent) {
   model.value = tree.path
+  // el-tree will stop propagation,
+  // so we need to manually trigger the event
+  // so that context menu can be closed.
+  window.dispatchEvent(new MouseEvent(event.type, event))
 }
 
 function handleExpand(data: Tree, target: Node, instance) {