🔀 merge from develop

Author: ghalestrilo

client/components/Dropdown.jsx

@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
     background-color: ${prop('Button.hover.background')};
     color: ${prop('Button.hover.foreground')};
 
-    & button, & a {
-      color: ${prop('Button.hover.foreground')};
-    }
+    * { color: ${prop('Button.hover.foreground')}; }
   }
 
   li {
@@ -48,12 +46,21 @@ const DropdownWrapper = styled.ul`
     align-items: center;
 
     & button,
+    & button span,
     & a {
+      padding: ${remSize(8)} ${remSize(16)};
+    }
+
+    * {
+      text-align: left;
+      justify-content: left;
+
       color: ${prop('primaryTextColor')};
       width: 100%;
-      text-align: left;
-      padding: ${remSize(8)} ${remSize(16)};
+      justify-content: flex-start;
     }
+
+    & button span { padding: 0px }
   }
 `;
 
@@ -63,24 +70,29 @@ const DropdownWrapper = styled.ul`
 const Dropdown = ({ items, align }) => (
   <DropdownWrapper align={align} >
     {/* className="nav__items-left" */}
-    {items && items.map(({ title, icon, href }) => (
+    {items && items.map(({
+      title, icon, href, action
+    }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
-        <Link to={href}>
-          {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
-          {title}
-        </Link>
+        {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
+        {href
+          ? <IconButton to={href}>{title}</IconButton>
+          : <IconButton onClick={() => action()}>{title}</IconButton>}
+
       </li>
     ))
     }
   </DropdownWrapper>
 );
 
+
 Dropdown.propTypes = {
   align: PropTypes.oneOf(['left', 'right']),
   items: PropTypes.arrayOf(PropTypes.shape({
     action: PropTypes.func,
     icon: PropTypes.func,
-    href: PropTypes.string
+    href: PropTypes.string,
+    title: PropTypes.string
   })),
 };
 

client/components/mobile/IconButton.jsx

@@ -17,15 +17,19 @@ const IconButton = (props) => {
   const Icon = icon;
 
   return (<ButtonWrapper
-    iconBefore={<Icon />}
+    iconBefore={icon && <Icon />}
     kind={Button.kinds.inline}
     focusable="false"
     {...otherProps}
   />);
 };
 
 IconButton.propTypes = {
-  icon: PropTypes.func.isRequired
+  icon: PropTypes.func
+};
+
+IconButton.defaultProps = {
+  icon: null
 };
 
 export default IconButton;

client/constants.js

@@ -62,6 +62,7 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
 export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
 export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
+export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
 export const DELETE_FILE = 'DELETE_FILE';

client/jest.setup.js

@@ -3,3 +3,21 @@ import '@babel/polyfill';
 // See: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
+
+import lodash from 'lodash';
+
+// For testing, we use en-US and provide a mock implementation
+// of t() that finds the correct translation
+import translations from '../translations/locales/en-US/translations.json';
+
+// This function name needs to be prefixed with "mock" so that Jest doesn't
+// complain that it's out-of-scope in the mock below
+const mockTranslate = key => lodash.get(translations, key);
+
+jest.mock('react-i18next', () => ({
+  // this mock makes sure any components using the translate HoC receive the t function as a prop
+  withTranslation: () => (Component) => {
+    Component.defaultProps = { ...Component.defaultProps, t: mockTranslate };
+    return Component;
+  },
+}));

client/modules/App/components/Overlay.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { browserHistory } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import ExitIcon from '../../../images/exit.svg';
 
@@ -80,7 +81,7 @@ class Overlay extends React.Component {
               <h2 className="overlay__title">{title}</h2>
               <div className="overlay__actions">
                 {actions}
-                <button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
+                <button className="overlay__close-button" onClick={this.close} aria-label={this.props.t('Overlay.AriaLabel', { title })}>
                   <ExitIcon focusable="false" aria-hidden="true" />
                 </button>
               </div>
@@ -101,6 +102,7 @@ Overlay.propTypes = {
   ariaLabel: PropTypes.string,
   previousPath: PropTypes.string,
   isFixedHeight: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 Overlay.defaultProps = {
@@ -113,4 +115,4 @@ Overlay.defaultProps = {
   isFixedHeight: false,
 };
 
-export default Overlay;
+export default withTranslation()(Overlay);

client/modules/IDE/actions/editorAccessibility.js

@@ -14,3 +14,9 @@ export function clearLintMessage() {
     type: ActionTypes.CLEAR_LINT_MESSAGE
   };
 }
+
+export function toggleForceDesktop() {
+  return {
+    type: ActionTypes.TOGGLE_FORCE_DESKTOP
+  };
+}

client/modules/IDE/components/AddToCollectionList.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
@@ -14,7 +15,7 @@ import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
 
 const projectInCollection = (project, collection) =>
-  collection.items.find(item => item.project.id === project.id) != null;
+  collection.items.find(item => item.projectId === project.id) != null;
 
 class CollectionList extends React.Component {
   constructor(props) {
@@ -42,9 +43,9 @@ class CollectionList extends React.Component {
 
   getTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My collections';
+      return this.props.t('AddToCollectionList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s collections`;
+    return this.props.t('AddToCollectionList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   handleCollectionAdd = (collection) => {
@@ -74,19 +75,22 @@ class CollectionList extends React.Component {
           items={collectionWithSketchStatus}
           onAdd={this.handleCollectionAdd}
           onRemove={this.handleCollectionRemove}
+          t={this.props.t}
         />
       );
     } else {
-      content = 'No collections';
+      content = this.props.t('AddToCollectionList.Empty');
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getTitle()}</title>
-        </Helmet>
-
-        {content}
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getTitle()}</title>
+          </Helmet>
+
+          {content}
+        </div>
       </div>
     );
   }
@@ -133,7 +137,8 @@ CollectionList.propTypes = {
     owner: PropTypes.shape({
       id: PropTypes.string
     })
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 CollectionList.defaultProps = {
@@ -162,4 +167,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 // import find from 'lodash/find';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
@@ -32,9 +33,9 @@ class SketchList extends React.Component {
 
   getSketchesTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My sketches';
+      return this.props.t('AddToCollectionSketchList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s sketches`;
+    return this.props.t('AddToCollectionSketchList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   handleCollectionAdd = (sketch) => {
@@ -68,15 +69,17 @@ class SketchList extends React.Component {
         />
       );
     } else {
-      content = 'No collections';
+      content = this.props.t('AddToCollectionSketchList.NoCollections');
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getSketchesTitle()}</title>
-        </Helmet>
-        {content}
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getSketchesTitle()}</title>
+          </Helmet>
+          {content}
+        </div>
       </div>
     );
   }
@@ -111,6 +114,7 @@ SketchList.propTypes = {
   }).isRequired,
   addToCollection: PropTypes.func.isRequired,
   removeFromCollection: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 SketchList.defaultProps = {
@@ -134,4 +138,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(SketchList));