✨ add floating button to open files tab

Author: ghalestrilo

client/common/icons.jsx

@@ -16,6 +16,10 @@ import More from '../images/more.svg';
 import Code from '../images/code.svg';
 import Terminal from '../images/terminal.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 +85,7 @@ export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
+
+export const CircleTerminalIcon = withLabel(CircleTerminal);
+export const CircleFolderIcon = withLabel(CircleFolder);
+export const CircleInfoIcon = withLabel(CircleInfo);

client/components/mobile/FloatingNav.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
+import Button from '../../common/Button';
+import IconButton from './IconButton';
+
+const FloatingContainer = styled.div`
+  position: absolute;
+  right: ${remSize(16)};
+  top: ${remSize(80)};
+
+  text-align: right;
+  z-index: 3;
+`;
+
+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/images/circle-folder.svg

@@ -34,7 +34,9 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        <div style={{ display: 'none' }}>
+          {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        </div>
         {this.props.children}
       </div>
     );

client/images/circle-info.svg

@@ -20,7 +20,7 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { PlayIcon, MoreIcon } from '../../../common/icons';
+import { PlayIcon, MoreIcon, CircleFolderIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -30,12 +30,12 @@ import IDEWrapper from '../../../components/mobile/IDEWrapper';
 import MobileExplorer from '../../../components/mobile/Explorer';
 import Console from '../components/Console';
 import { remSize } from '../../../theme';
-// import OverlayManager from '../../../components/OverlayManager';
+
 import ActionStrip from '../../../components/mobile/ActionStrip';
 import useAsModal from '../../../components/useAsModal';
 import { PreferencesIcon } from '../../../common/icons';
 import Dropdown from '../../../components/Dropdown';
-import Sidebar from '../../../components/mobile/Sidebar';
+import FloatingNav from '../../../components/mobile/FloatingNav';
 
 
 const getRootFile = files => files && files.filter(file => file.name === 'root')[0];
@@ -65,7 +65,7 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const getNatOptions = (username = undefined) =>
+const getNavOptions = (username = undefined) =>
   (username
     ? [
       { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
@@ -112,14 +112,18 @@ const MobileIDEView = (props) => {
 
   // Screen Modals
   const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={getNatOptions(username)}
+    items={getNavOptions(username)}
     align="right"
   />);
 
+
   const [toggleExplorer, Explorer] = useAsModal(<MobileExplorer id={getRootFileID(files)} canEdit={false} />, true);
 
   // toggle sidebar starting opened
-  useEffect(toggleExplorer, []);
+  // useEffect(toggleExplorer, []);
+
+  const floatingNavOptions =
+    [{ icon: CircleFolderIcon, onPress: toggleExplorer }];
 
   return (
     <Screen fullscreen>
@@ -129,11 +133,6 @@ const MobileIDEView = (props) => {
         subtitle={selectedFile.name}
       >
         <NavItem>
-          <IconButton
-            onClick={toggleExplorer}
-            icon={MoreIcon}
-            aria-label="Options"
-          />
           <IconButton
             onClick={toggleNavDropdown}
             icon={MoreIcon}
@@ -180,6 +179,7 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
           setUnsavedChanges={setUnsavedChanges}
         />
+        <FloatingNav items={floatingNavOptions} />
       </IDEWrapper>
 
       <Footer>