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 { prop, remSize } from '../../theme';
const background = prop('Panel.default.background');
const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor');
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 { prop, remSize } from '../../theme';
const background = prop('Panel.default.background');
const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor');
const Header = styled.div`

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

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

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

@ -200,12 +200,6 @@ class PreviewFrame extends React.Component {
this.addLoopProtect(sketchDoc);
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}`;
}
@ -390,12 +384,10 @@ PreviewFrame.propTypes = {
cmController: PropTypes.shape({
getContent: PropTypes.func
}),
forceFullWidth: PropTypes.bool
};
PreviewFrame.defaultProps = {
fullView: false,
forceFullWidth: false,
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 Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper';
import { remSize } from '../../../theme';
const IconContainer = styled.div`
marginLeft: 2rem;
margin-left: ${remSize(32)};
display: flex;
`;
const TitleContainer = styled.div`
`;
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
const IDEViewMobile = (props) => {
@ -65,12 +62,8 @@ const IDEViewMobile = (props) => {
</div>
<IconContainer>
<IconButton onClick={() => setOverlay('preferences')}>
<PreferencesIcon focusable="false" aria-hidden="true" />
</IconButton>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
</IconButton>
<IconButton onClick={() => setOverlay('preferences')} element={<PreferencesIcon focusable="false" aria-hidden="true" />} />
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} element={<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />} />
</IconContainer>
</Header>

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

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