Merge pull request #2 from processing/develop

updating the fork

Author: neelesh7singh

client/common/icons.jsx

@@ -14,6 +14,7 @@ import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
 import More from '../images/more.svg';
 import Code from '../images/code.svg';
+import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
 
 import Folder from '../images/folder-padded.svg';
@@ -87,6 +88,7 @@ export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
+export const SaveIcon = withLabel(Save);
 
 export const FolderIcon = withLabel(Folder);
 

client/components/AddRemoveButton.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
 
 import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
-const AddRemoveButton = ({ type, onClick }) => {
-  const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
+const AddRemoveButton = ({ type, onClick, t }) => {
+  const alt = type === 'add' ? t('AddRemoveButton.AltAddARIA') : t('AddRemoveButton.AltRemoveARIA');
   const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (
@@ -22,6 +24,7 @@ const AddRemoveButton = ({ type, onClick }) => {
 AddRemoveButton.propTypes = {
   type: PropTypes.oneOf(['add', 'remove']).isRequired,
   onClick: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default AddRemoveButton;
+export default withTranslation()(AddRemoveButton);

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/Nav.jsx

@@ -5,7 +5,7 @@ import { withRouter } from 'react-router';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import i18next from 'i18next';
+import { languageKeyToLabel } from '../i18n';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
 import * as projectActions from '../modules/IDE/actions/project';
@@ -549,7 +549,7 @@ class Nav extends React.PureComponent {
 
   renderLanguageMenu(navDropdownState) {
     return (
-      <ul className="nav__items-right" title="user-menu">
+      <React.Fragment>
         <li className={navDropdownState.lang}>
           <button
             onClick={this.toggleDropdownForLang}
@@ -561,21 +561,11 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
+            <span className="nav__item-header"> {languageKeyToLabel(this.props.language)}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
 
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="it"
-                onClick={e => this.handleLangSelection(e)}
-              >
-                Italian (Test Fallback)
-              </button>
-            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}
@@ -597,14 +587,15 @@ class Nav extends React.PureComponent {
             </li>
           </ul>
         </li>
-      </ul>
+      </React.Fragment>
     );
   }
 
 
   renderUnauthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
             <span className="nav__item-header">{this.props.t('Nav.Login')}</span>
@@ -623,10 +614,7 @@ class Nav extends React.PureComponent {
   renderAuthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
-        <li className="nav__item">
-          <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
-        </li>
-        <span className="nav__item-spacer">|</span>
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className={navDropdownState.account}>
           <button
             className="nav__item-header"
@@ -639,7 +627,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            {this.props.t('Nav.Auth.MyAccount')}
+            <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -755,7 +743,6 @@ class Nav extends React.PureComponent {
       <header>
         <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
           {this.renderLeftLayout(navDropdownState)}
-          {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
           {this.renderUserMenu(navDropdownState)}
         </nav>
       </header>
@@ -809,6 +796,7 @@ Nav.propTypes = {
   }),
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
 };
 
 Nav.defaultProps = {
@@ -829,7 +817,8 @@ function mapStateToProps(state) {
     project: state.project,
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
-    rootFile: state.files.filter(file => file.name === 'root')[0]
+    rootFile: state.files.filter(file => file.name === 'root')[0],
+    language: state.preferences.language
   };
 }
 

client/components/NavBasic.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import ArrowIcon from '../images/triangle-arrow-left.svg';
@@ -14,7 +15,7 @@ class NavBasic extends React.PureComponent {
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
         <ul className="nav__items-left">
           <li className="nav__item-logo">
-            <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+            <LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
           </li>
           { this.props.onBack && (
             <li className="nav__item">
@@ -34,6 +35,7 @@ class NavBasic extends React.PureComponent {
 
 NavBasic.propTypes = {
   onBack: PropTypes.func,
+  t: PropTypes.func.isRequired
 };
 
-export default NavBasic;
+export default withTranslation()(NavBasic);

client/components/PreviewNav.jsx

@@ -1,22 +1,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project }) => (
+const PreviewNav = ({ owner, project, t }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+        <LogoIcon role="img" aria-label={t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
-      <p className="toolbar__project-owner">by</p>
+      <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
       <Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
     </div>
     <div className="nav__items-right">
-      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
+      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label={t('PreviewNav.EditSketchARIA')} >
         <CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
       </Link>
     </div>
@@ -31,6 +32,7 @@ PreviewNav.propTypes = {
     name: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
   }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default PreviewNav;
+export default withTranslation()(PreviewNav);

client/components/__test__/Nav.test.jsx

@@ -46,7 +46,8 @@ describe('Nav', () => {
       id: 'root-file'
     },
     t: jest.fn(),
-    setLanguage: jest.fn()
+    setLanguage: jest.fn(),
+    language: 'en-US'
   };
 
   it('renders correctly', () => {

client/components/mobile/ActionStrip.jsx

@@ -1,20 +1,16 @@
 import React from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 import { remSize, prop } from '../../theme';
 import IconButton from './IconButton';
-import { TerminalIcon, FolderIcon } from '../../common/icons';
-import * as IDEActions from '../../modules/IDE/actions/ide';
 
 const BottomBarContent = styled.div`
   padding: ${remSize(8)};
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(8,1fr);
 
   svg {
     max-height: ${remSize(32)};
-
   }
 
   path { fill: ${prop('primaryTextColor')} !important }
@@ -25,42 +21,28 @@ const BottomBarContent = styled.div`
   }
 `;
 
-// Maybe this component shouldn't be connected, and instead just receive the `actions` prop
-const ActionStrip = ({ toggleExplorer }) => {
-  const { expandConsole, collapseConsole } = bindActionCreators(IDEActions, useDispatch());
-  const { consoleIsExpanded } = useSelector(state => state.ide);
-
-  const actions = [
-    {
-      icon: TerminalIcon, inverted: true, aria: 'Open terminal console', action: consoleIsExpanded ? collapseConsole : expandConsole
-    },
-    { icon: FolderIcon, aria: 'Open files explorer', action: toggleExplorer }
-  ];
-
-  return (
-    <BottomBarContent>
-      {actions.map(({
-        icon, aria, action, inverted
-      }) =>
-        (
-          <IconButton
-            inverted={inverted}
-            className={inverted && 'inverted'}
-            icon={icon}
-            aria-label={aria}
-            key={`bottom-bar-${aria}`}
-            onClick={() => action()}
-          />))}
-    </BottomBarContent>
-  );
-};
+const ActionStrip = ({ actions }) => (
+  <BottomBarContent>
+    {actions.map(({
+      icon, aria, action, inverted
+    }) =>
+      (<IconButton
+        inverted={inverted}
+        className={inverted && 'inverted'}
+        icon={icon}
+        aria-label={aria}
+        key={`bottom-bar-${aria}`}
+        onClick={action}
+      />))}
+  </BottomBarContent>);
 
 ActionStrip.propTypes = {
-  toggleExplorer: PropTypes.func
-};
-
-ActionStrip.defaultProps = {
-  toggleExplorer: () => {}
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.any,
+    aria: PropTypes.string.isRequired,
+    action: PropTypes.func.isRequired,
+    inverted: PropTypes.bool
+  })).isRequired
 };
 
 export default ActionStrip;

client/components/mobile/Header.jsx

@@ -35,6 +35,12 @@ const HeaderDiv = styled.div`
   }
 
   & svg path { fill: ${textColor} !important; }
+
+  .editor__unsaved-changes svg {
+    width: ${remSize(16)};
+    padding: 0;
+    vertical-align: top
+  }
 `;
 
 const IconContainer = styled.div`
@@ -71,8 +77,9 @@ const Header = ({
   </HeaderDiv>
 );
 
+
 Header.propTypes = {
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   subtitle: PropTypes.string,
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),