Merge pull request #1539 from ghalestrilo/feature/mobile-files-tab

Implement Mobile version of Files tab / sidebar

Author: ghalestrilo

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/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

@@ -14,7 +14,7 @@ const textColor = ({ transparent, inverted }) => prop((transparent === false &&
 
 
 const HeaderDiv = styled.div`
-  position: fixed;
+  ${props => props.fixed && 'position: fixed;'}
   width: 100%;
   background: ${props => background(props)};
   color: ${textColor};
@@ -57,9 +57,9 @@ const TitleContainer = styled.div`
 
 const Header = ({
   title, subtitle, leftButton, children,
-  transparent, inverted, slim
+  transparent, inverted, slim, fixed
 }) => (
-  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted}>
+  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted} fixed={fixed}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -79,6 +79,7 @@ Header.propTypes = {
   transparent: PropTypes.bool,
   inverted: PropTypes.bool,
   slim: PropTypes.bool,
+  fixed: PropTypes.bool,
 };
 
 Header.defaultProps = {
@@ -88,7 +89,8 @@ Header.defaultProps = {
   children: [],
   transparent: false,
   inverted: false,
-  slim: 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;

client/components/useAsModal.jsx

@@ -1,10 +1,29 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useModalBehavior } from '../utils/custom-hooks';
 
-export default (component) => {
-  const [visible, trigger, setRef] = useModalBehavior();
+const BackgroundOverlay = styled.div`
+  position: fixed;
+  z-index: 2;
+  width: 100% !important;
+  height: 100% !important;
+  
+  background: black;
+  opacity: 0.3;
+`;
 
-  const wrapper = () => <div ref={setRef}> {visible && component} </div>; // eslint-disable-line
+export default (Element, hasOverlay = false) => {
+  const [visible, toggle, setRef] = useModalBehavior();
 
-  return [trigger, wrapper];
+  const wrapper = () => (visible &&
+    <div>
+      {hasOverlay && <BackgroundOverlay />}
+      <div ref={setRef}>
+        { (typeof (Element) === 'function')
+          ? Element(toggle)
+          : Element}
+      </div>
+    </div>);
+
+  return [toggle, wrapper];
 };