Skip to content

Commit 3143cc3

Browse files
ghalestriloghalestrilo
committed
👌 change IconButton structure
1 parent a1d6abf commit 3143cc3

File tree

6 files changed

+10
-28
lines changed

6 files changed

+10
-28
lines changed

‎client/components/mobile/Footer.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import styled from 'styled-components';
33
import { prop, remSize } from '../../theme';
44

5-
const background = prop('Panel.default.background');
5+
const background = prop('MobilePanel.default.background');
66
const textColor = prop('primaryTextColor');
77

88
const Footer = styled.div`

‎client/components/mobile/Header.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import styled from 'styled-components';
33
import { prop, remSize } from '../../theme';
44

5-
const background = prop('Panel.default.background');
5+
const background = prop('MobilePanel.default.background');
66
const textColor = prop('primaryTextColor');
77

88
const Header = styled.div`

‎client/components/mobile/IconButton.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ width: 3rem;
1212
`;
1313

1414
const IconButton = props => (<ButtonWrapper
15-
iconBefore={props.children}
15+
iconBefore={props.element}
1616
kind={Button.kinds.inline}
17-
{...{ ...props, children: null }}
17+
{...props}
1818
/>);
1919

2020
IconButton.propTypes = {
21-
children: PropTypes.element.isRequired
21+
element: PropTypes.element.isRequired
2222
};
2323

2424
export default IconButton;

‎client/modules/IDE/components/PreviewFrame.jsx

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -200,12 +200,6 @@ class PreviewFrame extends React.Component {
200200
this.addLoopProtect(sketchDoc);
201201
sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
202202

203-
if (this.props.forceFullWidth) {
204-
const resizeScript = sketchDoc.createElement('style');
205-
resizeScript.innerHTML = '.p5Canvas { width: 100% !important; height: auto !important }';
206-
sketchDoc.head.appendChild(resizeScript);
207-
}
208-
209203
return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
210204
}
211205

@@ -390,12 +384,10 @@ PreviewFrame.propTypes = {
390384
cmController: PropTypes.shape({
391385
getContent: PropTypes.func
392386
}),
393-
forceFullWidth: PropTypes.bool
394387
};
395388

396389
PreviewFrame.defaultProps = {
397390
fullView: false,
398-
forceFullWidth: false,
399391
cmController: {}
400392
};
401393

‎client/modules/IDE/pages/IDEViewMobile.jsx

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,13 @@ import Header from '../../../components/mobile/Header';
2929
import Screen from '../../../components/mobile/MobileScreen';
3030
import Footer from '../../../components/mobile/Footer';
3131
import IDEWrapper from '../../../components/mobile/IDEWrapper';
32+
import { remSize } from '../../../theme';
3233

3334
const IconContainer = styled.div`
34-
marginLeft: 2rem;
35+
margin-left: ${remSize(32)};
3536
display: flex;
3637
`;
3738

38-
const TitleContainer = styled.div`
39-
40-
`;
41-
4239
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
4340

4441
const IDEViewMobile = (props) => {
@@ -65,12 +62,8 @@ const IDEViewMobile = (props) => {
6562
</div>
6663

6764
<IconContainer>
68-
<IconButton onClick={() => setOverlay('preferences')}>
69-
<PreferencesIcon focusable="false" aria-hidden="true" />
70-
</IconButton>
71-
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
72-
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
73-
</IconButton>
65+
<IconButton onClick={() => setOverlay('preferences')} element={<PreferencesIcon focusable="false" aria-hidden="true" />} />
66+
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} element={<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />} />
7467
</IconContainer>
7568
</Header>
7669

‎client/modules/Mobile/MobileSketchView.jsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,7 @@ const MobileSketchView = (props) => {
5050
return (
5151
<Screen>
5252
<Header>
53-
<IconButton to="/mobile" aria-label="Return to original editor">
54-
<ExitIcon viewBox="0 0 16 16" />
55-
</IconButton>
53+
<IconButton to="/mobile" element={<ExitIcon />} width={12} height={12} aria-label="Return to original editor" />
5654
<div style={{ marginLeft: '1rem' }}>
5755
<h2>{projectName}</h2>
5856
<h3><br /></h3>
@@ -67,7 +65,6 @@ const MobileSketchView = (props) => {
6765
content={selectedFile.content}
6866

6967
isPlaying
70-
forceFullWidth
7168
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
7269
previewIsRefreshing={ide.previewIsRefreshing}
7370

0 commit comments

Comments
 (0)