toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-29 02:43:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: rewrite async style

Browse Source
This commit is contained in:
DiamondThree 2023-01-23 11:36:04 +08:00
parent 0fa44f82dd
commit 9a717f7ed2
5 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/app/src/components/workspace-avatar/Avatar.tsx
View File

@ -3,6 +3,7 @@ interface IWorkspaceAvatar {
size: number; size: number;
name: string; name: string;
avatar: string; avatar: string;
style?: React.CSSProperties;
} }
export const WorkspaceAvatar = (props: IWorkspaceAvatar) => { export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
@ -14,12 +15,15 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
{props.avatar ? ( {props.avatar ? (
<div <div
style={{ style={{
...props.style,
width: sizeStr, width: sizeStr,
height: sizeStr, height: sizeStr,
border: '1px solid #fff', border: '1px solid #fff',
color: '#fff', color: '#fff',
borderRadius: '50%', borderRadius: '50%',
overflow: 'hidden', overflow: 'hidden',
display: 'inline-block',
verticalAlign: 'middle',
}} }}
> >
<picture> <picture>
@ -33,6 +37,7 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
) : ( ) : (
<div <div
style={{ style={{
...props.style,
width: sizeStr, width: sizeStr,
height: sizeStr, height: sizeStr,
border: '1px solid #fff', border: '1px solid #fff',
@ -42,6 +47,8 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
borderRadius: '50%', borderRadius: '50%',
textAlign: 'center', textAlign: 'center',
lineHeight: size + 'px', lineHeight: size + 'px',
display: 'inline-block',
verticalAlign: 'middle',
}} }}
> >
{(props.name || 'AFFiNE').substring(0, 1)} {(props.name || 'AFFiNE').substring(0, 1)}

3
packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
View File

@ -24,10 +24,12 @@ export const WorkspaceUnitAvatar = ({
size = 20, size = 20,
name, name,
workspaceUnit, workspaceUnit,
style,
}: { }: {
size?: number; size?: number;
name?: string; name?: string;
workspaceUnit?: WorkspaceUnit | null; workspaceUnit?: WorkspaceUnit | null;
style?: React.CSSProperties;
}) => { }) => {
const avatarUrl = useAvatar(workspaceUnit || undefined); const avatarUrl = useAvatar(workspaceUnit || undefined);
return ( return (
@ -35,6 +37,7 @@ export const WorkspaceUnitAvatar = ({
size={size} size={size}
name={name || workspaceUnit?.name || ''} name={name || workspaceUnit?.name || ''}
avatar={avatarUrl} avatar={avatarUrl}
style={style}
/> />
); );
}; };

15
packages/app/src/components/workspace-setting/SyncPage.tsx
View File

@ -1,6 +1,6 @@
import { import {
StyleAsync,
StyledPublishContent, StyledPublishContent,
StyledPublishCopyContainer,
StyledPublishExplanation, StyledPublishExplanation,
StyledWorkspaceName, StyledWorkspaceName,
StyledWorkspaceType, StyledWorkspaceType,
@ -24,19 +24,18 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
size={32} size={32}
name={workspace.name} name={workspace.name}
workspaceUnit={workspace} workspaceUnit={workspace}
style={{ marginRight: '12px' }}
/> />
<StyledWorkspaceName> <StyledWorkspaceName>{workspace.name};</StyledWorkspaceName>
&nbsp;{workspace.name}&nbsp;
</StyledWorkspaceName>
<StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType> <StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType>
</StyledPublishExplanation> </StyledPublishExplanation>
<StyledWorkspaceType> <StyledWorkspaceType>
All data is stored on the current device. You can enable AFFiNE All data is stored on the current device. You can enable AFFiNE
Cloud for this workspace to keep data in sync with the cloud. Cloud for this workspace to keep data in sync with the cloud.
</StyledWorkspaceType> </StyledWorkspaceType>
<StyledPublishCopyContainer> <StyleAsync>
<EnableWorkspaceButton></EnableWorkspaceButton> <EnableWorkspaceButton></EnableWorkspaceButton>
</StyledPublishCopyContainer> </StyleAsync>
</> </>
) : ( ) : (
<> <>
@ -47,7 +46,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
the AFFiNE the AFFiNE
</Trans> </Trans>
</StyledPublishExplanation> </StyledPublishExplanation>
<StyledPublishCopyContainer> <StyleAsync>
<Menu <Menu
content={ content={
<> <>
@ -76,7 +75,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
{t('Download data to device', { CoreOrAll: 'all' })} {t('Download data to device', { CoreOrAll: 'all' })}
</Button> </Button>
</Menu> </Menu>
</StyledPublishCopyContainer> </StyleAsync>
</> </>
)} )}
</StyledPublishContent> </StyledPublishContent>

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

@ -105,7 +105,7 @@ export const StyledPublishExplanation = styled('div')(() => {
fontSize: '18px', fontSize: '18px',
lineHeight: '26px', lineHeight: '26px',
flex: 1, flex: 1,
marginTop: '60px', marginTop: '64px',
}; };
}); });

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

@ -107,14 +107,14 @@ export const StyledPublishExplanation = styled('div')(() => {
marginBottom: '22px', marginBottom: '22px',
}; };
}); });
export const StyledWorkspaceName = styled('div')(() => { export const StyledWorkspaceName = styled('span')(() => {
return { return {
fontWeight: '400', fontWeight: '400',
fontSize: '18px', fontSize: '18px',
lineHeight: '26px', lineHeight: '26px',
}; };
}); });
export const StyledWorkspaceType = styled('div')(() => { export const StyledWorkspaceType = styled('span')(() => {
return { return {
fontWeight: '500', fontWeight: '500',
fontSize: '18px', fontSize: '18px',
@ -148,3 +148,9 @@ export const StyledPublishContent = styled('div')(() => {
flexDirection: 'column', flexDirection: 'column',
}; };
}); });
export const StyleAsync = styled('div')(() => {
return {
marginTop: '64px',
};
});