wip(i18n): text setter

crazysnowboy · May 24, 2024 · e3d145c · e3d145c
1 parent 6cf273f
commit e3d145c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 13 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+  "i18n-ally.localesPaths": [
+    "public/locales",
+    "src/i18n"
+  ]
+}
diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json
@@ -90,6 +90,18 @@
       "size": "Canvas Size",
       "fill": "Canvas Background Color"
     },
+    "text": {
+      "font_family": "Font",
+      "font_size": "Font Size",
+      "fill": "Color",
+      "text_align": "Alignment",
+      "font_styles": "Style",
+      "char_spacing": "Char Space",
+      "line_height": "Line Height",
+      "fx": {
+        "title": "Effects"
+      }
+    },
     "group": {
       "title": "Group"
     }

diff --git a/public/locales/zh-CN/translation.json b/public/locales/zh-CN/translation.json
@@ -10,7 +10,10 @@
     "text": "文本",
     "size": "大小",
     "background_color": "背景色",
-    "fill": "填充"
+    "fill": "填充",
+    "stroke": "描边",
+    "stroke_color": "颜色",
+    "stroke_width": "粗细"
   },
   "header": {
     "fabritor_desc": "我的画板 by fabritor",
@@ -90,6 +93,18 @@
       "size": "画布尺寸",
       "fill": "画布背景色"
     },
+    "text": {
+      "font_family": "字体",
+      "font_size": "字号",
+      "fill": "颜色",
+      "text_align": "对齐",
+      "font_styles": "样式",
+      "char_spacing": "字间距",
+      "line_height": "行间距",
+      "fx": {
+        "title": "特效"
+      }
+    },
     "group": {
       "title": "组合"
     }

diff --git a/src/fabritor/UI/setter/TextSetter/FontStyleSetter.tsx b/src/fabritor/UI/setter/TextSetter/FontStyleSetter.tsx
@@ -1,4 +1,4 @@
-import { Space, Button, Popover } from 'antd';
+import { Space, Button } from 'antd';
 import { BoldOutlined, ItalicOutlined, UnderlineOutlined, StrikethroughOutlined } from '@ant-design/icons';
 
 const FONT_STYLES = [

diff --git a/src/fabritor/UI/setter/TextSetter/TextFx/index.tsx b/src/fabritor/UI/setter/TextSetter/TextFx/index.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react';
 import { fabric } from 'fabric';
-import { Divider, Form } from 'antd';
+import { Form } from 'antd';
 import ColorSetter from '../../ColorSetter';
 import { GloablStateContext } from '@/context';
 import TextShadow from './TextShadow';
@@ -10,12 +10,14 @@ import { drawTextPath, getPathOffset, removeTextPath } from '@/editor/objects/te
 import { loadImageDom } from '@/editor/objects/image';
 import { transformColors2Fill, transformFill2Colors } from '@/utils';
 import SliderInputNumber from '@/fabritor/components/SliderInputNumber';
+import { useTranslation } from '@/i18n/utils';
 
 const { Item: FormItem } = Form;
 
 export default function TextFx () {
   const [form] = Form.useForm();
   const { object, editor } = useContext(GloablStateContext);
+  const { t } = useTranslation();
 
   const handleTextPattern = async (pattern) => {
     if (!object) return;

diff --git a/src/fabritor/UI/setter/TextSetter/index.tsx b/src/fabritor/UI/setter/TextSetter/index.tsx
@@ -9,22 +9,23 @@ import ColorSetter from '../ColorSetter';
 import { loadFont, transformColors2Fill, transformFill2Colors } from '@/utils';
 import { FunctionOutlined, RightOutlined } from '@ant-design/icons';
 import SliderInputNumber from '@/fabritor/components/SliderInputNumber';
-import Title from '@/fabritor/components/Title';
 import FList from '@/fabritor/components/FList';
 import MoreConfigWrapper from '../Form/MoreConfigWrapper';
 import TextFx from './TextFx';
+import { useTranslation } from '@/i18n/utils';
 
 const { Item: FormItem } = Form;
 
 export default function TextSetter () {
   const { object, editor }= useContext(GloablStateContext);
   const [form] = Form.useForm();
   const [openFx, setOpenFx] = useState(false);
+  const { t } = useTranslation();
 
   const TEXT_ADVANCE_CONFIG = [
     {
       icon: <FunctionOutlined style={{ fontSize: 22 }} />,
-      label: '特效',
+      label: t('setter.text.fx.title'),
       key: 'fx',
       onClick: () => { setOpenFx(true) }
     }
@@ -119,39 +120,39 @@ export default function TextSetter () {
       >
         <FormItem
           name="fontFamily"
-          label="字体"
+          label={t('setter.text.font_family')}
         >
           <Select
             options={FONT_PRESET_FAMILY_LIST}
           />
         </FormItem>
         <FormItem
           name="fontSize"
-          label="字号"
+          label={t('setter.text.font_size')}
         >
           <SliderInputNumber max={400} onChangeComplete={() =>{ editor.fireCustomModifiedEvent() }} />
         </FormItem>
         <FormItem
           name="fill"
-          label="颜色"
+          label={t('setter.text.fill')}
         >
           <ColorSetter type="fontColor" defaultColor="#000000" />
         </FormItem>
         <FormItem
           name="textAlign"
-          label="对齐"
+          label={t('setter.text.text_align')}
         >
           <AlignSetter />
         </FormItem>
         <FormItem
           name="fontStyles"
-          label="样式"
+          label={t('setter.text.font_styles')}
         >
           <FontStyleSetter />
         </FormItem>
         <FormItem
           name="charSpacing"
-          label="字间距"
+          label={t('setter.text.char_spacing')}
         >
           <SliderInputNumber
             min={-200}
@@ -161,7 +162,7 @@ export default function TextSetter () {
         </FormItem>
         <FormItem
           name="lineHeight"
-          label="行间距"
+          label={t('setter.text.line_height')}
         >
           <SliderInputNumber
             min={0.5}
@@ -186,7 +187,7 @@ export default function TextSetter () {
       <MoreConfigWrapper
         open={openFx}
         setOpen={setOpenFx}
-        title="文字特效"
+        title={`${t('panel.text.title')} ${t('setter.text.fx.title')}`}
       >
         <TextFx />
       </MoreConfigWrapper>