Merge pull request #1 from processing/develop

Update from original

Author: neelesh7singh

.env.example

@@ -26,3 +26,4 @@ S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
 UI_ACCESS_TOKEN_ENABLED=false
 UPLOAD_LIMIT=250000000
+MOBILE_ENABLED=true

client/common/icons.jsx

@@ -16,6 +16,12 @@ import More from '../images/more.svg';
 import Code from '../images/code.svg';
 import Terminal from '../images/terminal.svg';
 
+import Folder from '../images/folder-padded.svg';
+
+import CircleTerminal from '../images/circle-terminal.svg';
+import CircleFolder from '../images/circle-folder.svg';
+import CircleInfo from '../images/circle-info.svg';
+
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -81,3 +87,9 @@ export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
+
+export const FolderIcon = withLabel(Folder);
+
+export const CircleTerminalIcon = withLabel(CircleTerminal);
+export const CircleFolderIcon = withLabel(CircleFolder);
+export const CircleInfoIcon = withLabel(CircleInfo);

client/components/Dropdown.jsx

@@ -25,7 +25,7 @@ const DropdownWrapper = styled.ul`
   display: flex;
   flex-direction: column;
   height: auto;
-  z-index: 9999;
+  z-index: 2;
   border-radius: ${remSize(6)};
 
   & li:first-child { border-radius: ${remSize(5)} ${remSize(5)} 0 0; }

client/components/Nav.jsx

@@ -9,7 +9,7 @@ import i18next from 'i18next';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
 import * as projectActions from '../modules/IDE/actions/project';
-import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
+import { setAllAccessibleOutput, setLanguage } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
@@ -72,7 +72,6 @@ class Nav extends React.PureComponent {
     document.removeEventListener('mousedown', this.handleClick, false);
     document.removeEventListener('keydown', this.closeDropDown, false);
   }
-
   setDropdown(dropdown) {
     this.setState({
       dropdownOpen: dropdown
@@ -170,7 +169,7 @@ class Nav extends React.PureComponent {
   }
 
   handleLangSelection(event) {
-    i18next.changeLanguage(event.target.value);
+    this.props.setLanguage(event.target.value);
     this.props.showToast(1500);
     this.props.setToastText('Toast.LangChange');
     this.setDropdown('none');
@@ -608,13 +607,13 @@ class Nav extends React.PureComponent {
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('Nav.Login.Login')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Login')}</span>
           </Link>
         </li>
-        <span className="nav__item-or">{this.props.t('Nav.Login.LoginOr')}</span>
+        <span className="nav__item-or">{this.props.t('Nav.LoginOr')}</span>
         <li className="nav__item">
           <Link to="/signup" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('Nav.Login.SignUp')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.SignUp')}</span>
           </Link>
         </li>
       </ul>
@@ -808,8 +807,8 @@ Nav.propTypes = {
   params: PropTypes.shape({
     username: PropTypes.string
   }),
-  t: PropTypes.func.isRequired
-
+  t: PropTypes.func.isRequired,
+  setLanguage: PropTypes.func.isRequired,
 };
 
 Nav.defaultProps = {
@@ -839,7 +838,8 @@ const mapDispatchToProps = {
   ...projectActions,
   ...toastActions,
   logoutUser,
-  setAllAccessibleOutput
+  setAllAccessibleOutput,
+  setLanguage
 };
 
 export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));

client/components/__test__/Nav.test.jsx

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

client/components/mobile/ActionStrip.jsx

@@ -1,35 +1,66 @@
 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 { remSize } from '../../theme';
+import { remSize, prop } from '../../theme';
 import IconButton from './IconButton';
-import { TerminalIcon } from '../../common/icons';
+import { TerminalIcon, FolderIcon } from '../../common/icons';
 import * as IDEActions from '../../modules/IDE/actions/ide';
 
-const BottomBarContent = styled.h2`
+const BottomBarContent = styled.div`
   padding: ${remSize(8)};
-  
+  display: flex;
+
   svg {
     max-height: ${remSize(32)};
+
+  }
+
+  path { fill: ${prop('primaryTextColor')} !important }
+
+  .inverted {
+    path { fill: ${prop('backgroundColor')} !important }
+    rect { fill: ${prop('primaryTextColor')} !important }
   }
 `;
 
-export default () => {
+// 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, aria: 'Say Something', action: consoleIsExpanded ? collapseConsole : expandConsole }];
+  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 }) =>
-        (<IconButton
-          icon={icon}
-          aria-label={aria}
-          key={`bottom-bar-${aria}`}
-          onClick={() => action()}
-        />))}
+      {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: () => {}
+};
+
+export default ActionStrip;

client/components/mobile/Explorer.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Sidebar from './Sidebar';
+import ConnectedFileNode from '../../modules/IDE/components/FileNode';
+
+
+const Explorer = ({ id, canEdit, onPressClose }) => (
+  <Sidebar title="Files" onPressClose={onPressClose}>
+    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
+  </Sidebar>
+);
+
+Explorer.propTypes = {
+  id: PropTypes.number.isRequired,
+  onPressClose: PropTypes.func,
+  canEdit: PropTypes.bool
+};
+Explorer.defaultProps = {
+  canEdit: false,
+  onPressClose: () => {}
+};
+
+export default Explorer;

client/components/mobile/FloatingNav.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize, prop } from '../../theme';
+import Button from '../../common/Button';
+import IconButton from './IconButton';
+
+const FloatingContainer = styled.div`
+  position: fixed;
+  right: ${remSize(16)};
+  top: ${remSize(80)};
+
+  text-align: right;
+  z-index: 3;
+
+  svg { width: ${remSize(32)}; };
+  svg > path { fill: ${prop('Button.default.background')} !important };
+`;
+
+const FloatingNav = ({ items }) => (
+  <FloatingContainer>
+    { items.map(({ icon, onPress }) =>
+      (
+        <IconButton
+          onClick={onPress}
+          icon={icon}
+        />
+      ))}
+  </FloatingContainer>
+);
+
+FloatingNav.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.element,
+    onPress: PropTypes.func
+  }))
+};
+
+FloatingNav.defaultProps = {
+  items: []
+};
+
+export default FloatingNav;

client/components/mobile/Header.jsx

@@ -3,16 +3,22 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
-const background = transparent => prop(transparent ? 'backgroundColor' : 'MobilePanel.default.background');
-const textColor = prop('primaryTextColor');
+
+const background = ({ transparent, inverted }) => prop(transparent === true
+  ? 'backgroundColor'
+  : `MobilePanel.default.${inverted === true ? 'foreground' : 'background'}`);
+
+const textColor = ({ transparent, inverted }) => prop((transparent === false && inverted === true)
+  ? 'MobilePanel.default.background'
+  : 'primaryTextColor');
 
 
 const HeaderDiv = styled.div`
-  position: fixed;
+  ${props => props.fixed && 'position: fixed;'}
   width: 100%;
-  background: ${props => background(props.transparent === true)};
+  background: ${props => background(props)};
   color: ${textColor};
-  padding: ${remSize(12)};
+  padding: ${props => remSize(props.slim === true ? 2 : 12)};
   padding-left: ${remSize(16)};
   padding-right: ${remSize(16)};
   z-index: 1;
@@ -25,8 +31,10 @@ const HeaderDiv = styled.div`
 
   svg {
     max-height: ${remSize(32)};
-    padding: ${remSize(4)}
+    padding: ${remSize(4)};
   }
+
+  & svg path { fill: ${textColor} !important; }
 `;
 
 const IconContainer = styled.div`
@@ -48,9 +56,10 @@ const TitleContainer = styled.div`
 `;
 
 const Header = ({
-  title, subtitle, leftButton, children, transparent
+  title, subtitle, leftButton, children,
+  transparent, inverted, slim, fixed
 }) => (
-  <HeaderDiv transparent={transparent}>
+  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted} fixed={fixed}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -67,15 +76,21 @@ Header.propTypes = {
   subtitle: PropTypes.string,
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
-  transparent: PropTypes.bool
+  transparent: PropTypes.bool,
+  inverted: PropTypes.bool,
+  slim: PropTypes.bool,
+  fixed: PropTypes.bool,
 };
 
 Header.defaultProps = {
   title: null,
   subtitle: null,
   leftButton: null,
   children: [],
-  transparent: false
+  transparent: false,
+  inverted: false,
+  slim: false,
+  fixed: true
 };
 
 export default Header;

client/components/mobile/IDEWrapper.jsx

@@ -2,7 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { remSize } from '../../theme';
 
+// Applies padding to top and bottom so editor content is always visible
+
 export default styled.div`
   z-index: 0;
   margin-top: ${remSize(16)};
+  .CodeMirror-sizer > * { padding-bottom: ${remSize(320)}; };
 `;

client/components/mobile/Sidebar.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router';
+import styled from 'styled-components';
+import { remSize, prop, common } from '../../theme';
+import Header from './Header';
+import IconButton from './IconButton';
+import { ExitIcon } from '../../common/icons';
+
+
+const SidebarWrapper = styled.div`
+  height: 100%;
+  width: ${remSize(180)};
+
+  position: fixed;
+  z-index: 2;
+  left: 0;
+
+  background: white;
+  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
+`;
+
+const Sidebar = ({ title, onPressClose, children }) => (
+  <SidebarWrapper>
+    {title &&
+    <Header slim title={title} fixed={false}>
+      <IconButton onClick={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
+    </Header>}
+    {children}
+  </SidebarWrapper>
+);
+
+Sidebar.propTypes = {
+  title: PropTypes.string,
+  onPressClose: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+};
+
+Sidebar.defaultProps = {
+  title: null,
+  children: [],
+  onPressClose: () => {}
+};
+
+
+export default Sidebar;