fix: menu style (#4287)

2024-11-23 21:52:49 +03:00 · 2023-09-11 14:41:36 +08:00 · 2023-09-11 14:41:36 +08:00 · b7b14c2241
commit b7b14c2241
parent 46fd732ee6
22 changed files with 153 additions and 81 deletions
--- a/apps/core/package.json
+++ b/apps/core/package.json
@ -39,7 +39,7 @@
    "@mui/material": "^5.14.7",
    "@radix-ui/react-select": "^1.2.2",
    "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.31",
+    "@toeverything/components": "^0.0.34",
    "async-call-rpc": "^6.3.1",
    "cmdk": "^0.2.0",
    "css-spring": "^4.1.0",
--- a/apps/core/src/components/affine/language-menu/index.tsx
+++ b/apps/core/src/components/affine/language-menu/index.tsx
@ -56,6 +56,12 @@ export const LanguageMenu = () => {
      portalOptions={{
        container: ref.current,
      }}
+      contentOptions={{
+        style: {
+          background: 'var(--affine-white)',
+        },
+        align: 'end',
+      }}
    >
      <MenuTrigger
        ref={ref}
--- a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
@ -83,6 +83,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
  }, [pageId, removeToTrash, t]);
  const menuItemStyle = {
    padding: '4px 12px',
+    transition: 'all 0.3s',
  };
  const { openPage } = useNavigateHelper();
  const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
@ -214,11 +215,9 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
          portalOptions={{
            container: ref.current,
          }}
-          // menuStyles={{
-          //   borderRadius: '8px',
-          //   padding: '8px',
-          //   background: 'var(--affine-background-overlay-panel-color)',
-          // }}
+          contentOptions={{
+            align: 'center',
+          }}
        >
          <HeaderDropDownButton />
        </Menu>
--- a/apps/core/src/components/pure/workspace-list-modal/index.tsx
+++ b/apps/core/src/components/pure/workspace-list-modal/index.tsx
@ -8,8 +8,8 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import {
  AccountIcon,
-  CloudWorkspaceIcon,
  ImportIcon,
+  Logo1Icon,
  MoreHorizontalIcon,
  PlusIcon,
  SignOutIcon,
@ -214,7 +214,7 @@ export const WorkspaceListModal = ({
            >
              <StyledCreateWorkspaceCardPillContent>
                <StyledCreateWorkspaceCardPillIcon>
-                  <CloudWorkspaceIcon />
+                  <Logo1Icon />
                </StyledCreateWorkspaceCardPillIcon>
                <StyledSignInCardPillTextCotainer>
                  <StyledSignInCardPillTextPrimary>
@ -227,14 +227,24 @@ export const WorkspaceListModal = ({
              </StyledCreateWorkspaceCardPillContent>
            </StyledItem>
          </StyledSignInCardPill>
-          <Divider style={{ margin: '12px 0px' }} />
+          <Divider
+            style={{
+              margin: '12px 0px',
+            }}
+          />
        </StyledModalHeaderContent>
      ) : (
        <StyledModalHeaderContent>
          <StyledModalHeader>
            <StyledModalTitle>{session?.user.email}</StyledModalTitle>
            <StyledOperationWrapper>
-              <Menu items={<AccountMenu />}>
+              <Menu
+                items={<AccountMenu />}
+                contentOptions={{
+                  side: 'right',
+                  sideOffset: 30,
+                }}
+              >
                <IconButton
                  data-testid="more-button"
                  icon={<MoreHorizontalIcon />}
@ -261,7 +271,11 @@ export const WorkspaceListModal = ({
              currentWorkspaceId={currentWorkspaceId}
              onMoveWorkspace={onMoveWorkspace}
            />
-            <Divider style={{ margin: '12px 0px', minHeight: '1px' }} />
+            <Divider
+              style={{
+                margin: '12px 0px',
+              }}
+            />
          </>
        ) : null}
        <StyledModalHeader>
@ -290,8 +304,10 @@ export const WorkspaceListModal = ({
        {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? (
          <StyledImportWorkspaceCardPill>
            <StyledItem onClick={onAddWorkspace} data-testid="add-workspace">
-              <StyledCreateWorkspaceCardPillContent>
-                <StyledCreateWorkspaceCardPillIcon>
+              <StyledCreateWorkspaceCardPillContent
+                style={{ gap: '14px', paddingLeft: '2px' }}
+              >
+                <StyledCreateWorkspaceCardPillIcon style={{ fontSize: '24px' }}>
                  <ImportIcon />
                </StyledCreateWorkspaceCardPillIcon>
                <div>
--- a/apps/core/src/components/pure/workspace-list-modal/styles.ts
+++ b/apps/core/src/components/pure/workspace-list-modal/styles.ts
@ -116,7 +116,7 @@ export const StyledCreateWorkspaceCardPillContent = styled('div')(() => {

 export const StyledCreateWorkspaceCardPillIcon = styled('div')(() => {
  return {
-    fontSize: '20px',
+    fontSize: '28px',
    width: '1em',
    height: '1em',
  };
@ -142,6 +142,7 @@ export const StyledSignInCardPillTextPrimary = styled('div')(() => {
    fontWeight: 600,
    lineHeight: '24px',
    maxWidth: '200px',
+    textAlign: 'left',
    ...textEllipsis(1),
  };
 });
--- a/packages/component/src/components/card/workspace-card/styles.ts
+++ b/packages/component/src/components/card/workspace-card/styles.ts
@ -4,7 +4,7 @@ import { displayFlex, styled, textEllipsis } from '../../../styles';

 export const StyledWorkspaceInfo = styled('div')(() => {
  return {
-    marginLeft: '15px',
+    marginLeft: '12px',
    width: '202px',
    p: {
      height: '20px',
@ -43,7 +43,7 @@ export const StyledCard = styled('div')<{
    width: '280px',
    height: '58px',
    cursor: 'pointer',
-    padding: '16px',
+    padding: '12px',
    borderRadius: '12px',
    border: `1px solid ${borderColor}`,
    ...displayFlex('flex-start', 'flex-start'),
--- a/packages/component/src/components/page-list/filter/index.css.ts
+++ b/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',
--- a/packages/component/src/components/page-list/filter/vars.tsx
+++ b/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 => (
--- a/packages/component/src/components/page-list/operation-cell.tsx
+++ b/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>
--- a/packages/component/src/components/page-list/operation-menu-items/export.tsx
+++ b/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,18 +248,29 @@ 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 (
+    <div ref={ref}>
      <MenuSub
        items={
          <>
-          <ExportToPdfMenuItem></ExportToPdfMenuItem>
-          <ExportToHtmlMenuItem></ExportToHtmlMenuItem>
-          <ExportToPngMenuItem></ExportToPngMenuItem>
-          <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
+            <ExportToPdfMenuItem
+              className={transitionStyle}
+            ></ExportToPdfMenuItem>
+            <ExportToHtmlMenuItem
+              className={transitionStyle}
+            ></ExportToHtmlMenuItem>
+            <ExportToPngMenuItem
+              className={transitionStyle}
+            ></ExportToPngMenuItem>
+            <ExportToMarkdownMenuItem
+              className={transitionStyle}
+            ></ExportToMarkdownMenuItem>
          </>
        }
        triggerOptions={{
+          className: transitionStyle,
          preFix: (
            <MenuIcon>
              <ExportIcon />
@ -254,8 +278,12 @@ export const Export = () => {
          ),
          ['data-testid' as string]: 'export-menu',
        }}
+        portalOptions={{
+          container: ref.current,
+        }}
      >
        {t.Export()}
      </MenuSub>
+    </div>
  );
 };
--- a/packages/component/src/components/page-list/operation-menu-items/index.css.ts
+++ b/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',
+});
--- a/packages/component/src/components/page-list/view/collection-list.css.ts
+++ b/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)',
+});
--- a/packages/component/src/components/page-list/view/collection-list.tsx
+++ b/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"
--- a/packages/component/src/components/share-menu/index.css.ts
+++ b/packages/component/src/components/share-menu/index.css.ts
@ -1,9 +1,8 @@
 import { style } from '@vanilla-extract/css';

 export const menuItemStyle = style({
-  padding: '4px 18px',
-  paddingBottom: '16px',
-  width: '100%',
+  padding: '4px',
+  transition: 'all 0.3s',
 });

 export const descriptionStyle = style({
@ -12,6 +11,7 @@ export const descriptionStyle = style({
  fontSize: 'var(--affine-font-xs)',
  lineHeight: '20px',
  color: 'var(--affine-text-secondary-color)',
+  textAlign: 'left',
 });

 export const buttonStyle = style({
--- a/packages/component/src/components/share-menu/share-export.tsx
+++ b/packages/component/src/components/share-menu/share-export.tsx
@ -7,7 +7,6 @@ import {
  ExportToPngMenuItem,
 } from '../page-list/operation-menu-items/export';
 import * as styles from './index.css';
-// import type { ShareMenuProps } from './share-menu';

 export const ShareExport = () => {
  const t = useAFFiNEI18N();
@ -17,10 +16,10 @@ export const ShareExport = () => {
        {t['com.affine.share-menu.ShareViaExport']()}
      </div>
      <div>
-        <ExportToPdfMenuItem />
-        <ExportToHtmlMenuItem />
-        <ExportToPngMenuItem />
-        <ExportToMarkdownMenuItem />
+        <ExportToPdfMenuItem className={styles.menuItemStyle} />
+        <ExportToHtmlMenuItem className={styles.menuItemStyle} />
+        <ExportToPngMenuItem className={styles.menuItemStyle} />
+        <ExportToMarkdownMenuItem className={styles.menuItemStyle} />
      </div>
      <div className={styles.columnContainerStyle}>
        <div className={styles.descriptionStyle}>
--- a/packages/component/src/components/share-menu/share-menu.tsx
+++ b/packages/component/src/components/share-menu/share-menu.tsx
@ -9,7 +9,6 @@ import type { Page } from '@blocksuite/store';
 import { Button } from '@toeverything/components/button';
 import { Divider } from '@toeverything/components/divider';
 import { Menu } from '@toeverything/components/menu';
-import { useRef } from 'react';

 import * as styles from './index.css';
 import { ShareExport } from './share-export';
@ -33,7 +32,6 @@ export interface ShareMenuProps<

 export const ShareMenu = (props: ShareMenuProps) => {
  const { useIsSharedPage } = props;
-  const ref = useRef(null);
  const isSharedPage = useIsSharedPage(
    props.workspace.id,
    props.currentPage.id
@ -43,7 +41,7 @@ export const ShareMenu = (props: ShareMenuProps) => {
    <div className={styles.containerStyle}>
      <SharePage {...props} />
      <div className={styles.columnContainerStyle}>
-        <Divider dividerColor="var(--affine-border-color)" size="thinner" />
+        <Divider size="thinner" />
      </div>
      <ShareExport />
    </div>
@ -51,11 +49,19 @@ export const ShareMenu = (props: ShareMenuProps) => {
  return (
    <Menu
      items={content}
-      portalOptions={{
-        container: ref.current,
+      contentOptions={{
+        style: {
+          width: '410px',
+          height: 'auto',
+          padding: '12px',
+          transform: 'translateX(-10px)',
+        },
+      }}
+      rootOptions={{
+        modal: false,
      }}
    >
-      <Button data-testid="share-menu-button" type="plain" ref={ref}>
+      <Button data-testid="share-menu-button" type="plain">
        <div
          style={{
            color: isSharedPage
--- a/packages/component/src/components/share-menu/share-page.tsx
+++ b/packages/component/src/components/share-menu/share-page.tsx
@ -129,7 +129,7 @@ export const AffineSharePage = (props: ShareMenuProps) => {
          <Button
            onClick={onClickCopyLink}
            data-testid="share-menu-copy-link-button"
-            style={{ padding: '4px 12px' }}
+            style={{ padding: '4px 12px', whiteSpace: 'nowrap' }}
          >
            {t.Copy()}
          </Button>
@ -138,7 +138,7 @@ export const AffineSharePage = (props: ShareMenuProps) => {
            onClick={onClickCreateLink}
            type="primary"
            data-testid="share-menu-create-link-button"
-            style={{ padding: '4px 12px' }}
+            style={{ padding: '4px 12px', whiteSpace: 'nowrap' }}
          >
            {t.Create()}
          </Button>
@ -203,16 +203,17 @@ export const AffineSharePage = (props: ShareMenuProps) => {
              </div>
            </>
          )}
-          <div
-            className={styles.rowContainerStyle}
+          <MenuItem
+            endFix={<ArrowRightSmallIcon />}
+            block
+            type="danger"
+            className={styles.menuItemStyle}
            onClick={() => setShowDisable(true)}
-            style={{ cursor: 'pointer' }}
          >
            <div className={styles.disableSharePage}>
              {t['Disable Public Link']()}
            </div>
-            <ArrowRightSmallIcon />
-          </div>
+          </MenuItem>
          <PublicLinkDisableModal
            open={showDisable}
            onConfirmDisable={onDisablePublic}
--- a/plugins/copilot/package.json
+++ b/plugins/copilot/package.json
@ -16,7 +16,7 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@toeverything/components": "^0.0.31",
+    "@toeverything/components": "^0.0.34",
    "idb": "^7.1.1",
    "langchain": "^0.0.138",
    "marked": "^7.0.5",
--- a/plugins/hello-world/package.json
+++ b/plugins/hello-world/package.json
@ -18,7 +18,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "^2.1.32",
-    "@toeverything/components": "^0.0.31"
+    "@toeverything/components": "^0.0.34"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*"
--- a/plugins/image-preview/package.json
+++ b/plugins/image-preview/package.json
@ -17,7 +17,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "^2.1.31",
-    "@toeverything/components": "^0.0.31",
+    "@toeverything/components": "^0.0.34",
    "@toeverything/theme": "^0.7.15",
    "clsx": "^2.0.0",
    "foxact": "^0.2.20",
--- a/plugins/outline/package.json
+++ b/plugins/outline/package.json
@ -18,7 +18,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "^2.1.32",
-    "@toeverything/components": "^0.0.31"
+    "@toeverything/components": "^0.0.34"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*",
--- a/yarn.lock
+++ b/yarn.lock
@ -229,7 +229,7 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@toeverything/components": ^0.0.31
+    "@toeverything/components": ^0.0.34
    "@types/marked": ^5.0.1
    idb: ^7.1.1
    jotai: ^2.4.1
@ -280,7 +280,7 @@ __metadata:
    "@sentry/webpack-plugin": ^2.7.0
    "@svgr/webpack": ^8.1.0
    "@swc/core": ^1.3.81
-    "@toeverything/components": ^0.0.31
+    "@toeverything/components": ^0.0.34
    "@types/lodash-es": ^4.17.9
    "@types/webpack-env": ^1.18.1
    async-call-rpc: ^6.3.1
@ -456,7 +456,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": ^2.1.32
-    "@toeverything/components": ^0.0.31
+    "@toeverything/components": ^0.0.34
  languageName: unknown
  linkType: soft

@ -482,7 +482,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": ^2.1.31
-    "@toeverything/components": ^0.0.31
+    "@toeverything/components": ^0.0.34
    "@toeverything/theme": ^0.7.15
    clsx: ^2.0.0
    foxact: ^0.2.20
@ -578,7 +578,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": ^2.1.32
-    "@toeverything/components": ^0.0.31
+    "@toeverything/components": ^0.0.34
    jotai: ^2.4.1
    react: 18.2.0
    react-dom: 18.2.0
@ -12463,9 +12463,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@toeverything/components@npm:^0.0.31":
-  version: 0.0.31
-  resolution: "@toeverything/components@npm:0.0.31"
+"@toeverything/components@npm:^0.0.34":
+  version: 0.0.34
+  resolution: "@toeverything/components@npm:0.0.34"
  dependencies:
    "@blocksuite/icons": ^2.1.33
    "@radix-ui/react-dropdown-menu": ^2.0.5
@ -12475,7 +12475,7 @@ __metadata:
    clsx: ^2
    react: ^18
    react-dom: ^18
-  checksum: a47263e25c9b6f987cc97d75cbf515a41ca7cce26f67c7c2017ad0e1331d5e4e59c50b1b511970fd28210e3437dfb19a83016678c3c633f0110065b6156ce289
+  checksum: 240fadd8101d92eb2da6700372a2cb87516479999943628c7d422d3cfeb3f330a15096eed470d650d207bd1a132e4115e1277b13d59a6f4994827e231e9cf5f3
  languageName: node
  linkType: hard