diff --git a/apps/web/src/layouts/public-workspace-layout.tsx b/apps/web/src/layouts/public-workspace-layout.tsx index c044ac86ca..143966c51c 100644 --- a/apps/web/src/layouts/public-workspace-layout.tsx +++ b/apps/web/src/layouts/public-workspace-layout.tsx @@ -1,3 +1,4 @@ +import { AppContainer, MainContainer } from '@affine/component/workspace'; import type { AffinePublicWorkspace } from '@affine/workspace/type'; import { useAtom } from 'jotai'; import Head from 'next/head'; @@ -7,7 +8,6 @@ import { lazy, Suspense } from 'react'; import { openQuickSearchModalAtom } from '../atoms'; import { useRouterTitle } from '../hooks/use-router-title'; -import { MainContainer, StyledPage } from './styles'; const QuickSearchModal = lazy(() => import('../components/pure/quick-search-modal').then(module => ({ @@ -46,11 +46,9 @@ const PublicWorkspaceLayoutInner: React.FC = props => { {title} - - - {props.children} - - + + {props.children} + ); }; diff --git a/apps/web/src/layouts/styles.ts b/apps/web/src/layouts/styles.ts deleted file mode 100644 index 7a336ac207..0000000000 --- a/apps/web/src/layouts/styles.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { styled } from '@affine/component'; - -export const StyledPage = styled('div')<{ resizing?: boolean }>( - ({ theme, resizing }) => { - return { - cursor: resizing ? 'col-resize' : 'default', - width: '100%', - position: 'relative', - height: '100vh', - transition: 'background-color .5s', - display: 'flex', - flexGrow: '1', - flexDirection: 'row', - '--affine-editor-width': '686px', - [theme.breakpoints.down('sm')]: { - '--affine-editor-width': '550px', - }, - }; - } -); - -export const StyledSpacer = styled('div')<{ - sidebarOpen: boolean; - resizing: boolean; - floating: boolean; -}>(({ resizing, floating }) => { - return { - position: floating ? 'absolute' : 'relative', - flexGrow: 1, - height: '100%', - maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)', - transition: resizing ? '' : 'width .3s, min-width .3s, max-width .3s', - }; -}); - -export const StyledWrapper = styled('div')(() => { - return { - flexGrow: 1, - position: 'relative', - overflow: 'auto', - }; -}); - -export const MainContainerWrapper = styled('div')(() => { - return { - display: 'flex', - flexGrow: 1, - position: 'relative', - maxWidth: '100vw', - overflow: 'auto', - }; -}); - -export const MainContainer = styled('div')(() => { - return { - position: 'relative', - flexGrow: 1, - maxWidth: '100%', - backgroundColor: 'var(--affine-background-primary-color)', - }; -}); - -export const StyledToolWrapper = styled('div')(({ theme }) => { - return { - position: 'fixed', - right: '30px', - bottom: '30px', - zIndex: 'var(--affine-z-index-popover)', - [theme.breakpoints.down('md')]: { - right: 'calc((100vw - 640px) * 3 / 19 + 5px)', - }, - [theme.breakpoints.down('sm')]: { - right: '5px', - bottom: '5px', - }, - }; -}); - -export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>( - () => { - return { - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - width: '12px', - transform: 'translateX(50%)', - cursor: 'col-resize', - zIndex: 'var(--affine-z-index-modal)', - 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/layouts/workspace-layout.tsx b/apps/web/src/layouts/workspace-layout.tsx index c91381ac3a..b5b1eb7e0c 100644 --- a/apps/web/src/layouts/workspace-layout.tsx +++ b/apps/web/src/layouts/workspace-layout.tsx @@ -1,3 +1,8 @@ +import { + AppContainer, + MainContainer, + ToolContainer, +} from '@affine/component/workspace'; import { DebugLogger } from '@affine/debug'; import { DEFAULT_HELLO_WORLD_PAGE_ID } from '@affine/env'; import { initPage } from '@affine/env/blocksuite'; @@ -38,12 +43,6 @@ import { useWorkspaces } from '../hooks/use-workspaces'; import { WorkspacePlugins } from '../plugins'; import { ModalProvider } from '../providers/modal-provider'; import { pathGenerator, publicPathGenerator } from '../shared'; -import { - MainContainer, - MainContainerWrapper, - StyledPage, - StyledToolWrapper, -} from './styles'; const QuickSearchModal = lazy(() => import('../components/pure/quick-search-modal').then(module => ({ @@ -342,7 +341,7 @@ export const WorkspaceLayoutInner: FC = ({ children }) => { {title} - + = ({ children }) => { 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/pages/_debug/broadcast.dev.tsx b/apps/web/src/pages/_debug/broadcast.dev.tsx index f895f4ce56..143bc02a26 100644 --- a/apps/web/src/pages/_debug/broadcast.dev.tsx +++ b/apps/web/src/pages/_debug/broadcast.dev.tsx @@ -1,4 +1,5 @@ import { Button } from '@affine/component'; +import { AppContainer, MainContainer } from '@affine/component/workspace'; import { DebugLogger } from '@affine/debug'; import { createBroadCastChannelProvider } from '@affine/workspace/providers'; import type { BroadCastChannelProvider } from '@affine/workspace/type'; @@ -10,7 +11,6 @@ import type React from 'react'; import { useEffect, useMemo, useState } from 'react'; import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list'; -import { StyledPage, StyledWrapper } from '../../layouts/styles'; import { toast } from '../../utils'; const logger = new DebugLogger('broadcast'); @@ -44,8 +44,8 @@ const BroadcastPage: React.FC = () => { return null; } return ( - - + + Broadcast Provider Test