✨ make console-expanding button on bottom bar

Author: ghalestrilo

client/components/mobile/ActionStrip.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { bindActionCreators } from 'redux';
+import { useDispatch } from 'react-redux';
+import { prop, remSize } from '../../theme';
+import IconButton from './IconButton';
+import { ExitIcon } from '../../common/icons';
+import * as IDEActions from '../../modules/IDE/actions/ide';
+
+const background = prop('MobilePanel.default.background');
+const textColor = prop('primaryTextColor');
+
+const BottomBarContent = styled.h2`
+  padding: ${remSize(12)};
+  
+  svg {
+    max-height: ${remSize(32)};
+    padding: ${remSize(4)}
+  }
+`;
+
+export default () => {
+  const { expandConsole } = bindActionCreators(IDEActions, useDispatch());
+
+  const actions = [{ icon: ExitIcon, aria: 'Say Something', action: expandConsole }];
+
+  return (
+    <BottomBarContent>
+      {actions.map(({ icon, aria, action }) =>
+        (<IconButton
+          icon={icon}
+          aria-label={aria}
+          key={`bottom-bar-${aria}`}
+          onClick={() => action()}
+        />))}
+    </BottomBarContent>
+  );
+};

client/components/mobile/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { prop } from '../../theme';
+import { prop, grays } from '../../theme';
 
 
 const background = prop('MobilePanel.default.background');
@@ -12,4 +12,6 @@ export default styled.div`
   bottom: 0;
   background: ${background};
   color: ${textColor};
+
+  & > * + * { border-top: dashed 1px ${prop('Separator')} }
 `;

client/modules/IDE/pages/MobileIDEView.jsx

@@ -28,12 +28,13 @@ import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
 import Console from '../components/Console';
 import { remSize } from '../../../theme';
+import ActionStrip from '../../../components/mobile/ActionStrip';
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
-const BottomBarContent = styled.h2`
-  padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
+
+const Expander = styled.div`
+  height: ${props => (props.expanded ? remSize(160) : remSize(27))};
 `;
 
 const MobileIDEView = (props) => {
@@ -103,8 +104,8 @@ const MobileIDEView = (props) => {
         />
       </IDEWrapper>
       <Footer>
-        <Console />
-        <BottomBarContent>Bottom Bar</BottomBarContent>
+        {ide.consoleIsExpanded && <Expander expanded><Console /></Expander>}
+        <ActionStrip />
       </Footer>
     </Screen>
   );

client/theme.js

@@ -96,7 +96,8 @@ export default {
         background: grays.light,
         border: grays.middleLight,
       },
-    }
+    },
+    Separator: grays.middleLight,
   },
   [Theme.dark]: {
     colors,
@@ -136,7 +137,8 @@ export default {
         background: grays.dark,
         border: grays.middleDark,
       },
-    }
+    },
+    Separator: grays.middleDark,
   },
   [Theme.contrast]: {
     colors,
@@ -176,6 +178,7 @@ export default {
         background: grays.dark,
         border: grays.middleDark,
       },
-    }
+    },
+    Separator: grays.middleDark,
   },
 };