Skip to content

Commit c88bf44

Browse files
ghalestriloghalestrilo
committed
🔀 merging from mobile-sketch-view
2 parents e8b2515 + b4c1b86 commit c88bf44

File tree

8 files changed

+32
-35
lines changed

8 files changed

+32
-35
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
@@ -3,7 +3,7 @@ import styled from 'styled-components';
33
import PropTypes from 'prop-types';
44
import { prop, remSize } from '../../theme';
55

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

99

‎client/components/mobile/IconButton.jsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,20 @@ width: ${remSize(48)};
1212
}
1313
`;
1414

15-
const IconButton = props => (<ButtonWrapper
16-
iconBefore={props.children}
17-
kind={Button.kinds.inline}
18-
{...{ ...props, children: null }}
19-
/>);
15+
const IconButton = (props) => {
16+
const { icon, ...otherProps } = props;
17+
const Icon = icon;
18+
19+
return (<ButtonWrapper
20+
iconBefore={<Icon />}
21+
kind={Button.kinds.inline}
22+
focusable="false"
23+
{...otherProps}
24+
/>);
25+
};
2026

2127
IconButton.propTypes = {
22-
children: PropTypes.element.isRequired
28+
icon: PropTypes.func.isRequired
2329
};
2430

2531
export default IconButton;

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

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

203-
204203
return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
205204
}
206205

@@ -384,7 +383,7 @@ PreviewFrame.propTypes = {
384383
clearConsole: PropTypes.func.isRequired,
385384
cmController: PropTypes.shape({
386385
getContent: PropTypes.func
387-
})
386+
}),
388387
};
389388

390389
PreviewFrame.defaultProps = {

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ import { getHTMLFile } from '../reducers/files';
1818

1919
// Local Imports
2020
import Editor from '../components/Editor';
21-
import { ExitIcon } from '../../../common/icons';
22-
23-
import { PreferencesIcon, PlayIcon } from '../../../common/icons';
21+
import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
2422

2523
import IconButton from '../../../components/mobile/IconButton';
2624
import Header from '../../../components/mobile/Header';
@@ -48,17 +46,16 @@ const MobileIDEView = (props) => {
4846
title={project.name}
4947
subtitle={selectedFile.name}
5048
leftButton={
51-
<IconButton to="/mobile" aria-label="Return to original editor">
52-
<ExitIcon viewBox="0 0 16 16" />
53-
</IconButton>
49+
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
5450
}
5551
>
56-
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
57-
<PreferencesIcon focusable="false" aria-hidden="true" />
58-
</IconButton>
59-
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
60-
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
61-
</IconButton>
52+
<IconButton
53+
to="/mobile/settings"
54+
onClick={() => setOverlay('preferences')}
55+
icon={PreferencesIcon}
56+
aria-label="Open preferences menu"
57+
/>
58+
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
6259
</Header>
6360

6461
<IDEWrapper>

‎client/modules/Mobile/MobilePreferences.jsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ const Content = styled.div`
2222

2323

2424
const SettingsHeader = styled(Header)`
25-
background: transparent
25+
background: transparent;
2626
`;
2727

2828
const SectionHeader = styled.h2`
2929
color: ${prop('primaryTextColor')};
30-
padding-top: ${remSize(32)}
30+
padding-top: ${remSize(32)};
3131
`;
3232

3333
const SectionSubeader = styled.h3`
@@ -161,16 +161,12 @@ const MobilePreferences = (props) => {
161161
},
162162
];
163163

164-
// useEffect(() => { });
165-
166164
return (
167165
<Screen fullscreen>
168166
<section>
169167
<SettingsHeader transparent title="Preferences">
170168

171-
<IconButton to="/mobile" aria-label="Return to ide view">
172-
<ExitIcon />
173-
</IconButton>
169+
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
174170
</SettingsHeader>
175171
<section className="preferences">
176172
<Content>

‎client/modules/Mobile/MobileSketchView.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,8 @@ const MobileSketchView = (props) => {
5151
<Screen fullscreen>
5252
<Header
5353
leftButton={
54-
<IconButton to="/mobile" aria-label="Return to original editor">
55-
<ExitIcon viewBox="0 0 16 16" />
56-
</IconButton>}
54+
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
55+
}
5756
title={projectName}
5857
/>
5958
<Content>

‎client/theme.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default {
8989
default: grays.middleGray,
9090
hover: grays.darker
9191
},
92-
Panel: {
92+
MobilePanel: {
9393
default: {
9494
foreground: colors.black,
9595
background: grays.light,
@@ -128,7 +128,7 @@ export default {
128128
default: grays.middleLight,
129129
hover: grays.lightest
130130
},
131-
Panel: {
131+
MobilePanel: {
132132
default: {
133133
foreground: grays.light,
134134
background: grays.dark,
@@ -167,7 +167,7 @@ export default {
167167
default: grays.mediumLight,
168168
hover: colors.yellow
169169
},
170-
Panel: {
170+
MobilePanel: {
171171
default: {
172172
foreground: grays.light,
173173
background: grays.dark,

0 commit comments

Comments
 (0)