feat(ui): adjust menu ui

anse-app · May 9, 2023 · bc2b7f3 · bc2b7f3
1 parent 5691818
commit bc2b7f3
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,6 @@
   "devDependencies": {
     "@evan-yang/eslint-config": "^1.0.9",
     "@iconify-json/carbon": "^1.1.16",
-    "@iconify-json/ion": "^1.1.10",
     "@iconify-json/simple-icons": "^1.1.48",
     "@types/mapbox__rehype-prism": "^0.8.0",
     "@typescript-eslint/parser": "^5.57.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
@@ -74,11 +74,11 @@ export default (props: Props) => {
   }
 
   const [menuList, setMenuList] = createSignal<MenuItem[]>([
-    { id: 'retry', label: 'Retry send', icon: 'i-ion:refresh-outline', role: 'all', action: handleRetryMessageItem },
+    { id: 'retry', label: 'Retry send', icon: 'i-carbon:restart', role: 'all', action: handleRetryMessageItem },
     { id: 'raw', label: 'Show raw code', icon: 'i-carbon-code', role: 'system', action: () => setShowRawCode(!showRawCode()) },
     // TODO: Share message
-    // { id: 'share', label: 'Share message', icon: 'i-ion:ios-share-alt' },
-    { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create', role: 'user', action: handleEditMessageItem },
+    // { id: 'share', label: 'Share message', icon: 'i-carbon:share' },
+    { id: 'edit', label: 'Edit message', icon: 'i-carbon:edit', role: 'user', action: handleEditMessageItem },
     { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy', role: 'all', action: handleCopyMessageItem },
     { id: 'delete', label: 'Delete message', icon: 'i-carbon-trash-can', role: 'all', action: handleDeleteMessageItem },
   ])
@@ -104,13 +104,12 @@ export default (props: Props) => {
       <div class="max-w-base flex gap-4 overflow-hidden">
         <div class={`shrink-0 w-7 h-7 rounded-md op-80 ${roleClass[props.message.role]}`} />
         <div id="menuList-wrapper" class={`sm:hidden block absolute bottom-2 right-4 z-10 op-70 cursor-pointer ${isEditing() && '!hidden'}`}>
-          {/* TODO: hiden when clickOutside */}
           <DropDownMenu menuList={menuList()}>
             <div class="text-xl i-carbon:overflow-menu-horizontal" />
           </DropDownMenu>
         </div>
         <div class={`hidden sm:block absolute right-6 -top-4 ${!props.index && 'top-0'} ${isEditing() && '!hidden'}`}>
-          <div class="op-0 group-hover:op-80 fcc space-x-2 !bg-base px-4 py-1 rounded-xl b border-base transition-opacity duration-400">
+          <div class="op-0 group-hover:op-80 fcc space-x-2 !bg-base px-2 py-1 rounded-md border border-base transition-opacity">
             <For each={menuList()}>
               {item => (
                 <Tooltip tip={item.label} handleChildClick={item.action}>

diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
@@ -1,6 +1,6 @@
 import * as menu from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/solid'
-import { children, createEffect, createMemo, createUniqueId } from 'solid-js'
+import { Show, children, createEffect, createMemo, createUniqueId } from 'solid-js'
 import { Dynamic, For, Portal, spread } from 'solid-js/web'
 import type { JSX, JSXElement } from 'solid-js'
 
@@ -47,18 +47,20 @@ export const DropDownMenu = (props: Props) => {
     <div>
       <Dynamic component={resolvedChild} />
       <Portal>
-        <div {...api().positionerProps}>
-          <div {...api().contentProps} class="bg-base rounded-md shadow-md">
-            <For each={props.menuList}>
-              {item => (
-                <div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>
-                  {item.icon && <div class={item.icon} />}
-                  <div>{item.label}</div>
-                </div>
-              )}
-            </For>
+        <Show when={props.children}>
+          <div {...api().positionerProps}>
+            <div {...api().contentProps} class="bg-base text-sm border border-base rounded-md outline-none overflow-hidden shadow-md">
+              <For each={props.menuList}>
+                {item => (
+                  <div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>
+                    {item.icon && <div class={item.icon} />}
+                    <div>{item.label}</div>
+                  </div>
+                )}
+              </For>
+            </div>
           </div>
-        </div>
+        </Show>
       </Portal>
     </div>
   )

diff --git a/src/components/ui/base/Tooltip.tsx b/src/components/ui/base/Tooltip.tsx
@@ -41,7 +41,7 @@ export const Tooltip = (props: Props) => {
       <Dynamic component={resolvedChild} />
       <Show when={api().isOpen}>
         <div {...api().positionerProps} class="transition-opacity duration-300">
-          <div {...api().contentProps} class="px-2 py-1 text-sm text-white bg-dark-600 dark-bg-zinc-900 rounded-md shadow-sm op-80">{ props.tip }</div>
+          <div {...api().contentProps} class="px-2 py-1 text-xs text-white bg-dark-600 dark-bg-zinc-900 rounded-md shadow-sm op-80">{ props.tip }</div>
         </div>
       </Show>
     </div>

diff --git a/unocss.config.ts b/unocss.config.ts
@@ -63,7 +63,7 @@ export default defineConfig({
     'text-error': 'text-red-700 dark:text-red-400/80',
     'border-error': 'border border-red-700 dark:border-red-400/80',
     'text-info': 'text-gray-400 dark:text-gray-200',
-    'menu-icon': 'cursor-pointer text-xl fg-base hover-text-emerald-600',
+    'menu-icon': 'cursor-pointer text-base fg-base hover-text-emerald-600',
     'fc': 'flex justify-center',
     'fi': 'flex items-center',
     'fcc': 'fc items-center',