diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx index ea38de2a9..c27b004e8 100644 --- a/packages/app/src/components/workspace-modal/Footer.tsx +++ b/packages/app/src/components/workspace-modal/Footer.tsx @@ -4,6 +4,7 @@ import { WorkspaceAvatar } from '@/components/workspace-avatar'; import { IconButton } from '@/ui/button'; import { useAppState } from '@/providers/app-state-provider'; import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles'; +import { useTranslation } from '@affine/i18n'; export const Footer = ({ onLogin, @@ -13,6 +14,7 @@ export const Footer = ({ onLogout: () => void; }) => { const { user } = useAppState(); + const { t } = useTranslation(); return ( @@ -48,7 +50,7 @@ export const Footer = ({ - Sign in to sync with AFFINE Cloud + {t('Sign in')} )} diff --git a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx index 1a6032d65..9bc523e2f 100644 --- a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx +++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx @@ -9,6 +9,7 @@ import { WorkspaceUnit } from '@affine/datacenter'; import { useAppState } from '@/providers/app-state-provider'; import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles'; import { Wrapper } from '@/ui/layout'; +import { useTranslation } from '@affine/i18n'; export const WorkspaceCard = ({ workspaceData, @@ -18,7 +19,7 @@ export const WorkspaceCard = ({ onClick: (data: WorkspaceUnit) => void; }) => { const { currentWorkspace, isOwner } = useAppState(); - + const { t } = useTranslation(); return ( { @@ -38,29 +39,30 @@ export const WorkspaceCard = ({ workspaceData.provider === 'local' ? (

- Local Workspace + {t('Local Workspace')}

) : (

- Cloud Workspace + {t('Cloud Workspace')}

) ) : (

- Joined Workspace + {t('Joined Workspace')}

)} {workspaceData.provider === 'local' && (

- All data can be accessed offline + {t('Available Offline')}

)} {workspaceData.published && (

- Published to Web + + {t('Published to Web')}

)} diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index a30b72bdf..677b8a490 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -1,5 +1,5 @@ import { - StyledCopyButtonContainer, + StyledButtonContainer, StyledPublishContent, StyledPublishCopyContainer, StyledPublishExplanation, @@ -24,13 +24,13 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { try { await publishWorkspace(workspace.id.toString(), flag); } catch (e) { - toast('Failed to publish workspace'); + toast(t('Failed to publish workspace')); } }; const copyUrl = () => { navigator.clipboard.writeText(shareUrl); - toast('Copied url to clipboard'); + toast(t('Copied link to clipboard')); }; return ( @@ -43,8 +43,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {workspace.published ? ( <> - The current workspace has been published to the web, everyone - can view the contents of this workspace through the link. + {t('Published Description')} @@ -52,11 +51,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Share with link')} - + - + ) : ( @@ -103,7 +102,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { <> - Publishing to web requires AFFiNE Cloud service. + {t('Publishing')}
diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx index 6969461a3..0632b304c 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -1,9 +1,9 @@ import { - StyleAsync, + StyledButtonContainer, StyledPublishContent, StyledPublishExplanation, StyledWorkspaceName, - StyledWorkspaceType, + StyledEmail, } from './style'; import { DownloadIcon } from '@blocksuite/icons'; import { Button } from '@/ui/button'; @@ -26,27 +26,38 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { workspaceUnit={workspace} style={{ marginRight: '12px' }} /> - {workspace.name}; - is a Local Workspace. + {workspace.name}  + {t('is a Local Workspace')} - - All data is stored on the current device. You can enable AFFiNE - Cloud for this workspace to keep data in sync with the cloud. - - +
{t('Local Workspace Description')}
+ - + ) : ( <> - - {{ workspaceName: workspace.name ?? 'Affine' }} - is Cloud Workspace. All data will be synchronised and saved to - the AFFiNE - + + {workspace.name}  + {t('is a Cloud Workspace')} - +
+ + All data will be synchronised and saved to the AFFiNE account + + {{ + email: '{' + workspace.owner?.email + '}.', + }} + + +
+ + @@ -56,7 +67,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { }} icon={} > - {t('Download data to device', { CoreOrAll: 'core' })} + {t('Download data', { CoreOrAll: t('core') })} { @@ -64,7 +75,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { }} icon={} > - {t('Download data to device', { CoreOrAll: 'all' })} + {t('Download data', { CoreOrAll: t('all') })} } @@ -72,10 +83,10 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { disablePortal={true} > - + )} diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx index 0207cb6a9..5b5bc2684 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -50,7 +50,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { return workspace ? (
- Workspace Avatar + {t('Workspace Avatar')} { currentWorkspace?.provider === 'local' ? ( - Local Workspace + {t('Local Workspace')} ) : ( - All data can be accessed offline + {t('Available Offline')} ) ) : ( - Joined Workspace + {t('Joined Workspace')} )} diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx index b1b64ffa0..73405599b 100644 --- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx +++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx @@ -89,9 +89,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {member.accepted ? member.type !== 99 - ? 'Member' - : 'Workspace Owner' - : 'Pending'} + ? t('Member') + : t('Owner') + : t('Pending')} { { const confirmRemove = await confirm({ - title: 'Delete Member?', - content: `will delete member`, - confirmText: 'Delete', + title: t('Delete Member?'), + content: t('will delete member'), + confirmText: t('Delete'), confirmType: 'danger', }); @@ -110,11 +110,15 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { return; } await removeMember(member.id); - toast(`${user.name} has been removed`); + toast( + t('Member has been removed', { + name: user.name, + }) + ); }} icon={} > - Delete + {t('Delete')} } diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index dcde665f3..eafcd415d 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -90,7 +90,7 @@ export const StyledSettingH2 = styled('h2')<{ marginBottom?: number; }>(({ marginTop, marginBottom, theme }) => { return { - fontWeight: '500', + // fontWeight: '500', fontSize: theme.font.base, lineHeight: theme.font.lineHeightBase, marginTop: marginTop ? `${marginTop}px` : '0px', @@ -101,24 +101,18 @@ export const StyledSettingH2 = styled('h2')<{ export const StyledPublishExplanation = styled('div')(() => { return { paddingRight: '48px', - fontWeight: '500', - fontSize: '18px', - lineHeight: '26px', + // fontWeight: '500', marginBottom: '22px', }; }); export const StyledWorkspaceName = styled('span')(() => { return { fontWeight: '400', - fontSize: '18px', - lineHeight: '26px', }; }); export const StyledWorkspaceType = styled('span')(() => { return { - fontWeight: '500', - fontSize: '18px', - lineHeight: '26px', + // fontWeight: '500', }; }); @@ -136,21 +130,23 @@ export const StyledStopPublishContainer = styled('div')(() => { }; }); -export const StyledCopyButtonContainer = styled('div')(() => { +export const StyledButtonContainer = styled('div')(() => { return { marginTop: '64px', }; }); +export const StyledEmail = styled('span')(() => { + return { + color: '#E8178A', + }; +}); -export const StyledPublishContent = styled('div')(() => { +export const StyledPublishContent = styled('div')(({ theme }) => { return { display: 'flex', + fontWeight: '500', flexDirection: 'column', - }; -}); - -export const StyleAsync = styled('div')(() => { - return { - marginTop: '64px', + fontSize: theme.font.base, + lineHeight: theme.font.lineHeightBase, }; }); diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts index 2a1977f96..44124ae61 100644 --- a/packages/app/src/hooks/use-workspace-helper.ts +++ b/packages/app/src/hooks/use-workspace-helper.ts @@ -3,9 +3,11 @@ import { useConfirm } from '@/providers/ConfirmProvider'; import { toast } from '@/ui/toast'; import { WorkspaceUnit } from '@affine/datacenter'; import router from 'next/router'; +import { useTranslation } from '@affine/i18n'; export const useWorkspaceHelper = () => { const { confirm } = useConfirm(); + const { t } = useTranslation(); const { dataCenter, currentWorkspace, user, login } = useAppState(); const createWorkspace = async (name: string) => { const workspaceInfo = await dataCenter.createWorkspace({ @@ -38,10 +40,10 @@ export const useWorkspaceHelper = () => { const enableWorkspace = async () => { confirm({ - title: 'Enable AFFiNE Cloud?', - content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`, - confirmText: user ? 'Enable' : 'Sign in and Enable', - cancelText: 'Skip', + title: `${t('Enable AFFiNE Cloud')}?`, + content: t('Enable AFFiNE Cloud Description'), + confirmText: user ? t('Enable') : t('Sign in and Enable'), + cancelText: t('Skip'), confirmType: 'primary', buttonDirection: 'column', }).then(async confirm => { @@ -53,7 +55,7 @@ export const useWorkspaceHelper = () => { currentWorkspace ); workspace && router.push(`/workspace/${workspace.id}/setting`); - toast('Enabled success'); + toast(t('Enabled success')); } }); }; diff --git a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx index 11de4aa59..bd80a4ecf 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx @@ -20,41 +20,37 @@ import { WorkspaceUnit } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; import { PageListHeader } from '@/components/header'; -type TabNames = 'General' | 'Sync' | 'Collaboration' | 'Publish' | 'Export'; - -const tabMap: { - name: TabNames; - panelRender: (workspace: WorkspaceUnit) => ReactNode; -}[] = [ - { - name: 'General', - panelRender: workspace => , - }, - { - name: 'Sync', - panelRender: workspace => , - }, - { - name: 'Collaboration', - panelRender: workspace => , - }, - { - name: 'Publish', - panelRender: workspace => , - }, - - { - name: 'Export', - panelRender: workspace => , - }, -]; - -const WorkspaceSetting = () => { +const useTabMap = () => { const { t } = useTranslation(); - const { currentWorkspace, isOwner } = useAppState(); + const { isOwner } = useAppState(); + const tabMap: { + name: string; + panelRender: (workspace: WorkspaceUnit) => ReactNode; + }[] = [ + { + name: t('General'), + panelRender: workspace => , + }, + { + name: t('Sync'), + panelRender: workspace => , + }, + { + name: t('Collaboration'), + panelRender: workspace => , + }, + { + name: t('Publish'), + panelRender: workspace => , + }, - const [activeTab, setActiveTab] = useState(tabMap[0].name); - const handleTabChange = (tab: TabNames) => { + { + name: t('Export'), + panelRender: workspace => , + }, + ]; + const [activeTab, setActiveTab] = useState(tabMap[0].name); + const handleTabChange = (tab: string) => { setActiveTab(tab); }; @@ -62,7 +58,7 @@ const WorkspaceSetting = () => { tab => tab.name === activeTab )?.panelRender; let tableArr: { - name: TabNames; + name: string; panelRender: (workspace: WorkspaceUnit) => ReactNode; }[] = tabMap; if (!isOwner) { @@ -73,6 +69,14 @@ const WorkspaceSetting = () => { }, ]; } + return { activeTabPanelRender, tableArr, handleTabChange, activeTab }; +}; + +const WorkspaceSetting = () => { + const { t } = useTranslation(); + const { currentWorkspace } = useAppState(); + const { activeTabPanelRender, tableArr, handleTabChange, activeTab } = + useTabMap(); return ( <>