From 093c8ff5303a1b0ce15a0d4b387eedfac022853f Mon Sep 17 00:00:00 2001 From: ov Date: Fri, 21 Aug 2020 12:59:58 +0100 Subject: [PATCH 1/3] Spanish Translations: FileUploader, Error Modal, Share Modal (#1561) * Upload ANd FileUploader translations.json * ErrorModal translation * ShareModal translation Co-authored-by: Andrew Nicolaou --- client/modules/IDE/components/ErrorModal.jsx | 21 ++++---- .../modules/IDE/components/FileUploader.jsx | 8 +-- client/modules/IDE/components/ShareModal.jsx | 14 ++--- .../IDE/components/UploadFileModal.jsx | 16 +++--- translations/locales/en-US/translations.json | 24 ++++++++- translations/locales/es-419/translations.json | 51 +++++++++++++++++-- 6 files changed, 100 insertions(+), 34 deletions(-) diff --git a/client/modules/IDE/components/ErrorModal.jsx b/client/modules/IDE/components/ErrorModal.jsx index b1ff6b10..099065a5 100644 --- a/client/modules/IDE/components/ErrorModal.jsx +++ b/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 (

- In order to save sketches, you must be logged in. Please  - Login -  or  - Sign Up. + {this.props.t('ErrorModal.MessageLogin')} + {this.props.t('ErrorModal.Login')} + {this.props.t('ErrorModal.LoginOr')} + {this.props.t('ErrorModal.SignUp')}.

); } @@ -17,8 +18,8 @@ class ErrorModal extends React.Component { staleSession() { return (

- It looks like you've been logged out. Please  - log in. + {this.props.t('ErrorModal.MessageLoggedOut')} + {this.props.t('ErrorModal.LogIn')}.

); } @@ -26,8 +27,7 @@ class ErrorModal extends React.Component { staleProject() { return (

- 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')}

); } @@ -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); diff --git a/client/modules/IDE/components/FileUploader.jsx b/client/modules/IDE/components/FileUploader.jsx index e2e6e509..f33b59ed 100644 --- a/client/modules/IDE/components/FileUploader.jsx +++ b/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)); diff --git a/client/modules/IDE/components/ShareModal.jsx b/client/modules/IDE/components/ShareModal.jsx index e0962624..bea4c42a 100644 --- a/client/modules/IDE/components/ShareModal.jsx +++ b/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} `} /> @@ -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); diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx index ff7e9c2d..793c4183 100644 --- a/client/modules/IDE/components/UploadFileModal.jsx +++ b/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 {
{ this.modal = element; }}>
-

Upload File

+

{this.props.t('UploadFileModal.Title')}

{ this.props.reachedTotalSizeLimit &&

- { - `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 })} assets .

@@ -68,4 +66,4 @@ function mapStateToProps(state) { }; } -export default connect(mapStateToProps)(UploadFileModal); +export default withTranslation()(connect(mapStateToProps)(UploadFileModal)); diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 39c5dcfb..a9164b0f 100644 --- a/translations/locales/en-US/translations.json +++ b/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" } } diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json index 0217d46c..f22edb9f 100644 --- a/translations/locales/es-419/translations.json +++ b/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" } } From e44c1aa7e20aebde790d968ca6d96848a303d370 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 15:09:50 -0300 Subject: [PATCH 2/3] :ok_hand: adapt and to mobile --- client/modules/App/App.jsx | 2 +- .../User/components/ResponsiveForm.jsx | 59 +++++++++++++++++++ client/modules/User/pages/LoginView.jsx | 59 +++++++++++-------- client/modules/User/pages/SignupView.jsx | 51 +++++++++------- 4 files changed, 122 insertions(+), 49 deletions(-) create mode 100644 client/modules/User/components/ResponsiveForm.jsx diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 3b74e1fc..089d80f7 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -41,7 +41,7 @@ class App extends React.Component { render() { return (
- {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
); diff --git a/client/modules/User/components/ResponsiveForm.jsx b/client/modules/User/components/ResponsiveForm.jsx new file mode 100644 index 00000000..f0fd0ba7 --- /dev/null +++ b/client/modules/User/components/ResponsiveForm.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { remSize } from '../../../theme'; + + +const ResponsiveFormWrapper = styled.div` + .form-container__content { + width: unset !important; + padding-top: ${remSize(16)}; + padding-bottom: ${remSize(64)}; + } + + .form__input { + min-width: unset; + padding: 0px ${remSize(12)}; + height: ${remSize(28)}; + } + .form-container__title { margin-bottom: ${remSize(14)}} + p.form__field { margin-top: 0px !important; } + label.form__label { margin-top: ${remSize(8)} !important; } + + .form-error { width: 100% } + + .nav__items-right:last-child { display: none } + + .form-container { + height: 100% + } + + .form-container__stack { + svg { + width: ${remSize(12)}; + height: ${remSize(12)} + } + a { padding: 0px } + } +`; + +const ResponsiveForm = props => + (props.mobile === true + ? ( + + {props.children} + + + ) + : props.children); + +ResponsiveForm.propTypes = { + mobile: PropTypes.bool, + children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]), +}; +ResponsiveForm.defaultProps = { + mobile: false, + children: [] +}; + +export default ResponsiveForm; diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx index 20b48b17..cdd2b97f 100644 --- a/client/modules/User/pages/LoginView.jsx +++ b/client/modules/User/pages/LoginView.jsx @@ -10,6 +10,7 @@ import LoginForm from '../components/LoginForm'; import { validateLogin } from '../../../utils/reduxFormUtils'; import SocialAuthButton from '../components/SocialAuthButton'; import Nav from '../../../components/Nav'; +import ResponsiveForm from '../components/ResponsiveForm'; class LoginView extends React.Component { constructor(props) { @@ -27,36 +28,40 @@ class LoginView extends React.Component { } render() { + const isMobile = () => (window.innerWidth < 770); if (this.props.user.authenticated) { this.gotoHomePage(); return null; } + // TODO: mobile currently forced to true return ( -
-
+ +
+ ); } } @@ -79,13 +84,15 @@ LoginView.propTypes = { user: PropTypes.shape({ authenticated: PropTypes.bool }), - t: PropTypes.func.isRequired + t: PropTypes.func.isRequired, + mobile: PropTypes.bool }; LoginView.defaultProps = { user: { authenticated: false - } + }, + mobile: false }; export default withTranslation()(reduxForm({ diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx index b646a405..4cebe88c 100644 --- a/client/modules/User/pages/SignupView.jsx +++ b/client/modules/User/pages/SignupView.jsx @@ -11,6 +11,9 @@ import apiClient from '../../../utils/apiClient'; import { validateSignup } from '../../../utils/reduxFormUtils'; import SocialAuthButton from '../components/SocialAuthButton'; import Nav from '../../../components/Nav'; +import ResponsiveForm from '../components/ResponsiveForm'; + +const isMobile = () => (window.innerWidth < 770); class SignupView extends React.Component { gotoHomePage = () => { @@ -23,27 +26,29 @@ class SignupView extends React.Component { return null; } return ( -
-
+ + + ); } } @@ -110,13 +115,15 @@ SignupView.propTypes = { user: PropTypes.shape({ authenticated: PropTypes.bool }), - t: PropTypes.func.isRequired + t: PropTypes.func.isRequired, + mobile: PropTypes.bool }; SignupView.defaultProps = { user: { authenticated: false - } + }, + mobile: false }; export default withTranslation()(reduxForm({ From 2169a6ec7f21c203056e1ed8ba2c5b833429ad72 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 15:22:08 -0300 Subject: [PATCH 3/3] :ok_hand: restore sidebar --- client/modules/App/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 089d80f7..3b74e1fc 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -41,7 +41,7 @@ class App extends React.Component { render() { return (
- {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
);