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

refactor: remove sidebar in public workspace (#1730)

Browse Source
This commit is contained in:
Himself65
2023-03-28 14:30:29 -05:00
committed by GitHub
parent f9811c85bc
commit 5faa2760cd
5 changed files with 84 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/affine/affine-error-eoundary.tsx
View File

@@ -88,7 +88,7 @@ export class AffineErrorBoundary extends Component<
<span> Page error </span> <span> Page error </span>
<span> <span>
Cannot find page {error.pageId} in workspace{' '} Cannot find page {error.pageId} in workspace{' '}
{error.workspace.meta.name} {error.workspace.id}
</span> </span>
<button <button
onClick={() => { onClick={() => {

2
apps/web/src/components/blocksuite/header/styles.ts
View File

@@ -15,7 +15,7 @@ export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
export const StyledHeader = styled('div')<{ hasWarning: boolean }>( export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
({ theme }) => { ({ theme }) => {
return { return {
height: '48px', height: '60px',
width: '100%', width: '100%',
padding: '0 20px', padding: '0 20px',
...displayFlex('space-between', 'center'), ...displayFlex('space-between', 'center'),

75
apps/web/src/layouts/public-workspace-layout.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { ListSkeleton } from '@affine/component';
import { useAtomValue } from 'jotai';
import { useAtom } from 'jotai';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import { useRouter } from 'next/router';
import type React from 'react';
import { Suspense } from 'react';
import { openQuickSearchModalAtom } from '../atoms';
import {
publicBlockSuiteAtom,
publicWorkspaceIdAtom,
} 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';
const QuickSearchModal = dynamic(
() => import('../components/pure/quick-search-modal')
);
export const PublicQuickSearch: React.FC = () => {
const blockSuiteWorkspace = useAtomValue(publicBlockSuiteAtom);
const router = useRouter();
const [openQuickSearchModal, setOpenQuickSearchModalAtom] = useAtom(
openQuickSearchModalAtom
);
return (
<QuickSearchModal
blockSuiteWorkspace={blockSuiteWorkspace}
open={openQuickSearchModal}
setOpen={setOpenQuickSearchModalAtom}
router={router}
/>
);
};
const PublicWorkspaceLayoutInner: React.FC<React.PropsWithChildren> = props => {
const router = useRouter();
const title = useRouterTitle(router);
const workspaceId = useAtomValue(publicWorkspaceIdAtom);
return (
<>
<Head>
<title>{title}</title>
</Head>
<StyledPage>
<StyledWrapper className="main-container">
{props.children}
</StyledWrapper>
<Suspense fallback="">
{/* `publicBlockSuiteAtom` is available only when `publicWorkspaceIdAtom` loaded */}
{workspaceId && <PublicQuickSearch />}
</Suspense>
</StyledPage>
</>
);
};
export const PublicWorkspaceLayout: React.FC<
React.PropsWithChildren
> = props => {
return (
<Suspense
fallback={
<StyledTableContainer>
<ListSkeleton />
</StyledTableContainer>
}
>
<PublicWorkspaceLayoutInner>{props.children}</PublicWorkspaceLayoutInner>
</Suspense>
);
};

6
apps/web/src/pages/public-workspace/[workspaceId].tsx
View File

@@ -18,7 +18,7 @@ import { WorkspaceAvatar } from '../../components/pure/footer';
import { PageLoading } from '../../components/pure/loading'; import { PageLoading } from '../../components/pure/loading';
import { useBlockSuiteWorkspaceAvatarUrl } from '../../hooks/use-blocksuite-workspace-avatar-url'; import { useBlockSuiteWorkspaceAvatarUrl } from '../../hooks/use-blocksuite-workspace-avatar-url';
import { useBlockSuiteWorkspaceName } from '../../hooks/use-blocksuite-workspace-name'; import { useBlockSuiteWorkspaceName } from '../../hooks/use-blocksuite-workspace-name';
import { WorkspaceLayout } from '../../layouts'; import { PublicWorkspaceLayout } from '../../layouts/public-workspace-layout';
import type { NextPageWithLayout } from '../../shared'; import type { NextPageWithLayout } from '../../shared';
import { NavContainer, StyledBreadcrumbs } from './[workspaceId]/[pageId]'; import { NavContainer, StyledBreadcrumbs } from './[workspaceId]/[pageId]';
@@ -59,7 +59,7 @@ const ListPageInner: React.FC<{
} }
return ( return (
<> <>
<NavContainer> <NavContainer sx={{ px: '20px' }}>
<Breadcrumbs> <Breadcrumbs>
<StyledBreadcrumbs <StyledBreadcrumbs
href={`/public-workspace/${blockSuiteWorkspace.id}`} href={`/public-workspace/${blockSuiteWorkspace.id}`}
@@ -123,5 +123,5 @@ const ListPage: NextPageWithLayout = () => {
export default ListPage; export default ListPage;
ListPage.getLayout = page => { ListPage.getLayout = page => {
return <WorkspaceLayout>{page}</WorkspaceLayout>; return <PublicWorkspaceLayout>{page}</PublicWorkspaceLayout>;
}; };

23
apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
View File

@@ -1,9 +1,4 @@
import { import { Breadcrumbs, displayFlex, styled } from '@affine/component';
Breadcrumbs,
displayFlex,
IconButton,
styled,
} from '@affine/component';
import { useTranslation } from '@affine/i18n'; import { useTranslation } from '@affine/i18n';
import { PageIcon } from '@blocksuite/icons'; import { PageIcon } from '@blocksuite/icons';
import { useAtomValue, useSetAtom } from 'jotai'; import { useAtomValue, useSetAtom } from 'jotai';
@@ -22,14 +17,13 @@ import { WorkspaceAvatar } from '../../../components/pure/footer';
import { PageLoading } from '../../../components/pure/loading'; import { PageLoading } from '../../../components/pure/loading';
import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url'; import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
import { useBlockSuiteWorkspaceName } from '../../../hooks/use-blocksuite-workspace-name'; import { useBlockSuiteWorkspaceName } from '../../../hooks/use-blocksuite-workspace-name';
import { WorkspaceLayout } from '../../../layouts'; import { PublicWorkspaceLayout } from '../../../layouts/public-workspace-layout';
import type { NextPageWithLayout } from '../../../shared'; import type { NextPageWithLayout } from '../../../shared';
import { initPage } from '../../../utils/blocksuite'; import { initPage } from '../../../utils';
export const NavContainer = styled('div')(({ theme }) => { export const NavContainer = styled('div')(({ theme }) => {
return { return {
width: '100vw', width: '100vw',
padding: '0 12px',
height: '60px', height: '60px',
...displayFlex('start', 'center'), ...displayFlex('start', 'center'),
backgroundColor: theme.colors.pageBackground, backgroundColor: theme.colors.pageBackground,
@@ -54,15 +48,6 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
}; };
}); });
export const SearchButton = styled(IconButton)(({ theme }) => {
return {
color: theme.colors.iconColor,
fontSize: '24px',
marginLeft: 'auto',
padding: '0 24px',
};
});
const PublicWorkspaceDetailPageInner: React.FC<{ const PublicWorkspaceDetailPageInner: React.FC<{
pageId: string; pageId: string;
}> = ({ pageId }) => { }> = ({ pageId }) => {
@@ -141,5 +126,5 @@ export const PublicWorkspaceDetailPage: NextPageWithLayout = () => {
export default PublicWorkspaceDetailPage; export default PublicWorkspaceDetailPage;
PublicWorkspaceDetailPage.getLayout = page => { PublicWorkspaceDetailPage.getLayout = page => {
return <WorkspaceLayout>{page}</WorkspaceLayout>; return <PublicWorkspaceLayout>{page}</PublicWorkspaceLayout>;
}; };