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

👌 change IconButton structure

Browse source
This commit is contained in:
ghalestrilo 2020-07-01 15:52:23 -03:00
parent a1d6abf00f
commit 3143cc34c7
6 changed files with 10 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/mobile/Footer.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { prop, remSize } from '../../theme'; import { prop, remSize } from '../../theme';
const background = prop('Panel.default.background'); const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const Footer = styled.div` const Footer = styled.div`

2
client/components/mobile/Header.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { prop, remSize } from '../../theme'; import { prop, remSize } from '../../theme';
const background = prop('Panel.default.background'); const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const Header = styled.div` const Header = styled.div`

6
client/components/mobile/IconButton.jsx
View file

@ -12,13 +12,13 @@ width: 3rem;
`; `;
const IconButton = props => (<ButtonWrapper const IconButton = props => (<ButtonWrapper
iconBefore={props.children} iconBefore={props.element}
kind={Button.kinds.inline} kind={Button.kinds.inline}
{...{ ...props, children: null }} {...props}
/>); />);
IconButton.propTypes = { IconButton.propTypes = {
children: PropTypes.element.isRequired element: PropTypes.element.isRequired
}; };
export default IconButton; export default IconButton;

8
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -200,12 +200,6 @@ class PreviewFrame extends React.Component {
this.addLoopProtect(sketchDoc); this.addLoopProtect(sketchDoc);
sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement); sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
if (this.props.forceFullWidth) {
const resizeScript = sketchDoc.createElement('style');
resizeScript.innerHTML = '.p5Canvas { width: 100% !important; height: auto !important }';
sketchDoc.head.appendChild(resizeScript);
}
return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`; return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
} }
@ -390,12 +384,10 @@ PreviewFrame.propTypes = {
cmController: PropTypes.shape({ cmController: PropTypes.shape({
getContent: PropTypes.func getContent: PropTypes.func
}), }),
forceFullWidth: PropTypes.bool
}; };
PreviewFrame.defaultProps = { PreviewFrame.defaultProps = {
fullView: false, fullView: false,
forceFullWidth: false,
cmController: {} cmController: {}
}; };

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

@ -29,16 +29,13 @@ import Header from '../../../components/mobile/Header';
import Screen from '../../../components/mobile/MobileScreen'; import Screen from '../../../components/mobile/MobileScreen';
import Footer from '../../../components/mobile/Footer'; import Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper'; import IDEWrapper from '../../../components/mobile/IDEWrapper';
import { remSize } from '../../../theme';
const IconContainer = styled.div` const IconContainer = styled.div`
marginLeft: 2rem; margin-left: ${remSize(32)};
display: flex; display: flex;
`; `;
const TitleContainer = styled.div`
`;
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
const IDEViewMobile = (props) => { const IDEViewMobile = (props) => {
@ -65,12 +62,8 @@ const IDEViewMobile = (props) => {
</div> </div>
<IconContainer> <IconContainer>
<IconButton onClick={() => setOverlay('preferences')}> <IconButton onClick={() => setOverlay('preferences')} element={<PreferencesIcon focusable="false" aria-hidden="true" />} />
<PreferencesIcon focusable="false" aria-hidden="true" /> <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} element={<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />} />
</IconButton>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
</IconButton>
</IconContainer> </IconContainer>
</Header> </Header>

5
client/modules/Mobile/MobileSketchView.jsx
View file

@ -50,9 +50,7 @@ const MobileSketchView = (props) => {
return ( return (
<Screen> <Screen>
<Header> <Header>
<IconButton to="/mobile" aria-label="Return to original editor"> <IconButton to="/mobile" element={<ExitIcon />} width={12} height={12} aria-label="Return to original editor" />
<ExitIcon viewBox="0 0 16 16" />
</IconButton>
<div style={{ marginLeft: '1rem' }}> <div style={{ marginLeft: '1rem' }}>
<h2>{projectName}</h2> <h2>{projectName}</h2>
<h3><br /></h3> <h3><br /></h3>
@ -67,7 +65,6 @@ const MobileSketchView = (props) => {
content={selectedFile.content} content={selectedFile.content}
isPlaying isPlaying
forceFullWidth
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
previewIsRefreshing={ide.previewIsRefreshing} previewIsRefreshing={ide.previewIsRefreshing}