Spanish Translations: FileUploader, Error Modal, Share Modal (#1561)

* Upload ANd FileUploader translations.json

* ErrorModal translation

* ShareModal translation

Co-authored-by: Andrew Nicolaou <me@andrewnicolaou.co.uk>

client/modules/IDE/components/ErrorModal.jsx

@@ -1,15 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 class ErrorModal extends React.Component {
   forceAuthentication() {
     return (
       <p>
-        In order to save sketches, you must be logged in. Please&nbsp;
-        <Link to="/login" onClick={this.props.closeModal}>Login</Link>
-        &nbsp;or&nbsp;
-        <Link to="/signup" onClick={this.props.closeModal}>Sign Up</Link>.
+        {this.props.t('ErrorModal.MessageLogin')}
+        <Link to="/login" onClick={this.props.closeModal}> {this.props.t('ErrorModal.Login')}</Link>
+        {this.props.t('ErrorModal.LoginOr')}
+        <Link to="/signup" onClick={this.props.closeModal}>{this.props.t('ErrorModal.SignUp')}</Link>.
       </p>
     );
   }
@@ -17,8 +18,8 @@ class ErrorModal extends React.Component {
   staleSession() {
     return (
       <p>
-        It looks like you&apos;ve been logged out. Please&nbsp;
-        <Link to="/login" onClick={this.props.closeModal}>log in</Link>.
+        {this.props.t('ErrorModal.MessageLoggedOut')}
+        <Link to="/login" onClick={this.props.closeModal}>{this.props.t('ErrorModal.LogIn')}</Link>.
       </p>
     );
   }
@@ -26,8 +27,7 @@ class ErrorModal extends React.Component {
   staleProject() {
     return (
       <p>
-        The project you have attempted to save has been saved from another window.
-        Please refresh the page to see the latest version.
+        {this.props.t('ErrorModal.SavedDifferentWindow')}
       </p>
     );
   }
@@ -51,7 +51,8 @@ class ErrorModal extends React.Component {
 
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default ErrorModal;
+export default withTranslation()(ErrorModal);

client/modules/IDE/components/FileUploader.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Dropzone from 'dropzone';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
 import * as UploaderActions from '../actions/uploader';
 import getConfig from '../../../utils/getConfig';
 import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
@@ -30,7 +31,7 @@ class FileUploader extends React.Component {
       thumbnailWidth: 200,
       thumbnailHeight: 200,
       acceptedFiles: fileExtensionsAndMimeTypes,
-      dictDefaultMessage: 'Drop files here or click to use the file browser',
+      dictDefaultMessage: this.props.t('FileUploader.DictDefaultMessage'),
       accept: this.props.dropzoneAcceptCallback.bind(this, userId),
       sending: this.props.dropzoneSendingCallback,
       complete: this.props.dropzoneCompleteCallback
@@ -59,7 +60,8 @@ FileUploader.propTypes = {
   }),
   user: PropTypes.shape({
     id: PropTypes.string
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 FileUploader.defaultProps = {
@@ -84,4 +86,4 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UploaderActions, dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(FileUploader));

client/modules/IDE/components/ShareModal.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import CopyableInput from './CopyableInput';
 
 class ShareModal extends React.PureComponent {
@@ -16,21 +17,21 @@ class ShareModal extends React.PureComponent {
           {projectName}
         </h3>
         <CopyableInput
-          label="Embed"
+          label={this.props.t('ShareModal.Embed')}
           value={`<iframe src="${hostname}/${ownerUsername}/embed/${projectId}"></iframe>`}
         />
         <CopyableInput
-          label="Present"
+          label={this.props.t('ShareModal.Present')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/present/${projectId}`}
         />
         <CopyableInput
-          label="Fullscreen"
+          label={this.props.t('ShareModal.Fullscreen')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/full/${projectId}`}
         />
         <CopyableInput
-          label="Edit"
+          label={this.props.t('ShareModal.Edit')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/sketches/${projectId}`}
         />
@@ -42,7 +43,8 @@ class ShareModal extends React.PureComponent {
 ShareModal.propTypes = {
   projectId: PropTypes.string.isRequired,
   ownerUsername: PropTypes.string.isRequired,
-  projectName: PropTypes.string.isRequired
+  projectName: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default ShareModal;
+export default withTranslation()(ShareModal);

client/modules/IDE/components/UploadFileModal.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
 import getConfig from '../../../utils/getConfig';
 import FileUploader from './FileUploader';
@@ -14,7 +15,8 @@ const limitText = prettyBytes(limit);
 class UploadFileModal extends React.Component {
   propTypes = {
     reachedTotalSizeLimit: PropTypes.bool.isRequired,
-    closeModal: PropTypes.func.isRequired
+    closeModal: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired
   }
 
   componentDidMount() {
@@ -31,22 +33,18 @@ class UploadFileModal extends React.Component {
       <section className="modal" ref={(element) => { this.modal = element; }}>
         <div className="modal-content">
           <div className="modal__header">
-            <h2 className="modal__title">Upload File</h2>
+            <h2 className="modal__title">{this.props.t('UploadFileModal.Title')}</h2>
             <button
               className="modal__exit-button"
               onClick={this.props.closeModal}
-              aria-label="Close upload file modal"
+              aria-label={this.props.t('UploadFileModal.CloseButtonARIA')}
             >
               <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           { this.props.reachedTotalSizeLimit &&
             <p>
-              {
-                `Error: You cannot upload any more files. You have reached the total size limit of ${limitText}.
-                If you would like to upload more, please remove the ones you aren't using anymore by
-                in your `
-              }
+              {this.props.t('UploadFileModal.SizeLimitError', { sizeLimit: limitText })}
               <Link to="/assets" onClick={this.props.closeModal}>assets</Link>
               .
             </p>
@@ -68,4 +66,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(UploadFileModal);
+export default withTranslation()(connect(mapStateToProps)(UploadFileModal));

translations/locales/en-US/translations.json

@@ -326,7 +326,6 @@
     "AlreadyHave": "Already have an account?",
     "Login": "Log In"
   },
-
   "EmailVerificationView": {
     "Title": "p5.js Web Editor | Email Verification",
     "Verify": "Verify your email",
@@ -334,5 +333,28 @@
     "Checking": "Validating token, please wait...",
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
+  },
+  "UploadFileModal": {
+    "Title": "Upload File",
+    "CloseButtonARIA": "Close upload file modal",
+    "SizeLimitError": "Error: You cannot upload any more files. You have reached the total size limit of {{sizeLimit}}.\n                If you would like to upload more, please remove the ones you aren't using anymore by\n                in your "
+  },
+  "FileUploader": {
+    "DictDefaultMessage": "Drop files here or click to use the file browser"
+  },
+  "ErrorModal": {
+    "MessageLogin": "In order to save sketches, you must be logged in. Please ",
+    "Login": "Login",
+    "LoginOr": " or ",
+    "SignUp": "Sign Up",
+    "MessageLoggedOut": "It looks like you've been logged out. Please ",
+    "LogIn": "log in",
+    "SavedDifferentWindow": "The project you have attempted to save has been saved from another window.\n        Please refresh the page to see the latest version."
+  },
+  "ShareModal": {
+    "Embed": "Embed",
+    "Present": "Present",
+    "Fullscreen": "Fullscreen",
+    "Edit": "Edit"
   }
 }

translations/locales/es-419/translations.json

@@ -174,15 +174,33 @@
     }
   },
   "Sidebar": {
-    "Create": "Crear",
-    "EnterName": "Introduce un nombre",
-    "Add": "Agregar",
-    "Folder": "Directorio"
+    "Title": "Archivos de Bosquejo",
+    "ToggleARIA": "Alternar abrir/cerrar opciones de archivo de bosquejo",
+    "AddFolder": "Crear directorio",
+    "AddFolderARIA": "Agregar directorio",
+    "AddFile": "Crear archivo",
+    "AddFileARIA": "agregar archivo",
+    "UploadFile": "Subir archivo",
+    "UploadFileARIA": "Subir archivo"
+  },
+  "FileNode": {
+    "OpenFolderARIA": "Abrir contenidos del directorio",
+    "CloseFolderARIA": "Cerrar contenidos del directorio",
+    "ToggleFileOptionsARIA": "Alternar abrir/cerrar opciones de archivo",
+    "AddFolder": "Crear directorio",
+    "AddFolderARIA": "Agregar directorio",
+    "AddFile": "Crear archivo",
+    "AddFileARIA": "agregar archivo",
+    "UploadFile": "Subir archivo",
+    "UploadFileARIA": "Subir archivo",
+    "Rename": "Renombrar",
+    "Delete": "Borrar"
   },
   "Common": {
     "Error": "Error",
     "Save": "Guardar",
-    "p5logoARIA": "Logo p5.js "
+    "p5logoARIA": "Logo p5.js ",
+    "DeleteConfirmation": "¿Estás que quieres borrar {{name}}?"
   },
   "IDEView": {
     "SubmitFeedback": "Enviar retroalimentación"
@@ -315,5 +333,28 @@
     "Checking": "Validando token, por favor espera...",
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
+  },
+  "UploadFileModal": {
+    "Title": "Subir Archivo",
+    "CloseButtonARIA": "Cerrar diálogo para subir archivo",
+    "SizeLimitError": "Error: No puedes subir archivos. Has alcanzado el limite de tamaño total de {{sizeLimit}}.\n         Si quieres agregar más,por favor remueve alugnos que no estes usando en tus "
+  },
+  "FileUploader": {
+    "DictDefaultMessage": "Deposita los archivos aquí o haz click para usar el navegador de archivos"
+  },
+  "ErrorModal": {
+    "MessageLogin": "Para poder guardar bosquejos, debes ingresar a tu cuenta. Por favor ",
+    "Login": "Ingresa",
+    "LoginOr": " o ",
+    "SignUp": "Registráte",
+    "MessageLoggedOut": "Parece que has salido de tu cuenta. Por favor ",
+    "LogIn": "ingresa",
+    "SavedDifferentWindow": " El proyecto que has intentado guardar ha sido guardado desde otra ventana.\n  Por favor refresca la página para ver la versión más actual."
+  },
+  "ShareModal": {
+    "Embed": "Incrustar",
+    "Present": "Presentar",
+    "Fullscreen": "Pantalla Completa",
+    "Edit": "Editar"
   }
 }