diff --git a/client/components/mobile/Explorer.jsx b/client/components/mobile/Explorer.jsx index 40455e242a..f4d501ceb0 100644 --- a/client/components/mobile/Explorer.jsx +++ b/client/components/mobile/Explorer.jsx @@ -1,15 +1,19 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import Sidebar from './Sidebar'; import ConnectedFileNode from '../../modules/IDE/components/FileNode'; -const Explorer = ({ id, canEdit, onPressClose }) => ( - - onPressClose()} /> - -); +const Explorer = ({ id, canEdit, onPressClose }) => { + const { t } = useTranslation(); + return ( + + onPressClose()} /> + + ); +}; Explorer.propTypes = { id: PropTypes.number.isRequired, diff --git a/client/modules/IDE/components/Preferences/PreferenceCreators.jsx b/client/modules/IDE/components/Preferences/PreferenceCreators.jsx index 9b977e0975..4a946ac2bf 100644 --- a/client/modules/IDE/components/Preferences/PreferenceCreators.jsx +++ b/client/modules/IDE/components/Preferences/PreferenceCreators.jsx @@ -1,11 +1,16 @@ -export const optionsOnOff = (name, onLabel = 'On', offLabel = 'Off') => [ - { - value: true, label: onLabel, ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-') - }, - { - value: false, label: offLabel, ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-') - }, -]; +import { useTranslation } from 'react-i18next'; + +export const optionsOnOff = (name) => { + const { t } = useTranslation(); + return [ + { + value: true, label: t('PreferenceCreators.On'), ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-') + }, + { + value: false, label: t('PreferenceCreators.Off'), ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-') + } + ]; +}; export const optionsPickOne = (name, ...options) => options.map(option => ({ value: option, diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 93ffb2a402..0d58887e04 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; // Imports to be Refactored @@ -60,22 +61,24 @@ const NavItem = styled.li` position: relative; `; -const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) => - (username +const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) => { + const { t } = useTranslation(); + return (username ? [ - { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, - { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` }, - { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' }, - { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, }, - { icon: PreferencesIcon, title: 'Logout', action: logoutUser, }, + { icon: PreferencesIcon, title: t('MobileIDEView.Preferences'), href: '/preferences', }, + { icon: PreferencesIcon, title: t('MobileIDEView.MyStuff'), href: `/${username}/sketches` }, + { icon: PreferencesIcon, title: t('MobileIDEView.Examples'), href: '/p5/sketches' }, + { icon: PreferencesIcon, title: t('MobileIDEView.OriginalEditor'), action: toggleForceDesktop, }, + { icon: PreferencesIcon, title: t('MobileIDEView.Logout'), action: logoutUser, }, ] : [ - { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, - { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' }, - { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, }, - { icon: PreferencesIcon, title: 'Login', href: '/login', }, + { icon: PreferencesIcon, title: t('MobileIDEView.Preferences'), href: '/preferences', }, + { icon: PreferencesIcon, title: t('MobileIDEView.Examples'), href: '/p5/sketches' }, + { icon: PreferencesIcon, title: t('MobileIDEView.OriginalEditor'), action: toggleForceDesktop, }, + { icon: PreferencesIcon, title: t('MobileIDEView.Login'), href: '/login', }, ] ); +}; const canSaveProject = (isUserOwner, project, user) => isUserOwner || (user.authenticated && !project.owner); diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index 0fd7cfe41b..51f074fb9a 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import { useSelector } from 'react-redux'; import { withRouter } from 'react-router'; +import { useTranslation } from 'react-i18next'; import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; @@ -137,10 +138,13 @@ const Panels = { }; -const navOptions = username => [ - { title: 'Create Sketch', href: '/' }, - { title: 'Create Collection', href: `/${username}/collections/create` } -]; +const navOptions = (username) => { + const { t } = useTranslation(); + return [ + { title: t('MobileDashboardView.CreateSketch'), href: '/' }, + { title: t('MobileDashboardView.CreateCollection'), href: `/${username}/collections/create` } + ]; +}; const getPanel = (pathname) => { @@ -162,8 +166,14 @@ const MobileDashboard = ({ params, location }) => { const user = useSelector(state => state.user); const { username: paramsUsername } = params; const { pathname } = location; + const { t } = useTranslation(); const Tabs = Object.keys(Panels); + const TabLabels = { + sketches: t('MobileDashboardView.Sketches'), + collections: t('MobileDashboardView.Collections'), + assets: t('MobileDashboardView.Assets') + }; const isExamples = paramsUsername === EXAMPLE_USERNAME; const panel = getPanel(pathname); @@ -173,9 +183,10 @@ const MobileDashboard = ({ params, location }) => { align="right" />); + return ( -
+
{ selected={tab === panel} to={pathname.replace(panel, tab)} > -

{(isExamples && tab === 'Sketches') ? 'Examples' : tab}

+

{(isExamples && tab === 'Sketches') ? t('MobileDashboardView.Examples') : (TabLabels[tab] || tab)}

)) } diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index 69ad737b03..07701e2684 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -2,6 +2,8 @@ import React from 'react'; import { bindActionCreators } from 'redux'; import { connect, useSelector, useDispatch } from 'react-redux'; import { withRouter } from 'react-router'; +import { useTranslation } from 'react-i18next'; + import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -42,27 +44,33 @@ const MobilePreferences = () => { setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, setLineNumbers, setLintWarning, } = bindActionCreators({ ...PreferencesActions, ...IdeActions }, useDispatch()); + const { t } = useTranslation(); const generalSettings = [ { - title: 'Theme', + title: t('MobilePreferences.Theme'), value: theme, - options: optionsPickOne('theme', 'light', 'dark', 'contrast'), + options: optionsPickOne( + t('MobilePreferences.Theme'), + t('MobilePreferences.LightTheme'), + t('MobilePreferences.DarkTheme'), + t('MobilePreferences.HighContrastTheme') + ), onSelect: x => setTheme(x) // setTheme }, - preferenceOnOff('Autosave', autosave, setAutosave, 'autosave'), - preferenceOnOff('Word Wrap', linewrap, setLinewrap, 'linewrap') + preferenceOnOff(t('MobilePreferences.Autosave'), autosave, setAutosave, 'autosave'), + preferenceOnOff(t('MobilePreferences.WordWrap'), linewrap, setLinewrap, 'linewrap') ]; const outputSettings = [ - preferenceOnOff('Plain-text', textOutput, setTextOutput, 'text output'), - preferenceOnOff('Table-text', gridOutput, setGridOutput, 'table output'), - preferenceOnOff('Lint Warning Sound', soundOutput, setSoundOutput, 'sound output') + preferenceOnOff(t('MobilePreferences.PlainText'), textOutput, setTextOutput, 'text output'), + preferenceOnOff(t('MobilePreferences.TableText'), gridOutput, setGridOutput, 'table output'), + preferenceOnOff(t('MobilePreferences.Sound'), soundOutput, setSoundOutput, 'sound output') ]; const accessibilitySettings = [ - preferenceOnOff('Line Numbers', lineNumbers, setLineNumbers), - preferenceOnOff('Lint Warning Sound', lintWarning, setLintWarning) + preferenceOnOff(t('MobilePreferences.LineNumbers'), lineNumbers, setLineNumbers), + preferenceOnOff(t('MobilePreferences.LintWarningSound'), lintWarning, setLintWarning) ]; return ( @@ -73,14 +81,14 @@ const MobilePreferences = () => {
- General Settings + {t('MobilePreferences.GeneralSettings')} { generalSettings.map(option => ) } - Accessibility + {t('MobilePreferences.Accessibility')} { accessibilitySettings.map(option => ) } - Accessible Output - Used with screen reader + {t('MobilePreferences.AccessibleOutput')} + {t('MobilePreferences.UsedScreenReader')} { outputSettings.map(option => ) } diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index ff81a049f5..b772ebfd10 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -538,5 +538,47 @@ "PreviewNav": { "EditSketchARIA": "Edit Sketch", "ByUser": "by" + }, + "MobilePreferences": { + "Settings": "Settings", + "GeneralSettings": "General settings", + "Accessibility": "Accessibility", + "AccessibleOutput": "Accessible Output", + "Theme": "Theme", + "LightTheme": "Light", + "DarkTheme": "Dark", + "HighContrastTheme": "High Contrast", + "Autosave": "Autosave", + "WordWrap": "Word Wrap", + "LineNumbers": "Line numbers", + "LintWarningSound": "Lint warning sound", + "UsedScreenReader": "Used with screen reader", + "PlainText": "Plain-text", + "TableText": "Table-text", + "Sound": "Sound" + }, + "PreferenceCreators": { + "On": "On", + "Off": "Off" + }, + "MobileIDEView":{ + "Preferences": "Preferences", + "MyStuff": "My Stuff", + "Examples": "Examples", + "OriginalEditor": "Original Editor", + "Login": "Login", + "Logout": "Logout" + }, + "MobileDashboardView": { + "Examples": "Examples", + "Sketches": "Sketches", + "Collections": "Collections", + "Assets": "Assets", + "MyStuff": "My Stuff", + "CreateSketch": "Create Sketch", + "CreateCollection": "Create Collection" + }, + "Explorer": { + "Files": "Files" } } diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json index 921f7f0c52..933410d717 100644 --- a/translations/locales/es-419/translations.json +++ b/translations/locales/es-419/translations.json @@ -538,5 +538,47 @@ "PreviewNav": { "EditSketchARIA": "Editar Bosquejo", "ByUser": "por" + }, + "MobilePreferences": { + "Settings": "Configuración", + "GeneralSettings": "Configuración general", + "Accessibility": "Accesibilidad", + "AccessibleOutput": "Salida accesible", + "Theme": "Modo de visualización", + "LightTheme": "Claro", + "DarkTheme": "Oscuro", + "HighContrastTheme": "Alto contraste", + "Autosave": "Grabar automáticamente", + "WordWrap": "Ajuste automático de línea", + "LineNumbers": "Número de línea", + "LintWarningSound": "Sonido de alarma Lint", + "UsedScreenReader": "Uso con screen reader", + "PlainText": "Texto sin formato", + "TableText": "Tablero de texto", + "Sound": "Sonido" + }, + "PreferenceCreators": { + "On": "Activar", + "Off": "Desactivar" + }, + "MobileIDEView":{ + "Preferences": "Preferencias", + "MyStuff": "Mis cosas", + "Examples": "Ejemplos", + "OriginalEditor": "Editor Original", + "Login": "Ingresa", + "Logout": "Cerrar sesión" + }, + "MobileDashboardView": { + "Examples": "Ejemplos", + "Sketches": "Bosquejos", + "Collections": "Colecciones", + "Assets": "Assets", + "MyStuff": "Mis cosas", + "CreateSketch": "Crear bosquejo", + "CreateCollection": "Crear colección" + }, + "Explorer": { + "Files": "Archivos" } }