r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

🚧 split components into files

Browse source
This commit is contained in:
ghalestrilo 2020-06-16 17:38:43 -03:00
parent bdedc63110
commit 0877d39a65
5 changed files with 79 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client/components/mobile/Footer.jsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
import styled from 'styled-components';
import { prop, remSize } from '../../theme';
const background = prop('Button.default.background');
const textColor = prop('primaryTextColor');
const Footer = styled.div`
position: fixed;
width: 100%;
background: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
z-index: 1;
bottom: 0;
`;
export default Footer;

25
client/components/mobile/Header.jsx Normal file
View file

@ -0,0 +1,25 @@
import React from 'react';
import styled from 'styled-components';
import { prop, remSize } from '../../theme';
const background = prop('Button.default.background');
const textColor = prop('primaryTextColor');
const Header = styled.div`
position: fixed;
width: 100%;
background: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
padding-right: ${remSize(32)};
z-index: 1;
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-start;
align-items: center;
`;
export default Header;

17
client/components/mobile/IconButton.jsx Normal file
View file

@ -0,0 +1,17 @@
import React from 'react';
import styled from 'styled-components';
import { prop, remSize } from '../../theme';
const textColor = prop('primaryTextColor');
const IconButton = styled.button`
width: 3rem;
> svg {
width: 100%;
height: auto;
fill: ${textColor};
stroke: ${textColor};
}
`;
export default IconButton;

13
client/components/mobile/MobileScreen.jsx Normal file
View file

@ -0,0 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
const Screen = ({ children }) => (
<div className="fullscreen-preview">
{children}
</div>
);
Screen.propTypes = {
children: PropTypes.node.isRequired
};
export default Screen;

50
client/modules/IDE/pages/IDEViewMobile.jsx
View file

@ -26,61 +26,19 @@ import { CloseIcon } from '../../../common/Icons';
import PreferencesIcon from '../../../images/preferences.svg'; import PreferencesIcon from '../../../images/preferences.svg';
import PlayIcon from '../../../images/triangle-arrow-right.svg'; import PlayIcon from '../../../images/triangle-arrow-right.svg';
import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header';
import Screen from '../../../components/mobile/MobileScreen';
import Footer from '../../../components/mobile/Footer';
const background = prop('Button.default.background'); const background = prop('Button.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const Header = styled.div`
position: fixed;
width: 100%;
background: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
padding-right: ${remSize(32)};
z-index: 1;
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-start;
align-items: center;
`;
const Footer = styled.div`
position: fixed;
width: 100%;
background: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
z-index: 1;
bottom: 0;
`;
const Content = styled.div` const Content = styled.div`
z-index: 0; z-index: 0;
margin-top: ${remSize(16)}; margin-top: ${remSize(16)};
`; `;
const IconButton = styled.button`
width: 3rem;
> svg {
width: 100%;
height: auto;
}
`;
const Screen = ({ children }) => (
<div className="fullscreen-preview">
{children}
</div>
);
Screen.propTypes = {
children: PropTypes.node.isRequired
};
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);