Skip to content

Commit 4aab045

Browse files
ridaitridait
committed
#1559 Internationalize mobile text using i18n
1 parent 67ef2d3 commit 4aab045

File tree

7 files changed

+116
-43
lines changed

7 files changed

+116
-43
lines changed

‎client/components/mobile/Explorer.jsx

Lines changed: 9 additions & 5 deletions
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, i18n } = useTranslation();
11+
return (
12+
<Sidebar title={t('MobileSideBar.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

Lines changed: 13 additions & 8 deletions
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, i18n } = useTranslation();
5+
return [
6+
{
7+
value: true, label: t('Preferences.On'), ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
8+
},
9+
{
10+
value: false, label: t('Preferences.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

Lines changed: 14 additions & 11 deletions
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
@@ -63,22 +64,24 @@ const NavItem = styled.li`
6364
position: relative;
6465
`;
6566

66-
const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
67-
(username
67+
const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) => {
68+
const { t, i18n } = useTranslation();
69+
return (username
6870
? [
69-
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
70-
{ icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
71-
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
72-
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
73-
{ icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
71+
{ icon: PreferencesIcon, title: t('MobileNav.Preferences'), href: '/preferences', },
72+
{ icon: PreferencesIcon, title: t('MobileNav.MyStuff'), href: `/${username}/sketches` },
73+
{ icon: PreferencesIcon, title: t('MobileNav.Examples'), href: '/p5/sketches' },
74+
{ icon: PreferencesIcon, title: t('MobileNav.OriginalEditor'), action: toggleForceDesktop, },
75+
{ icon: PreferencesIcon, title: t('MobileNav.Logout'), action: logoutUser, },
7476
]
7577
: [
76-
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
77-
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
78-
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
79-
{ icon: PreferencesIcon, title: 'Login', href: '/login', },
78+
{ icon: PreferencesIcon, title: t('MobileNav.Preferences'), href: '/preferences', },
79+
{ icon: PreferencesIcon, title: t('MobileNav.Examples'), href: '/p5/sketches' },
80+
{ icon: PreferencesIcon, title: t('MobileNav.OriginalEditor'), action: toggleForceDesktop, },
81+
{ icon: PreferencesIcon, title: t('MobileNav.Login'), href: '/login', },
8082
]
8183
);
84+
};
8285

8386
const MobileIDEView = (props) => {
8487
const {

‎client/modules/Mobile/MobileDashboardView.jsx

Lines changed: 17 additions & 6 deletions
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, i18n } = 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, i18n } = 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

Lines changed: 21 additions & 13 deletions
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, i18n } = useTranslation();
4548

4649
const generalSettings = [
4750
{
48-
title: 'Theme',
51+
title: t('Preferences.Theme'),
4952
value: theme,
50-
options: optionsPickOne('theme', 'light', 'dark', 'contrast'),
53+
options: optionsPickOne(
54+
t('Preferences.Theme'),
55+
t('Preferences.LightTheme'),
56+
t('Preferences.DarkTheme'),
57+
t('Preferences.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('Preferences.Autosave'), autosave, setAutosave, 'autosave'),
62+
preferenceOnOff(t('Preferences.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('Preferences.PlainText'), textOutput, setTextOutput, 'text output'),
67+
preferenceOnOff(t('Preferences.TableText'), gridOutput, setGridOutput, 'table output'),
68+
preferenceOnOff(t('Preferences.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('Preferences.LineNumbers'), lineNumbers, setLineNumbers),
73+
preferenceOnOff(t('Preferences.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('Preferences.GeneralSettings')}</SectionHeader>
7785
{ generalSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
7886

79-
<SectionHeader>Accessibility</SectionHeader>
87+
<SectionHeader>{t('Preferences.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('Preferences.AccessibleOutput')}</SectionHeader>
91+
<SectionSubeader>{t('Preferences.UsedScreenReader')}</SectionSubeader>
8492
{ outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
8593

8694
</Content>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@
114114
"Settings": "Settings",
115115
"GeneralSettings": "General settings",
116116
"Accessibility": "Accessibility",
117+
"AccessibleOutput": "Accessible Output",
117118
"Theme": "Theme",
118119
"LightTheme": "Light",
119120
"LightThemeARIA": "light theme on",
@@ -531,5 +532,25 @@
531532
"PreviewNav": {
532533
"EditSketchARIA": "Edit Sketch",
533534
"ByUser": "by"
535+
},
536+
"MobileNav":{
537+
"Preferences": "Preferences",
538+
"MyStuff": "My Stuff",
539+
"Examples": "Examples",
540+
"OriginalEditor": "Original Editor",
541+
"Login": "Login",
542+
"Logout": "Logout"
543+
},
544+
"MobileDashboardView": {
545+
"Examples": "Examples",
546+
"Sketches": "Sketches",
547+
"Collections": "Collections",
548+
"Assets": "Assets",
549+
"MyStuff": "My Stuff",
550+
"CreateSketch": "Create Sketch",
551+
"CreateCollection": "Create Collection"
552+
},
553+
"MobileSideBar": {
554+
"Files": "Files"
534555
}
535556
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@
114114
"Settings": "Configuración",
115115
"GeneralSettings": "Configuración general",
116116
"Accessibility": "Accesibilidad",
117+
"AccessibleOutput": "Salida accesible",
117118
"Theme": "Modo de visualización",
118119
"LightTheme": "Claro",
119120
"LightThemeARIA": "Modo de visualización claro activado",
@@ -531,5 +532,25 @@
531532
"PreviewNav": {
532533
"EditSketchARIA": "Editar Bosquejo",
533534
"ByUser": "por"
535+
},
536+
"MobileNav":{
537+
"Preferences": "Preferencias",
538+
"MyStuff": "Mis cosas",
539+
"Examples": "Ejemplos",
540+
"OriginalEditor": "Editor Original",
541+
"Login": "Ingresa",
542+
"Logout": "Cerrar sesión"
543+
},
544+
"MobileDashboardView": {
545+
"Examples": "Ejemplos",
546+
"Sketches": "Bosquejos",
547+
"Collections": "Colecciones",
548+
"Assets": "Assets",
549+
"MyStuff": "Mis cosas",
550+
"CreateSketch": "Crear bosquejo",
551+
"CreateCollection": "Crear colección"
552+
},
553+
"MobileSideBar": {
554+
"Files": "Archivos"
534555
}
535556
}

0 commit comments

Comments
 (0)