Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-19 02:51:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance root div styles (#2295)

Browse Source
This commit is contained in:
Himself65
2023-05-10 13:39:51 +08:00
committed by himself65
parent 8bbb9ca304
commit c76bc34c6f
9 changed files with 146 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/layouts/public-workspace-layout.tsx
+4 -6
View File
@@ -1,3 +1,4 @@
import { AppContainer, MainContainer } from '@affine/component/workspace';
import type { AffinePublicWorkspace } from '@affine/workspace/type'; import type { AffinePublicWorkspace } from '@affine/workspace/type';
import { useAtom } from 'jotai'; import { useAtom } from 'jotai';
import Head from 'next/head'; import Head from 'next/head';
@@ -7,7 +8,6 @@ import { lazy, Suspense } from 'react';
import { openQuickSearchModalAtom } from '../atoms'; import { openQuickSearchModalAtom } from '../atoms';
import { useRouterTitle } from '../hooks/use-router-title'; import { useRouterTitle } from '../hooks/use-router-title';
import { MainContainer, StyledPage } from './styles';
const QuickSearchModal = lazy(() => const QuickSearchModal = lazy(() =>
import('../components/pure/quick-search-modal').then(module => ({ import('../components/pure/quick-search-modal').then(module => ({
@@ -46,11 +46,9 @@ const PublicWorkspaceLayoutInner: React.FC<React.PropsWithChildren> = props => {
<Head> <Head>
<title>{title}</title> <title>{title}</title>
</Head> </Head>
<StyledPage> <AppContainer>
<MainContainer className="main-container"> <MainContainer>{props.children}</MainContainer>
{props.children} </AppContainer>
</MainContainer>
</StyledPage>
</> </>
); );
}; };
apps/web/src/layouts/styles.ts
-110
View File
@@ -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',
};
}
);
apps/web/src/layouts/workspace-layout.tsx
+25 -28
View File
@@ -1,3 +1,8 @@
import {
AppContainer,
MainContainer,
ToolContainer,
} from '@affine/component/workspace';
import { DebugLogger } from '@affine/debug'; import { DebugLogger } from '@affine/debug';
import { DEFAULT_HELLO_WORLD_PAGE_ID } from '@affine/env'; import { DEFAULT_HELLO_WORLD_PAGE_ID } from '@affine/env';
import { initPage } from '@affine/env/blocksuite'; import { initPage } from '@affine/env/blocksuite';
@@ -38,12 +43,6 @@ import { useWorkspaces } from '../hooks/use-workspaces';
import { WorkspacePlugins } from '../plugins'; import { WorkspacePlugins } from '../plugins';
import { ModalProvider } from '../providers/modal-provider'; import { ModalProvider } from '../providers/modal-provider';
import { pathGenerator, publicPathGenerator } from '../shared'; import { pathGenerator, publicPathGenerator } from '../shared';
import {
MainContainer,
MainContainerWrapper,
StyledPage,
StyledToolWrapper,
} from './styles';
const QuickSearchModal = lazy(() => const QuickSearchModal = lazy(() =>
import('../components/pure/quick-search-modal').then(module => ({ import('../components/pure/quick-search-modal').then(module => ({
@@ -342,7 +341,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
<Head> <Head>
<title>{title}</title> <title>{title}</title>
</Head> </Head>
<StyledPage> <AppContainer>
<RootAppSidebar <RootAppSidebar
isPublicWorkspace={isPublicWorkspace} isPublicWorkspace={isPublicWorkspace}
onOpenQuickSearchModal={handleOpenQuickSearchModal} onOpenQuickSearchModal={handleOpenQuickSearchModal}
@@ -360,27 +359,25 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
currentPath={router.asPath.split('?')[0]} currentPath={router.asPath.split('?')[0]}
paths={isPublicWorkspace ? publicPathGenerator : pathGenerator} paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
/> />
<MainContainerWrapper> <MainContainer>
<MainContainer className="main-container"> <Suspense fallback={<PageLoading text={t['Page is Loading']()} />}>
<Suspense fallback={<PageLoading text={t['Page is Loading']()} />}> {children}
{children} </Suspense>
</Suspense> <ToolContainer>
<StyledToolWrapper> {/* fixme(himself65): remove this */}
{/* fixme(himself65): remove this */} <div id="toolWrapper" style={{ marginBottom: '12px' }}>
<div id="toolWrapper" style={{ marginBottom: '12px' }}> {/* Slot for block hub */}
{/* Slot for block hub */} </div>
</div> {!isPublicWorkspace && (
{!isPublicWorkspace && ( <HelpIsland
<HelpIsland showList={
showList={ router.query.pageId ? undefined : ['whatNew', 'contact']
router.query.pageId ? undefined : ['whatNew', 'contact'] }
} />
/> )}
)} </ToolContainer>
</StyledToolWrapper> </MainContainer>
</MainContainer> </AppContainer>
</MainContainerWrapper>
</StyledPage>
<QuickSearch /> <QuickSearch />
</> </>
); );
apps/web/src/pages/_debug/broadcast.dev.tsx
+5 -5
View File
@@ -1,4 +1,5 @@
import { Button } from '@affine/component'; import { Button } from '@affine/component';
import { AppContainer, MainContainer } from '@affine/component/workspace';
import { DebugLogger } from '@affine/debug'; import { DebugLogger } from '@affine/debug';
import { createBroadCastChannelProvider } from '@affine/workspace/providers'; import { createBroadCastChannelProvider } from '@affine/workspace/providers';
import type { BroadCastChannelProvider } from '@affine/workspace/type'; import type { BroadCastChannelProvider } from '@affine/workspace/type';
@@ -10,7 +11,6 @@ import type React from 'react';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list'; import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list';
import { StyledPage, StyledWrapper } from '../../layouts/styles';
import { toast } from '../../utils'; import { toast } from '../../utils';
const logger = new DebugLogger('broadcast'); const logger = new DebugLogger('broadcast');
@@ -44,8 +44,8 @@ const BroadcastPage: React.FC = () => {
return null; return null;
} }
return ( return (
<StyledPage> <AppContainer>
<StyledWrapper> <MainContainer>
<Typography variant="h5">Broadcast Provider Test</Typography> <Typography variant="h5">Broadcast Provider Test</Typography>
<Button <Button
type="primary" type="primary"
@@ -64,8 +64,8 @@ const BroadcastPage: React.FC = () => {
toast('do nothing'); toast('do nothing');
}} }}
/> />
</StyledWrapper> </MainContainer>
</StyledPage> </AppContainer>
); );
}; };
apps/web/src/pages/_debug/init-page.dev.tsx
+5 -5
View File
@@ -1,8 +1,8 @@
import { AppContainer, MainContainer } from '@affine/component/workspace';
import { initPage } from '@affine/env/blocksuite'; import { initPage } from '@affine/env/blocksuite';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { lazy, Suspense } from 'react'; import { lazy, Suspense } from 'react';
import { StyledPage, StyledWrapper } from '../../layouts/styles';
import type { NextPageWithLayout } from '../../shared'; import type { NextPageWithLayout } from '../../shared';
const Editor = lazy(() => const Editor = lazy(() =>
@@ -23,14 +23,14 @@ const InitPagePage: NextPageWithLayout = () => {
testType = 'empty'; testType = 'empty';
} }
return ( return (
<StyledPage> <AppContainer>
<StyledWrapper> <MainContainer>
<Suspense> <Suspense>
<Editor onInit={initPage} testType={testType} /> <Editor onInit={initPage} testType={testType} />
</Suspense> </Suspense>
<div id="toolWrapper" /> <div id="toolWrapper" />
</StyledWrapper> </MainContainer>
</StyledPage> </AppContainer>
); );
}; };
apps/web/src/pages/_debug/login.dev.tsx
+5 -6
View File
@@ -1,4 +1,5 @@
import { Button } from '@affine/component'; import { Button } from '@affine/component';
import { AppContainer, MainContainer } from '@affine/component/workspace';
import { currentAffineUserAtom } from '@affine/workspace/affine/atom'; import { currentAffineUserAtom } from '@affine/workspace/affine/atom';
import { import {
clearLoginStorage, clearLoginStorage,
@@ -21,14 +22,12 @@ const Viewer = lazy(() =>
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { StyledPage, StyledWrapper } from '../../layouts/styles';
const LoginDevPage: NextPage = () => { const LoginDevPage: NextPage = () => {
const [user, setUser] = useAtom(currentAffineUserAtom); const [user, setUser] = useAtom(currentAffineUserAtom);
const auth = useMemo(() => createAffineAuth(), []); const auth = useMemo(() => createAffineAuth(), []);
return ( return (
<StyledPage> <AppContainer>
<StyledWrapper> <MainContainer>
<h1>LoginDevPage</h1> <h1>LoginDevPage</h1>
<Button <Button
onClick={async () => { onClick={async () => {
@@ -97,8 +96,8 @@ const LoginDevPage: NextPage = () => {
value={user} value={user}
/> />
</Suspense> </Suspense>
</StyledWrapper> </MainContainer>
</StyledPage> </AppContainer>
); );
}; };
packages/component/src/components/workspace/index.css.ts
+50
View File
@@ -0,0 +1,50 @@
import { style } from '@vanilla-extract/css';
import { breakpoints } from '../../styles/mui-theme';
export const appStyle = style({
width: '100%',
position: 'relative',
height: '100vh',
transition: 'background-color .5s',
display: 'flex',
flexGrow: '1',
flexDirection: 'row',
selectors: {
'&[data-is-resizing="true"]': {
cursor: 'col-resize',
},
},
vars: {
'--affine-editor-width': '686px',
},
'@media': {
[breakpoints.down('sm', true)]: {
vars: {
'--affine-editor-width': '550px',
},
},
},
});
export const mainContainerStyle = style({
position: 'relative',
flexGrow: 1,
maxWidth: '100%',
backgroundColor: 'var(--affine-background-primary-color)',
});
export const toolStyle = style({
position: 'fixed',
right: '30px',
bottom: '30px',
zIndex: 'var(--affine-z-index-popover)',
'@media': {
[breakpoints.down('md', true)]: {
right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
},
[breakpoints.down('sm', true)]: {
right: '5px',
bottom: '5px',
},
},
});
packages/component/src/components/workspace/index.tsx
+34
View File
@@ -0,0 +1,34 @@
import { clsx } from 'clsx';
import type { PropsWithChildren, ReactElement } from 'react';
import { appStyle, mainContainerStyle, toolStyle } from './index.css';
export type WorkspaceRootProps = PropsWithChildren<{
resizing?: boolean;
}>;
export const AppContainer = (props: WorkspaceRootProps): ReactElement => {
return (
<div className={appStyle} data-is-resizing={props.resizing}>
{props.children}
</div>
);
};
export type MainContainerProps = PropsWithChildren<{
className?: string;
}>;
export const MainContainer = (props: MainContainerProps): ReactElement => {
return (
<div
className={clsx(mainContainerStyle, 'main-container', props.className)}
>
{props.children}
</div>
);
};
export const ToolContainer = (props: PropsWithChildren): ReactElement => {
return <div className={toolStyle}>{props.children}</div>;
};
packages/component/src/styles/mui-theme.ts
+18 -5
View File
@@ -21,7 +21,12 @@ export const muiThemes = {
// Ported from mui // Ported from mui
// See https://github.com/mui/material-ui/blob/eba90da5359ff9c58b02800dfe468dc6c0b95bd2/packages/mui-system/src/createTheme/createBreakpoints.js // See https://github.com/mui/material-ui/blob/eba90da5359ff9c58b02800dfe468dc6c0b95bd2/packages/mui-system/src/createTheme/createBreakpoints.js
// License under MIT // License under MIT
function createBreakpoints(breakpoints: BreakpointsOptions) { function createBreakpoints(breakpoints: BreakpointsOptions): Readonly<
Omit<BreakpointsOptions, 'up' | 'down'> & {
up: (key: Breakpoint | number, pure?: boolean) => string;
down: (key: Breakpoint | number, pure?: boolean) => string;
}
> {
const { const {
// The breakpoint **start** at this value. // The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm). // For instance with the first breakpoint xs: [xs, sm).
@@ -39,14 +44,22 @@ function createBreakpoints(breakpoints: BreakpointsOptions) {
const keys = Object.keys(values) as ['xs', 'sm', 'md', 'lg', 'xl']; const keys = Object.keys(values) as ['xs', 'sm', 'md', 'lg', 'xl'];
function up(key: Breakpoint | number) { function up(key: Breakpoint | number, pure = false) {
const value = typeof key === 'number' ? key : values[key]; const value = typeof key === 'number' ? key : values[key];
return `@media (min-width:${value}${unit})`; const original = `(min-width:${value}${unit})`;
if (pure) {
return original;
}
return `@media ${original}`;
} }
function down(key: Breakpoint | number) { function down(key: Breakpoint | number, pure = false) {
const value = typeof key === 'number' ? key : values[key]; const value = typeof key === 'number' ? key : values[key];
return `@media (max-width:${value - step / 100}${unit})`; const original = `(max-width:${value - step / 100}${unit})`;
if (pure) {
return original;
}
return `@media ${original}`;
} }
return { return {