fix: menu style (#4287)

packages/component/src/components/page-list/filter/index.css.ts

@@ -1,14 +1,12 @@
 import { style } from '@vanilla-extract/css';
 
 export const menuItemStyle = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-start',
-  padding: '0px 24px 0px 8px',
+  fontSize: 'var(--affine-font-xs)',
 });
 export const variableSelectTitleStyle = style({
-  marginLeft: '12px',
-  marginTop: '10px',
+  margin: '7px 16px',
+  fontWeight: 500,
+  lineHeight: '20px',
   fontSize: 'var(--affine-font-xs)',
   color: 'var(--affine-text-secondary-color)',
 });
@@ -21,7 +19,7 @@ export const variableSelectDividerStyle = style({
   background: 'var(--affine-border-color)',
 });
 export const menuItemTextStyle = style({
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: 'var(--affine-font-xs)',
 });
 export const filterItemStyle = style({
   display: 'flex',

packages/component/src/components/page-list/filter/vars.tsx

@@ -5,7 +5,11 @@ import type {
   VariableMap,
 } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { MenuIcon, MenuItem } from '@toeverything/components/menu';
+import {
+  MenuIcon,
+  MenuItem,
+  MenuSeparator,
+} from '@toeverything/components/menu';
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
@@ -87,7 +91,7 @@ export const VariableSelect = ({
       <div className={styles.variableSelectTitleStyle}>
         {t['com.affine.filter']()}
       </div>
-      <div className={styles.variableSelectDividerStyle}></div>
+      <MenuSeparator />
       {vars
         // .filter(v => !selected.find(filter => filter.left.name === v.name))
         .map(v => (

packages/component/src/components/page-list/operation-cell.tsx

@@ -88,7 +88,12 @@ export const OperationCell = ({
   return (
     <>
       <FlexWrapper alignItems="center" justifyContent="center">
-        <Menu items={OperationMenu}>
+        <Menu
+          items={OperationMenu}
+          contentOptions={{
+            align: 'end',
+          }}
+        >
           <IconButton type="plain" data-testid="page-list-operation-button">
             <MoreVerticalIcon />
           </IconButton>

packages/component/src/components/page-list/operation-menu-items/export.tsx

@@ -10,13 +10,15 @@ import {
 } from '@blocksuite/icons';
 import { MenuIcon, MenuItem, MenuSub } from '@toeverything/components/menu';
 import { useSetAtom } from 'jotai';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
 import { getContentParser } from './get-content-parser';
+import { transitionStyle } from './index.css';
 import type { CommonMenuItemProps } from './types';
 
 export const ExportToPdfMenuItem = ({
   onSelect,
+  className,
 }: CommonMenuItemProps<{ type: 'pdf' }>) => {
   const t = useAFFiNEI18N();
   const { currentEditor } = globalThis;
@@ -74,8 +76,10 @@ export const ExportToPdfMenuItem = ({
 
   return (
     <MenuItem
+      className={className}
       data-testid="export-to-pdf"
       onSelect={onClickDownloadPDF}
+      block
       preFix={
         <MenuIcon>
           <ExportToPdfIcon />
@@ -89,6 +93,7 @@ export const ExportToPdfMenuItem = ({
 
 export const ExportToHtmlMenuItem = ({
   onSelect,
+  className,
 }: CommonMenuItemProps<{ type: 'html' }>) => {
   const t = useAFFiNEI18N();
   const { currentEditor } = globalThis;
@@ -121,8 +126,10 @@ export const ExportToHtmlMenuItem = ({
   return (
     <>
       <MenuItem
+        className={className}
         data-testid="export-to-html"
         onSelect={onClickExportHtml}
+        block
         preFix={
           <MenuIcon>
             <ExportToHtmlIcon />
@@ -137,6 +144,7 @@ export const ExportToHtmlMenuItem = ({
 
 export const ExportToPngMenuItem = ({
   onSelect,
+  className,
 }: CommonMenuItemProps<{ type: 'png' }>) => {
   const t = useAFFiNEI18N();
   const { currentEditor } = globalThis;
@@ -171,8 +179,10 @@ export const ExportToPngMenuItem = ({
   return (
     <>
       <MenuItem
+        className={className}
         data-testid="export-to-png"
         onSelect={onClickDownloadPNG}
+        block
         preFix={
           <MenuIcon>
             <ExportToPngIcon />
@@ -187,6 +197,7 @@ export const ExportToPngMenuItem = ({
 
 export const ExportToMarkdownMenuItem = ({
   onSelect,
+  className,
 }: CommonMenuItemProps<{ type: 'markdown' }>) => {
   const t = useAFFiNEI18N();
   const { currentEditor } = globalThis;
@@ -219,8 +230,10 @@ export const ExportToMarkdownMenuItem = ({
   return (
     <>
       <MenuItem
+        className={className}
         data-testid="export-to-markdown"
         onSelect={onClickExportMarkdown}
+        block
         preFix={
           <MenuIcon>
             <ExportToMarkdownIcon />
@@ -235,27 +248,42 @@ export const ExportToMarkdownMenuItem = ({
 
 // fixme: refactor this file, export function may should be passed by 'props', this file is just a ui component
 export const Export = () => {
+  const ref = useRef(null);
   const t = useAFFiNEI18N();
   return (
-    <MenuSub
-      items={
-        <>
-          <ExportToPdfMenuItem></ExportToPdfMenuItem>
-          <ExportToHtmlMenuItem></ExportToHtmlMenuItem>
-          <ExportToPngMenuItem></ExportToPngMenuItem>
-          <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
-        </>
-      }
-      triggerOptions={{
-        preFix: (
-          <MenuIcon>
-            <ExportIcon />
-          </MenuIcon>
-        ),
-        ['data-testid' as string]: 'export-menu',
-      }}
-    >
-      {t.Export()}
-    </MenuSub>
+    <div ref={ref}>
+      <MenuSub
+        items={
+          <>
+            <ExportToPdfMenuItem
+              className={transitionStyle}
+            ></ExportToPdfMenuItem>
+            <ExportToHtmlMenuItem
+              className={transitionStyle}
+            ></ExportToHtmlMenuItem>
+            <ExportToPngMenuItem
+              className={transitionStyle}
+            ></ExportToPngMenuItem>
+            <ExportToMarkdownMenuItem
+              className={transitionStyle}
+            ></ExportToMarkdownMenuItem>
+          </>
+        }
+        triggerOptions={{
+          className: transitionStyle,
+          preFix: (
+            <MenuIcon>
+              <ExportIcon />
+            </MenuIcon>
+          ),
+          ['data-testid' as string]: 'export-menu',
+        }}
+        portalOptions={{
+          container: ref.current,
+        }}
+      >
+        {t.Export()}
+      </MenuSub>
+    </div>
   );
 };

packages/component/src/components/page-list/operation-menu-items/index.css.ts

@@ -11,3 +11,7 @@ export const moveToTrashStyle = style({
 globalStyle(`${moveToTrashStyle}:hover svg`, {
   color: 'var(--affine-error-color)',
 });
+
+export const transitionStyle = style({
+  transition: 'all 0.3s',
+});

packages/component/src/components/page-list/view/collection-list.css.ts

@@ -221,3 +221,7 @@ export const deleteIcon = style({
     backgroundColor: 'var(--affine-background-error-color)',
   },
 });
+export const filterMenuTrigger = style({
+  padding: '6px 8px',
+  background: 'var(--affine-hover-color)',
+});

packages/component/src/components/page-list/view/collection-list.tsx

@@ -206,6 +206,7 @@ export const CollectionList = ({
         }}
       >
         <Button
+          className={styles.filterMenuTrigger}
           type="default"
           icon={<FilteredIcon />}
           data-testid="create-first-filter"