From d9f323874d48e52641d4ae05c697f99bdf4d79f6 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 8 Aug 2023 00:03:54 +0800 Subject: [PATCH] style: adjust page list header style (#3599) --- .../blocksuite/workspace-header/header.tsx | 10 +++++++++- .../blocksuite/workspace-header/styles.css.ts | 6 +++++- .../src/components/page-list/all-page.tsx | 6 +++--- packages/component/src/ui/button/styles.css.ts | 4 ++-- plugins/copilot/src/UI/header-item.tsx | 18 ++---------------- 5 files changed, 21 insertions(+), 23 deletions(-) diff --git a/apps/core/src/components/blocksuite/workspace-header/header.tsx b/apps/core/src/components/blocksuite/workspace-header/header.tsx index af989d884..16f0bc623 100644 --- a/apps/core/src/components/blocksuite/workspace-header/header.tsx +++ b/apps/core/src/components/blocksuite/workspace-header/header.tsx @@ -124,6 +124,7 @@ const PluginHeader = () => { disposes = Object.entries(headerItems).map(([id, headerItem]) => { const div = document.createElement('div'); div.setAttribute('plugin-id', id); + div.style.display = 'flex'; const cleanup = headerItem(div); root.appendChild(div); return () => { @@ -192,7 +193,12 @@ export const Header = forwardRef< data-is-edgeless={mode === 'edgeless'} data-is-page-list={props.currentPage === null} > -
+
{!open && }
diff --git a/apps/core/src/components/blocksuite/workspace-header/styles.css.ts b/apps/core/src/components/blocksuite/workspace-header/styles.css.ts index e1013c5df..86f9a251d 100644 --- a/apps/core/src/components/blocksuite/workspace-header/styles.css.ts +++ b/apps/core/src/components/blocksuite/workspace-header/styles.css.ts @@ -116,6 +116,8 @@ export const headerLeftSide = style({ display: 'flex', alignItems: 'center', transition: 'all .15s', +}); +export const headerLeftSideColumn = style({ '@container': { [`${headerVanillaContainer} (max-width: 900px)`]: { flexDirection: 'column', @@ -149,6 +151,9 @@ export const headerRightSide = style({ marginLeft: '20px', justifyContent: 'flex-end', transition: 'all .15s', +}); + +export const headerRightSideColumn = style({ '@container': { [`${headerVanillaContainer} (max-width: 900px)`]: { position: 'absolute', @@ -162,7 +167,6 @@ export const headerRightSide = style({ export const headerRightSideWindow = style({ marginRight: '140px', }); - export const browserWarning = style({ backgroundColor: 'var(--affine-background-warning-color)', color: 'var(--affine-warning-color)', diff --git a/packages/component/src/components/page-list/all-page.tsx b/packages/component/src/components/page-list/all-page.tsx index 54a9c5b3d..0fee81c9e 100644 --- a/packages/component/src/components/page-list/all-page.tsx +++ b/packages/component/src/components/page-list/all-page.tsx @@ -67,7 +67,7 @@ const AllPagesHead = ({ content: t['Created'](), proportion: 0.1, tableCellStyle: { - width: '80px', + width: '110px', } satisfies CSSProperties, }, { @@ -75,7 +75,7 @@ const AllPagesHead = ({ content: t['Updated'](), proportion: 0.1, tableCellStyle: { - width: '80px', + width: '110px', } satisfies CSSProperties, }, { @@ -90,7 +90,7 @@ const AllPagesHead = ({ showWhen: () => !isPublicWorkspace, sortable: false, tableCellStyle: { - width: '130px', + width: '140px', } satisfies CSSProperties, styles: { justifyContent: 'flex-end', diff --git a/packages/component/src/ui/button/styles.css.ts b/packages/component/src/ui/button/styles.css.ts index ee8e2743d..1b846b2d2 100644 --- a/packages/component/src/ui/button/styles.css.ts +++ b/packages/component/src/ui/button/styles.css.ts @@ -20,7 +20,7 @@ export const dropdownBtn = style({ cursor: 'pointer', selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: 'var(--affine-hover-color-filled)', }, }, }); @@ -94,7 +94,7 @@ export const radioButtonGroup = style({ display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center', - background: 'var(--affine-hover-color)', + background: 'var(--affine-hover-color-filled)', borderRadius: '10px', padding: '2px', // @ts-expect-error - fix electron drag diff --git a/plugins/copilot/src/UI/header-item.tsx b/plugins/copilot/src/UI/header-item.tsx index 56e57f7d6..8f8d8ea88 100644 --- a/plugins/copilot/src/UI/header-item.tsx +++ b/plugins/copilot/src/UI/header-item.tsx @@ -1,5 +1,6 @@ import { IconButton, Tooltip } from '@affine/component'; import { contentLayoutAtom } from '@affine/sdk/entry'; +import { AiIcon } from '@blocksuite/icons'; import { useSetAtom } from 'jotai'; import type { ReactElement } from 'react'; import { useCallback } from 'react'; @@ -27,22 +28,7 @@ export const HeaderItem = (): ReactElement => { [setLayout] )} > - - - - - + );