Skip to content

Commit 144f68c

Browse files
catarakcatarak
authored
Merge pull request #1581 from ridait/feature/Internationalize-mobile-text
#1559 Internationalize mobile text using i18n
2 parents 1d172ad + 972b534 commit 144f68c

File tree

7 files changed

+158
-43
lines changed

7 files changed

+158
-43
lines changed

‎client/components/mobile/Explorer.jsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
23
import styled from 'styled-components';
34
import PropTypes from 'prop-types';
45
import Sidebar from './Sidebar';
56
import ConnectedFileNode from '../../modules/IDE/components/FileNode';
67

78

8-
const Explorer = ({ id, canEdit, onPressClose }) => (
9-
<Sidebar title="Files" onPressClose={onPressClose}>
10-
<ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
11-
</Sidebar>
12-
);
9+
const Explorer = ({ id, canEdit, onPressClose }) => {
10+
const { t } = useTranslation();
11+
return (
12+
<Sidebar title={t('Explorer.Files')} onPressClose={onPressClose}>
13+
<ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
14+
</Sidebar>
15+
);
16+
};
1317

1418
Explorer.propTypes = {
1519
id: PropTypes.number.isRequired,

‎client/modules/IDE/components/Preferences/PreferenceCreators.jsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
export const optionsOnOff = (name, onLabel = 'On', offLabel = 'Off') => [
2-
{
3-
value: true, label: onLabel, ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
4-
},
5-
{
6-
value: false, label: offLabel, ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-')
7-
},
8-
];
1+
import { useTranslation } from 'react-i18next';
2+
3+
export const optionsOnOff = (name) => {
4+
const { t } = useTranslation();
5+
return [
6+
{
7+
value: true, label: t('PreferenceCreators.On'), ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
8+
},
9+
{
10+
value: false, label: t('PreferenceCreators.Off'), ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-')
11+
}
12+
];
13+
};
914

1015
export const optionsPickOne = (name, ...options) => options.map(option => ({
1116
value: option,

‎client/modules/IDE/pages/MobileIDEView.jsx

+14-11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33
import { connect } from 'react-redux';
44
import { withRouter } from 'react-router';
55
import { useState } from 'react';
6+
import { useTranslation } from 'react-i18next';
67
import styled from 'styled-components';
78

89
// Imports to be Refactored
@@ -60,22 +61,24 @@ const NavItem = styled.li`
6061
position: relative;
6162
`;
6263

63-
const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
64-
(username
64+
const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) => {
65+
const { t } = useTranslation();
66+
return (username
6567
? [
66-
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
67-
{ icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
68-
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
69-
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
70-
{ icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
68+
{ icon: PreferencesIcon, title: t('MobileIDEView.Preferences'), href: '/preferences', },
69+
{ icon: PreferencesIcon, title: t('MobileIDEView.MyStuff'), href: `/${username}/sketches` },
70+
{ icon: PreferencesIcon, title: t('MobileIDEView.Examples'), href: '/p5/sketches' },
71+
{ icon: PreferencesIcon, title: t('MobileIDEView.OriginalEditor'), action: toggleForceDesktop, },
72+
{ icon: PreferencesIcon, title: t('MobileIDEView.Logout'), action: logoutUser, },
7173
]
7274
: [
73-
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
74-
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
75-
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
76-
{ icon: PreferencesIcon, title: 'Login', href: '/login', },
75+
{ icon: PreferencesIcon, title: t('MobileIDEView.Preferences'), href: '/preferences', },
76+
{ icon: PreferencesIcon, title: t('MobileIDEView.Examples'), href: '/p5/sketches' },
77+
{ icon: PreferencesIcon, title: t('MobileIDEView.OriginalEditor'), action: toggleForceDesktop, },
78+
{ icon: PreferencesIcon, title: t('MobileIDEView.Login'), href: '/login', },
7779
]
7880
);
81+
};
7982

8083
const canSaveProject = (isUserOwner, project, user) =>
8184
isUserOwner || (user.authenticated && !project.owner);

‎client/modules/Mobile/MobileDashboardView.jsx

+17-6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44
import { useSelector } from 'react-redux';
55
import { withRouter } from 'react-router';
6+
import { useTranslation } from 'react-i18next';
67

78
import Screen from '../../components/mobile/MobileScreen';
89
import Header from '../../components/mobile/Header';
@@ -137,10 +138,13 @@ const Panels = {
137138
};
138139

139140

140-
const navOptions = username => [
141-
{ title: 'Create Sketch', href: '/' },
142-
{ title: 'Create Collection', href: `/${username}/collections/create` }
143-
];
141+
const navOptions = (username) => {
142+
const { t } = useTranslation();
143+
return [
144+
{ title: t('MobileDashboardView.CreateSketch'), href: '/' },
145+
{ title: t('MobileDashboardView.CreateCollection'), href: `/${username}/collections/create` }
146+
];
147+
};
144148

145149

146150
const getPanel = (pathname) => {
@@ -162,8 +166,14 @@ const MobileDashboard = ({ params, location }) => {
162166
const user = useSelector(state => state.user);
163167
const { username: paramsUsername } = params;
164168
const { pathname } = location;
169+
const { t } = useTranslation();
165170

166171
const Tabs = Object.keys(Panels);
172+
const TabLabels = {
173+
sketches: t('MobileDashboardView.Sketches'),
174+
collections: t('MobileDashboardView.Collections'),
175+
assets: t('MobileDashboardView.Assets')
176+
};
167177
const isExamples = paramsUsername === EXAMPLE_USERNAME;
168178
const panel = getPanel(pathname);
169179

@@ -173,9 +183,10 @@ const MobileDashboard = ({ params, location }) => {
173183
align="right"
174184
/>);
175185

186+
176187
return (
177188
<Screen fullscreen key={pathname}>
178-
<Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
189+
<Header slim inverted title={isExamples ? t('MobileDashboardView.Examples') : t('MobileDashboardView.MyStuff')}>
179190
<NavItem>
180191
<IconButton
181192
onClick={toggleNavDropdown}
@@ -205,7 +216,7 @@ const MobileDashboard = ({ params, location }) => {
205216
selected={tab === panel}
206217
to={pathname.replace(panel, tab)}
207218
>
208-
<h3>{(isExamples && tab === 'Sketches') ? 'Examples' : tab}</h3>
219+
<h3>{(isExamples && tab === 'Sketches') ? t('MobileDashboardView.Examples') : (TabLabels[tab] || tab)}</h3>
209220
</FooterTab>))
210221
}
211222
</FooterTabSwitcher>

‎client/modules/Mobile/MobilePreferences.jsx

+21-13
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react';
22
import { bindActionCreators } from 'redux';
33
import { connect, useSelector, useDispatch } from 'react-redux';
44
import { withRouter } from 'react-router';
5+
import { useTranslation } from 'react-i18next';
6+
57
import PropTypes from 'prop-types';
68
import styled from 'styled-components';
79

@@ -42,27 +44,33 @@ const MobilePreferences = () => {
4244
setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, setLineNumbers, setLintWarning,
4345
} = bindActionCreators({ ...PreferencesActions, ...IdeActions }, useDispatch());
4446

47+
const { t } = useTranslation();
4548

4649
const generalSettings = [
4750
{
48-
title: 'Theme',
51+
title: t('MobilePreferences.Theme'),
4952
value: theme,
50-
options: optionsPickOne('theme', 'light', 'dark', 'contrast'),
53+
options: optionsPickOne(
54+
t('MobilePreferences.Theme'),
55+
t('MobilePreferences.LightTheme'),
56+
t('MobilePreferences.DarkTheme'),
57+
t('MobilePreferences.HighContrastTheme')
58+
),
5159
onSelect: x => setTheme(x) // setTheme
5260
},
53-
preferenceOnOff('Autosave', autosave, setAutosave, 'autosave'),
54-
preferenceOnOff('Word Wrap', linewrap, setLinewrap, 'linewrap')
61+
preferenceOnOff(t('MobilePreferences.Autosave'), autosave, setAutosave, 'autosave'),
62+
preferenceOnOff(t('MobilePreferences.WordWrap'), linewrap, setLinewrap, 'linewrap')
5563
];
5664

5765
const outputSettings = [
58-
preferenceOnOff('Plain-text', textOutput, setTextOutput, 'text output'),
59-
preferenceOnOff('Table-text', gridOutput, setGridOutput, 'table output'),
60-
preferenceOnOff('Lint Warning Sound', soundOutput, setSoundOutput, 'sound output')
66+
preferenceOnOff(t('MobilePreferences.PlainText'), textOutput, setTextOutput, 'text output'),
67+
preferenceOnOff(t('MobilePreferences.TableText'), gridOutput, setGridOutput, 'table output'),
68+
preferenceOnOff(t('MobilePreferences.Sound'), soundOutput, setSoundOutput, 'sound output')
6169
];
6270

6371
const accessibilitySettings = [
64-
preferenceOnOff('Line Numbers', lineNumbers, setLineNumbers),
65-
preferenceOnOff('Lint Warning Sound', lintWarning, setLintWarning)
72+
preferenceOnOff(t('MobilePreferences.LineNumbers'), lineNumbers, setLineNumbers),
73+
preferenceOnOff(t('MobilePreferences.LintWarningSound'), lintWarning, setLintWarning)
6674
];
6775

6876
return (
@@ -73,14 +81,14 @@ const MobilePreferences = () => {
7381
</Header>
7482
<section className="preferences">
7583
<Content>
76-
<SectionHeader>General Settings</SectionHeader>
84+
<SectionHeader>{t('MobilePreferences.GeneralSettings')}</SectionHeader>
7785
{ generalSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
7886

79-
<SectionHeader>Accessibility</SectionHeader>
87+
<SectionHeader>{t('MobilePreferences.Accessibility')}</SectionHeader>
8088
{ accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
8189

82-
<SectionHeader>Accessible Output</SectionHeader>
83-
<SectionSubeader>Used with screen reader</SectionSubeader>
90+
<SectionHeader>{t('MobilePreferences.AccessibleOutput')}</SectionHeader>
91+
<SectionSubeader>{t('MobilePreferences.UsedScreenReader')}</SectionSubeader>
8492
{ outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
8593

8694
</Content>

‎translations/locales/en-US/translations.json

+42
Original file line numberDiff line numberDiff line change
@@ -538,5 +538,47 @@
538538
"PreviewNav": {
539539
"EditSketchARIA": "Edit Sketch",
540540
"ByUser": "by"
541+
},
542+
"MobilePreferences": {
543+
"Settings": "Settings",
544+
"GeneralSettings": "General settings",
545+
"Accessibility": "Accessibility",
546+
"AccessibleOutput": "Accessible Output",
547+
"Theme": "Theme",
548+
"LightTheme": "Light",
549+
"DarkTheme": "Dark",
550+
"HighContrastTheme": "High Contrast",
551+
"Autosave": "Autosave",
552+
"WordWrap": "Word Wrap",
553+
"LineNumbers": "Line numbers",
554+
"LintWarningSound": "Lint warning sound",
555+
"UsedScreenReader": "Used with screen reader",
556+
"PlainText": "Plain-text",
557+
"TableText": "Table-text",
558+
"Sound": "Sound"
559+
},
560+
"PreferenceCreators": {
561+
"On": "On",
562+
"Off": "Off"
563+
},
564+
"MobileIDEView":{
565+
"Preferences": "Preferences",
566+
"MyStuff": "My Stuff",
567+
"Examples": "Examples",
568+
"OriginalEditor": "Original Editor",
569+
"Login": "Login",
570+
"Logout": "Logout"
571+
},
572+
"MobileDashboardView": {
573+
"Examples": "Examples",
574+
"Sketches": "Sketches",
575+
"Collections": "Collections",
576+
"Assets": "Assets",
577+
"MyStuff": "My Stuff",
578+
"CreateSketch": "Create Sketch",
579+
"CreateCollection": "Create Collection"
580+
},
581+
"Explorer": {
582+
"Files": "Files"
541583
}
542584
}

‎translations/locales/es-419/translations.json

+42
Original file line numberDiff line numberDiff line change
@@ -538,5 +538,47 @@
538538
"PreviewNav": {
539539
"EditSketchARIA": "Editar Bosquejo",
540540
"ByUser": "por"
541+
},
542+
"MobilePreferences": {
543+
"Settings": "Configuración",
544+
"GeneralSettings": "Configuración general",
545+
"Accessibility": "Accesibilidad",
546+
"AccessibleOutput": "Salida accesible",
547+
"Theme": "Modo de visualización",
548+
"LightTheme": "Claro",
549+
"DarkTheme": "Oscuro",
550+
"HighContrastTheme": "Alto contraste",
551+
"Autosave": "Grabar automáticamente",
552+
"WordWrap": "Ajuste automático de línea",
553+
"LineNumbers": "Número de línea",
554+
"LintWarningSound": "Sonido de alarma Lint",
555+
"UsedScreenReader": "Uso con screen reader",
556+
"PlainText": "Texto sin formato",
557+
"TableText": "Tablero de texto",
558+
"Sound": "Sonido"
559+
},
560+
"PreferenceCreators": {
561+
"On": "Activar",
562+
"Off": "Desactivar"
563+
},
564+
"MobileIDEView":{
565+
"Preferences": "Preferencias",
566+
"MyStuff": "Mis cosas",
567+
"Examples": "Ejemplos",
568+
"OriginalEditor": "Editor Original",
569+
"Login": "Ingresa",
570+
"Logout": "Cerrar sesión"
571+
},
572+
"MobileDashboardView": {
573+
"Examples": "Ejemplos",
574+
"Sketches": "Bosquejos",
575+
"Collections": "Colecciones",
576+
"Assets": "Assets",
577+
"MyStuff": "Mis cosas",
578+
"CreateSketch": "Crear bosquejo",
579+
"CreateCollection": "Crear colección"
580+
},
581+
"Explorer": {
582+
"Files": "Archivos"
541583
}
542584
}

0 commit comments

Comments
 (0)