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

chore: update General style

Browse Source
This commit is contained in:
JimmFly 2023-01-18 15:30:03 +08:00
parent 68dc20cd2e
commit 32babd8026
2 changed files with 69 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,15 +3,17 @@ import {
// StyledSettingAvatar,
StyledSettingAvatarContent,
StyledSettingInputContainer,
StyledDoneButtonContainer,
StyledInput,
} from './style';
import { StyledSettingH2 } from '../style';
import { useState } from 'react';
import { Button, TextButton } from '@/ui/button';
import Input from '@/ui/input';
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 { Upload } from '@/components/file-upload';
import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
import { WorkspaceUnit } from '@affine/datacenter';
@ -44,7 +46,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
return workspace ? (
<div>
<StyledSettingH2 marginTop={56}>{t('Workspace Icon')}</StyledSettingH2>
<StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
<StyledSettingAvatarContent>
<div
style={{
@ -69,29 +71,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
</StyledSettingAvatarContent>
<StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
<StyledSettingInputContainer>
<Input
width={327}
<StyledInput
width={284}
height={32}
value={workspaceName}
placeholder={t('Workspace Name')}
maxLength={14}
minLength={1}
disabled={!isOwner}
onChange={handleChangeWorkSpaceName}
></Input>
></StyledInput>
{isOwner ? (
<TextButton
<StyledDoneButtonContainer
onClick={() => {
handleUpdateWorkspaceName();
}}
style={{ marginLeft: '0px' }}
>
✔️
</TextButton>
<DoneIcon />
</StyledDoneButtonContainer>
) : null}
</StyledSettingInputContainer>
<StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
<StyledSettingInputContainer>
<code>{workspace.provider} </code>
<CloudUnsyncedIcon style={{ marginRight: '15px' }} />
Local workspace
</StyledSettingInputContainer>
<StyledDeleteButtonContainer>
{isOwner ? (
@ -99,6 +102,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
<Button
type="danger"
shape="circle"
style={{ borderRadius: '40px' }}
onClick={() => {
setShowDelete(true);
}}

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

@ -1,11 +1,11 @@
import { styled } from '@/styles';
import { displayFlex, styled } from '@/styles';
export const StyledSettingContainer = styled('div')(() => {
return {
display: 'flex',
padding: '50px',
flexDirection: 'column',
height: '100vh',
marginTop: '24px',
marginLeft: '48px',
overflow: 'auto',
};
});
@ -20,9 +20,7 @@ export const StyledSettingSidebar = styled('div')(() => {
});
export const StyledSettingContent = styled('div')(() => {
return {
paddingLeft: '48px',
};
return {};
});
export const StyledSetting = styled('div')(({ theme }) => {
@ -60,14 +58,26 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
{
return {
display: 'flex',
marginBottom: '12px',
padding: '0 24px',
height: '32px',
position: 'relative',
margin: '0 48px 8px 0',
height: '34px',
color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
fontWeight: '400',
fontSize: '16px',
lineHeight: '32px',
fontWeight: '500',
fontSize: theme.font.base,
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',
},
':hover': { color: theme.colors.primaryColor },
};
}
}
@ -84,11 +94,11 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
});
export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
({ marginTop }) => {
({ marginTop, theme }) => {
return {
fontWeight: '500',
fontSize: '18px',
lineHeight: '26px',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeightBase,
marginTop: marginTop ? `${marginTop}px` : '0px',
};
}
@ -96,12 +106,28 @@ export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
export const StyledPublishExplanation = styled('div')(() => {
return {
...displayFlex('row', 'center', 'center'),
paddingRight: '48px',
fontWeight: '500',
fontSize: '18px',
lineHeight: '26px',
flex: 1,
marginTop: '60px',
marginBottom: '22px',
};
});
export const StyledWorkspaceName = styled('div')(() => {
return {
fontWeight: '400',
fontSize: '18px',
lineHeight: '26px',
};
});
export const StyledWorkspaceType = styled('div')(() => {
return {
fontWeight: '500',
fontSize: '18px',
lineHeight: '26px',
};
});
@ -109,16 +135,26 @@ export const StyledPublishCopyContainer = styled('div')(() => {
return {
marginTop: '12px',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
flexDirection: 'column',
alignItems: 'start',
justifyContent: 'center',
marginBottom: '20px',
paddingTop: '20px',
};
});
export const StyledStopPublishContainer = styled('div')(() => {
return {
position: 'absolute',
bottom: '0',
left: '50%',
transform: 'translateX(-50%)',
marginBottom: '20px',
};
});
export const StyledCopyButtonContainer = styled('div')(() => {
return {
marginLeft: '12px',
marginTop: '64px',
};
});