From c9f900b69ccba79ff6d4b6a56fa0571dffee32ec Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Wed, 13 Dec 2023 05:06:29 +0000 Subject: [PATCH] fix(core): page header style changes (#5279) ![CleanShot 2023-12-13 at 00.09.19@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/476fe4de-4066-4b1d-8823-d23a31ef692b.png) --- .../blocksuite/block-suite-header-title/index.tsx | 9 ++++----- .../block-suite-header-title/operation-menu.tsx | 15 +++++++-------- .../block-suite-header-title/styles.css.ts | 1 + .../pure/header-drop-down-button/index.tsx | 4 ++-- .../pure/header-drop-down-button/styles.css.ts | 15 +++++++-------- tests/kit/utils/cloud.ts | 2 +- 6 files changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header-title/index.tsx index cdbbd3bc8b..a48b307668 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/index.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-header-title/index.tsx @@ -14,7 +14,7 @@ import { import type { PageMode } from '../../../atoms'; import { EditorModeSwitch } from '../block-suite-mode-switch'; -import { PageMenu } from './operation-menu'; +import { PageHeaderMenuButton } from './operation-menu'; import * as styles from './styles.css'; export interface BlockSuiteHeaderTitleProps { @@ -81,9 +81,6 @@ const StableTitle = ({ pageId={pageId} isPublic={isPublic} publicMode={publicMode} - style={{ - marginRight: '12px', - }} /> {title || 'Untitled'} - {isPublic ? null : } + {isPublic ? null : ( + + )} ); }; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx index f02a7a13b3..7077a6e31f 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx @@ -1,5 +1,4 @@ -import { FlexWrapper } from '@affine/component'; -import { Export, MoveToTrash } from '@affine/component/page-list'; +import { Export, FavoriteTag, MoveToTrash } from '@affine/component/page-list'; import { Menu, MenuIcon, @@ -22,7 +21,7 @@ import { import type { PageMeta } from '@blocksuite/store'; import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta'; import { useAtomValue } from 'jotai'; -import { useCallback, useRef, useState } from 'react'; +import { useCallback, useState } from 'react'; import { currentModeAtom } from '../../../atoms/mode'; import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper'; @@ -39,9 +38,8 @@ type PageMenuProps = { pageId: string; }; // fixme: refactor this file -export const PageMenu = ({ rename, pageId }: PageMenuProps) => { +export const PageHeaderMenuButton = ({ rename, pageId }: PageMenuProps) => { const t = useAFFiNEI18N(); - const ref = useRef(null); // fixme(himself65): remove these hooks ASAP const [workspace] = useCurrentWorkspace(); @@ -148,7 +146,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => { ? t['com.affine.favoritePageOperation.remove']() : t['com.affine.favoritePageOperation.add']()} - {/* {TODO: add tag and duplicate function support} */} + {/* {TODO: add tag function support} */} {/* } data-testid="editor-option-menu-add-tag" @@ -211,7 +209,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => { return null; } return ( - + <> { onOpenChange={setHistoryModalOpen} /> ) : null} - + + ); }; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts index 6c7809fdce..922c50ee0a 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts +++ b/packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts @@ -7,6 +7,7 @@ export const headerTitleContainer = style({ flexGrow: 1, position: 'relative', width: '100%', + columnGap: 12, }); export const titleEditButton = style({ diff --git a/packages/frontend/core/src/components/pure/header-drop-down-button/index.tsx b/packages/frontend/core/src/components/pure/header-drop-down-button/index.tsx index 8cb02f804f..c26c0051ad 100644 --- a/packages/frontend/core/src/components/pure/header-drop-down-button/index.tsx +++ b/packages/frontend/core/src/components/pure/header-drop-down-button/index.tsx @@ -1,5 +1,5 @@ import { IconButton, type IconButtonProps } from '@affine/component/ui/button'; -import { ArrowDownSmallIcon } from '@blocksuite/icons'; +import { MoreHorizontalIcon } from '@blocksuite/icons'; import { forwardRef } from 'react'; import { headerMenuTrigger } from './styles.css'; @@ -17,7 +17,7 @@ export const HeaderDropDownButton = forwardRef< withoutHoverStyle={true} type="plain" > - + ); }); diff --git a/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts b/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts index abc35a4926..2512048c8c 100644 --- a/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts +++ b/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts @@ -1,10 +1,9 @@ -import { globalStyle, style } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; -export const headerMenuTrigger = style({}); - -globalStyle(`${headerMenuTrigger} svg`, { - transition: 'transform 0.15s ease-in-out', -}); -globalStyle(`${headerMenuTrigger}:hover svg`, { - transform: 'translateY(3px)', +export const headerMenuTrigger = style({ + selectors: { + '&[data-state=open], &:hover': { + backgroundColor: 'var(--affine-hover-color)', + }, + }, }); diff --git a/tests/kit/utils/cloud.ts b/tests/kit/utils/cloud.ts index f1d8c50770..714757ccd7 100644 --- a/tests/kit/utils/cloud.ts +++ b/tests/kit/utils/cloud.ts @@ -183,7 +183,7 @@ export async function enableCloudWorkspace(page: Page) { export async function enableCloudWorkspaceFromShareButton(page: Page) { const shareMenuButton = page.getByTestId('local-share-menu-button'); - expect(await shareMenuButton.isVisible()).toBeTruthy(); + await expect(shareMenuButton).toBeVisible(); // FIXME: this is a workaround for the flaky test // For unknown reasons,