👌 move files button to bottom bar

Author: ghalestrilo

client/common/icons.jsx

@@ -16,6 +16,8 @@ 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';
@@ -86,6 +88,8 @@ 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/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/images/folder-padded.svg

@@ -35,8 +35,6 @@ import ActionStrip from '../../../components/mobile/ActionStrip';
 import useAsModal from '../../../components/useAsModal';
 import { PreferencesIcon } from '../../../common/icons';
 import Dropdown from '../../../components/Dropdown';
-import FloatingNav from '../../../components/mobile/FloatingNav';
-
 
 const getRootFile = files => files && files.filter(file => file.name === 'root')[0];
 const getRootFileID = files => (root => root && root.id)(getRootFile(files));
@@ -123,12 +121,6 @@ const MobileIDEView = (props) => {
       onPressClose={toggle}
     />), true);
 
-  // toggle sidebar starting opened
-  // useEffect(toggleExplorer, []);
-
-  const floatingNavOptions =
-    [{ icon: CircleFolderIcon, onPress: toggleExplorer }];
-
   return (
     <Screen fullscreen>
       <Explorer />
@@ -183,7 +175,6 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
           setUnsavedChanges={setUnsavedChanges}
         />
-        <FloatingNav items={floatingNavOptions} />
       </IDEWrapper>
 
       <Footer>
@@ -192,7 +183,7 @@ const MobileIDEView = (props) => {
             <Console />
           </Expander>
         )}
-        <ActionStrip />
+        <ActionStrip toggleExplorer={toggleExplorer} />
       </Footer>
     </Screen>
   );