diff --git a/packages/app/src/components/404/index.tsx b/packages/app/src/components/404/index.tsx index 36f1b90a34..0a06467afa 100644 --- a/packages/app/src/components/404/index.tsx +++ b/packages/app/src/components/404/index.tsx @@ -15,7 +15,7 @@ export const NotfoundPage = () => { router.push('/workspace'); }} > - Back Home + {t('Back Home')}

diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 9a26b56863..11aa3de52b 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/packages/app/src/components/create-workspace/index.tsx @@ -53,13 +53,10 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => { {t('New Workspace')} -

- Workspace is your virtual space to capture, create and plan as - just one person or together as a team. -

+

{t('Workspace description')}

{ setWorkspaceName(value); }} diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx index f6dedd7cd8..8c15c24417 100644 --- a/packages/app/src/components/login-modal/index.tsx +++ b/packages/app/src/components/login-modal/index.tsx @@ -2,6 +2,7 @@ import { styled } from '@/styles'; import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { GoogleLoginButton } from './LoginOptionButton'; import { useAppState } from '@/providers/app-state-provider'; +import { useTranslation } from '@affine/i18n'; interface LoginModalProps { open: boolean; onClose: () => void; @@ -9,6 +10,7 @@ interface LoginModalProps { export const LoginModal = ({ open, onClose }: LoginModalProps) => { const { login } = useAppState(); + const { t } = useTranslation(); return ( @@ -20,8 +22,8 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => { /> - {'Sign in'} - Set up an AFFINE account to sync data + {t('Sign in')} + {t('Set up an AFFiNE account to sync data')} { await login(); diff --git a/packages/app/src/components/logout-modal/index.tsx b/packages/app/src/components/logout-modal/index.tsx index 0aaee3968e..b317f1183c 100644 --- a/packages/app/src/components/logout-modal/index.tsx +++ b/packages/app/src/components/logout-modal/index.tsx @@ -3,6 +3,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { Button } from '@/ui/button'; import { Check, UnCheck } from './icon'; import { useState } from 'react'; +import { useTranslation } from '@affine/i18n'; interface LoginModalProps { open: boolean; onClose: (wait: boolean) => void; @@ -10,6 +11,7 @@ interface LoginModalProps { export const LogoutModal = ({ open, onClose }: LoginModalProps) => { const [localCache, setLocalCache] = useState(false); + const { t } = useTranslation(); return ( @@ -21,8 +23,8 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => { /> - {'Sign out?'} - Set up an AFFINE account to sync data + {t('Sign out')}? + {t('Set up an AFFiNE account to sync data')} {localCache ? ( { )} - Retain local cached data + {t('Retain local cached data')}
diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx index 0aef077900..8fd8df83b7 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 f3177fbafe..66795f22c5 100644 --- a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx +++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx @@ -8,6 +8,7 @@ import { PublishIcon, UsersIcon } from '@blocksuite/icons'; import { WorkspaceUnit } from '@affine/datacenter'; import { useAppState } from '@/providers/app-state-provider'; import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles'; +import { useTranslation } from '@affine/i18n'; import { FlexWrapper } from '@/ui/layout'; export const WorkspaceCard = ({ @@ -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-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index f29c1a1896..1363763c36 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -57,9 +57,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { {t('My Workspaces')} @@ -106,8 +104,8 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { - New workspace -

Crete or import

+ {t('New Workspace')} +

{t('Create Or Import')}

 diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index a03749fe98..a21c5b7d85 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 }) => { await publishWorkspace(workspace.id.toString(), flag); setLoaded(false); } 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')} - + - + ) : ( @@ -101,7 +100,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 7e17d83cf8..ddca482143 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -1,15 +1,15 @@ import { - StyleAsync, + StyledButtonContainer, StyledPublishContent, StyledPublishExplanation, StyledWorkspaceName, - StyledWorkspaceType, + StyledEmail, } from './style'; import { DownloadIcon } from '@blocksuite/icons'; import { Button } from '@/ui/button'; import { Menu, MenuItem } from '@/ui/menu'; import { WorkspaceUnit } from '@affine/datacenter'; -import { useTranslation } from '@affine/i18n'; +import { useTranslation, Trans } from '@affine/i18n'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; import { EnableWorkspaceButton } from '../enable-workspace'; import { useAppState } from '@/providers/app-state-provider'; @@ -28,16 +28,13 @@ 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')}
+ - + ) : ( <> @@ -48,14 +45,21 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { workspaceUnit={workspace} style={{ marginRight: '12px' }} /> - {workspace.name} is - Cloud Workspace. + {workspace.name}  + {t('is a Cloud Workspace')} - - All data will be synchronized and saved to the AFFiNE account{' '} - {user?.email} - - +
+ + All data will be synchronised and saved to the AFFiNE account + + {{ + email: '{' + user?.email + '}.', + }} + + +
+ + @@ -65,7 +69,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { }} icon={} > - {t('Download data to device', { CoreOrAll: 'core' })} + {t('Download data', { CoreOrAll: t('core') })} { @@ -73,7 +77,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { }} icon={} > - {t('Download data to device', { CoreOrAll: 'all' })} + {t('Download data', { CoreOrAll: t('all') })} } @@ -81,10 +85,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 0207cb6a95..5b5bc26843 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 986853652f..caa6047773 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 31a19289cc..3e29c53d9e 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,22 +130,24 @@ 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', + fontSize: theme.font.base, + lineHeight: theme.font.lineHeightBase, flex: 1, }; }); - -export const StyleAsync = styled('div')(() => { - return { - marginTop: '64px', - }; -}); diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts index 870d954638..ec990feb30 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 975e3d6ff1..ffab84524c 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx @@ -19,41 +19,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 => , - }, - // TODO: next version will finish this feature - // { - // name: 'Export', - // panelRender: workspace => , - // }, -]; - -const WorkspaceSetting = () => { +const useTabMap = () => { const { t } = useTranslation(); - const { currentWorkspace, isOwner } = useAppState(); - - const [activeTab, setActiveTab] = useState(tabMap[0].name); - const handleTabChange = (tab: TabNames) => { + 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 => , + }, + // TODO: next version will finish this feature + // { + // name: t('Export'), + // panelRender: workspace => , + // }, + ]; + const [activeTab, setActiveTab] = useState(tabMap[0].name); + const handleTabChange = (tab: string) => { setActiveTab(tab); }; @@ -61,7 +57,7 @@ const WorkspaceSetting = () => { tab => tab.name === activeTab )?.panelRender; let tableArr: { - name: TabNames; + name: string; panelRender: (workspace: WorkspaceUnit) => ReactNode; }[] = tabMap; if (!isOwner) { @@ -72,6 +68,14 @@ const WorkspaceSetting = () => { }, ]; } + return { activeTabPanelRender, tableArr, handleTabChange, activeTab }; +}; + +const WorkspaceSetting = () => { + const { t } = useTranslation(); + const { currentWorkspace } = useAppState(); + const { activeTabPanelRender, tableArr, handleTabChange, activeTab } = + useTabMap(); return ( <> diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index 9b543416dd..d7c00b1d30 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -69,7 +69,7 @@ "Remove from favourites": "Remove from favourites", "Removed from Favourites": "Removed from Favourites", "New Workspace": "New Workspace", - "Workspace description": "Workspace is your virtual space to capture, create and plan as just one person or together as a team.", + "Workspace description": "A workspace is your virtual space to capture, create and plan as just one person or together as a team.", "Create": "Create", "Select": "Select", "Text": "Text (coming soon)", @@ -108,10 +108,10 @@ "emptyTrash": "Click Add to Trash and the page will appear here.", "still designed": "(This page is still being designed.)", "My Workspaces": "My Workspaces", - "Create Or Import": "Create Or Import", + "Create Or Import": "Create or Import", "Tips": "Tips: ", "login success": "Login success", - "Sign out": "Sign out of AFFiNE Cloud", + "Sign out": "Sign out", "Delete Workspace": "Delete Workspace", "Delete Workspace Description2": "Deleting (<1>{{workspace}}) will delete both local and cloud data, this operation cannot be undone, please proceed with caution.", "Delete Workspace placeholder": "Please type “Delete” to confirm", @@ -135,7 +135,7 @@ "Publishing Description": "After publishing to the web, everyone can view the content of this workspace through the link.", "Stop publishing": "Stop publishing", "Publish to web": "Publish to web", - "Download data to device": "Download {{CoreOrAll}} data to device", + "Download data": "Download {{CoreOrAll}} data", "General": "General", "Sync": "Sync", "Collaboration": "Collaboration", @@ -143,11 +143,36 @@ "Workspace Settings": "Workspace Settings", "Export Workspace": "Export Workspace <1>{{workspace}} is coming soon", "Leave Workspace Description": "After you leave, you will no longer be able to access the contents of this workspace.", - "Sign in": "Sign in to AFFiNE Cloud", + "Sign in": "Sign in AFFiNE Cloud", "Sync Description": "{{workspaceName}} 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.", "Sync Description2": "<1>{{workspaceName}} is a Cloud Workspace. All data will be synchronised and saved to AFFiNE Cloud.", "Delete Workspace Description": "Deleting (<1>{{workspace}}) cannot be undone, please proceed with caution. All contents will be lost.", "core": "core", "all": "all", - "A workspace is your virtual space to capture, create and plan as just one person or together as a team.": "A workspace is your virtual space to capture, create and plan as just one person or together as a team." + "Back Home": "Back Home", + "Set a Workspace name": "Set a Workspace name", + "Retain local cached data": "Retain local cached data", + "Wait for Sync": "Wait for Sync", + "Force Sign Out": "Force Sign Out", + "Local Workspace": "Local Workspace", + "Cloud Workspace": "Cloud Workspace", + "Joined Workspace": "Joined Workspace", + "Available Offline": "Available Offline", + "Published to Web": "Published to Web", + "Workspace Avatar": "Workspace Avatar", + "Owner": "Owner", + "Member": "Member", + "Delete Member?": "Delete Member?", + "will delete member": "will delete member", + "Member has been removed": "{{name}} has been removed", + "Failed to publish workspace": "Failed to publish workspace", + "Copied link to clipboard": "Copied link to clipboard", + "Published Description": " The current workspace has been published to the web, everyone can view the contents of this workspace through the link.", + "is a Local Workspace": "is a Local Workspace.", + "is a Cloud Workspace": "is a Cloud Workspace.", + "Local Workspace Description": "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 Workspace Description": "All data will be synchronized and saved to the AFFiNE account <1>{{email}}", + "Download data Description1": "It takes up more space on your device.", + "Download data Description2": "It takes up little space on your device.", + "Enabled success": "Enabled success" }