Skip to content

Commit 5dc4c5b

Browse files
alan412alan412
committed
Add i18n support for ThemeModal
1 parent 27cac1f commit 5dc4c5b

File tree

4 files changed

+109
-46
lines changed

4 files changed

+109
-46
lines changed

‎src/i18n/locales/en/translation.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,26 @@
7878
"COPY_ELLIPSIS": "Copy...",
7979
"MECHANISMS": "Mechanisms",
8080
"OPMODES": "OpModes",
81+
"THEME_MODAL": {
82+
"LIGHT": "Light Theme",
83+
"LIGHT_DESCRIPTION": "Clean and bright interface for daytime use",
84+
"DARK": "Dark Theme",
85+
"DARK_DESCRIPTION": "Easy on the eyes for low-light environments",
86+
"TRITANOPIA": "Tritanopia Theme",
87+
"TRITANOPIA_DESCRIPTION": "Designed for those with Tritanopia color blindness",
88+
"TRITANOPIA_DARK": "Tritanopia Dark",
89+
"TRITANOPIA_DARK_DESCRIPTION": "Dark theme for those with Tritanopia color blindness",
90+
"DEUTERANOPIA": "Deuteranopia Theme",
91+
"DEUTERANOPIA_DESCRIPTION": "Designed for those with Deuteranopia color blindness",
92+
"DEUTERANOPIA_DARK": "Deuteranopia Dark",
93+
"DEUTERANOPIA_DARK_DESCRIPTION": "Dark theme for those with Deuteranopia color blindness",
94+
"SELECTION": "Theme Selection",
95+
"APPLY": "Apply Theme",
96+
"CHOOSE_DESCRIPTION": "Choose a theme that best suits your preference and working environment.",
97+
"PRIMARY_BUTTON": "Primary",
98+
"PREVIEW": "Theme Preview",
99+
"PREVIEW_DESCRIPTION": "The selected theme will be applied to the entire application interface."
100+
},
81101
"BLOCKLY":{
82102
"OF_TYPE": "of type",
83103
"WITH": "with",

‎src/i18n/locales/es/translation.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,26 @@
7979
},
8080
"MECHANISMS": "Mecanismos",
8181
"OPMODES": "OpModes",
82+
"THEME_MODAL": {
83+
"LIGHT": "Tema Claro",
84+
"LIGHT_DESCRIPTION": "Interfaz limpia y brillante para uso diurno",
85+
"DARK": "Tema Oscuro",
86+
"DARK_DESCRIPTION": "Fácil para los ojos en ambientes de poca luz",
87+
"TRITANOPIA": "Tema Tritanopia",
88+
"TRITANOPIA_DESCRIPTION": "Diseñado para personas con daltonismo Tritanopia",
89+
"TRITANOPIA_DARK": "Tritanopia Oscuro",
90+
"TRITANOPIA_DARK_DESCRIPTION": "Tema oscuro para personas con daltonismo Tritanopia",
91+
"DEUTERANOPIA": "Tema Deuteranopia",
92+
"DEUTERANOPIA_DESCRIPTION": "Diseñado para personas con daltonismo Deuteranopia",
93+
"DEUTERANOPIA_DARK": "Deuteranopia Oscuro",
94+
"DEUTERANOPIA_DARK_DESCRIPTION": "Tema oscuro para personas con daltonismo Deuteranopia",
95+
"SELECTION": "Selección de Tema",
96+
"APPLY": "Aplicar Tema",
97+
"CHOOSE_DESCRIPTION": "Elija un tema que mejor se adapte a sus preferencias y entorno de trabajo.",
98+
"PRIMARY_BUTTON": "Primario",
99+
"PREVIEW": "Vista Previa del Tema",
100+
"PREVIEW_DESCRIPTION": "El tema seleccionado se aplicará a toda la interfaz de la aplicación."
101+
},
82102
"BLOCKLY": {
83103
"OF_TYPE": "de tipo",
84104
"WITH": "con",

‎src/i18n/locales/he/translation.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,26 @@
7878
"COPY_ELLIPSIS": "העתק...",
7979
"MECHANISMS": "מנגנונים",
8080
"OPMODES": "אופמודים",
81+
"THEME_MODAL": {
82+
"LIGHT": "ערכת נושא בהירה",
83+
"LIGHT_DESCRIPTION": "ממשק נקי ובהיר לשימוש ביום",
84+
"DARK": "ערכת נושא כהה",
85+
"DARK_DESCRIPTION": "קל על העיניים בסביבות עם תאורה נמוכה",
86+
"TRITANOPIA": "ערכת נושא טריטנופיה",
87+
"TRITANOPIA_DESCRIPTION": "מעוצב עבור אנשים עם עיוורון צבעים טריטנופיה",
88+
"TRITANOPIA_DARK": "טריטנופיה כהה",
89+
"TRITANOPIA_DARK_DESCRIPTION": "ערכת נושא כהה עבור אנשים עם עיוורון צבעים טריטנופיה",
90+
"DEUTERANOPIA": "ערכת נושא דיוטרנופיה",
91+
"DEUTERANOPIA_DESCRIPTION": "מעוצב עבור אנשים עם עיוורון צבעים דיוטרנופיה",
92+
"DEUTERANOPIA_DARK": "דיוטרנופיה כהה",
93+
"DEUTERANOPIA_DARK_DESCRIPTION": "ערכת נושא כהה עבור אנשים עם עיוורון צבעים דיוטרנופיה",
94+
"SELECTION": "בחירת ערכת נושא",
95+
"APPLY": "החל ערכת נושא",
96+
"CHOOSE_DESCRIPTION": "בחר ערכת נושא שמתאימה ביותר להעדפותיך וסביבת העבודה שלך.",
97+
"PRIMARY_BUTTON": "ראשי",
98+
"PREVIEW": "תצוגה מקדימה של ערכת נושא",
99+
"PREVIEW_DESCRIPTION": "ערכת הנושא הנבחרת תוחל על כל ממשק האפליקציה."
100+
},
81101
"BLOCKLY": {
82102
"OF_TYPE": "מטיפוס",
83103
"WITH": "עם",

‎src/reactComponents/ThemeModal.tsx‎

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
import * as React from 'react';
66
import * as Antd from 'antd';
7+
import * as I18Next from 'react-i18next';
8+
79
import {
810
BgColorsOutlined,
911
CheckOutlined,
@@ -25,53 +27,54 @@ export interface ThemeModalProps {
2527
onThemeChange: (themeKey: string) => void;
2628
}
2729

28-
const THEME_OPTIONS: ThemeOption[] = [
29-
{
30-
key: 'light',
31-
name: 'Light Theme',
32-
icon: <SunOutlined />,
33-
description: 'Clean and bright interface for daytime use',
34-
},
35-
{
36-
key: 'dark',
37-
name: 'Dark Theme',
38-
icon: <MoonOutlined />,
39-
description: 'Easy on the eyes for low-light environments',
40-
},
41-
{
42-
key: 'tritanopia',
43-
name: 'Tritanopia Theme',
44-
icon: <SunOutlined />,
45-
description: 'Designed for those with Tritanopia color blindness',
46-
},
47-
{
48-
key: 'tritanopia-dark',
49-
name: 'Tritanopia Dark',
50-
icon: <MoonOutlined />,
51-
description: 'Dark theme for those with Tritanopia color blindness',
52-
},
53-
{
54-
key: 'deuteranopia',
55-
name: 'Deuteranopia Theme',
56-
icon: <SunOutlined />,
57-
description: 'Designed for those with Deuteranopia color blindness',
58-
},
59-
{
60-
key: 'deuteranopia-dark',
61-
name: 'Deuteranopia Dark',
62-
icon: <MoonOutlined />,
63-
description: 'Dark theme for those with Deuteranopia color blindness',
64-
},
65-
];
66-
6730
const ThemeModal: React.FC<ThemeModalProps> = ({
6831
open,
6932
onClose,
7033
currentTheme,
7134
onThemeChange,
7235
}) => {
36+
const { t } = I18Next.useTranslation();
7337
const [selectedTheme, setSelectedTheme] = React.useState(currentTheme);
7438

39+
const THEME_OPTIONS: ThemeOption[] = [
40+
{
41+
key: 'light',
42+
name: t('THEME_MODAL.LIGHT'),
43+
icon: <SunOutlined />,
44+
description: t('THEME_MODAL.LIGHT_DESCRIPTION'),
45+
},
46+
{
47+
key: 'dark',
48+
name: t('THEME_MODAL.DARK'),
49+
icon: <MoonOutlined />,
50+
description: t('THEME_MODAL.DARK_DESCRIPTION'),
51+
},
52+
{
53+
key: 'tritanopia',
54+
name: t('THEME_MODAL.TRITANOPIA'),
55+
icon: <SunOutlined />,
56+
description: t('THEME_MODAL.TRITANOPIA_DESCRIPTION'),
57+
},
58+
{
59+
key: 'tritanopia-dark',
60+
name: t('THEME_MODAL.TRITANOPIA_DARK'),
61+
icon: <MoonOutlined />,
62+
description: t('THEME_MODAL.TRITANOPIA_DARK_DESCRIPTION'),
63+
},
64+
{
65+
key: 'deuteranopia',
66+
name: t('THEME_MODAL.DEUTERANOPIA'),
67+
icon: <SunOutlined />,
68+
description: t('THEME_MODAL.DEUTERANOPIA_DESCRIPTION'),
69+
},
70+
{
71+
key: 'deuteranopia-dark',
72+
name: t('THEME_MODAL.DEUTERANOPIA_DARK'),
73+
icon: <MoonOutlined />,
74+
description: t('THEME_MODAL.DEUTERANOPIA_DARK_DESCRIPTION'),
75+
},
76+
];
77+
7578
React.useEffect(() => {
7679
setSelectedTheme(currentTheme);
7780
}, [currentTheme]);
@@ -95,30 +98,30 @@ const ThemeModal: React.FC<ThemeModalProps> = ({
9598
title={
9699
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
97100
<BgColorsOutlined />
98-
Theme Selection
101+
{t('THEME_MODAL.SELECTION')}
99102
</div>
100103
}
101104
open={open}
102105
onCancel={handleCancel}
103106
footer={[
104107
<Antd.Button key="cancel" onClick={handleCancel}>
105-
Cancel
108+
{t('CANCEL')}
106109
</Antd.Button>,
107110
<Antd.Button
108111
key="apply"
109112
type="primary"
110113
onClick={handleApplyTheme}
111114
disabled={selectedTheme === currentTheme}
112115
>
113-
Apply Theme
116+
{t('THEME_MODAL.APPLY')}
114117
</Antd.Button>,
115118
]}
116119
width={600}
117120
destroyOnHidden
118121
>
119122
<div style={{ padding: '16px 0' }}>
120123
<Antd.Typography.Text type="secondary" style={{ marginBottom: 16, display: 'block' }}>
121-
Choose a theme that best suits your preference and working environment.
124+
{t('THEME_MODAL.CHOOSE_DESCRIPTION')}
122125
</Antd.Typography.Text>
123126

124127
<Antd.Row gutter={[16, 16]}>
@@ -176,7 +179,7 @@ const ThemeModal: React.FC<ThemeModalProps> = ({
176179
<div style={{ marginTop: 12 }}>
177180
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
178181
<Antd.Button size="small" type="primary">
179-
Primary
182+
{t('THEME_MODAL.PRIMARY_BUTTON')}
180183
</Antd.Button>
181184
</div>
182185
</div>
@@ -190,8 +193,8 @@ const ThemeModal: React.FC<ThemeModalProps> = ({
190193
<Antd.Divider />
191194

192195
<Antd.Alert
193-
message="Theme Preview"
194-
description="The selected theme will be applied to the entire application interface."
196+
message={t('THEME_MODAL.PREVIEW')}
197+
description={t('THEME_MODAL.PREVIEW_DESCRIPTION')}
195198
type="info"
196199
showIcon
197200
style={{ marginTop: 16 }}

0 commit comments

Comments
 (0)