Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-21 03:56:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat/datacenter' into feat/style-workspaces

Browse Source
This commit is contained in:
DiamondThree
2023-01-22 16:57:27 +08:00
parent b39acf42e6 ab73745ec0
commit f67d0011d2
18 changed files with 286 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/header/Header.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
};
export const Header = ({
rightItems = ['syncUser'],
rightItems = ['syncUser', 'themeModeSwitch'],
children,
}: PropsWithChildren<{ rightItems?: HeaderRightItemNames[] }>) => {
const [showWarning, setShowWarning] = useState(shouldShowWarning());
packages/app/src/components/workspace-setting/PublishPage.tsx
+14 -8
View File
@@ -4,6 +4,7 @@ import {
StyledPublishCopyContainer,
StyledPublishExplanation,
StyledSettingH2,
StyledStopPublishContainer,
} from './style';
import { useState } from 'react';
import { Button } from '@/ui/button';
@@ -42,7 +43,9 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
<StyledPublishExplanation>
{t('Publishing')}
</StyledPublishExplanation>
<StyledSettingH2>{t('Share with link')}</StyledSettingH2>
<StyledSettingH2 marginTop={48}>
{t('Share with link')}
</StyledSettingH2>
<StyledPublishCopyContainer>
<Input width={500} value={shareUrl} disabled={true}></Input>
<StyledCopyButtonContainer>
@@ -54,24 +57,27 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
</>
) : (
<StyledPublishExplanation>
{'Publishing Description'}
{t('Publishing Description')}
</StyledPublishExplanation>
)}
</StyledPublishContent>
<StyledPublishCopyContainer>
{workspace.published ? (
{workspace.published ? (
<StyledStopPublishContainer>
<Button
onClick={async () => {
setLoaded(false);
await togglePublic(false);
setLoaded(true);
}}
type="primary"
type="danger"
shape="circle"
>
{t('Stop publishing')}
</Button>
) : (
</StyledStopPublishContainer>
) : (
<StyledPublishCopyContainer>
<Button
onClick={async () => {
setLoaded(false);
@@ -83,8 +89,8 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
>
{t('Publish to web')}
</Button>
)}
</StyledPublishCopyContainer>
</StyledPublishCopyContainer>
)}
</div>
) : (
<StyledPublishContent>
packages/app/src/components/workspace-setting/SyncPage.tsx
+17 -4
View File
@@ -2,6 +2,8 @@ import {
StyledPublishContent,
StyledPublishCopyContainer,
StyledPublishExplanation,
StyledWorkspaceName,
StyledWorkspaceType,
} from './style';
import { DownloadIcon } from '@blocksuite/icons';
import { Button } from '@/ui/button';
@@ -9,6 +11,7 @@ import { Menu, MenuItem } from '@/ui/menu';
import { WorkspaceUnit } from '@affine/datacenter';
import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
import { Trans, useTranslation } from '@affine/i18n';
import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
const { enableWorkspace } = useWorkspaceHelper();
const { t } = useTranslation();
@@ -18,11 +21,20 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
{workspace.provider === 'local' ? (
<>
<StyledPublishExplanation>
{t('Sync Description', {
workspaceName: workspace.name ?? 'Affine',
})}
<WorkspaceUnitAvatar
size={32}
name={workspace.name}
workspaceUnit={workspace}
/>
<StyledWorkspaceName>
&nbsp;{workspace.name}&nbsp;
</StyledWorkspaceName>
<StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType>
</StyledPublishExplanation>
<StyledWorkspaceType>
All data is stored on the current device. You can enable AFFiNE
Cloud for this workspace to keep data in sync with the cloud.
</StyledWorkspaceType>
<StyledPublishCopyContainer>
<Button
onClick={async () => {
@@ -30,6 +42,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
}}
type="primary"
shape="circle"
style={{ fontWeight: '500' }}
>
{t('Enable AFFiNE Cloud')}
</Button>
packages/app/src/components/workspace-setting/general/General.tsx
+15 -11
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);
}}
packages/app/src/components/workspace-setting/general/delete/Delete.tsx
+3 -1
View File
@@ -46,7 +46,7 @@ export const WorkspaceDelete = ({
<Modal open={open} onClose={onClose}>
<StyledModalWrapper>
<ModalCloseButton onClick={onClose} />
<StyledModalHeader>{t('Delete Workspace')}</StyledModalHeader>
<StyledModalHeader>{t('Delete Workspace')}?</StyledModalHeader>
{workspace.provider === 'local' ? (
<StyledTextContent>
<Trans i18nKey="Delete Workspace Description">
@@ -75,6 +75,8 @@ export const WorkspaceDelete = ({
onChange={handlerInputChange}
placeholder={t('Delete Workspace placeholder')}
value={deleteStr}
width={284}
height={42}
></Input>
</StyledInputContent>
<StyledButtonContent>
packages/app/src/components/workspace-setting/general/delete/style.ts
+11 -7
View File
@@ -4,20 +4,20 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
return {
position: 'relative',
padding: '0px',
width: '460px',
width: '560px',
background: theme.colors.popoverBackground,
borderRadius: '12px',
height: '312px',
};
});
export const StyledModalHeader = styled('div')(({ theme }) => {
return {
margin: '44px 0px 12px 0px',
width: '460px',
width: '560px',
fontWeight: '600',
fontSize: '20px;',
textAlign: 'left',
paddingLeft: '20px',
textAlign: 'center',
color: theme.colors.popoverColor,
};
});
@@ -37,21 +37,25 @@ export const StyledTextContent = styled('div')(() => {
};
});
export const StyledInputContent = styled('div')(() => {
export const StyledInputContent = styled('div')(({ theme }) => {
return {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
margin: '20px 0 24px 0',
margin: '32px 0',
fontSize: theme.font.base,
};
});
export const StyledButtonContent = styled('div')(() => {
return {
position: 'absolute',
left: '50%',
transform: 'translateX(-50%)',
bottom: '32px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
margin: '0px 0 32px 0',
};
});
packages/app/src/components/workspace-setting/general/style.ts
+29 -2
View File
@@ -1,15 +1,42 @@
import { styled } from '@/styles';
import { displayFlex, styled } from '@/styles';
import MuiAvatar from '@mui/material/Avatar';
import IconButton from '@/ui/button/IconButton';
import Input from '@/ui/input';
export const StyledSettingInputContainer = styled('div')(() => {
return {
marginTop: '12px',
width: '100%',
...displayFlex('flex-start', 'center'),
};
});
export const StyledDeleteButtonContainer = styled('div')(() => {
return {
marginTop: '30px',
position: 'absolute',
bottom: '0',
left: '50%',
marginBottom: '20px',
transform: 'translateX(-50%)',
};
});
export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: '10px',
height: '32px',
overflow: 'hidden',
marginLeft: '20px',
':hover': {
borderColor: theme.colors.primaryColor,
},
};
});
export const StyledInput = styled(Input)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: '10px',
fontSize: theme.font.sm,
};
});
packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
+3 -5
View File
@@ -122,6 +122,7 @@ export const InviteMemberModal = ({
<Button
shape="circle"
type="primary"
style={{ width: '364px', height: '38px', borderRadius: '40px' }}
onClick={async () => {
await inviteMember(email);
onInviteSuccess();
@@ -143,10 +144,8 @@ const Header = styled('div')({
const Content = styled('div')({
display: 'flex',
padding: '0 48px',
flexDirection: 'column',
alignItems: 'center',
gap: '16px',
});
const ContentTitle = styled('h1')({
@@ -158,9 +157,8 @@ const ContentTitle = styled('h1')({
});
const Footer = styled('div')({
height: '70px',
paddingLeft: '24px',
marginTop: '32px',
height: '102px',
margin: '32px 0',
textAlign: 'center',
});
packages/app/src/components/workspace-setting/member/MembersPage.tsx
+1 -1
View File
@@ -159,7 +159,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
return (
<StyledMemberWarp>
<>{t('Collaboration Description')}</>
{t('Collaboration Description')}
<StyledPublishExplanation>
<Button
type="primary"
packages/app/src/components/workspace-setting/member/style.ts
+12 -2
View File
@@ -19,6 +19,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
display: 'flex',
alignItems: 'center',
width: '402px',
flex: 2,
};
});
@@ -27,6 +28,7 @@ export const StyledMemberRoleContainer = styled('div')(() => {
display: 'flex',
alignItems: 'center',
width: '222px',
flex: 1,
};
});
@@ -34,6 +36,8 @@ export const StyledMemberListContainer = styled('ul')(() => {
return {
marginTop: '15px',
overflowY: 'scroll',
width: '100%',
maxHeight: 'calc(100vh - 300px)',
};
});
@@ -42,6 +46,7 @@ export const StyledMemberListItem = styled('li')(() => {
display: 'flex',
alignItems: 'center',
height: '72px',
width: '100%',
};
});
@@ -71,7 +76,9 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
export const StyledMemberButtonContainer = styled('div')(() => {
return {
marginTop: '14px',
position: 'absolute',
bottom: '0',
marginBottom: '20px',
};
});
@@ -83,6 +90,7 @@ export const StyledMoreVerticalButton = styled('button')(() => {
width: '24px',
height: '24px',
cursor: 'pointer',
paddingRight: '48px',
};
});
@@ -101,6 +109,8 @@ export const StyledMemberWarp = styled('div')(() => {
return {
display: 'flex',
flexDirection: 'column',
padding: '40px 0',
padding: '48px 0',
fontWeight: '500',
fontSize: '18px',
};
});
packages/app/src/components/workspace-setting/style.ts
+54 -18
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',
};
});