diff --git a/apps/web/src/components/affine/workspace-setting-detail/style.ts b/apps/web/src/components/affine/workspace-setting-detail/style.ts index a81e42e8a5..6686908989 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/style.ts @@ -5,7 +5,7 @@ export const StyledSettingContainer = styled('div')(() => { display: 'flex', flexDirection: 'column', padding: '48px 0 0 48px', - height: 'calc(100vh - 60px)', + height: 'calc(100vh - 48px)', }; }); diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx index 16008e54d1..a0bd359e67 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx @@ -18,7 +18,7 @@ export const PageListEmpty = (props: { listType?: string }) => { }; return ( -
+
); diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx index afd9297e87..7640b3269f 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx @@ -16,11 +16,7 @@ import { PageIcon, } from '@blocksuite/icons'; import type { PageMeta } from '@blocksuite/store'; -import { - useMediaQuery, - useTheme as useMuiTheme, - useTheme, -} from '@mui/material'; +import { useMediaQuery, useTheme } from '@mui/material'; import { useAtomValue } from 'jotai'; import type React from 'react'; import { useCallback, useMemo } from 'react'; @@ -106,7 +102,7 @@ export const PageList: React.FC = ({ const pageList = usePageMeta(blockSuiteWorkspace); const helper = usePageMetaHelper(blockSuiteWorkspace); const { t } = useTranslation(); - const theme = useMuiTheme(); + const theme = useTheme(); const matches = useMediaQuery(theme.breakpoints.up('sm')); const isTrash = listType === 'trash'; const record = useAtomValue(workspacePreferredModeAtom); diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts index 61742c0b12..3a7b2742dd 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts @@ -3,7 +3,7 @@ import { TableRow } from '@affine/component'; export const StyledTableContainer = styled('div')(({ theme }) => { return { - height: 'calc(100vh - 60px)', + height: 'calc(100vh - 48px)', padding: '78px 72px', overflowY: 'auto', [theme.breakpoints.down('sm')]: { diff --git a/apps/web/src/components/blocksuite/header/styles.ts b/apps/web/src/components/blocksuite/header/styles.ts index 103b719fbf..d9265fc4bd 100644 --- a/apps/web/src/components/blocksuite/header/styles.ts +++ b/apps/web/src/components/blocksuite/header/styles.ts @@ -6,16 +6,22 @@ import { } from '@affine/component'; export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>( - ({ hasWarning }) => { + ({ theme, hasWarning }) => { return { height: hasWarning ? '96px' : '48px', + flexShrink: 0, + position: 'sticky', + top: 0, + background: theme.colors.pageBackground, + zIndex: 1, }; } ); export const StyledHeader = styled('div')<{ hasWarning: boolean }>( ({ theme }) => { return { - height: '60px', + flexShrink: 0, + height: '48px', width: '100%', padding: '0 20px', ...displayFlex('space-between', 'center'), @@ -28,7 +34,7 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>( ); export const StyledTitleContainer = styled('div')(({ theme }) => ({ - width: '720px', + width: '100%', height: '100%', margin: 'auto', @@ -37,15 +43,24 @@ export const StyledTitleContainer = styled('div')(({ theme }) => ({ fontSize: theme.font.base, })); -export const StyledTitle = styled('div')(() => { +export const StyledTitle = styled('div')(({ theme }) => { return { maxWidth: '620px', + [theme.breakpoints.down('lg')]: { + maxWidth: '480px', + }, + [theme.breakpoints.down('md')]: { + maxWidth: '240px', + }, + [theme.breakpoints.down('sm')]: { + maxWidth: '180px', + }, + transition: 'max-width .15s', ...textEllipsis(1), }; }); export const StyledTitleWrapper = styled('div')({ - maxWidth: '720px', height: '100%', position: 'relative', ...displayFlex('center', 'center'), @@ -132,7 +147,7 @@ export const StyledQuickSearchTipButton = styled('div')(({ theme }) => { ...displayFlex('center', 'center'), marginTop: '12px', color: '#FFFFFF', - width: '60px', + width: '48px', height: ' 26px', fontSize: theme.font.sm, lineHeight: '22px', diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx index 09da581cce..174c17184a 100644 --- a/apps/web/src/components/page-detail-editor.tsx +++ b/apps/web/src/components/page-detail-editor.tsx @@ -68,7 +68,7 @@ export const PageDetailEditor: React.FC = ({ { return { - marginTop: '4px', height: '58px', display: 'flex', alignItems: 'center', @@ -10,7 +9,6 @@ export const StyledSelectorContainer = styled('div')(({ theme }) => { marginBottom: '16px', borderRadius: '8px', color: theme.colors.textColor, - position: 'relative', ':hover': { cursor: 'pointer', background: theme.colors.hoverBackground, diff --git a/apps/web/src/components/pure/workspace-slider-bar/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/index.tsx index 54a7cd65b0..ce5d70e62b 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/index.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/index.tsx @@ -8,10 +8,15 @@ import { SettingsIcon, } from '@blocksuite/icons'; import type { Page, PageMeta } from '@blocksuite/store'; +import { useMediaQuery, useTheme } from '@mui/material'; import type React from 'react'; import { useCallback } from 'react'; -import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status'; +import { + useSidebarResizing, + useSidebarStatus, + useSidebarWidth, +} from '../../../hooks/affine/use-sidebar-status'; import { usePageMeta } from '../../../hooks/use-page-meta'; import type { AllWorkspace } from '../../../shared'; import { SidebarSwitch } from '../../affine/sidebar-switch'; @@ -23,8 +28,12 @@ import { StyledLink, StyledNewPageButton, StyledSidebarSwitchWrapper, - StyledSlidebarWrapper, StyledSliderBar, + StyledSliderBarInnerWrapper, + StyledSliderBarWrapper, + StyledSliderModalBackground, + StyledSliderResizer, + StyledSliderResizerInner, } from './style'; import { WorkspaceSelector } from './WorkspaceSelector'; @@ -65,114 +74,171 @@ export const WorkSpaceSliderBar: React.FC = ({ }) => { const currentWorkspaceId = currentWorkspace?.id || null; const { t } = useTranslation(); - const [sidebarOpen] = useSidebarStatus(); + const [sidebarOpen, setSidebarOpen] = useSidebarStatus(); const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null); const onClickNewPage = useCallback(async () => { const page = await createPage(); openPage(page.id); }, [createPage, openPage]); + const theme = useTheme(); + const floatingSlider = useMediaQuery(theme.breakpoints.down('md')); + const [sliderWidth, setSliderWidth] = useSidebarWidth(); + const [isResizing, setIsResizing] = useSidebarResizing(); + const show = isPublicWorkspace ? false : sidebarOpen; + const actualWidth = show + ? floatingSlider + ? 'calc(10vw + 400px)' + : sliderWidth + : 0; + const onResizeStart = useCallback(() => { + let resized = false; + function onMouseMove(e: MouseEvent) { + const newWidth = Math.min(480, Math.max(e.clientX, 256)); + setSliderWidth(newWidth); + setIsResizing(true); + resized = true; + } + document.addEventListener('mousemove', onMouseMove); + document.addEventListener( + 'mouseup', + () => { + // if not resized, toggle sidebar + if (!resized) { + setSidebarOpen(o => !o); + } + setIsResizing(false); + document.removeEventListener('mousemove', onMouseMove); + }, + { once: true } + ); + }, [setIsResizing, setSidebarOpen, setSliderWidth]); return ( <> - - - - - - - - - { - onOpenQuickSearchModal(); - }, [onOpenQuickSearchModal])} - > - - {t('Quick search')} - - - - - - {t('Workspace Settings')} - - - - - - {t('All pages')} - - - - {config.enableSubpage && !!currentWorkspace && ( - - )} - - - {t('Trash')} - - - - - + - {t('New Page')} - - + + + + + + + + { + onOpenQuickSearchModal(); + }, [onOpenQuickSearchModal])} + > + + {t('Quick search')} + + + + + + {t('Workspace Settings')} + + + + + + + {t('All pages')} + + + + + {config.enableSubpage && !!currentWorkspace && ( + + )} + + + + {t('Trash')} + + + + + + {t('New Page')} + + + {!floatingSlider && sidebarOpen && ( + + + + )} + + setSidebarOpen(false)} + /> ); }; diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts index 6f564d7b18..fc3f02d5a7 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/style.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts @@ -1,36 +1,45 @@ import { displayFlex, styled } from '@affine/component'; import Link from 'next/link'; -export const StyledSliderBar = styled('div')<{ show: boolean }>( - ({ theme, show }) => { - return { - width: show ? '256px' : '0', - whiteSpace: 'nowrap', - height: '100vh', - minHeight: '450px', - background: theme.colors.hubBackground, - boxShadow: theme.shadow.popover, - transition: 'width .15s, padding .15s', - position: 'relative', - zIndex: theme.zIndex.modal, - padding: show ? '0 4px' : '0', - flexShrink: 0, - display: 'flex', - flexDirection: 'column', - overflow: 'hidden', - [theme.breakpoints.down('sm')]: { - position: 'absolute', - }, - }; - } -); + +export const StyledSliderBarWrapper = styled('div')(() => { + return { + height: '100%', + width: 'auto', + position: 'relative', + }; +}); + +export const StyledSliderBar = styled('div')<{ + resizing: boolean; + show: boolean; + floating: boolean; +}>(({ theme, show, floating, resizing }) => { + return { + whiteSpace: 'nowrap', + height: '100%', + background: theme.colors.hubBackground, + zIndex: theme.zIndex.modal, + transition: !resizing ? 'width .15s, padding .15s' : '', + padding: show ? '0 4px' : '0', + flexShrink: 0, + display: 'flex', + flexDirection: 'column', + overflow: 'hidden', + position: floating ? 'absolute' : 'relative', + maxWidth: floating ? undefined : 'calc(100vw - 698px)', + borderRight: '1px solid', + borderColor: theme.colors.borderColor, + }; +}); export const StyledSidebarSwitchWrapper = styled('div')(() => { return { height: '48px', + flexShrink: 0, padding: '0 16px', ...displayFlex('flex-start', 'center'), }; }); -export const StyledSlidebarWrapper = styled('div')(() => { +export const StyledSliderBarInnerWrapper = styled('div')(() => { return { flexGrow: 1, overflowX: 'hidden', @@ -70,3 +79,52 @@ export const StyledNewPageButton = styled('button')(({ theme }) => { }, }; }); +export const StyledSliderModalBackground = styled('div')<{ active: boolean }>( + ({ theme, active }) => { + return { + transition: 'opacity .15s', + pointerEvents: active ? 'auto' : 'none', + opacity: active ? 1 : 0, + display: active ? 'block' : 'none', + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + zIndex: theme.zIndex.modal - 1, + background: theme.colors.modalBackground, + }; + } +); +export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>( + ({ theme }) => { + return { + position: 'absolute', + top: 0, + right: 0, + bottom: 0, + width: '12px', + transform: 'translateX(50%)', + cursor: 'col-resize', + zIndex: theme.zIndex.modal + 1, + userSelect: 'none', + ':hover > *': { + background: 'rgba(0, 0, 0, 0.1)', + }, + }; + } +); +export const StyledSliderResizerInner = styled('div')<{ isResizing: boolean }>( + ({ isResizing }) => { + return { + transition: 'background .15s .1s', + position: 'absolute', + top: 0, + right: '50%', + bottom: 0, + transform: 'translateX(0.5px)', + width: '2px', + background: isResizing ? 'rgba(0, 0, 0, 0.1)' : 'transparent', + }; + } +); diff --git a/apps/web/src/hooks/affine/use-sidebar-status.ts b/apps/web/src/hooks/affine/use-sidebar-status.ts index f2dd9d050f..11642f2724 100644 --- a/apps/web/src/hooks/affine/use-sidebar-status.ts +++ b/apps/web/src/hooks/affine/use-sidebar-status.ts @@ -1,8 +1,18 @@ -import { useAtom } from 'jotai'; +import { atom, useAtom } from 'jotai'; import { atomWithStorage } from 'jotai/utils'; const sideBarOpenAtom = atomWithStorage('sidebarOpen', true); +const sideBarWidthAtom = atomWithStorage('sidebarWidth', 256); +const sidebarResizingAtom = atom(false); export function useSidebarStatus() { return useAtom(sideBarOpenAtom); } + +export function useSidebarWidth() { + return useAtom(sideBarWidthAtom); +} + +export function useSidebarResizing() { + return useAtom(sidebarResizingAtom); +} diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx index f40c5de3a5..cf45210935 100644 --- a/apps/web/src/layouts/index.tsx +++ b/apps/web/src/layouts/index.tsx @@ -26,6 +26,7 @@ import { HelpIsland } from '../components/pure/help-island'; import { PageLoading } from '../components/pure/loading'; import WorkSpaceSliderBar from '../components/pure/workspace-slider-bar'; import { useAffineRefreshAuthToken } from '../hooks/affine/use-affine-refresh-auth-token'; +import { useSidebarResizing } from '../hooks/affine/use-sidebar-status'; import { useCurrentPageId } from '../hooks/current/use-current-page-id'; import { useCurrentWorkspace } from '../hooks/current/use-current-workspace'; import { useBlockSuiteWorkspaceHelper } from '../hooks/use-blocksuite-workspace-helper'; @@ -37,7 +38,12 @@ import { WorkspacePlugins } from '../plugins'; import { ModalProvider } from '../providers/ModalProvider'; import type { AllWorkspace } from '../shared'; import { pathGenerator, publicPathGenerator } from '../shared'; -import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles'; +import { + MainContainer, + MainContainerWrapper, + StyledPage, + StyledToolWrapper, +} from './styles'; declare global { // eslint-disable-next-line no-var @@ -246,6 +252,7 @@ export const WorkspaceLayoutInner: React.FC = ({ const handleOpenQuickSearchModal = useCallback(() => { setOpenQuickSearchModalAtom(true); }, [setOpenQuickSearchModalAtom]); + const [resizingSidebar] = useSidebarResizing(); const lock = useAtomValue(workspaceLockAtom); if (lock) { return ; @@ -256,7 +263,7 @@ export const WorkspaceLayoutInner: React.FC = ({ {title} - + = ({ currentPath={router.asPath.split('?')[0]} paths={isPublicWorkspace ? publicPathGenerator : pathGenerator} /> - - - {children} - - {/* fixme(himself65): remove this */} -
- {/* Slot for block hub */} -
- {!isPublicWorkspace && ( - - )} - - + + + + {children} + + {/* fixme(himself65): remove this */} +
+ {/* Slot for block hub */} +
+ {!isPublicWorkspace && ( + + )} + + + diff --git a/apps/web/src/layouts/public-workspace-layout.tsx b/apps/web/src/layouts/public-workspace-layout.tsx index bb8853f0e0..e23a8a115c 100644 --- a/apps/web/src/layouts/public-workspace-layout.tsx +++ b/apps/web/src/layouts/public-workspace-layout.tsx @@ -14,7 +14,7 @@ import { } from '../atoms/public-workspace'; import { StyledTableContainer } from '../components/blocksuite/block-suite-page-list/page-list/styles'; import { useRouterTitle } from '../hooks/use-router-title'; -import { StyledPage, StyledWrapper } from './styles'; +import { MainContainer, StyledPage } from './styles'; const QuickSearchModal = dynamic( () => import('../components/pure/quick-search-modal') @@ -46,9 +46,9 @@ const PublicWorkspaceLayoutInner: React.FC = props => { {title} - + {props.children} - + {/* `publicBlockSuiteAtom` is available only when `publicWorkspaceIdAtom` loaded */} {workspaceId && } diff --git a/apps/web/src/layouts/styles.ts b/apps/web/src/layouts/styles.ts index 37dca67ee3..3a05225872 100644 --- a/apps/web/src/layouts/styles.ts +++ b/apps/web/src/layouts/styles.ts @@ -1,15 +1,21 @@ import { styled } from '@affine/component'; -export const StyledPage = styled('div')(({ theme }) => { - return { - height: '100vh', - minHeight: '450px', - backgroundColor: theme.colors.pageBackground, - transition: 'background-color .5s', - display: 'flex', - flexGrow: '1', - }; -}); +export const StyledPage = styled('div')<{ resizing?: boolean }>( + ({ theme, resizing }) => { + return { + cursor: resizing ? 'col-resize' : 'default', + height: '100vh', + backgroundColor: theme.colors.pageBackground, + transition: 'background-color .5s', + display: 'flex', + flexGrow: '1', + '--affine-editor-width': '686px', + [theme.breakpoints.down('sm')]: { + '--affine-editor-width': '550px', + }, + }; + } +); export const StyledWrapper = styled('div')(() => { return { @@ -19,11 +25,34 @@ export const StyledWrapper = styled('div')(() => { }; }); +export const MainContainerWrapper = styled('div')(({ theme }) => { + return { + display: 'flex', + flexGrow: 1, + position: 'relative', + maxWidth: '100vw', + overflow: 'auto', + }; +}); + +export const MainContainer = styled('div')(({ theme }) => { + return { + position: 'relative', + flexGrow: 1, + [theme.breakpoints.up('md')]: { + minWidth: '686px', + }, + }; +}); + export const StyledToolWrapper = styled('div')(({ theme }) => { return { position: 'fixed', - right: '30px', + right: 'calc((100vw - 640px) * 3 / 19 + 5px)', bottom: '30px', zIndex: theme.zIndex.popover, + [theme.breakpoints.down('md')]: { + right: '30px', + }, }; }); diff --git a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx index 3cea289949..51b385759c 100644 --- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx +++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx @@ -24,7 +24,7 @@ import { initPage } from '../../../utils'; export const NavContainer = styled('div')(({ theme }) => { return { width: '100vw', - height: '60px', + height: '48px', ...displayFlex('space-between', 'center'), backgroundColor: theme.colors.pageBackground, }; diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css index 3036683ffa..c014a7177c 100644 --- a/apps/web/src/styles/globals.css +++ b/apps/web/src/styles/globals.css @@ -191,15 +191,18 @@ input[type='number']::-webkit-outer-spin-button { position: relative; width: 100%; height: 100%; + padding: 0 2rem; } .affine-default-page-block-title-container { margin-top: 78px; margin-bottom: 40px; + transition: margin-top 0.2s; } .affine-default-page-block-container { - max-width: 686px; + transition: max-width 0.2s; + min-width: 550px; } affine-block-hub { diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts index 257e9d3440..7f19329b10 100644 --- a/packages/component/src/index.ts +++ b/packages/component/src/index.ts @@ -27,6 +27,7 @@ declare module '@mui/material/styles' { tooltipBackground: string; hoverBackground: string; innerHoverBackground: string; + modalBackground: string; // Use for the quick search tips background backgroundTertiaryColor: string; codeBackground: string; @@ -103,6 +104,7 @@ declare module '@mui/material/styles' { tooltipBackground: string; hoverBackground: string; innerHoverBackground: string; + modalBackground: string; // Use for the quick search tips background backgroundTertiaryColor: string; codeBackground: string; diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index 2adad62c48..44b24b4cee 100644 --- a/packages/component/src/styles/theme.ts +++ b/packages/component/src/styles/theme.ts @@ -29,6 +29,7 @@ export const getLightTheme = ( cardHoverBackground: '#f8f9ff', warningBackground: '#FFF9C7', errorBackground: '#FFDED8', + modalBackground: 'rgba(0, 0, 0, 0.6)', textColor: '#424149', secondaryTextColor: '#8E8D91', @@ -83,6 +84,15 @@ export const getLightTheme = ( radius: { popover: '10px', }, + breakpoints: { + values: { + xs: 0, + sm: 640, + md: 960, + lg: 1280, + xl: 1920, + }, + }, }; }; @@ -113,6 +123,7 @@ export const getDarkTheme = ( cardHoverBackground: '#363636', warningBackground: '#FFF9C7', errorBackground: '#FFDED8', + modalBackground: 'rgba(0, 0, 0, 0.8)', textColor: '#fff', secondaryTextColor: '#8E8D91', @@ -207,7 +218,6 @@ export const globalThemeVariables: ( '--affine-paragraph-space': theme.space.paragraph, '--affine-popover-radius': theme.radius.popover, - '--affine-editor-width': '720px', '--affine-zoom': '1', '--affine-scale': 'calc(1 / var(--affine-zoom))', }; diff --git a/packages/component/src/styles/types.ts b/packages/component/src/styles/types.ts index 01e1b385c8..fd6f0c2451 100644 --- a/packages/component/src/styles/types.ts +++ b/packages/component/src/styles/types.ts @@ -27,6 +27,7 @@ export interface AffineTheme { tooltipBackground: string; hoverBackground: string; innerHoverBackground: string; + modalBackground: string; // Use for the quick search tips background backgroundTertiaryColor: string; codeBackground: string; @@ -92,6 +93,15 @@ export interface AffineTheme { radius: { popover: string; }; + breakpoints: { + values: { + xs: number; + sm: number; + md: number; + lg: number; + xl: number; + }; + }; } export interface AffineThemeCSSVariables { @@ -150,7 +160,6 @@ export interface AffineThemeCSSVariables { '--affine-popover-radius': AffineTheme['radius']['popover']; // use for blocksuite - '--affine-editor-width': CSSProperties['width']; '--affine-zoom': CSSProperties['zoom']; '--affine-scale': string; } diff --git a/packages/component/src/ui/modal/styles.ts b/packages/component/src/ui/modal/styles.ts index d8685fdb04..ff3edde4b1 100644 --- a/packages/component/src/ui/modal/styles.ts +++ b/packages/component/src/ui/modal/styles.ts @@ -12,10 +12,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => { bottom: '0', top: '0', left: '0', - backgroundColor: - theme.palette.mode === 'light' - ? 'rgba(58, 76, 92, 0.2)' - : 'rgba(34, 34, 34, 0.6)', + backgroundColor: theme.colors.modalBackground, }; }); diff --git a/tests/parallels/layout.spec.ts b/tests/parallels/layout.spec.ts index 44b605450f..d0fd6f4c7b 100644 --- a/tests/parallels/layout.spec.ts +++ b/tests/parallels/layout.spec.ts @@ -9,7 +9,7 @@ test.describe('Layout ui', () => { await openHomePage(page); await waitMarkdownImported(page); await page.getByTestId('sliderBar-arrowButton-collapse').click(); - const sliderBarArea = page.getByTestId('sliderBar'); + const sliderBarArea = page.getByTestId('sliderBar-inner'); await expect(sliderBarArea).not.toBeVisible(); }); @@ -17,10 +17,61 @@ test.describe('Layout ui', () => { await openHomePage(page); await waitMarkdownImported(page); await page.getByTestId('sliderBar-arrowButton-collapse').click(); - const sliderBarArea = page.getByTestId('sliderBar'); + const sliderBarArea = page.getByTestId('sliderBar-inner'); await expect(sliderBarArea).not.toBeVisible(); await page.getByTestId('sliderBar-arrowButton-expand').click(); await expect(sliderBarArea).toBeVisible(); }); + + test('Click resizer can close sidebar', async ({ page }) => { + await openHomePage(page); + await waitMarkdownImported(page); + const sliderBarArea = page.getByTestId('sliderBar-inner'); + await expect(sliderBarArea).toBeVisible(); + + await page.getByTestId('sliderBar-resizer').click(); + await expect(sliderBarArea).not.toBeVisible(); + }); + + test('Drag resizer can resize sidebar', async ({ page }) => { + await openHomePage(page); + await waitMarkdownImported(page); + const sliderBarArea = page.getByTestId('sliderBar-inner'); + await expect(sliderBarArea).toBeVisible(); + + const sliderResizer = page.getByTestId('sliderBar-resizer'); + await sliderResizer.hover(); + await page.mouse.down(); + await page.mouse.move(400, 300, { + steps: 10, + }); + await page.mouse.up(); + const boundingBox = await page.getByTestId('sliderBar-root').boundingBox(); + expect(boundingBox?.width).toBe(400); + }); + + test('Sidebar in between sm & md breakpoint', async ({ page }) => { + await openHomePage(page); + await waitMarkdownImported(page); + const sliderBarArea = page.getByTestId('sliderBar-inner'); + const sliderBarModalBackground = page.getByTestId( + 'sliderBar-modalBackground' + ); + await expect(sliderBarArea).toBeVisible(); + await expect(sliderBarModalBackground).not.toBeVisible(); + + await page.setViewportSize({ + width: 768, + height: 1024, + }); + await expect(sliderBarModalBackground).toBeVisible(); + + // click modal background can close sidebar + await sliderBarModalBackground.click({ + force: true, + position: { x: 600, y: 150 }, + }); + await expect(sliderBarArea).not.toBeVisible(); + }); }); diff --git a/tests/parallels/quick-search.spec.ts b/tests/parallels/quick-search.spec.ts index 1f639adbb5..ae8dcea180 100644 --- a/tests/parallels/quick-search.spec.ts +++ b/tests/parallels/quick-search.spec.ts @@ -180,7 +180,7 @@ test.describe('Novice guidance for quick search', () => { const quickSearchTips = page.locator('[data-testid=quick-search-tips]'); await expect(quickSearchTips).not.toBeVisible(); await page.getByTestId('sliderBar-arrowButton-collapse').click(); - const sliderBarArea = page.getByTestId('sliderBar'); + const sliderBarArea = page.getByTestId('sliderBar-inner'); await expect(sliderBarArea).not.toBeVisible(); await expect(quickSearchTips).toBeVisible(); await page.locator('[data-testid=quick-search-got-it]').click(); diff --git a/tests/parallels/subpage.spec.ts b/tests/parallels/subpage.spec.ts index 5ff749bf6e..c4003224df 100644 --- a/tests/parallels/subpage.spec.ts +++ b/tests/parallels/subpage.spec.ts @@ -9,7 +9,7 @@ test.describe('subpage', () => { await openHomePage(page); await waitMarkdownImported(page); await page.getByTestId('sliderBar-arrowButton-collapse').click(); - const sliderBarArea = page.getByTestId('sliderBar'); + const sliderBarArea = page.getByTestId('sliderBar-inner'); await expect(sliderBarArea).not.toBeVisible(); }); });