improve i18n

mebtte · Aug 11, 2023 · c9a4fed · c9a4fed
1 parent 9c3cb72
commit c9a4fed
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 27 deletions.
diff --git a/apps/pwa/src/i18n/en_us.ts b/apps/pwa/src/i18n/en_us.ts
@@ -107,4 +107,6 @@ export default {
   one_of_formats: 'one of formats: %s1',
   modify_fork_from: 'modify fork-from',
   fork_from: 'fork-from',
+  add: 'add',
+  image_select_placeholder: 'select a image with jpeg/png format',
 };
diff --git a/apps/pwa/src/utils/dialog/alert.tsx b/apps/pwa/src/utils/dialog/alert.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { t } from '@/i18n';
 import { Alert as AlertType } from './constants';
 import { Container, Content, Title, Action } from '../../components/dialog';
 import Button, { Variant } from '../../components/button';
@@ -33,7 +34,7 @@ function AlertContent({
           onClick={onConfirm}
           loading={confirming}
         >
-          {alert.confirmText || '确定'}
+          {alert.confirmText || t('confirm')}
         </Button>
       </Action>
     </Container>

diff --git a/apps/pwa/src/utils/dialog/file_select.tsx b/apps/pwa/src/utils/dialog/file_select.tsx
@@ -2,6 +2,7 @@ import { Container, Title, Content, Action } from '@/components/dialog';
 import Button from '@/components/button';
 import { CSSProperties, useState } from 'react';
 import FileSelect from '@/components/file_select';
+import { t } from '@/i18n';
 import DialogBase from './dialog_base';
 import { FileSelect as FileSelectShape } from './constants';
 import useEvent from '../use_event';
@@ -60,15 +61,15 @@ function FileSelectContent({
       </Content>
       <Action>
         <Button onClick={onCancel} loading={canceling} disabled={confirming}>
-          {fileSelect.cancelText || '取消'}
+          {fileSelect.cancelText || t('cancel')}
         </Button>
         <Button
           variant={fileSelect.confirmVariant}
           onClick={onConfirm}
           loading={confirming}
           disabled={canceling}
         >
-          {fileSelect.confirmText || '确定'}
+          {fileSelect.confirmText || t('confirm')}
         </Button>
       </Action>
     </Container>

diff --git a/apps/pwa/src/utils/dialog/image_cut.tsx b/apps/pwa/src/utils/dialog/image_cut.tsx
@@ -11,6 +11,7 @@ import Cropper from 'cropperjs';
 import styled from 'styled-components';
 import { IMAGE_MAX_SIZE } from '#/constants';
 import FileSelect from '@/components/file_select';
+import { t } from '@/i18n';
 import DialogBase from './dialog_base';
 import { ImageCut as ImageCutShape } from './constants';
 import useEvent from '../use_event';
@@ -93,7 +94,7 @@ function ImageCutContent({
           canvas.toBlob(
             (b) => {
               if (!b) {
-                return reject(new Error('无法导出图片'));
+                return reject(new Error('Failed to export image from canvas'));
               }
               return resolve(b);
             },
@@ -132,7 +133,7 @@ function ImageCutContent({
           </ImgBox>
         ) : null}
         <FileSelect
-          placeholder="选择图片, 支持 JPEG/PNG 类型"
+          placeholder={t('image_select_placeholder')}
           value={file}
           onChange={(f) => setFile(f)}
           acceptTypes={ACCEPT_TYPES}
@@ -141,15 +142,15 @@ function ImageCutContent({
       </Content>
       <Action>
         <Button onClick={onCancel} loading={canceling} disabled={confirming}>
-          {imageCut.cancelText || '取消'}
+          {imageCut.cancelText || t('cancel')}
         </Button>
         <Button
           variant={imageCut.confirmVariant}
           onClick={onConfirm}
           loading={confirming}
           disabled={canceling}
         >
-          {imageCut.confirmText || '确定'}
+          {imageCut.confirmText || t('confirm')}
         </Button>
       </Action>
     </Container>

diff --git a/apps/pwa/src/utils/dialog/input.tsx b/apps/pwa/src/utils/dialog/input.tsx
@@ -2,6 +2,7 @@ import { Container, Title, Content, Action } from '@/components/dialog';
 import Button from '@/components/button';
 import Input from '@/components/input';
 import { CSSProperties, ChangeEventHandler, useState } from 'react';
+import { t } from '@/i18n';
 import DialogBase from './dialog_base';
 import { Input as InputShape } from './constants';
 import useEvent from '../use_event';
@@ -61,15 +62,15 @@ function InputContent({
       </Content>
       <Action>
         <Button onClick={onCancel} loading={canceling} disabled={confirming}>
-          {input.cancelText || '取消'}
+          {input.cancelText || t('cancel')}
         </Button>
         <Button
           variant={input.confirmVariant}
           onClick={onConfirm}
           loading={confirming}
           disabled={canceling}
         >
-          {input.confirmText || '确定'}
+          {input.confirmText || t('confirm')}
         </Button>
       </Action>
     </Container>

diff --git a/apps/pwa/src/utils/dialog/input_list.tsx b/apps/pwa/src/utils/dialog/input_list.tsx
@@ -6,6 +6,7 @@ import IconButton from '@/components/icon_button';
 import { ComponentSize } from '@/constants/style';
 import { MdDelete } from 'react-icons/md';
 import styled from 'styled-components';
+import { t } from '@/i18n';
 import DialogBase from './dialog_base';
 import { InputList as InputListShape } from './constants';
 import useEvent from '../use_event';
@@ -29,9 +30,9 @@ function InputListContent({
 }) {
   const [values, setValues] = useState<{ id: number; content: string }[]>(
     () => {
-      const from = (inputList.initialValue || []).map((t) => ({
+      const from = (inputList.initialValue || []).map((a) => ({
         id: Math.random(),
-        content: t,
+        content: a,
       }));
       return from.length ? from : [{ id: Math.random(), content: '' }];
     },
@@ -119,21 +120,21 @@ function InputListContent({
             }
             disabled={confirming || canceling}
           >
-            新增{inputList.label}
+            {t('add')} {inputList.label}
           </Button>
         )}
       </StyledContent>
       <Action>
         <Button onClick={onCancel} loading={canceling} disabled={confirming}>
-          {inputList.cancelText || '取消'}
+          {inputList.cancelText || t('cancel')}
         </Button>
         <Button
           variant={inputList.confirmVariant}
           onClick={onConfirm}
           loading={confirming}
           disabled={canceling}
         >
-          {inputList.confirmText || '确定'}
+          {inputList.confirmText || t('confirm')}
         </Button>
       </Action>
     </Container>

diff --git a/apps/pwa/src/utils/dialog/multiple_select.tsx b/apps/pwa/src/utils/dialog/multiple_select.tsx
@@ -2,6 +2,7 @@ import { Container, Title, Content, Action } from '@/components/dialog';
 import Button from '@/components/button';
 import { CSSProperties, useState } from 'react';
 import MultipleSelect, { Option } from '@/components/multiple_select';
+import { t } from '@/i18n';
 import DialogBase from './dialog_base';
 import { MultipleSelect as MultipleSelectShape } from './constants';
 import useEvent from '../use_event';
@@ -63,15 +64,15 @@ function TextInputContent({
       </Content>
       <Action>
         <Button onClick={onCancel} loading={canceling} disabled={confirming}>
-          {multipleSelect.cancelText || '取消'}
+          {multipleSelect.cancelText || t('cancel')}
         </Button>
         <Button
           variant={multipleSelect.confirmVariant}
           onClick={onConfirm}
           loading={confirming}
           disabled={canceling}
         >
-          {multipleSelect.confirmText || '确定'}
+          {multipleSelect.confirmText || t('confirm')}
         </Button>
       </Action>
     </Container>

diff --git a/apps/pwa/src/utils/dialog/textarea_list.tsx b/apps/pwa/src/utils/dialog/textarea_list.tsx
@@ -6,6 +6,7 @@ import IconButton from '@/components/icon_button';
 import { ComponentSize } from '@/constants/style';
 import { MdDelete, MdUploadFile } from 'react-icons/md';
 import styled from 'styled-components';
+import { t } from '@/i18n';
 import DialogBase from './dialog_base';
 import { TextareaList as TextareaListShape } from './constants';
 import useEvent from '../use_event';
@@ -33,9 +34,9 @@ function TextareaListContent({
 }) {
   const [values, setValues] = useState<{ id: number; content: string }[]>(
     () => {
-      const from = (textareaList.initialValue || []).map((t) => ({
+      const from = (textareaList.initialValue || []).map((v) => ({
         id: Math.random(),
-        content: t,
+        content: v,
       }));
       return from.length ? from : [{ id: Math.random(), content: '' }];
     },
@@ -156,21 +157,21 @@ function TextareaListContent({
             }
             disabled={confirming || canceling}
           >
-            新增{textareaList.label}
+            {t('add')} {textareaList.label}
           </Button>
         )}
       </StyledContent>
       <Action>
         <Button onClick={onCancel} loading={canceling} disabled={confirming}>
-          {textareaList.cancelText || '取消'}
+          {textareaList.cancelText || t('cancel')}
         </Button>
         <Button
           variant={textareaList.confirmVariant}
           onClick={onConfirm}
           loading={confirming}
           disabled={canceling}
         >
-          {textareaList.confirmText || '确定'}
+          {textareaList.confirmText || t('confirm')}
         </Button>
       </Action>
     </Container>

diff --git a/readme.md b/readme.md
@@ -162,16 +162,12 @@ Because safari unsupport PWA on iOS/iPadOS, there is a plan to develop a App but
 
 </details>
 
-## License
-
-[GPL](./license)
-
 ## Contributor
 
 <a href="https://github.com/mebtte/cicada/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=mebtte/cicada" />
 </a>
 
-## Star
+## License
 
-[![Star History Chart](https://api.star-history.com/svg?repos=mebtte/cicada&type=Timeline)](https://star-history.com/#mebtte/cicada&Timeline)
+[GPL](./license)