From a1d6abf00f53ec2bf71187985135ad398a0bebf4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 15:36:17 -0300 Subject: [PATCH 1/3] :ok_hand: rename Panel to MobilePanel on theme.js --- client/theme.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/theme.js b/client/theme.js index cc9cb48f..5dba9b88 100644 --- a/client/theme.js +++ b/client/theme.js @@ -89,7 +89,7 @@ export default { default: grays.middleGray, hover: grays.darker }, - Panel: { + MobilePanel: { default: { foreground: colors.black, background: grays.light, @@ -128,7 +128,7 @@ export default { default: grays.middleLight, hover: grays.lightest }, - Panel: { + MobilePanel: { default: { foreground: grays.light, background: grays.dark, @@ -167,7 +167,7 @@ export default { default: grays.mediumLight, hover: colors.yellow }, - Panel: { + MobilePanel: { default: { foreground: grays.light, background: grays.dark, From 3143cc34c7569993827e14317f602977f8f44772 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 15:52:23 -0300 Subject: [PATCH 2/3] :ok_hand: change IconButton structure --- client/components/mobile/Footer.jsx | 2 +- client/components/mobile/Header.jsx | 2 +- client/components/mobile/IconButton.jsx | 6 +++--- client/modules/IDE/components/PreviewFrame.jsx | 8 -------- client/modules/IDE/pages/IDEViewMobile.jsx | 15 ++++----------- client/modules/Mobile/MobileSketchView.jsx | 5 +---- 6 files changed, 10 insertions(+), 28 deletions(-) diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index 45a3d87d..5d82d3c7 100644 --- a/client/components/mobile/Footer.jsx +++ b/client/components/mobile/Footer.jsx @@ -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` diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 559f2efa..eca2c98e 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -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` diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index 0aeed2b7..5c0b16a9 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -12,13 +12,13 @@ width: 3rem; `; const IconButton = props => (); IconButton.propTypes = { - children: PropTypes.element.isRequired + element: PropTypes.element.isRequired }; export default IconButton; diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index b1867622..9f429546 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -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 `\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: {} }; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 58845f1d..4008b817 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -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) => { - setOverlay('preferences')}> - - { startSketch(); }}> - + setOverlay('preferences')} element={ diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index fb50ffe2..cf956ec5 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -50,9 +50,7 @@ const MobileSketchView = (props) => { return (
- - - + } width={12} height={12} aria-label="Return to original editor" />

{projectName}


@@ -67,7 +65,6 @@ const MobileSketchView = (props) => { content={selectedFile.content} isPlaying - forceFullWidth isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} previewIsRefreshing={ide.previewIsRefreshing} From b4c1b86d4d7f4187da7c44be26830a0bdf4d3bd2 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 16:32:29 -0300 Subject: [PATCH 3/3] :ok_hand: improve IconButton implementation --- client/components/mobile/IconButton.jsx | 18 ++++++++++++------ client/modules/IDE/pages/IDEViewMobile.jsx | 16 ++++++++-------- client/modules/Mobile/MobileSketchView.jsx | 2 +- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index 5c0b16a9..248dd014 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -11,14 +11,20 @@ width: 3rem; } `; -const IconButton = props => (); +const IconButton = (props) => { + const { icon, ...otherProps } = props; + const Icon = icon; + + return (} + kind={Button.kinds.inline} + focusable="false" + {...otherProps} + />); +}; IconButton.propTypes = { - element: PropTypes.element.isRequired + icon: PropTypes.func.isRequired }; export default IconButton; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 4008b817..9a638d60 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -20,9 +20,7 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; -import { ExitIcon } from '../../../common/icons'; - -import { PreferencesIcon, PlayIcon } from '../../../common/icons'; +import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons'; import IconButton from '../../../components/mobile/IconButton'; import Header from '../../../components/mobile/Header'; @@ -53,17 +51,19 @@ const IDEViewMobile = (props) => { return (
- - - +

{project.name}

{selectedFile.name}

- setOverlay('preferences')} element={
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index cf956ec5..37dc5ba9 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -50,7 +50,7 @@ const MobileSketchView = (props) => { return (
- } width={12} height={12} aria-label="Return to original editor" /> +

{projectName}