From 7e23aa4618ca5364c36e5f761b6d6a0c52a4ca40 Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Mon, 23 Jan 2023 09:46:12 +0800 Subject: [PATCH] fix: rewrite workspacesetting layout --- .../src/components/header/PageListHeader.tsx | 4 +- packages/app/src/components/header/styles.ts | 32 ++--- .../workspace-setting/ExportPage.tsx | 2 +- .../workspace-setting/general/General.tsx | 118 +++++++++++------- .../workspace-setting/general/style.ts | 24 +++- .../workspace-setting/member/style.ts | 2 +- .../src/components/workspace-setting/style.ts | 38 +++--- 7 files changed, 119 insertions(+), 101 deletions(-) diff --git a/packages/app/src/components/header/PageListHeader.tsx b/packages/app/src/components/header/PageListHeader.tsx index 43a1c976b9..99efff25de 100644 --- a/packages/app/src/components/header/PageListHeader.tsx +++ b/packages/app/src/components/header/PageListHeader.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren, ReactNode } from 'react'; import Header from './Header'; import { StyledPageListTittleWrapper } from './styles'; -import QuickSearchButton from './QuickSearchButton'; +// import QuickSearchButton from './QuickSearchButton'; export type PageListHeaderProps = PropsWithChildren<{ icon?: ReactNode; @@ -12,7 +12,7 @@ export const PageListHeader = ({ icon, children }: PageListHeaderProps) => { {icon} {children} - + {/* */} ); diff --git a/packages/app/src/components/header/styles.ts b/packages/app/src/components/header/styles.ts index 1deb826faa..146164eebd 100644 --- a/packages/app/src/components/header/styles.ts +++ b/packages/app/src/components/header/styles.ts @@ -3,35 +3,25 @@ import { displayFlex, styled } from '@/styles'; export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( ({ hasWarning }) => { return { - position: 'relative', height: hasWarning ? '96px' : '60px', }; } ); -export const StyledHeader = styled.div<{ hasWarning: boolean }>( - ({ hasWarning }) => { - return { - height: '60px', - width: '100%', - ...displayFlex('flex-end', 'center'), - background: 'var(--affine-page-background)', - transition: 'background-color 0.5s', - position: 'absolute', - left: '0', - top: hasWarning ? '36px' : '0', - padding: '0 22px', - zIndex: 99, - }; - } -); +export const StyledHeader = styled.div<{ hasWarning: boolean }>(() => { + return { + height: '60px', + width: '100%', + ...displayFlex('flex-end', 'center'), + background: 'var(--affine-page-background)', + transition: 'background-color 0.5s', + zIndex: 99, + }; +}); export const StyledTitle = styled('div')(({ theme }) => ({ width: '720px', height: '100%', - position: 'absolute', - left: 0, - right: 0, - top: 0, + margin: 'auto', ...displayFlex('center', 'center'), diff --git a/packages/app/src/components/workspace-setting/ExportPage.tsx b/packages/app/src/components/workspace-setting/ExportPage.tsx index 83830f1777..e3cf6117f6 100644 --- a/packages/app/src/components/workspace-setting/ExportPage.tsx +++ b/packages/app/src/components/workspace-setting/ExportPage.tsx @@ -4,7 +4,7 @@ import { Trans } from '@affine/i18n'; export const ExportPageTitleContainer = styled('div')(() => { return { display: 'flex', - marginTop: '60px', + fontWeight: '500', flex: 1, }; diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx index 2ac37c53c3..c8919b30cc 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -5,6 +5,8 @@ import { StyledSettingInputContainer, StyledDoneButtonContainer, StyledInput, + StyledProviderInfo, + StyleGeneral, } from './style'; import { StyledSettingH2 } from '../style'; @@ -13,12 +15,13 @@ import { Button } from '@/ui/button'; import { useAppState } from '@/providers/app-state-provider'; import { WorkspaceDelete } from './delete'; import { WorkspaceLeave } from './leave'; -import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons'; +import { DoneIcon, UsersIcon } from '@blocksuite/icons'; // import { Upload } from '@/components/file-upload'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; import { WorkspaceUnit } from '@affine/datacenter'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useTranslation } from '@affine/i18n'; +import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons'; export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); @@ -45,57 +48,76 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { // }; return workspace ? ( -
- Workspace Avatar - -
- -
- {/* TODO: Wait for image sync to complete */} - {/* +
+ Workspace Avatar + +
+ +
+ {/* TODO: Wait for image sync to complete */} + {/* */} - {/* TODO: add upload logic */} - - {t('Workspace Name')} - - - {isOwner ? ( - { - handleUpdateWorkspaceName(); - }} - > - - - ) : null} - - {t('Workspace Type')} - - - Local workspace - + {/* TODO: add upload logic */} + + {t('Workspace Name')} + + + {isOwner ? ( + { + handleUpdateWorkspaceName(); + }} + > + + + ) : null} + + {t('Workspace Type')} + + {isOwner ? ( + currentWorkspace?.provider === 'local' ? ( + + + Local Workspace + + ) : ( + + + All data can be accessed offline + + ) + ) : ( + + + Joined Workspace + + )} + +
+ {isOwner ? ( <> @@ -137,6 +159,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { )} -
+ ) : null; }; diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index c46f9706c9..9e76f13e0f 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/packages/app/src/components/workspace-setting/general/style.ts @@ -13,11 +13,14 @@ export const StyledSettingInputContainer = styled('div')(() => { export const StyledDeleteButtonContainer = styled('div')(() => { return { - position: 'absolute', - bottom: '0', - left: '50%', - marginBottom: '20px', - transform: 'translateX(-50%)', + textAlign: 'center', + }; +}); +export const StyleGeneral = styled('div')(() => { + return { + display: 'flex', + flexDirection: 'column', + height: '100%', }; }); export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => { @@ -53,3 +56,14 @@ export const StyledSettingAvatarContent = styled('div')(() => { export const StyledSettingAvatar = styled(MuiAvatar)(() => { return { height: '72px', width: '72px', marginRight: '24px' }; }); + +export const StyledProviderInfo = styled('p')(({ theme }) => { + return { + color: theme.colors.iconColor, + fontSize: theme.font.sm, + svg: { + verticalAlign: 'sub', + marginRight: '10px', + }, + }; +}); diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index 2b259828c9..d861b192a1 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -109,7 +109,7 @@ export const StyledMemberWarp = styled('div')(() => { return { display: 'flex', flexDirection: 'column', - padding: '48px 0', + padding: '0 0 48px 0', fontWeight: '500', fontSize: '18px', }; diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index 430c6780ef..c855b767d9 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -4,23 +4,27 @@ export const StyledSettingContainer = styled('div')(() => { return { display: 'flex', flexDirection: 'column', - marginTop: '24px', - marginLeft: '48px', - overflow: 'auto', + + padding: '0 34px 20px 48px', + height: '100vh', }; }); export const StyledSettingSidebar = styled('div')(() => { { return { - flexShrink: 0, - flexGrow: 0, + // height: '48px', + marginTop: '50px', }; } }); export const StyledSettingContent = styled('div')(() => { - return {}; + return { + overflow: 'hidden', + flex: 1, + paddingTop: '48px', + }; }); export const StyledSetting = styled('div')(({ theme }) => { @@ -48,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => { { return { display: 'flex', - marginTop: '25px', }; } }); @@ -58,8 +61,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( { return { display: 'flex', - position: 'relative', - margin: '0 48px 8px 0', + margin: '0 48px 0 0', height: '34px', color: isActive ? theme.colors.primaryColor : theme.colors.textColor, fontWeight: '500', @@ -67,16 +69,9 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( lineHeight: theme.font.lineHeightBase, cursor: 'pointer', transition: 'all 0.15s ease', - '::after': { - content: '""', - width: '100%', - height: '2px', - background: isActive ? theme.colors.primaryColor : 'transparent', - transition: 'all 0.15s ease', - position: 'absolute', - left: '0', - bottom: '0', - }, + borderBottom: `2px solid ${ + isActive ? theme.colors.primaryColor : 'none' + }`, ':hover': { color: theme.colors.primaryColor }, }; } @@ -87,9 +82,6 @@ export const StyledSettingTagIconContainer = styled('div')(() => { return { display: 'flex', alignItems: 'center', - marginRight: '14.64px', - width: '14.47px', - fontSize: '14.47px', }; }); @@ -112,7 +104,7 @@ export const StyledPublishExplanation = styled('div')(() => { fontSize: '18px', lineHeight: '26px', flex: 1, - marginTop: '60px', + marginBottom: '22px', }; });