Spanish translation: Editor- Editor Accessibility- Timer (#1567)

* Editor translation for ARIA labels
* Timer translation for ARIA labels
* Remove unused i18next import
* Editor KeyUp translation

client/modules/IDE/components/Editor.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
 import beautifyJS from 'js-beautify';
+import { withTranslation } from 'react-i18next';
 import 'codemirror/mode/css/css';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/lint/lint';
@@ -136,7 +137,7 @@ class Editor extends React.Component {
     }, 1000));
 
     this._cm.on('keyup', () => {
-      const temp = `line ${parseInt((this._cm.getCursor().line) + 1, 10)}`;
+      const temp = this.props.t('Editor.KeyUpLineNumber', { lineNumber: parseInt((this._cm.getCursor().line) + 1, 10) });
       document.getElementById('current-line').innerHTML = temp;
     });
 
@@ -317,14 +318,14 @@ class Editor extends React.Component {
       <section className={editorSectionClass} >
         <header className="editor__header">
           <button
-            aria-label="Open Sketch files navigation"
+            aria-label={this.props.t('Editor.OpenSketchARIA')}
             className="sidebar__contract"
             onClick={this.props.collapseSidebar}
           >
             <LeftArrowIcon focusable="false" aria-hidden="true" />
           </button>
           <button
-            aria-label="Close sketch files navigation"
+            aria-label={this.props.t('Editor.CloseSketchARIA')}
             className="sidebar__expand"
             onClick={this.props.expandSidebar}
           >
@@ -335,7 +336,7 @@ class Editor extends React.Component {
               {this.props.file.name}
               <span className="editor__unsaved-changes">
                 {this.props.unsavedChanges ?
-                  <UnsavedChangesDotIcon role="img" aria-label="Sketch has unsaved changes" focusable="false" /> :
+                  <UnsavedChangesDotIcon role="img" aria-label={this.props.t('Editor.UnsavedChangesARIA')} focusable="false" /> :
                   null}
               </span>
             </span>
@@ -403,7 +404,8 @@ Editor.propTypes = {
   showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
   runtimeErrorWarningVisible: PropTypes.bool.isRequired,
-  provideController: PropTypes.func.isRequired
+  provideController: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 Editor.defaultProps = {
@@ -411,4 +413,4 @@ Editor.defaultProps = {
   consoleEvents: [],
 };
 
-export default Editor;
+export default withTranslation()(Editor);

client/modules/IDE/components/EditorAccessibility.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 class EditorAccessibility extends React.Component {
   componentDidMount() {
@@ -17,14 +18,14 @@ class EditorAccessibility extends React.Component {
           </li>));
       });
     } else {
-      messages.push(<li key={0}> There are no lint messages </li>);
+      messages.push(<li key={0}>{this.props.t('EditorAccessibility.NoLintMessages')}</li>);
     }
     return (
       <div className="editor-accessibility">
         <ul className="editor-lintmessages" title="lint messages">
           {messages}
         </ul>
-        <p> Current line
+        <p> {this.props.t('EditorAccessibility.CurrentLine')}
           <span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> </span>
         </p>
       </div>
@@ -39,6 +40,7 @@ EditorAccessibility.propTypes = {
     message: PropTypes.string.isRequired,
     id: PropTypes.number.isRequired
   })).isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default EditorAccessibility;
+export default withTranslation()(EditorAccessibility);

client/modules/IDE/components/Timer.jsx

@@ -3,6 +3,7 @@ import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 class Timer extends React.Component {
   constructor(props) {
@@ -23,17 +24,19 @@ class Timer extends React.Component {
   showSavedTime() {
     const now = new Date();
     if (Math.abs(differenceInMilliseconds(now, this.props.projectSavedTime) < 10000)) {
-      return 'Saved: just now';
+      return this.props.t('Timer.SavedJustNow');
     } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 20000) {
-      return 'Saved: 15 seconds ago';
+      return this.props.t('Timer.Saved15Seconds');
     } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 30000) {
-      return 'Saved: 25 seconds ago';
+      return this.props.t('Timer.Saved25Seconds');
     } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 46000) {
-      return 'Saved: 35 seconds ago';
+      return this.props.t('Timer.Saved35Seconds');
     }
-    return `Saved: ${distanceInWordsToNow(this.props.projectSavedTime, {
+
+    const timeAgo = distanceInWordsToNow(this.props.projectSavedTime, {
       includeSeconds: true
-    })} ago`;
+    });
+    return this.props.t('Timer.SavedAgo', { timeAgo });
   }
 
   render() {
@@ -51,11 +54,12 @@ class Timer extends React.Component {
 
 Timer.propTypes = {
   projectSavedTime: PropTypes.string.isRequired,
-  isUserOwner: PropTypes.bool
+  isUserOwner: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 Timer.defaultProps = {
   isUserOwner: false
 };
 
-export default Timer;
+export default withTranslation()(Timer);

translations/locales/en-US/translations.json

@@ -474,5 +474,22 @@
     "Title": "p5.js Web Editor | My sketches",
     "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s sketches",
     "NoCollections": "No collections."
+  },
+  "Editor": {
+    "OpenSketchARIA": "Open Sketch files navigation",
+    "CloseSketchARIA": "Close Sketch files navigation",
+    "UnsavedChangesARIA": "Sketch has unsaved changes",
+    "KeyUpLineNumber": "line {{lineNumber}}"
+  },
+  "EditorAccessibility": {
+    "NoLintMessages": "There are no lint messages ",
+    "CurrentLine": " Current line"
+  },
+  "Timer": {
+    "SavedJustNow": "Saved: just now",
+    "Saved15Seconds": "Saved: 15 seconds ago",
+    "Saved25Seconds": "Saved: 25 seconds ago",
+    "Saved35Seconds": "Saved: 35 seconds ago",
+    "SavedAgo": "Saved: {{timeAgo}} ago"
   }
 }

translations/locales/es-419/translations.json

@@ -474,5 +474,22 @@
     "Title": "p5.js Web Editor | Mis bosquejos",
     "AnothersTitle": "Editor Web p5.js | Bosquejos de {{anotheruser}}",
     "NoCollections": "No hay colecciones."
+  },
+  "Editor": {
+    "OpenSketchARIA": "Abrir navegación de archivos de bosquejo",
+    "CloseSketchARIA": "Cerrar navegación de archivos de bosquejo",
+    "UnsavedChangesARIA": "El bosquejo tiene cambios sin guardar",
+    "KeyUpLineNumber": "línea {{lineNumber}}"
+  },
+  "EditorAccessibility": {
+    "NoLintMessages": "No hay mensajes de Lint",
+    "CurrentLine": " Línea actual"
+  },
+  "Timer": {
+    "SavedJustNow": "Guardado: justo ahora",
+    "Saved15Seconds": "Guardado: hace 15 segundos",
+    "Saved25Seconds": "Guardado: hace 25 segundos",
+    "Saved35Seconds": "Guardado: hace 35 segundos",
+    "SavedAgo": "Guardado: hace {{timeAgo}}"
   }
 }