From c44e60e9b215e6230a5a38577c15621809da17cd Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 15 Jul 2020 15:51:54 -0300 Subject: [PATCH 1/9] :construction: remove sidebar (temp) --- client/modules/App/App.jsx | 3 ++- package-lock.json | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..15bf7d19 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,8 @@ class App extends React.Component { render() { return (
- {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {/* FIXME: remove "false &&" from line below */} + {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
); diff --git a/package-lock.json b/package-lock.json index d7e618ac..710be64b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11017,7 +11017,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -34869,7 +34870,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, From 18e945c7d5d482ed593f6e7dff555f6aad8c8d4c Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 15 Jul 2020 17:24:12 -0300 Subject: [PATCH 2/9] :construction: Improve Footer, Emplace Console component --- client/components/mobile/Footer.jsx | 31 +++++++++++++++++++--- client/modules/App/App.jsx | 1 + client/modules/IDE/pages/MobileIDEView.jsx | 22 ++++++++++++++- 3 files changed, 49 insertions(+), 5 deletions(-) diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index 5d82d3c7..d84b7275 100644 --- a/client/components/mobile/Footer.jsx +++ b/client/components/mobile/Footer.jsx @@ -1,20 +1,43 @@ import React from 'react'; import styled from 'styled-components'; +import PropTypes from 'prop-types'; import { prop, remSize } from '../../theme'; + const background = prop('MobilePanel.default.background'); const textColor = prop('primaryTextColor'); -const Footer = styled.div` +const FooterWrapper = styled.div` position: fixed; width: 100%; + bottom: 0; +`; + +const FooterContent = styled.div` background: ${background}; color: ${textColor}; padding: ${remSize(12)}; padding-left: ${remSize(32)}; - z-index: 1; - - bottom: 0; `; + +const Footer = ({ before, children }) => ( + + {before} + + {children} + + +); + +Footer.propTypes = { + before: PropTypes.element, + children: PropTypes.element +}; + +Footer.defaultProps = { + before: <>, + children: <> +}; + export default Footer; diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 15bf7d19..79a8549f 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -36,6 +36,7 @@ class App extends React.Component {
{/* FIXME: remove "false &&" from line below */} {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {/* {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } */} {this.props.children}
); diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 180cbb2e..7bc916f1 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { useState } from 'react'; +import styled from 'styled-components'; // Imports to be Refactored import { bindActionCreators } from 'redux'; @@ -25,6 +26,8 @@ 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 Console from '../components/Console'; +import { remSize } from '../../../theme'; const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); @@ -40,6 +43,11 @@ const MobileIDEView = (props) => { const [tmController, setTmController] = useState(null); // eslint-disable-line const [overlay, setOverlay] = useState(null); // eslint-disable-line + // FIXME: + const dispatchConsoleEvent = () => {}; + const expandConsole = () => {}; + const collapseConsole = () => {}; + return (
{ provideController={setTmController} /> -

Bottom Bar

+
} + > +

Bottom Bar

+
); }; From 95295422a3fe84f855903a87055fae1b46d6670a Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 15 Jul 2020 17:32:38 -0300 Subject: [PATCH 3/9] :construction: update children prop type --- client/components/mobile/Footer.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index d84b7275..a90079cc 100644 --- a/client/components/mobile/Footer.jsx +++ b/client/components/mobile/Footer.jsx @@ -20,7 +20,6 @@ const FooterContent = styled.div` padding-left: ${remSize(32)}; `; - const Footer = ({ before, children }) => ( {before} @@ -32,7 +31,7 @@ const Footer = ({ before, children }) => ( Footer.propTypes = { before: PropTypes.element, - children: PropTypes.element + children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]), }; Footer.defaultProps = { From 8e137d0b6891a577d01c2df94259d093be16e765 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 15 Jul 2020 17:44:47 -0300 Subject: [PATCH 4/9] :construction: Add Console to Preview Screen --- client/modules/Mobile/MobileSketchView.jsx | 25 ++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 64eabb5e..9ba811cc 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -7,6 +7,7 @@ import Header from '../../components/mobile/Header'; import IconButton from '../../components/mobile/IconButton'; import PreviewFrame from '../IDE/components/PreviewFrame'; import Screen from '../../components/mobile/MobileScreen'; +import Console from '../IDE/components/Console'; import * as ProjectActions from '../IDE/actions/project'; import * as IDEActions from '../IDE/actions/ide'; import * as PreferencesActions from '../IDE/actions/preferences'; @@ -18,6 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files'; import { ExitIcon } from '../../common/icons'; import { remSize } from '../../theme'; +import Footer from '../../components/mobile/Footer'; const Content = styled.div` @@ -39,13 +41,16 @@ const MobileSketchView = (props) => { // Actions const { setTextOutput, setGridOutput, setSoundOutput, - endSketchRefresh, stopSketch, + endSketchRefresh, stopSketch, console, dispatchConsoleEvent, expandConsole, clearConsole, setBlobUrl, } = props; const { preferences, ide } = props; + // FIXME: + const collapseConsole = () => {}; + return (
{ clearConsole={clearConsole} /> +