diff --git a/apps/core/package.json b/apps/core/package.json index a0d9e3a5e8..5b3335d936 100644 --- 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", diff --git a/apps/core/src/components/affine/language-menu/index.tsx b/apps/core/src/components/affine/language-menu/index.tsx index c697daf967..83e1a1b817 100644 --- 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', + }} > { }, [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', + }} > diff --git a/apps/core/src/components/pure/workspace-list-modal/index.tsx b/apps/core/src/components/pure/workspace-list-modal/index.tsx index a733a9cf9b..a6521faaad 100644 --- 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 = ({ > - + @@ -227,14 +227,24 @@ export const WorkspaceListModal = ({ - + ) : ( {session?.user.email} - }> + } + contentOptions={{ + side: 'right', + sideOffset: 30, + }} + > } @@ -261,7 +271,11 @@ export const WorkspaceListModal = ({ currentWorkspaceId={currentWorkspaceId} onMoveWorkspace={onMoveWorkspace} /> - + ) : null} @@ -290,8 +304,10 @@ export const WorkspaceListModal = ({ {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? ( - - + +
diff --git a/apps/core/src/components/pure/workspace-list-modal/styles.ts b/apps/core/src/components/pure/workspace-list-modal/styles.ts index e11f35270d..60c5b96e85 100644 --- 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), }; }); diff --git a/packages/component/src/components/card/workspace-card/styles.ts b/packages/component/src/components/card/workspace-card/styles.ts index 7545afe4b1..6ca289f4f5 100644 --- 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'), diff --git a/packages/component/src/components/page-list/filter/index.css.ts b/packages/component/src/components/page-list/filter/index.css.ts index 5ac50cbff8..288ed78db2 100644 --- 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', diff --git a/packages/component/src/components/page-list/filter/vars.tsx b/packages/component/src/components/page-list/filter/vars.tsx index 454bc7658b..9b3c5fc2e9 100644 --- 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 = ({
{t['com.affine.filter']()}
-
+ {vars // .filter(v => !selected.find(filter => filter.left.name === v.name)) .map(v => ( diff --git a/packages/component/src/components/page-list/operation-cell.tsx b/packages/component/src/components/page-list/operation-cell.tsx index e2ff765f9d..03f19a790b 100644 --- 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 ( <> - + diff --git a/packages/component/src/components/page-list/operation-menu-items/export.tsx b/packages/component/src/components/page-list/operation-menu-items/export.tsx index eb91331169..4546ed926a 100644 --- 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 ( @@ -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 ( <> @@ -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 ( <> @@ -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 ( <> @@ -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 ( - - - - - - - } - triggerOptions={{ - preFix: ( - - - - ), - ['data-testid' as string]: 'export-menu', - }} - > - {t.Export()} - +
+ + + + + + + } + triggerOptions={{ + className: transitionStyle, + preFix: ( + + + + ), + ['data-testid' as string]: 'export-menu', + }} + portalOptions={{ + container: ref.current, + }} + > + {t.Export()} + +
); }; diff --git 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 index 57de2d7704..532e0b627d 100644 --- 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', +}); diff --git a/packages/component/src/components/page-list/view/collection-list.css.ts b/packages/component/src/components/page-list/view/collection-list.css.ts index 5829ad5068..fe997f45c5 100644 --- 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)', +}); diff --git a/packages/component/src/components/page-list/view/collection-list.tsx b/packages/component/src/components/page-list/view/collection-list.tsx index cb51598b55..c04bf1c44c 100644 --- 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 = ({ }} >
- - - - + + + +
diff --git a/packages/component/src/components/share-menu/share-menu.tsx b/packages/component/src/components/share-menu/share-menu.tsx index d138fb2c6c..97925e0f2b 100644 --- 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) => {
- +
@@ -51,11 +49,19 @@ export const ShareMenu = (props: ShareMenuProps) => { return ( - @@ -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()} @@ -203,16 +203,17 @@ export const AffineSharePage = (props: ShareMenuProps) => {
)} -
} + block + type="danger" + className={styles.menuItemStyle} onClick={() => setShowDisable(true)} - style={{ cursor: 'pointer' }} >
{t['Disable Public Link']()}
- -
+