🔀 pull from feature/mobile-files-tab

Author: ghalestrilo

client/common/icons.jsx

@@ -17,6 +17,12 @@ 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';
+
+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
@@ -83,3 +89,9 @@ 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);
+
+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,23 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { remSize } from '../../theme';
+import { remSize, prop } from '../../theme';
 import IconButton from './IconButton';
 
 const BottomBarContent = styled.div`
+  padding: ${remSize(8)};
   display: grid;
   grid-template-columns: repeat(8,1fr);
-  padding: ${remSize(8)};
-  
+
   svg {
     max-height: ${remSize(32)};
   }
+
+  path { fill: ${prop('primaryTextColor')} !important }
+
+  .inverted {
+    path { fill: ${prop('backgroundColor')} !important }
+    rect { fill: ${prop('primaryTextColor')} !important }
+  }
 `;
 
 const ActionStrip = ({ actions }) => (
   <BottomBarContent>
-    {actions.map(({ icon, aria, action }) =>
+    {actions.map(({
+      icon, aria, action, inverted
+    }) =>
       (<IconButton
+        inverted={inverted}
+        className={inverted && 'inverted'}
         icon={icon}
         aria-label={aria}
         key={`bottom-bar-${aria}`}
@@ -29,7 +40,8 @@ ActionStrip.propTypes = {
   actions: PropTypes.arrayOf(PropTypes.shape({
     icon: PropTypes.element.isRequired,
     aria: PropTypes.string.isRequired,
-    action: PropTypes.func.isRequired
+    action: PropTypes.func.isRequired,
+    inverted: PropTypes.bool
   })).isRequired
 };
 

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};
@@ -63,9 +63,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>}
@@ -86,6 +86,7 @@ Header.propTypes = {
   transparent: PropTypes.bool,
   inverted: PropTypes.bool,
   slim: PropTypes.bool,
+  fixed: PropTypes.bool,
 };
 
 Header.defaultProps = {
@@ -95,7 +96,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];
 };