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

feat: responsive ui above 640px (#1741)

Browse Source
This commit is contained in:
Peng Xiao
2023-03-31 09:12:18 +08:00
committed by GitHub
parent bdb1264f09
commit c55d61a641
22 changed files with 443 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/layouts/index.tsx
+28 -19
View File
@@ -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<React.PropsWithChildren> = ({
const handleOpenQuickSearchModal = useCallback(() => {
setOpenQuickSearchModalAtom(true);
}, [setOpenQuickSearchModalAtom]);
const [resizingSidebar] = useSidebarResizing();
const lock = useAtomValue(workspaceLockAtom);
if (lock) {
return <PageLoading />;
@@ -256,7 +263,7 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
<Head>
<title>{title}</title>
</Head>
<StyledPage>
<StyledPage resizing={resizingSidebar}>
<WorkSpaceSliderBar
isPublicWorkspace={isPublicWorkspace}
onOpenQuickSearchModal={handleOpenQuickSearchModal}
@@ -268,23 +275,25 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
currentPath={router.asPath.split('?')[0]}
paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
/>
<StyledWrapper className="main-container">
<AffineWorkspaceEffect />
{children}
<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>
</StyledWrapper>
<MainContainerWrapper>
<MainContainer className="main-container">
<AffineWorkspaceEffect />
{children}
<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>
<QuickSearch />
</>
apps/web/src/layouts/public-workspace-layout.tsx
+3 -3
View File
@@ -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<React.PropsWithChildren> = props => {
<title>{title}</title>
</Head>
<StyledPage>
<StyledWrapper className="main-container">
<MainContainer className="main-container">
{props.children}
</StyledWrapper>
</MainContainer>
<Suspense fallback="">
{/* `publicBlockSuiteAtom` is available only when `publicWorkspaceIdAtom` loaded */}
{workspaceId && <PublicQuickSearch />}
apps/web/src/layouts/styles.ts
+40 -11
View File
@@ -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',
},
};
});