make console-expanding button on bottom bar

This commit is contained in:
ghalestrilo 2020-07-21 12:14:58 -03:00
parent 604add5b03
commit 4ac8fa0f34
4 changed files with 53 additions and 9 deletions

View file

@ -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>
);
};

View file

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

View file

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

View file

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