From 4ac8fa0f34ed2a79f0b5a17d3cb4622f79f63e39 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 21 Jul 2020 12:14:58 -0300
Subject: [PATCH] :sparkles: make console-expanding button on bottom bar

---
 client/components/mobile/ActionStrip.jsx   | 38 ++++++++++++++++++++++
 client/components/mobile/Footer.jsx        |  4 ++-
 client/modules/IDE/pages/MobileIDEView.jsx | 11 ++++---
 client/theme.js                            |  9 +++--
 4 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 client/components/mobile/ActionStrip.jsx

diff --git a/client/components/mobile/ActionStrip.jsx b/client/components/mobile/ActionStrip.jsx
new file mode 100644
index 00000000..27097b64
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
index 25f10c1d..ff19eee1 100644
--- a/client/components/mobile/Footer.jsx
+++ b/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')} }
 `;
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 943c980e..43851092 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/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>
   );
diff --git a/client/theme.js b/client/theme.js
index 4aee2a09..45f2772e 100644
--- a/client/theme.js
+++ b/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,
   },
 };