Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00: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 GitHub
parent 08341d3d6c
commit 752d0545ca
9 changed files with 146 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/src/layouts/public-workspace-layout.tsx
View File

@@ -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<React.PropsWithChildren> = props => {
<Head>
<title>{title}</title>
</Head>
<StyledPage>
<MainContainer className="main-container">
{props.children}
</MainContainer>
</StyledPage>
<AppContainer>
<MainContainer>{props.children}</MainContainer>
</AppContainer>
</>
);
};

110
apps/web/src/layouts/styles.ts
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',
};
}
);

53
apps/web/src/layouts/workspace-layout.tsx
View File

@@ -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<PropsWithChildren> = ({ children }) => {
<Head>
<title>{title}</title>
</Head>
<StyledPage>
<AppContainer>
<RootAppSidebar
isPublicWorkspace={isPublicWorkspace}
onOpenQuickSearchModal={handleOpenQuickSearchModal}
@@ -360,27 +359,25 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
currentPath={router.asPath.split('?')[0]}
paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
/>
<MainContainerWrapper>
<MainContainer className="main-container">
<Suspense fallback={<PageLoading text={t['Page is Loading']()} />}>
{children}
</Suspense>
<StyledToolWrapper>
{/* fixme(himself65): remove this */}
<div id="toolWrapper" style={{ marginBottom: '12px' }}>
{/* Slot for block hub */}
</div>
{!isPublicWorkspace && (
<HelpIsland
showList={
router.query.pageId ? undefined : ['whatNew', 'contact']
}
/>
)}
</StyledToolWrapper>
</MainContainer>
</MainContainerWrapper>
</StyledPage>
<MainContainer>
<Suspense fallback={<PageLoading text={t['Page is Loading']()} />}>
{children}
</Suspense>
<ToolContainer>
{/* fixme(himself65): remove this */}
<div id="toolWrapper" style={{ marginBottom: '12px' }}>
{/* Slot for block hub */}
</div>
{!isPublicWorkspace && (
<HelpIsland
showList={
router.query.pageId ? undefined : ['whatNew', 'contact']
}
/>
)}
</ToolContainer>
</MainContainer>
</AppContainer>
<QuickSearch />
</>
);

10
apps/web/src/pages/_debug/broadcast.dev.tsx
View File

@@ -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 (
<StyledPage>
<StyledWrapper>
<AppContainer>
<MainContainer>
<Typography variant="h5">Broadcast Provider Test</Typography>
<Button
type="primary"
@@ -64,8 +64,8 @@ const BroadcastPage: React.FC = () => {
toast('do nothing');
}}
/>
</StyledWrapper>
</StyledPage>
</MainContainer>
</AppContainer>
);
};

10
apps/web/src/pages/_debug/init-page.dev.tsx
View File

@@ -1,8 +1,8 @@
import { AppContainer, MainContainer } from '@affine/component/workspace';
import { initPage } from '@affine/env/blocksuite';
import { useRouter } from 'next/router';
import { lazy, Suspense } from 'react';
import { StyledPage, StyledWrapper } from '../../layouts/styles';
import type { NextPageWithLayout } from '../../shared';
const Editor = lazy(() =>
@@ -23,14 +23,14 @@ const InitPagePage: NextPageWithLayout = () => {
testType = 'empty';
}
return (
<StyledPage>
<StyledWrapper>
<AppContainer>
<MainContainer>
<Suspense>
<Editor onInit={initPage} testType={testType} />
</Suspense>
<div id="toolWrapper" />
</StyledWrapper>
</StyledPage>
</MainContainer>
</AppContainer>
);
};

11
apps/web/src/pages/_debug/login.dev.tsx
View File

@@ -1,4 +1,5 @@
import { Button } from '@affine/component';
import { AppContainer, MainContainer } from '@affine/component/workspace';
import { currentAffineUserAtom } from '@affine/workspace/affine/atom';
import {
clearLoginStorage,
@@ -21,14 +22,12 @@ const Viewer = lazy(() =>
import { useTheme } from 'next-themes';
import { StyledPage, StyledWrapper } from '../../layouts/styles';
const LoginDevPage: NextPage = () => {
const [user, setUser] = useAtom(currentAffineUserAtom);
const auth = useMemo(() => createAffineAuth(), []);
return (
<StyledPage>
<StyledWrapper>
<AppContainer>
<MainContainer>
<h1>LoginDevPage</h1>
<Button
onClick={async () => {
@@ -97,8 +96,8 @@ const LoginDevPage: NextPage = () => {
value={user}
/>
</Suspense>
</StyledWrapper>
</StyledPage>
</MainContainer>
</AppContainer>
);
};