toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2025-01-09 03:39:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

update i18n for layout

Browse Source
This commit is contained in:
JimmFly 2022-08-29 18:41:07 +08:00
parent bd9796bd25
commit db5a72f94f
14 changed files with 177 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/layout/package.json
View File

@ -11,7 +11,9 @@
"@mui/icons-material": "^5.8.4",
"clsx": "^1.2.1",
"date-fns": "^2.29.2",
"i18next": "^21.9.1",
"jotai": "^1.8.1",
"react-i18next": "^11.18.4",
"tinycolor2": "^1.4.2",
"turndown": "7.1.1"
},

6
libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx
View File

@ -1,4 +1,5 @@
import { styled } from '@toeverything/components/ui';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { StatusText } from './StatusText';
import { StatusTrack } from './StatusTrack';
@ -10,6 +11,7 @@ export const Switcher = () => {
const navigate = useNavigate();
const params = useParams();
const { pathname } = useLocation();
const { t } = useTranslation();
const pageViewMode = isBoard(pathname) ? DocMode.board : DocMode.doc;
const switchToPageView = (targetViewMode: DocMode) => {
@ -36,7 +38,7 @@ export const Switcher = () => {
active={pageViewMode === DocMode.doc}
onClick={() => switchToPageView(DocMode.doc)}
>
Paper
{t('Paper')}
</StatusText>
<StatusTrack
mode={pageViewMode}
@ -53,7 +55,7 @@ export const Switcher = () => {
active={pageViewMode === DocMode.board}
onClick={() => switchToPageView(DocMode.board)}
>
Edgeless
{t('Edgeless')}
</StatusText>
</StyledContainerForSwitcher>
);

6
libs/components/layout/src/header/FileSystem.tsx
View File

@ -4,7 +4,7 @@ import { CloseIcon } from '@toeverything/components/common';
import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
import { services } from '@toeverything/datasource/db-service';
import { useLocalTrigger } from '@toeverything/datasource/state';
import { useTranslation } from 'react-i18next';
const cleanupWorkspace = (workspace: string) =>
new Promise((resolve, reject) => {
const req = indexedDB.deleteDatabase(workspace);
@ -75,7 +75,7 @@ export const FileSystem = () => {
setError(true);
setTimeout(() => setError(false), 3000);
}, []);
const { t } = useTranslation();
const apiSupported = useMemo(() => fsApiSupported(), []);
if (apiSupported && !selected) {
@ -105,7 +105,7 @@ export const FileSystem = () => {
}
}}
>
Sync to Disk
{t('Sync to Disk')}
</StyledFileSystem>
</>
);

12
libs/components/layout/src/header/LayoutHeader.tsx
View File

@ -12,6 +12,7 @@ import {
useShowSettingsSidebar,
} from '@toeverything/datasource/state';
import { useTranslation } from 'react-i18next';
import { EditorBoardSwitcher } from './EditorBoardSwitcher';
import { FileSystem, fsApiSupported } from './FileSystem';
import { CurrentPageTitle } from './Title';
@ -20,16 +21,17 @@ export const LayoutHeader = () => {
const [isLocalWorkspace] = useLocalTrigger();
const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
useShowSettingsSidebar();
const { t } = useTranslation();
const warningTips = useMemo(() => {
if (!fsApiSupported()) {
return 'Welcome to the AFFiNE demo. To begin saving changes you can SYNC DATA TO DISK with the latest version of Chromium based browser like Chrome/Edge';
return t('warningTips.isNotfsApiSupported');
} else if (!isLocalWorkspace) {
return 'Welcome to the AFFiNE demo. To begin saving changes you can SYNC TO DISK.';
return t('warningTips.isNotLocalWorkspace');
} else {
return 'AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data';
return t('warningTips.DoNotStore');
}
}, [isLocalWorkspace]);
}, [isLocalWorkspace, t]);
return (
<StyledContainerForHeaderRoot>
@ -43,7 +45,7 @@ export const LayoutHeader = () => {
<FlexContainer>
<StyledHelper>
<FileSystem />
<StyledShare disabled={true}>Share</StyledShare>
<StyledShare disabled={true}>{t('Share')}</StyledShare>
<div style={{ margin: '0px 12px' }}>
<IconButton
size="large"

40
libs/components/layout/src/i18n/index.ts Normal file
View File

@ -0,0 +1,40 @@
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import en_US from './resources/en.json';
import zh_CN from './resources/zh.json';
const resources = {
en: en_US,
zh: zh_CN,
} as const;
i18next.use(initReactI18next).init({
lng: 'en',
fallbackLng: 'en',
resources,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
});
export const options = [
{ value: 'en', text: 'English' },
{ value: 'zh', text: '简体中文' },
];
export { i18next };
// import { useTranslation } from 'react-i18next';
// import { options } from './i18n';
// <Select defaultValue="en" onChange={changeLanguage}>
// {options.map(option => (
// <Option key={option.value} value={option.value}>
// {option.text}
// </Option>
// ))}
// </Select>
// const { t, i18n } = useTranslation();
// const changeLanguage = (event: any) => {
// i18n.changeLanguage(event);
// };

30
libs/components/layout/src/i18n/resources/en.json Normal file
View File

@ -0,0 +1,30 @@
{
"translation": {
"Paper": "Paper",
"Edgeless": "Edgeless",
"Sync to Disk": "Sync to Disk",
"Share": "Share",
"warningTips": {
"isNotfsApiSupported": "Welcome to the AFFiNE demo. To begin saving changes you can SYNC DATA TO DISK with the latest version of Chromium based browser like Chrome/Edge",
"isNotLocalWorkspace": "Welcome to the AFFiNE demo. To begin saving changes you can SYNC TO DISK.",
"DoNotStore": "AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data"
},
"stetting": {
"Layout": {
"title": "Layout"
},
"Comment": {
"title": "Comment"
},
"Settings": {
"title": "Settings",
"Duplicate Page": "Duplicate Page",
"Copy Page Link": "Copy Page Link",
"Language": "Language",
"Clear Workspace": "Clear Workspace",
"Last edited by": "Last edited by ",
"Logout": "Logout"
}
}
}
}

30
libs/components/layout/src/i18n/resources/zh.json Normal file
View File

@ -0,0 +1,30 @@
{
"translation": {
"Paper": "页面",
"Edgeless": "无边缘",
"Sync to Disk": "同步到磁盘",
"Share": "分享",
"warningTips": {
"isNotfsApiSupported": "欢迎来到AFFiNE 的演示界面。您可以使用最新版本的基于Chrome的浏览器（如Chrome/Edge）将数据同步到磁盘来进行保存",
"isNotLocalWorkspace": "欢迎来到AFFiNE 的演示界面，您可以同步到磁盘来进行保存操作。",
"DoNotStore": "AFFINE 正在积极开发中，当前版本不稳定。请不要存储信息或数据。"
},
"stetting": {
"Layout": {
"title": "布局"
},
"Comment": {
"title": "评论"
},
"Settings": {
"title": "设置",
"Duplicate Page": "复制页面",
"Copy Page Link": "拷贝页面链接",
"Language": "当前语言",
"Clear Workspace": "清空工作区域",
"Last edited by": "最后编辑者为 ",
"Logout": "登出"
}
}
}
}

1
libs/components/layout/src/index.ts
View File

@ -1,3 +1,4 @@
export * from './header';
export * from './i18n';
export * from './settings-sidebar';
export * from './workspace-sidebar';

5
libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx
View File

@ -5,6 +5,7 @@ import {
} from '@toeverything/components/icons';
import { styled } from '@toeverything/components/ui';
import { cloneElement, useCallback, useMemo, type ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import { Comments } from '../Comments';
import { useActiveComment } from '../Comments/use-comments';
import { LayoutSettings } from '../Layout';
@ -67,7 +68,7 @@ export const ContainerTabs = () => {
_defaultTabsKeys as unknown as string[],
'settings'
);
const { t } = useTranslation();
return (
<>
<StyledTabsTitlesContainer>
@ -75,7 +76,7 @@ export const ContainerTabs = () => {
const { type, text, icon } = tab;
return (
<TabItemTitle
title={text}
title={t(`stetting.${text}.title`)}
icon={icon}
isActive={activeTab === type}
onClick={() => {

34
libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
View File

@ -1,8 +1,21 @@
import { Divider, ListItem, styled, Switch } from '@toeverything/components/ui';
import {
Divider,
ListItem,
Option,
Select,
styled,
Switch,
} from '@toeverything/components/ui';
import { useTranslation } from 'react-i18next';
import { options } from '../../i18n';
import { useSettings } from './use-settings';
export const SettingsList = () => {
const settings = useSettings();
const { t, i18n } = useTranslation();
const changeLanguage = (event: any) => {
i18n.changeLanguage(event);
};
return (
<StyledSettingsList>
@ -32,7 +45,24 @@ export const SettingsList = () => {
return (
<ListItem key={item.name} onClick={() => item.onClick()}>
{item.name}
{t(`stetting.Settings.${item.name}`)}
{item.name === 'Language' ? (
<div style={{ marginLeft: '12em' }}>
<Select
defaultValue="en"
onChange={changeLanguage}
>
{options.map(option => (
<Option
key={option.value}
value={option.value}
>
{option.text}
</Option>
))}
</Select>
</div>
) : null}
</ListItem>
);
})}

4
libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
View File

@ -1,6 +1,7 @@
import { styled, Typography } from '@toeverything/components/ui';
import { useUserAndSpaces } from '@toeverything/datasource/state';
import format from 'date-fns/format';
import { useTranslation } from 'react-i18next';
import { usePageLastUpdated, useWorkspaceAndPageId } from '../util';
export const LastModified = () => {
@ -9,11 +10,12 @@ export const LastModified = () => {
const { workspaceId, pageId } = useWorkspaceAndPageId();
const lastModified = usePageLastUpdated({ workspaceId, pageId });
const formatLastModified = format(lastModified, 'MM/dd/yyyy hh:mm');
const { t } = useTranslation();
return (
<div>
<div>
<ContentText type="xs">
<span>Last edited by </span>
<span>{t('stetting.Settings.Last edited by')}</span>
<span>{username}</span>
</ContentText>
</div>

6
libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
View File

@ -2,6 +2,7 @@ import { MoveToIcon } from '@toeverything/components/icons';
import { ListItem, styled, Typography } from '@toeverything/components/ui';
import { LOGOUT_COOKIES, LOGOUT_LOCAL_STORAGE } from '@toeverything/utils';
import { getAuth, signOut } from 'firebase/auth';
import { useTranslation } from 'react-i18next';
const logout = () => {
LOGOUT_LOCAL_STORAGE.forEach(name => localStorage.removeItem(name));
@ -16,10 +17,13 @@ const logout = () => {
};
export const Logout = () => {
const { t } = useTranslation();
return (
<ListItem onClick={logout}>
<StyledIcon />
<ContentText type="base">Logout</ContentText>
<ContentText type="base">
{t('stetting.Settings.Logout')}
</ContentText>
</ListItem>
);
};

7
libs/components/layout/src/settings-sidebar/Settings/use-settings.ts
View File

@ -97,6 +97,13 @@ export const useSettings = (): SettingItem[] => {
message.success('Page link copied successfully');
},
},
{
type: 'button',
name: 'Language',
onClick: () => {
console.log('Language is change');
},
},
{
type: 'separator',
},

14
pnpm-lock.yaml generated
View File

@ -196,10 +196,14 @@ importers:
specifiers:
'@mui/icons-material': ^5.8.4
firebase: ^9.9.3
i18next: ^21.9.1
mini-css-extract-plugin: ^2.6.1
react-i18next: ^11.18.4
webpack: ^5.74.0
dependencies:
'@mui/icons-material': 5.8.4
i18next: 21.9.1
react-i18next: 11.18.4_i18next@21.9.1
devDependencies:
firebase: 9.9.3
mini-css-extract-plugin: 2.6.1_webpack@5.74.0
@ -501,7 +505,9 @@ importers:
'@types/turndown': ^5.0.1
clsx: ^1.2.1
date-fns: ^2.29.2
i18next: ^21.9.1
jotai: ^1.8.1
react-i18next: ^11.18.4
tinycolor2: ^1.4.2
turndown: 7.1.1
dependencies:
@ -513,7 +519,9 @@ importers:
'@mui/icons-material': 5.8.4
clsx: 1.2.1
date-fns: 2.29.2
i18next: 21.9.1
jotai: 1.8.1
react-i18next: 11.18.4_i18next@21.9.1
tinycolor2: 1.4.2
turndown: 7.1.1
devDependencies:
@ -7383,10 +7391,8 @@ packages:
indent-string: 4.0.0
dev: true
/ajv-formats/2.1.1_ajv@8.11.0:
/ajv-formats/2.1.1:
resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
peerDependencies:
ajv: ^8.0.0
peerDependenciesMeta:
ajv:
optional: true
@ -16953,7 +16959,7 @@ packages:
dependencies:
'@types/json-schema': 7.0.11
ajv: 8.11.0
ajv-formats: 2.1.1_ajv@8.11.0
ajv-formats: 2.1.1
ajv-keywords: 5.1.0_ajv@8.11.0
dev: true