luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: rewrite workspacesetting layout

Browse Source
This commit is contained in:
DiamondThree
2023-01-23 09:46:12 +08:00
parent e53119fc20
commit 7e23aa4618
7 changed files with 119 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/src/components/header/PageListHeader.tsx
View File

@@ -1,7 +1,7 @@
import { PropsWithChildren, ReactNode } from 'react'; import { PropsWithChildren, ReactNode } from 'react';
import Header from './Header'; import Header from './Header';
import { StyledPageListTittleWrapper } from './styles'; import { StyledPageListTittleWrapper } from './styles';
import QuickSearchButton from './QuickSearchButton'; // import QuickSearchButton from './QuickSearchButton';
export type PageListHeaderProps = PropsWithChildren<{ export type PageListHeaderProps = PropsWithChildren<{
icon?: ReactNode; icon?: ReactNode;
@@ -12,7 +12,7 @@ export const PageListHeader = ({ icon, children }: PageListHeaderProps) => {
<StyledPageListTittleWrapper> <StyledPageListTittleWrapper>
{icon} {icon}
{children} {children}
<QuickSearchButton style={{ marginLeft: '5px' }} /> {/* <QuickSearchButton style={{ marginLeft: '5px' }} /> */}
</StyledPageListTittleWrapper> </StyledPageListTittleWrapper>
</Header> </Header>
); );

32
packages/app/src/components/header/styles.ts
View File

@@ -3,35 +3,25 @@ import { displayFlex, styled } from '@/styles';
export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
({ hasWarning }) => { ({ hasWarning }) => {
return { return {
position: 'relative',
height: hasWarning ? '96px' : '60px', height: hasWarning ? '96px' : '60px',
}; };
} }
); );
export const StyledHeader = styled.div<{ hasWarning: boolean }>( export const StyledHeader = styled.div<{ hasWarning: boolean }>(() => {
({ hasWarning }) => { return {
return { height: '60px',
height: '60px', width: '100%',
width: '100%', ...displayFlex('flex-end', 'center'),
...displayFlex('flex-end', 'center'), background: 'var(--affine-page-background)',
background: 'var(--affine-page-background)', transition: 'background-color 0.5s',
transition: 'background-color 0.5s', zIndex: 99,
position: 'absolute', };
left: '0', });
top: hasWarning ? '36px' : '0',
padding: '0 22px',
zIndex: 99,
};
}
);
export const StyledTitle = styled('div')(({ theme }) => ({ export const StyledTitle = styled('div')(({ theme }) => ({
width: '720px', width: '720px',
height: '100%', height: '100%',
position: 'absolute',
left: 0,
right: 0,
top: 0,
margin: 'auto', margin: 'auto',
...displayFlex('center', 'center'), ...displayFlex('center', 'center'),

2
packages/app/src/components/workspace-setting/ExportPage.tsx
View File

@@ -4,7 +4,7 @@ import { Trans } from '@affine/i18n';
export const ExportPageTitleContainer = styled('div')(() => { export const ExportPageTitleContainer = styled('div')(() => {
return { return {
display: 'flex', display: 'flex',
marginTop: '60px',
fontWeight: '500', fontWeight: '500',
flex: 1, flex: 1,
}; };

118
packages/app/src/components/workspace-setting/general/General.tsx
View File

@@ -5,6 +5,8 @@ import {
StyledSettingInputContainer, StyledSettingInputContainer,
StyledDoneButtonContainer, StyledDoneButtonContainer,
StyledInput, StyledInput,
StyledProviderInfo,
StyleGeneral,
} from './style'; } from './style';
import { StyledSettingH2 } from '../style'; import { StyledSettingH2 } from '../style';
@@ -13,12 +15,13 @@ import { Button } from '@/ui/button';
import { useAppState } from '@/providers/app-state-provider'; import { useAppState } from '@/providers/app-state-provider';
import { WorkspaceDelete } from './delete'; import { WorkspaceDelete } from './delete';
import { WorkspaceLeave } from './leave'; import { WorkspaceLeave } from './leave';
import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons'; import { DoneIcon, UsersIcon } from '@blocksuite/icons';
// import { Upload } from '@/components/file-upload'; // import { Upload } from '@/components/file-upload';
import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
import { WorkspaceUnit } from '@affine/datacenter'; import { WorkspaceUnit } from '@affine/datacenter';
import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
import { useTranslation } from '@affine/i18n'; import { useTranslation } from '@affine/i18n';
import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons';
export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const [showDelete, setShowDelete] = useState<boolean>(false); const [showDelete, setShowDelete] = useState<boolean>(false);
const [showLeave, setShowLeave] = useState<boolean>(false); const [showLeave, setShowLeave] = useState<boolean>(false);
@@ -45,57 +48,76 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
// }; // };
return workspace ? ( return workspace ? (
<div> <StyleGeneral>
<StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2> <div style={{ flex: 1, overflow: 'auto' }}>
<StyledSettingAvatarContent> <StyledSettingH2>Workspace Avatar</StyledSettingH2>
<div <StyledSettingAvatarContent>
style={{ <div
float: 'left', style={{
marginRight: '20px', float: 'left',
}} marginRight: '20px',
> }}
<WorkspaceUnitAvatar >
size={60} <WorkspaceUnitAvatar
name={workspace.name} size={60}
workspaceUnit={workspace} name={workspace.name}
/> workspaceUnit={workspace}
</div> />
{/* TODO: Wait for image sync to complete */} </div>
{/* <Upload {/* TODO: Wait for image sync to complete */}
{/* <Upload
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
fileChange={fileChange} fileChange={fileChange}
> >
<Button loading={uploading}>{t('Upload')}</Button> <Button loading={uploading}>{t('Upload')}</Button>
</Upload> */} </Upload> */}
{/* TODO: add upload logic */} {/* TODO: add upload logic */}
</StyledSettingAvatarContent> </StyledSettingAvatarContent>
<StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2> <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
<StyledSettingInputContainer> <StyledSettingInputContainer>
<StyledInput <StyledInput
width={284} width={284}
height={32} height={32}
value={workspaceName} value={workspaceName}
placeholder={t('Workspace Name')} placeholder={t('Workspace Name')}
maxLength={14} maxLength={14}
minLength={1} minLength={1}
disabled={!isOwner} disabled={!isOwner}
onChange={handleChangeWorkSpaceName} onChange={handleChangeWorkSpaceName}
></StyledInput> ></StyledInput>
{isOwner ? ( {isOwner ? (
<StyledDoneButtonContainer <StyledDoneButtonContainer
onClick={() => { onClick={() => {
handleUpdateWorkspaceName(); handleUpdateWorkspaceName();
}} }}
> >
<DoneIcon /> <DoneIcon />
</StyledDoneButtonContainer> </StyledDoneButtonContainer>
) : null} ) : null}
</StyledSettingInputContainer> </StyledSettingInputContainer>
<StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2> <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
<StyledSettingInputContainer> <StyledSettingInputContainer>
<CloudUnsyncedIcon style={{ marginRight: '15px' }} /> {isOwner ? (
Local workspace currentWorkspace?.provider === 'local' ? (
</StyledSettingInputContainer> <StyledProviderInfo>
<LocalIcon />
Local Workspace
</StyledProviderInfo>
) : (
<StyledProviderInfo>
<CloudIcon />
All data can be accessed offline
</StyledProviderInfo>
)
) : (
<StyledProviderInfo>
<UsersIcon fontSize={20} color={'#FF646B'} />
Joined Workspace
</StyledProviderInfo>
)}
</StyledSettingInputContainer>
</div>
<StyledDeleteButtonContainer> <StyledDeleteButtonContainer>
{isOwner ? ( {isOwner ? (
<> <>
@@ -137,6 +159,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
</> </>
)} )}
</StyledDeleteButtonContainer> </StyledDeleteButtonContainer>
</div> </StyleGeneral>
) : null; ) : null;
}; };

24
packages/app/src/components/workspace-setting/general/style.ts
View File

@@ -13,11 +13,14 @@ export const StyledSettingInputContainer = styled('div')(() => {
export const StyledDeleteButtonContainer = styled('div')(() => { export const StyledDeleteButtonContainer = styled('div')(() => {
return { return {
position: 'absolute', textAlign: 'center',
bottom: '0', };
left: '50%', });
marginBottom: '20px', export const StyleGeneral = styled('div')(() => {
transform: 'translateX(-50%)', return {
display: 'flex',
flexDirection: 'column',
height: '100%',
}; };
}); });
export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => { export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
@@ -53,3 +56,14 @@ export const StyledSettingAvatarContent = styled('div')(() => {
export const StyledSettingAvatar = styled(MuiAvatar)(() => { export const StyledSettingAvatar = styled(MuiAvatar)(() => {
return { height: '72px', width: '72px', marginRight: '24px' }; 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',
},
};
});

2
packages/app/src/components/workspace-setting/member/style.ts
View File

@@ -109,7 +109,7 @@ export const StyledMemberWarp = styled('div')(() => {
return { return {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
padding: '48px 0', padding: '0 0 48px 0',
fontWeight: '500', fontWeight: '500',
fontSize: '18px', fontSize: '18px',
}; };

38
packages/app/src/components/workspace-setting/style.ts
View File

@@ -4,23 +4,27 @@ export const StyledSettingContainer = styled('div')(() => {
return { return {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
marginTop: '24px',
marginLeft: '48px', padding: '0 34px 20px 48px',
overflow: 'auto', height: '100vh',
}; };
}); });
export const StyledSettingSidebar = styled('div')(() => { export const StyledSettingSidebar = styled('div')(() => {
{ {
return { return {
flexShrink: 0, // height: '48px',
flexGrow: 0, marginTop: '50px',
}; };
} }
}); });
export const StyledSettingContent = styled('div')(() => { export const StyledSettingContent = styled('div')(() => {
return {}; return {
overflow: 'hidden',
flex: 1,
paddingTop: '48px',
};
}); });
export const StyledSetting = styled('div')(({ theme }) => { export const StyledSetting = styled('div')(({ theme }) => {
@@ -48,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => {
{ {
return { return {
display: 'flex', display: 'flex',
marginTop: '25px',
}; };
} }
}); });
@@ -58,8 +61,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
{ {
return { return {
display: 'flex', display: 'flex',
position: 'relative', margin: '0 48px 0 0',
margin: '0 48px 8px 0',
height: '34px', height: '34px',
color: isActive ? theme.colors.primaryColor : theme.colors.textColor, color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
fontWeight: '500', fontWeight: '500',
@@ -67,16 +69,9 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
lineHeight: theme.font.lineHeightBase, lineHeight: theme.font.lineHeightBase,
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.15s ease', transition: 'all 0.15s ease',
'::after': { borderBottom: `2px solid ${
content: '""', isActive ? theme.colors.primaryColor : 'none'
width: '100%', }`,
height: '2px',
background: isActive ? theme.colors.primaryColor : 'transparent',
transition: 'all 0.15s ease',
position: 'absolute',
left: '0',
bottom: '0',
},
':hover': { color: theme.colors.primaryColor }, ':hover': { color: theme.colors.primaryColor },
}; };
} }
@@ -87,9 +82,6 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
return { return {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
marginRight: '14.64px',
width: '14.47px',
fontSize: '14.47px',
}; };
}); });
@@ -112,7 +104,7 @@ export const StyledPublishExplanation = styled('div')(() => {
fontSize: '18px', fontSize: '18px',
lineHeight: '26px', lineHeight: '26px',
flex: 1, flex: 1,
marginTop: '60px',
marginBottom: '22px', marginBottom: '22px',
}; };
}); });