diff --git a/apps/web/src/components/blocksuite/workspace-header/header.tsx b/apps/web/src/components/blocksuite/workspace-header/header.tsx index 8f78a3972b..c7bd5a5d1a 100644 --- a/apps/web/src/components/blocksuite/workspace-header/header.tsx +++ b/apps/web/src/components/blocksuite/workspace-header/header.tsx @@ -1,5 +1,8 @@ import { BrowserWarning } from '@affine/component/affine-banner'; -import { appSidebarOpenAtom } from '@affine/component/app-sidebar'; +import { + appSidebarFloatingAtom, + appSidebarOpenAtom, +} from '@affine/component/app-sidebar'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { WorkspaceFlavour } from '@affine/workspace/type'; import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons'; @@ -164,6 +167,8 @@ export const Header = forwardRef< const open = useAtomValue(appSidebarOpenAtom); const t = useAFFiNEI18N(); + const appSidebarFloating = useAtomValue(appSidebarFloatingAtom); + const mode = useCurrentMode(); return (
{showGuideDownloadClientTip ? ( diff --git a/apps/web/src/components/blocksuite/workspace-header/styles.css.ts b/apps/web/src/components/blocksuite/workspace-header/styles.css.ts index 3dd7ab9d18..5b1fc3f3f3 100644 --- a/apps/web/src/components/blocksuite/workspace-header/styles.css.ts +++ b/apps/web/src/components/blocksuite/workspace-header/styles.css.ts @@ -1,3 +1,4 @@ +import type { ComplexStyleRule } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css'; export const headerContainer = style({ @@ -6,15 +7,16 @@ export const headerContainer = style({ position: 'sticky', top: 0, background: 'var(--affine-background-primary-color)', - // @ts-ignore - WebkitAppRegion: 'drag', zIndex: 'var(--affine-z-index-popover)', selectors: { '&[data-has-warning="true"]': { height: '96px', }, + '&[data-sidebar-floating="false"]': { + WebkitAppRegion: 'drag', + }, }, -}); +} as ComplexStyleRule); export const header = style({ flexShrink: 0, @@ -59,13 +61,12 @@ export const title = style({ '(max-width: 768px)': { selectors: { '&[data-open="true"]': { - // @ts-ignore WebkitAppRegion: 'no-drag', }, }, }, }, -}); +} as ComplexStyleRule); export const titleWrapper = style({ height: '100%', @@ -187,7 +188,6 @@ export const windowAppControlsWrapper = style({ }); export const windowAppControl = style({ - // @ts-ignore WebkitAppRegion: 'no-drag', cursor: 'pointer', display: 'inline-flex', @@ -204,4 +204,4 @@ export const windowAppControl = style({ background: 'var(--affine-background-tertiary-color)', }, }, -}); +} as ComplexStyleRule); diff --git a/apps/web/src/components/root-app-sidebar/index.tsx b/apps/web/src/components/root-app-sidebar/index.tsx index eeab8a9edd..8bfd482d98 100644 --- a/apps/web/src/components/root-app-sidebar/index.tsx +++ b/apps/web/src/components/root-app-sidebar/index.tsx @@ -20,13 +20,12 @@ import { ShareIcon, } from '@blocksuite/icons'; import type { Page } from '@blocksuite/store'; -import { useAtomValue } from 'jotai'; +import { useAtom, useAtomValue } from 'jotai'; import type { ReactElement } from 'react'; import type React from 'react'; import { useCallback, useEffect } from 'react'; import type { AllWorkspace } from '../../shared'; -import ChangeLog from '../pure/workspace-slider-bar/changeLog'; import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list'; import { WorkspaceSelector } from '../pure/workspace-slider-bar/WorkspaceSelector'; @@ -97,13 +96,24 @@ export const RootAppSidebar = ({ } }, [onClickNewPage]); - const sidebarOpen = useAtomValue(appSidebarOpenAtom); + const [sidebarOpen, setSidebarOpen] = useAtom(appSidebarOpenAtom); useEffect(() => { if (environment.isDesktop && typeof sidebarOpen === 'boolean') { window.apis?.ui.handleSidebarVisibilityChange(sidebarOpen); } }, [sidebarOpen]); + useEffect(() => { + const keydown = (e: KeyboardEvent) => { + if ((e.key === '/' && e.metaKey) || (e.key === '/' && e.ctrlKey)) { + setSidebarOpen(!sidebarOpen); + } + }; + document.addEventListener('keydown', keydown, { capture: true }); + return () => + document.removeEventListener('keydown', keydown, { capture: true }); + }, [sidebarOpen, setSidebarOpen]); + const clientUpdateAvailable = useAtomValue(updateAvailableAtom); return ( @@ -114,7 +124,6 @@ export const RootAppSidebar = ({ currentWorkspace={currentWorkspace} onClick={onOpenWorkspaceListModal} /> - = ({ children }) => { }, [setOpenQuickSearchModalAtom]); const resizing = useAtomValue(appSidebarResizingAtom); - const sidebarOpen = useAtomValue(appSidebarOpenAtom); return ( <> @@ -364,7 +360,7 @@ export const WorkspaceLayoutInner: FC = ({ children }) => { currentPath={router.asPath.split('?')[0]} paths={isPublicWorkspace ? publicPathGenerator : pathGenerator} /> - + {children} {/* fixme(himself65): remove this */} diff --git a/packages/component/src/components/app-sidebar/index.css.ts b/packages/component/src/components/app-sidebar/index.css.ts index 1e30c196b5..5ef58ddf87 100644 --- a/packages/component/src/components/app-sidebar/index.css.ts +++ b/packages/component/src/components/app-sidebar/index.css.ts @@ -13,19 +13,17 @@ export const navWrapperStyle = style({ width: navWidthVar, minWidth: navWidthVar, height: '100%', - backgroundColor: 'var(--affine-background-secondary-color)', + zIndex: 2, + backgroundColor: 'transparent', '@media': { [`(max-width: ${floatingMaxWidth}px)`]: { position: 'absolute', width: `calc(${navWidthVar})`, - zIndex: 2, + backgroundColor: 'var(--affine-background-primary-color)', selectors: { '&[data-open="false"]': { marginLeft: `calc((10vw + ${navWidthVar}) * -1)`, }, - '&[data-is-macos-electron="true"]': { - backgroundColor: 'var(--affine-background-primary-color)', - }, }, }, }, @@ -33,9 +31,6 @@ export const navWrapperStyle = style({ '&[data-open="false"]': { marginLeft: `calc(${navWidthVar} * -1)`, }, - '&[data-is-macos-electron="true"]': { - backgroundColor: 'transparent', - }, '&[data-enable-animation="true"]': { transition: 'margin-left .3s, width .3s', }, @@ -60,18 +55,9 @@ export const navHeaderStyle = style({ justifyContent: 'space-between', alignItems: 'center', gap: '32px', - '@media': { - [`(max-width: ${floatingMaxWidth}px)`]: { - selectors: { - '&[data-open="true"]': { - WebkitAppRegion: 'no-drag', - }, - }, - } as ComplexStyleRule, - }, + WebkitAppRegion: 'drag', selectors: { '&[data-is-macos-electron="true"]': { - WebkitAppRegion: 'drag', justifyContent: 'flex-end', }, }, diff --git a/packages/component/src/components/app-sidebar/index.jotai.ts b/packages/component/src/components/app-sidebar/index.jotai.ts index ab99ed7de4..0bd3cef72e 100644 --- a/packages/component/src/components/app-sidebar/index.jotai.ts +++ b/packages/component/src/components/app-sidebar/index.jotai.ts @@ -8,6 +8,8 @@ export const appSidebarOpenAtom = atomWithStorage( APP_SIDEBAR_OPEN, undefined as boolean | undefined ); +export const appSidebarFloatingAtom = atom(false); + export const appSidebarResizingAtom = atom(false); export const appSidebarWidthAtom = atomWithStorage( 'app-sidebar-width', diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx index 3f529d7942..6d0a49a0c2 100644 --- a/packages/component/src/components/app-sidebar/index.tsx +++ b/packages/component/src/components/app-sidebar/index.tsx @@ -14,6 +14,7 @@ import { } from './index.css'; import { APP_SIDEBAR_OPEN, + appSidebarFloatingAtom, appSidebarOpenAtom, appSidebarResizingAtom, appSidebarWidthAtom, @@ -37,21 +38,36 @@ function useEnableAnimation() { export function AppSidebar(props: AppSidebarProps): ReactElement { const [open, setOpen] = useAtom(appSidebarOpenAtom); const appSidebarWidth = useAtomValue(appSidebarWidthAtom); + const [appSidebarFloating, setAppSidebarFloating] = useAtom( + appSidebarFloatingAtom + ); const initialRender = open === undefined; const isResizing = useAtomValue(appSidebarResizingAtom); const navRef = useRef(null); useEffect(() => { - if (open === undefined && localStorage.getItem(APP_SIDEBAR_OPEN) === null) { - // give the initial value, - // so that the sidebar can be closed on mobile by default + function onResize() { const { matches } = window.matchMedia( - `(min-width: ${floatingMaxWidth}px)` + `(max-width: ${floatingMaxWidth}px)` ); - setOpen(matches); + if ( + open === undefined && + localStorage.getItem(APP_SIDEBAR_OPEN) === null + ) { + // give the initial value, + // so that the sidebar can be closed on mobile by default + setOpen(!matches); + } + setAppSidebarFloating(matches && !!open); } - }, [open, setOpen]); + + onResize(); + window.addEventListener('resize', onResize); + return () => { + window.removeEventListener('resize', onResize); + }; + }, [open, setAppSidebarFloating, setOpen]); // disable animation to avoid UI flash const enableAnimation = useEnableAnimation(); @@ -85,6 +101,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
setOpen(false)} /> @@ -99,4 +116,9 @@ export { AppSidebarFallback } from './fallback'; export * from './menu-item'; export * from './quick-search-input'; export * from './sidebar-containers'; -export { appSidebarOpenAtom, appSidebarResizingAtom, updateAvailableAtom }; +export { + appSidebarFloatingAtom, + appSidebarOpenAtom, + appSidebarResizingAtom, + updateAvailableAtom, +}; diff --git a/packages/component/src/components/app-sidebar/menu-item/index.css.ts b/packages/component/src/components/app-sidebar/menu-item/index.css.ts index b1360a9393..6b20819288 100644 --- a/packages/component/src/components/app-sidebar/menu-item/index.css.ts +++ b/packages/component/src/components/app-sidebar/menu-item/index.css.ts @@ -15,7 +15,6 @@ export const root = style({ background: 'var(--affine-hover-color)', }, '&[data-active="true"]': { - color: 'var(--affine-primary-color)', background: 'var(--affine-hover-color)', }, '&[data-disabled="true"]': { diff --git a/packages/component/src/components/app-sidebar/resize-indicator/index.css.ts b/packages/component/src/components/app-sidebar/resize-indicator/index.css.ts index eb64d2216d..08c9b12230 100644 --- a/packages/component/src/components/app-sidebar/resize-indicator/index.css.ts +++ b/packages/component/src/components/app-sidebar/resize-indicator/index.css.ts @@ -3,10 +3,9 @@ import { style } from '@vanilla-extract/css'; export const resizerContainer = style({ position: 'absolute', right: 0, - top: 0, - bottom: 0, - width: '10px', - height: '100%', + top: '16px', + bottom: '16px', + width: '16px', zIndex: 'calc(var(--affine-z-index-modal) + 1)', transform: 'translateX(50%)', backgroundColor: 'transparent', @@ -24,6 +23,7 @@ export const resizerContainer = style({ opacity: 1, }, '&[data-resizing="true"]': { + opacity: 1, transition: 'width .3s, min-width .3s, max-width .3s', }, '&[data-open="false"]': { @@ -38,10 +38,8 @@ export const resizerContainer = style({ export const resizerInner = style({ position: 'absolute', height: '100%', - width: '2px', - left: '3px', - backgroundColor: 'var(--affine-border-color)', - selectors: { - [`${resizerContainer}:hover &`]: {}, - }, + width: '4px', + left: '6px', + borderRadius: '4px', + backgroundColor: 'var(--affine-primary-color)', }); diff --git a/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts b/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts index 7071794798..ead2f8db5d 100644 --- a/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts +++ b/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts @@ -4,7 +4,7 @@ export const baseContainer = style({ padding: '12px 16px', display: 'flex', flexFlow: 'column nowrap', - rowGap: '8px', + rowGap: '4px', }); export const scrollableContainerRoot = style({ diff --git a/packages/component/src/components/internal-lottie/index.tsx b/packages/component/src/components/internal-lottie/index.tsx index 6ed0d0c9e0..a2e833e034 100644 --- a/packages/component/src/components/internal-lottie/index.tsx +++ b/packages/component/src/components/internal-lottie/index.tsx @@ -90,5 +90,5 @@ export const InternalLottie: FC = ({ } }, [isStopped, speed]); - return
; + return
; }; diff --git a/packages/component/src/components/workspace/index.css.ts b/packages/component/src/components/workspace/index.css.ts index d26edb34c7..23193c6183 100644 --- a/packages/component/src/components/workspace/index.css.ts +++ b/packages/component/src/components/workspace/index.css.ts @@ -13,7 +13,7 @@ export const appStyle = style({ '&[data-is-resizing="true"]': { cursor: 'col-resize', }, - '&[data-noise-background="true"]:before': { + '&:before': { content: '""', position: 'absolute', inset: 0, @@ -59,9 +59,6 @@ export const mainContainerStyle = style({ overflow: 'hidden', boxShadow: 'var(--affine-shadow-1)', }, - '&[data-is-desktop="true"][data-is-sidebar-open="true"]': { - marginLeft: '2px', - }, }, }); @@ -72,7 +69,7 @@ export const toolStyle = style({ zIndex: 'var(--affine-z-index-popover)', '@media': { [breakpoints.down('md', true)]: { - right: 'calc((100vw - 640px) * 3 / 19 + 5px)', + right: 'calc((100vw - 640px) * 3 / 19 + 14px)', }, [breakpoints.down('sm', true)]: { right: '5px', diff --git a/packages/component/src/components/workspace/index.tsx b/packages/component/src/components/workspace/index.tsx index dd7472839d..8fb485d445 100644 --- a/packages/component/src/components/workspace/index.tsx +++ b/packages/component/src/components/workspace/index.tsx @@ -23,7 +23,6 @@ export const AppContainer = (props: WorkspaceRootProps): ReactElement => { export type MainContainerProps = PropsWithChildren<{ className?: string; - sidebarOpen?: boolean; }>; export const MainContainer = (props: MainContainerProps): ReactElement => { @@ -31,7 +30,6 @@ export const MainContainer = (props: MainContainerProps): ReactElement => {
{props.children}
diff --git a/tests/parallels/open-affine.spec.ts b/tests/parallels/open-affine.spec.ts index ee07421a3c..5721a9c16f 100644 --- a/tests/parallels/open-affine.spec.ts +++ b/tests/parallels/open-affine.spec.ts @@ -26,33 +26,6 @@ test('Open last workspace when back to affine', async ({ page }) => { expect(currentWorkspaceName).toEqual('New Workspace 2'); }); -test('Open affine in first time after updated', async ({ page }) => { - await openHomePage(page); - const changeLogItem = page.locator('[data-testid=change-log]'); - await expect(changeLogItem).toBeVisible(); - const closeButton = page.locator('[data-testid=change-log-close-button]'); - await closeButton.click(); - await expect(changeLogItem).not.toBeVisible(); - await page.goto('http://localhost:8080'); - const currentChangeLogItem = page.locator('[data-testid=change-log]'); - await expect(currentChangeLogItem).not.toBeVisible(); -}); -test('Click right-bottom corner change log icon', async ({ page }) => { - await openHomePage(page); - await waitMarkdownImported(page); - await page.locator('[data-testid=help-island]').click(); - const editorRightBottomChangeLog = page.locator( - '[data-testid=right-bottom-change-log-icon]' - ); - await page.waitForTimeout(50); - expect(await editorRightBottomChangeLog.isVisible()).toEqual(true); - await page.getByTestId('all-pages').click(); - const normalRightBottomChangeLog = page.locator( - '[data-testid=right-bottom-change-log-icon]' - ); - expect(await normalRightBottomChangeLog.isVisible()).toEqual(true); -}); - test('Download client tip', async ({ page }) => { await openHomePage(page); const downloadClientTipItem = page.locator(