Merge branch 'feature/mobile-examples' of https://github.com/ghalestrilo/p5.js-web-editor into feature/mobile-files-tab

Author: ghalestrilo

client/components/mobile/Tab.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+import { prop, remSize } from '../../theme';
+
+export default styled(Link)`
+  box-sizing: border-box;
+
+
+  background: transparent;
+  /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
+  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
+
+  color: ${prop('primaryTextColor')};
+
+  padding: ${remSize(8)} ${remSize(16)};
+  width: 30%;
+`;

client/components/mobile/TabSwitcher.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { prop, remSize } from '../../theme';
+
+export default styled.div`
+  display: flex;
+  justify-content: space-between;
+  
+  h3 { text-align: center; width: 100%; }
+  border-top: 1px solid ${prop('Separator')};
+
+  background: ${props => prop('backgroundColor')};
+`;
+

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -214,8 +214,8 @@ class CollectionListRowBase extends React.Component {
           </span>
         </th>
         {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
-        <td>{formatDateCell(collection.updatedAt)}</td>
-        <td>{(collection.items || []).length}</td>
+        <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
+        <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}
         </td>

client/modules/IDE/components/NewFileForm.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 import Button from '../../../common/Button';
@@ -35,14 +36,17 @@ class NewFileForm extends React.Component {
             className="new-file-form__name-input"
             id="name"
             type="text"
-            placeholder="Name"
+            placeholder={this.props.t('NewFileForm.Placeholder')}
             maxLength="128"
             {...domOnlyProps(name)}
             ref={(element) => {
               this.fileName = element;
             }}
           />
-          <Button type="submit">Add File</Button>
+          <Button
+            type="submit"
+          >{this.props.t('NewFileForm.AddFileSubmit')}
+          </Button>
         </div>
         {name.touched && name.error && (
           <span className="form-error">{name.error}</span>
@@ -59,6 +63,7 @@ NewFileForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   createFile: PropTypes.func.isRequired,
   focusOnModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default NewFileForm;
+export default withTranslation()(NewFileForm);

client/modules/IDE/components/NewFileModal.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { reduxForm } from 'redux-form';
+import { withTranslation } from 'react-i18next';
+import i18n from 'i18next';
 import NewFileForm from './NewFileForm';
 import { closeNewFileModal } from '../actions/ide';
 import { createFile } from '../actions/files';
@@ -33,11 +35,11 @@ class NewFileModal extends React.Component {
       <section className="modal" ref={(element) => { this.modal = element; }}>
         <div className="modal-content">
           <div className="modal__header">
-            <h2 className="modal__title">Create File</h2>
+            <h2 className="modal__title">{this.props.t('NewFileModal.Title')}</h2>
             <button
               className="modal__exit-button"
               onClick={this.props.closeNewFileModal}
-              aria-label="Close New File Modal"
+              aria-label={this.props.t('NewFileModal.CloseButtonARIA')}
             >
               <ExitIcon focusable="false" aria-hidden="true" />
             </button>
@@ -54,16 +56,17 @@ class NewFileModal extends React.Component {
 
 NewFileModal.propTypes = {
   createFile: PropTypes.func.isRequired,
-  closeNewFileModal: PropTypes.func.isRequired
+  closeNewFileModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function validate(formProps) {
   const errors = {};
 
   if (!formProps.name) {
-    errors.name = 'Please enter a name';
+    errors.name = i18n.t('NewFileModal.EnterName');
   } else if (!formProps.name.match(CREATE_FILE_REGEX)) {
-    errors.name = 'Invalid file type. Valid extensions are .js, .css, .json, .txt, .csv, .tsv, .frag, and .vert.';
+    errors.name = i18n.t('NewFileModal.InvalidType');
   }
 
   return errors;
@@ -77,11 +80,11 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators({ createFile, closeNewFileModal }, dispatch);
 }
 
-export default compose(
+export default withTranslation()(compose(
   connect(mapStateToProps, mapDispatchToProps),
   reduxForm({
     form: 'new-file',
     fields: ['name'],
     validate
   })
-)(NewFileModal);
+)(NewFileModal));

client/modules/IDE/components/NewFolderForm.jsx

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 import Button from '../../../common/Button';
 
+
 class NewFolderForm extends React.Component {
   constructor(props) {
     super(props);
@@ -35,13 +37,14 @@ class NewFolderForm extends React.Component {
             id="name"
             type="text"
             maxLength="128"
-            placeholder="Name"
-            ref={(element) => {
-              this.fileName = element;
-            }}
+            placeholder={this.props.t('NewFolderForm.Placeholder')}
+            ref={(element) => { this.fileName = element; }}
             {...domOnlyProps(name)}
           />
-          <Button type="submit">Add Folder</Button>
+          <Button
+            type="submit"
+          >{this.props.t('NewFolderForm.AddFolderSubmit')}
+          </Button>
         </div>
         {name.touched && name.error && (
           <span className="form-error">{name.error}</span>
@@ -60,9 +63,10 @@ NewFolderForm.propTypes = {
   closeModal: PropTypes.func.isRequired,
   submitting: PropTypes.bool,
   pristine: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 NewFolderForm.defaultProps = {
   submitting: false,
   pristine: true,
 };
-export default NewFolderForm;
+export default withTranslation()(NewFolderForm);

client/modules/IDE/components/NewFolderModal.jsx

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { reduxForm } from 'redux-form';
+import { withTranslation } from 'react-i18next';
+import i18n from 'i18next';
 import NewFolderForm from './NewFolderForm';
 
 import ExitIcon from '../../../images/exit.svg';
@@ -15,11 +17,11 @@ class NewFolderModal extends React.Component {
       <section className="modal" ref={(element) => { this.newFolderModal = element; }} >
         <div className="modal-content-folder">
           <div className="modal__header">
-            <h2 className="modal__title">Create Folder</h2>
+            <h2 className="modal__title">{this.props.t('NewFolderModal.Title')}</h2>
             <button
               className="modal__exit-button"
               onClick={this.props.closeModal}
-              aria-label="Close New Folder Modal"
+              aria-label={this.props.t('NewFolderModal.CloseButtonARIA')}
             >
               <ExitIcon focusable="false" aria-hidden="true" />
             </button>
@@ -32,23 +34,24 @@ class NewFolderModal extends React.Component {
 }
 
 NewFolderModal.propTypes = {
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function validate(formProps) {
   const errors = {};
   if (!formProps.name) {
-    errors.name = 'Please enter a name';
+    errors.name = i18n.t('NewFolderModal.EnterName');
   } else if (formProps.name.trim().length === 0) {
-    errors.name = 'Folder name cannot contain only spaces';
+    errors.name = i18n.t('NewFolderModal.EmptyName');
   } else if (formProps.name.match(/\.+/i)) {
-    errors.name = 'Folder name cannot contain an extension';
+    errors.name = i18n.t('NewFolderModal.InvalidExtension');
   }
 
   return errors;
 }
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'new-folder',
   fields: ['name'],
   validate
-})(NewFolderModal);
+})(NewFolderModal));

client/modules/IDE/components/SketchList.jsx

@@ -293,8 +293,8 @@ class SketchListRowBase extends React.Component {
           <th scope="row">
             {name}
           </th>
-          <td>{formatDateCell(sketch.createdAt, mobile)}</td>
-          <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
+          <td>{mobile && 'Created: '}{formatDateCell(sketch.createdAt, mobile)}</td>
+          <td>{mobile && 'Updated: '}{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
         </tr>
       </React.Fragment>);