Merge branch 'feature/error-output' into chore/refactor-mobile-hooks

This commit is contained in:
ghalestrilo 2020-07-20 18:53:17 -03:00
commit 928595cb27
2 changed files with 10 additions and 31 deletions

View file

@ -1,42 +1,15 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import PropTypes from 'prop-types'; import { prop } from '../../theme';
import { prop, remSize } from '../../theme';
const background = prop('MobilePanel.default.background'); const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const FooterWrapper = styled.div` export default styled.div`
position: fixed; position: fixed;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
`;
const FooterContent = styled.div`
background: ${background}; background: ${background};
color: ${textColor}; color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
`; `;
const Footer = ({ before, children }) => (
<FooterWrapper>
{before}
<FooterContent>
{children}
</FooterContent>
</FooterWrapper>
);
Footer.propTypes = {
before: PropTypes.element,
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
};
Footer.defaultProps = {
before: <></>,
children: <></>
};
export default Footer;

View file

@ -31,6 +31,11 @@ import { remSize } from '../../../theme';
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)};
padding-left: ${remSize(32)};
`;
const MobileIDEView = (props) => { const MobileIDEView = (props) => {
const { const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@ -97,8 +102,9 @@ const MobileIDEView = (props) => {
provideController={setTmController} provideController={setTmController}
/> />
</IDEWrapper> </IDEWrapper>
<Footer before={<Console />} > <Footer>
<h2>Bottom Bar</h2> <Console />
<BottomBarContent>Bottom Bar</BottomBarContent>
</Footer> </Footer>
</Screen> </Screen>
); );