From 0d119aa5e7315c4b61f05e7ee21fd5cd307597ea Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 16 Jun 2020 16:25:40 -0300 Subject: [PATCH 01/27] :construction: emplace settings and play icons --- client/modules/IDE/pages/IDEViewMobile.jsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index dfb8787d..27124ee6 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -22,6 +22,8 @@ import { getHTMLFile } from '../reducers/files'; import Editor from '../components/Editor'; import { prop, remSize } from '../../../theme'; import CloseIcon from '../../../images/exit.svg'; +import PreferencesIcon from '../../../images/preferences.svg'; +import PlayIcon from '../../../images/triangle-arrow-right.svg'; const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); @@ -66,10 +68,10 @@ const Icon = styled.a` fill: ${textColor}; color: ${textColor}; margin-left: ${remSize(16)}; + align-items: center; } `; - const Screen = ({ children }) => (
{children} @@ -82,13 +84,14 @@ Screen.propTypes = { const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); const IDEViewMobile = (props) => { - // const const { preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning } = props; const [tmController, setTmController] = useState(null); + const [overlay, setOverlay] = useState(null); + return (
@@ -96,9 +99,17 @@ const IDEViewMobile = (props) => {

{project.name}

{selectedFile.name}

- - +
+ + + setOverlay('preferences')}> + + setOverlay('runSketch')}> + +
{/*
{ [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning] From 0877d39a658a066c3e708f814aa004d8266eafce Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 16 Jun 2020 17:38:43 -0300 Subject: [PATCH 02/27] :construction: split components into files --- client/components/mobile/Footer.jsx | 20 +++++++++ client/components/mobile/Header.jsx | 25 +++++++++++ client/components/mobile/IconButton.jsx | 17 ++++++++ client/components/mobile/MobileScreen.jsx | 13 ++++++ client/modules/IDE/pages/IDEViewMobile.jsx | 50 ++-------------------- 5 files changed, 79 insertions(+), 46 deletions(-) create mode 100644 client/components/mobile/Footer.jsx create mode 100644 client/components/mobile/Header.jsx create mode 100644 client/components/mobile/IconButton.jsx create mode 100644 client/components/mobile/MobileScreen.jsx diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx new file mode 100644 index 00000000..84e50d1b --- /dev/null +++ b/client/components/mobile/Footer.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import styled from 'styled-components'; +import { prop, remSize } from '../../theme'; + +const background = prop('Button.default.background'); +const textColor = prop('primaryTextColor'); + +const Footer = styled.div` + position: fixed; + width: 100%; + background: ${background}; + color: ${textColor}; + padding: ${remSize(12)}; + padding-left: ${remSize(32)}; + z-index: 1; + + bottom: 0; +`; + +export default Footer; diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx new file mode 100644 index 00000000..d638c1ac --- /dev/null +++ b/client/components/mobile/Header.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import styled from 'styled-components'; +import { prop, remSize } from '../../theme'; + +const background = prop('Button.default.background'); +const textColor = prop('primaryTextColor'); + +const Header = styled.div` + position: fixed; + width: 100%; + background: ${background}; + color: ${textColor}; + padding: ${remSize(12)}; + padding-left: ${remSize(32)}; + padding-right: ${remSize(32)}; + z-index: 1; + + display: flex; + flex: 1; + flex-direction: row; + justify-content: flex-start; + align-items: center; +`; + +export default Header; diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx new file mode 100644 index 00000000..ce758376 --- /dev/null +++ b/client/components/mobile/IconButton.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import styled from 'styled-components'; +import { prop, remSize } from '../../theme'; + +const textColor = prop('primaryTextColor'); + +const IconButton = styled.button` +width: 3rem; +> svg { + width: 100%; + height: auto; + fill: ${textColor}; + stroke: ${textColor}; +} +`; + +export default IconButton; diff --git a/client/components/mobile/MobileScreen.jsx b/client/components/mobile/MobileScreen.jsx new file mode 100644 index 00000000..1e50f80a --- /dev/null +++ b/client/components/mobile/MobileScreen.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Screen = ({ children }) => ( +
+ {children} +
+); +Screen.propTypes = { + children: PropTypes.node.isRequired +}; + +export default Screen; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index a8149d3b..cd0f5cf2 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -26,61 +26,19 @@ import { CloseIcon } from '../../../common/Icons'; import PreferencesIcon from '../../../images/preferences.svg'; import PlayIcon from '../../../images/triangle-arrow-right.svg'; +import IconButton from '../../../components/mobile/IconButton'; +import Header from '../../../components/mobile/Header'; +import Screen from '../../../components/mobile/MobileScreen'; +import Footer from '../../../components/mobile/Footer'; const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); - -const Header = styled.div` - position: fixed; - width: 100%; - background: ${background}; - color: ${textColor}; - padding: ${remSize(12)}; - padding-left: ${remSize(32)}; - padding-right: ${remSize(32)}; - z-index: 1; - - display: flex; - flex: 1; - flex-direction: row; - justify-content: flex-start; - align-items: center; -`; - -const Footer = styled.div` - position: fixed; - width: 100%; - background: ${background}; - color: ${textColor}; - padding: ${remSize(12)}; - padding-left: ${remSize(32)}; - z-index: 1; - - bottom: 0; -`; - const Content = styled.div` z-index: 0; margin-top: ${remSize(16)}; `; -const IconButton = styled.button` - width: 3rem; - > svg { - width: 100%; - height: auto; - } -`; - -const Screen = ({ children }) => ( -
- {children} -
-); -Screen.propTypes = { - children: PropTypes.node.isRequired -}; const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); From 49a9fe78198cd72edd8be5cc6cc7f3de80dd3205 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 18 Jun 2020 15:49:31 -0300 Subject: [PATCH 03/27] :construction: make link to /mobile --- client/common/Icons.jsx | 2 ++ client/modules/IDE/pages/IDEViewMobile.jsx | 9 +++++---- client/modules/Mobile/MobileSketchView.jsx | 16 ++++++++++++---- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx index 05708733..ce9c09fd 100644 --- a/client/common/Icons.jsx +++ b/client/common/Icons.jsx @@ -9,6 +9,7 @@ import Close from '../images/close.svg'; import DropdownArrow from '../images/down-filled-triangle.svg'; import Play from '../images/triangle-arrow-right.svg'; import Preferences from '../images/preferences.svg'; +import Exit from '../images/exit.svg'; // HOC that adds the right web accessibility props @@ -54,3 +55,4 @@ export const CloseIcon = withLabel(Close); export const DropdownArrowIcon = withLabel(DropdownArrow); export const PlayIcon = withLabel(Play); export const PreferencesIcon = withLabel(Preferences); +export const ExitIcon = withLabel(Exit); diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index f1c8b705..fb9a9325 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -31,7 +31,6 @@ import Header from '../../../components/mobile/Header'; import Screen from '../../../components/mobile/MobileScreen'; import Footer from '../../../components/mobile/Footer'; -const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); const Content = styled.div` @@ -79,9 +78,11 @@ const IDEViewMobile = (props) => { setOverlay('preferences')}> - setOverlay('runSketch')}> - + + + +
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 1bc70aea..8a845b25 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,16 +1,24 @@ import React, { useState } from 'react'; - +import { Link } from 'react-router'; +import styled from 'styled-components'; import Header from '../../components/mobile/Header'; import Screen from '../../components/mobile/MobileScreen'; +import { ExitIcon } from '../../common/Icons'; + +const IconLinkWrapper = styled(Link)` + width: 2rem; + margin-right: 1.25rem; + margin-left: none; +`; const MobileSketchView = (props) => { const [overlay, setOverlay] = useState(null); return (
- {/* - - */} + + +

Hello

{/*

{selectedFile.name}

*/} From e5bbb53b3701ab1caf15c2aba6c99d886b4124a4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 18 Jun 2020 16:01:13 -0300 Subject: [PATCH 04/27] :construction: create alternate content wrapper for proper top padding --- client/components/mobile/IDEWrapper.jsx | 8 +++++ client/modules/IDE/pages/IDEViewMobile.jsx | 10 ++---- client/modules/Mobile/MobileSketchView.jsx | 38 ++++++++++++++++++++++ 3 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 client/components/mobile/IDEWrapper.jsx diff --git a/client/components/mobile/IDEWrapper.jsx b/client/components/mobile/IDEWrapper.jsx new file mode 100644 index 00000000..0982cf81 --- /dev/null +++ b/client/components/mobile/IDEWrapper.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import styled from 'styled-components'; +import { remSize } from '../../theme'; + +export default styled.div` + z-index: 0; + margin-top: ${remSize(16)}; +`; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index fb9a9325..b912c6a3 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -30,14 +30,10 @@ import IconButton from '../../../components/mobile/IconButton'; import Header from '../../../components/mobile/Header'; import Screen from '../../../components/mobile/MobileScreen'; import Footer from '../../../components/mobile/Footer'; +import IDEWrapper from '../../../components/mobile/IDEWrapper'; const textColor = prop('primaryTextColor'); -const Content = styled.div` - z-index: 0; - margin-top: ${remSize(16)}; -`; - const Icon = styled.a` > svg { fill: ${textColor}; @@ -86,7 +82,7 @@ const IDEViewMobile = (props) => {
- + { runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible} provideController={setTmController} /> - +

Bottom Bar

 ); diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 8a845b25..bb436143 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -3,7 +3,15 @@ import { Link } from 'react-router'; import styled from 'styled-components'; import Header from '../../components/mobile/Header'; import Screen from '../../components/mobile/MobileScreen'; + import { ExitIcon } from '../../common/Icons'; +import { remSize } from '../../theme'; + + +const Content = styled.div` + z-index: 0; + margin-top: ${remSize(48)}; +`; const IconLinkWrapper = styled(Link)` width: 2rem; @@ -11,6 +19,7 @@ const IconLinkWrapper = styled(Link)` margin-left: none; `; + const MobileSketchView = (props) => { const [overlay, setOverlay] = useState(null); return ( @@ -33,6 +42,35 @@ const MobileSketchView = (props) => { */} + +

Hello

+ ); }; + + export default MobileSketchView; + + +// +// } +// fullView +// isPlaying +// isAccessibleOutputPlaying={false} +// textOutput={false} +// gridOutput={false} +// soundOutput={false} +// dispatchConsoleEvent={this.ident} +// endSketchRefresh={this.ident} +// previewIsRefreshing={false} +// setBlobUrl={this.ident} +// stopSketch={this.ident} +// expandConsole={this.ident} +// clearConsole={this.ident} +// /> From 0633c3b39542ce89e8f28a49e645565eff27b2a2 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 18 Jun 2020 16:29:46 -0300 Subject: [PATCH 05/27] :construction: mount on /mobile/preview --- client/modules/Mobile/MobileSketchView.jsx | 92 ++++++++++++++++------ 1 file changed, 69 insertions(+), 23 deletions(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index bb436143..9aaa00b5 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,8 +1,12 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import { Link } from 'react-router'; +import { connect } from 'react-redux'; import styled from 'styled-components'; import Header from '../../components/mobile/Header'; +import PreviewFrame from '../IDE/components/PreviewFrame'; import Screen from '../../components/mobile/MobileScreen'; +import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files'; import { ExitIcon } from '../../common/Icons'; import { remSize } from '../../theme'; @@ -19,9 +23,21 @@ const IconLinkWrapper = styled(Link)` margin-left: none; `; +const noop = () => {}; const MobileSketchView = (props) => { const [overlay, setOverlay] = useState(null); + + // TODO: useSelector requires react-redux ^7.1.0 + // const htmlFile = useSelector(state => getHTMLFile(state.files)); + // const jsFiles = useSelector(state => getJSFiles(state.files)); + // const cssFiles = useSelector(state => getCSSFiles(state.files)); + // const files = useSelector(state => state.files); + + const { + htmlFile, jsFiles, cssFiles, files + } = props; + return (
@@ -44,33 +60,63 @@ const MobileSketchView = (props) => {

Hello

+ + } + fullView + isPlaying + isAccessibleOutputPlaying={false} + textOutput={false} + gridOutput={false} + soundOutput={false} + dispatchConsoleEvent={noop} + endSketchRefresh={noop} + previewIsRefreshing={false} + setBlobUrl={noop} + stopSketch={noop} + expandConsole={noop} + clearConsole={noop} + /> ); }; +MobileSketchView.propTypes = { + htmlFile: PropTypes.shape({ + id: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + }).isRequired, + jsFiles: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + })).isRequired, + cssFiles: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + })).isRequired, + files: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + })).isRequired, +}; -export default MobileSketchView; +function mapStateToProps(state) { + return { + htmlFile: getHTMLFile(state.files), + jsFiles: getJSFiles(state.files), + cssFiles: getCSSFiles(state.files), + files: state.files + }; +} -// -// } -// fullView -// isPlaying -// isAccessibleOutputPlaying={false} -// textOutput={false} -// gridOutput={false} -// soundOutput={false} -// dispatchConsoleEvent={this.ident} -// endSketchRefresh={this.ident} -// previewIsRefreshing={false} -// setBlobUrl={this.ident} -// stopSketch={this.ident} -// expandConsole={this.ident} -// clearConsole={this.ident} -// /> +export default connect(mapStateToProps)(MobileSketchView); From e11756d7698b65b1f2b21abb6df8f4a8b78e9889 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 18 Jun 2020 21:08:53 -0300 Subject: [PATCH 06/27] :construction: correct hook call for getProject --- client/modules/Mobile/MobileSketchView.jsx | 24 +++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 9aaa00b5..9365c25e 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,13 +1,16 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; +import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import styled from 'styled-components'; import Header from '../../components/mobile/Header'; import PreviewFrame from '../IDE/components/PreviewFrame'; import Screen from '../../components/mobile/MobileScreen'; +import * as ProjectActions from '../IDE/actions/project'; import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files'; + import { ExitIcon } from '../../common/Icons'; import { remSize } from '../../theme'; @@ -28,6 +31,7 @@ const noop = () => {}; const MobileSketchView = (props) => { const [overlay, setOverlay] = useState(null); + // TODO: useSelector requires react-redux ^7.1.0 // const htmlFile = useSelector(state => getHTMLFile(state.files)); // const jsFiles = useSelector(state => getJSFiles(state.files)); @@ -35,9 +39,14 @@ const MobileSketchView = (props) => { // const files = useSelector(state => state.files); const { - htmlFile, jsFiles, cssFiles, files + htmlFile, jsFiles, cssFiles, files, params, getProject } = props; + useEffect(() => { + console.log(params); + getProject(params.project_id, params.username); + }, []); + return (
@@ -87,6 +96,10 @@ const MobileSketchView = (props) => { }; MobileSketchView.propTypes = { + params: PropTypes.shape({ + project_id: PropTypes.string, + username: PropTypes.string + }).isRequired, htmlFile: PropTypes.shape({ id: PropTypes.string.isRequired, content: PropTypes.string.isRequired, @@ -107,6 +120,7 @@ MobileSketchView.propTypes = { content: PropTypes.string.isRequired, name: PropTypes.string.isRequired })).isRequired, + getProject: PropTypes.func.isRequired, }; function mapStateToProps(state) { @@ -114,9 +128,13 @@ function mapStateToProps(state) { htmlFile: getHTMLFile(state.files), jsFiles: getJSFiles(state.files), cssFiles: getCSSFiles(state.files), + project: state.project, files: state.files }; } +function mapDispatchToProps(dispatch) { + return bindActionCreators(ProjectActions, dispatch); +} -export default connect(mapStateToProps)(MobileSketchView); +export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView); From 8a067a8787849be9ee27e12a978743c1dd56aac2 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 18 Jun 2020 22:00:24 -0300 Subject: [PATCH 07/27] :construction: make mobile IDE screen start the sketch --- client/modules/IDE/pages/IDEViewMobile.jsx | 12 +++- client/modules/Mobile/MobileSketchView.jsx | 75 +++++++++++----------- 2 files changed, 47 insertions(+), 40 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index b912c6a3..99be95ba 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -52,7 +52,7 @@ const isUserOwner = ({ project, user }) => (project.owner && project.owner.id == const IDEViewMobile = (props) => { const { - preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning + preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch } = props; const [tmController, setTmController] = useState(null); @@ -74,7 +74,13 @@ const IDEViewMobile = (props) => { setOverlay('preferences')}> - + { + alert('starting sketch'); + startSketch(); + }} + > @@ -181,6 +187,8 @@ IDEViewMobile.propTypes = { updatedAt: PropTypes.string }).isRequired, + startSketch: PropTypes.func.isRequired, + updateLintMessage: PropTypes.func.isRequired, clearLintMessage: PropTypes.func.isRequired, diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 9365c25e..25ef9c71 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -8,6 +8,8 @@ import Header from '../../components/mobile/Header'; import PreviewFrame from '../IDE/components/PreviewFrame'; import Screen from '../../components/mobile/MobileScreen'; import * as ProjectActions from '../IDE/actions/project'; +import * as IDEActions from '../IDE/actions/ide'; + import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files'; @@ -39,13 +41,16 @@ const MobileSketchView = (props) => { // const files = useSelector(state => state.files); const { - htmlFile, jsFiles, cssFiles, files, params, getProject + htmlFile, jsFiles, cssFiles, files, params } = props; - useEffect(() => { - console.log(params); - getProject(params.project_id, params.username); - }, []); + // Actions + const { getProject, startSketch } = props; + + // useEffect(() => { + // console.log(params); + // getProject(params.project_id, params.username); + // }, []); return ( @@ -55,42 +60,35 @@ const MobileSketchView = (props) => {

Hello

- {/*

{selectedFile.name}

*/} +


- - {/*
- setOverlay('preferences')}> - - setOverlay('runSketch')}> - -
*/}

Hello

- - } - fullView - isPlaying - isAccessibleOutputPlaying={false} - textOutput={false} - gridOutput={false} - soundOutput={false} - dispatchConsoleEvent={noop} - endSketchRefresh={noop} - previewIsRefreshing={false} - setBlobUrl={noop} - stopSketch={noop} - expandConsole={noop} - clearConsole={noop} - /> +
+ + } + isAccessibleOutputPlaying={false} + textOutput={false} + gridOutput={false} + soundOutput={false} + previewIsRefreshing={false} + + dispatchConsoleEvent={noop} + endSketchRefresh={noop} + setBlobUrl={noop} + stopSketch={noop} + expandConsole={noop} + clearConsole={noop} + /> +
); }; @@ -121,6 +119,7 @@ MobileSketchView.propTypes = { name: PropTypes.string.isRequired })).isRequired, getProject: PropTypes.func.isRequired, + startSketch: PropTypes.func.isRequired, }; function mapStateToProps(state) { @@ -134,7 +133,7 @@ function mapStateToProps(state) { } function mapDispatchToProps(dispatch) { - return bindActionCreators(ProjectActions, dispatch); + return bindActionCreators({ ...ProjectActions, ...IDEActions }, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView); From d00506a70e2b1250f76fe27e7839de9aae061ac4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 18 Jun 2020 22:52:25 -0300 Subject: [PATCH 08/27] :construction: mound the properly on Mobile Preview screen --- client/common/Icons.jsx | 58 -------- client/common/icons.jsx | 2 +- client/modules/IDE/pages/IDEViewMobile.jsx | 11 -- client/modules/Mobile/MobileSketchView.jsx | 149 +++++++++++++++------ client/routes.jsx | 5 +- 5 files changed, 110 insertions(+), 115 deletions(-) delete mode 100644 client/common/Icons.jsx diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx deleted file mode 100644 index ce9c09fd..00000000 --- a/client/common/Icons.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import SortArrowUp from '../images/sort-arrow-up.svg'; -import SortArrowDown from '../images/sort-arrow-down.svg'; -import Github from '../images/github.svg'; -import Google from '../images/google.svg'; -import Plus from '../images/plus-icon.svg'; -import Close from '../images/close.svg'; -import DropdownArrow from '../images/down-filled-triangle.svg'; -import Play from '../images/triangle-arrow-right.svg'; -import Preferences from '../images/preferences.svg'; -import Exit from '../images/exit.svg'; - - -// HOC that adds the right web accessibility props -// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html - -// could also give these a default size, color, etc. based on the theme -// Need to add size to these - like small icon, medium icon, large icon. etc. -function withLabel(SvgComponent) { - const Icon = (props) => { - const { 'aria-label': ariaLabel } = props; - if (ariaLabel) { - return (); - } - return (); - }; - - Icon.propTypes = { - 'aria-label': PropTypes.string - }; - - Icon.defaultProps = { - 'aria-label': null - }; - - return Icon; -} - -export const SortArrowUpIcon = withLabel(SortArrowUp); -export const SortArrowDownIcon = withLabel(SortArrowDown); -export const GithubIcon = withLabel(Github); -export const GoogleIcon = withLabel(Google); -export const PlusIcon = withLabel(Plus); -export const CloseIcon = withLabel(Close); -export const DropdownArrowIcon = withLabel(DropdownArrow); -export const PlayIcon = withLabel(Play); -export const PreferencesIcon = withLabel(Preferences); -export const ExitIcon = withLabel(Exit); diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 06f18895..5b42fa83 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { remSize, prop } from '../theme'; +import { prop } from '../theme'; import SortArrowUp from '../images/sort-arrow-up.svg'; import SortArrowDown from '../images/sort-arrow-down.svg'; import Github from '../images/github.svg'; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index fb0f0b78..c7ca9359 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -20,7 +20,6 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; -import { prop, remSize } from '../../../theme'; import { ExitIcon } from '../../../common/icons'; import PreferencesIcon from '../../../images/preferences.svg'; @@ -32,16 +31,6 @@ import Screen from '../../../components/mobile/MobileScreen'; import Footer from '../../../components/mobile/Footer'; import IDEWrapper from '../../../components/mobile/IDEWrapper'; -const textColor = prop('primaryTextColor'); - -const Icon = styled.a` - > svg { - fill: ${textColor}; - color: ${textColor}; - margin-left: ${remSize(16)}; - } -`; - const IconLinkWrapper = styled(Link)` width: 3rem; margin-right: 1.25rem; diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 25ef9c71..af68f968 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; import { bindActionCreators } from 'redux'; @@ -9,11 +9,14 @@ import PreviewFrame from '../IDE/components/PreviewFrame'; import Screen from '../../components/mobile/MobileScreen'; import * as ProjectActions from '../IDE/actions/project'; import * as IDEActions from '../IDE/actions/ide'; +import * as PreferencesActions from '../IDE/actions/preferences'; +import * as ConsoleActions from '../IDE/actions/console'; +import * as FilesActions from '../IDE/actions/files'; -import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files'; +import { getHTMLFile } from '../IDE/reducers/files'; -import { ExitIcon } from '../../common/Icons'; +import { ExitIcon } from '../../common/icons'; import { remSize } from '../../theme'; @@ -28,12 +31,7 @@ const IconLinkWrapper = styled(Link)` margin-left: none; `; -const noop = () => {}; - const MobileSketchView = (props) => { - const [overlay, setOverlay] = useState(null); - - // TODO: useSelector requires react-redux ^7.1.0 // const htmlFile = useSelector(state => getHTMLFile(state.files)); // const jsFiles = useSelector(state => getJSFiles(state.files)); @@ -41,11 +39,18 @@ const MobileSketchView = (props) => { // const files = useSelector(state => state.files); const { - htmlFile, jsFiles, cssFiles, files, params + htmlFile, files, selectedFile } = props; // Actions - const { getProject, startSketch } = props; + const { + setTextOutput, setGridOutput, setSoundOutput, + endSketchRefresh, stopSketch, + dispatchConsoleEvent, expandConsole, clearConsole, + setBlobUrl, + } = props; + + const { preferences, ide } = props; // useEffect(() => { // console.log(params); @@ -65,30 +70,35 @@ const MobileSketchView = (props) => {

Hello

-
+
} - isAccessibleOutputPlaying={false} - textOutput={false} - gridOutput={false} - soundOutput={false} - previewIsRefreshing={false} + fullView - dispatchConsoleEvent={noop} - endSketchRefresh={noop} - setBlobUrl={noop} - stopSketch={noop} - expandConsole={noop} - clearConsole={noop} + content={selectedFile.content} + + isPlaying={ide.isPlaying} + isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} + previewIsRefreshing={ide.previewIsRefreshing} + + textOutput={preferences.textOutput} + gridOutput={preferences.gridOutput} + soundOutput={preferences.soundOutput} + autorefresh={preferences.autorefresh} + + setTextOutput={setTextOutput} + setGridOutput={setGridOutput} + setSoundOutput={setSoundOutput} + dispatchConsoleEvent={dispatchConsoleEvent} + endSketchRefresh={endSketchRefresh} + stopSketch={stopSketch} + setBlobUrl={setBlobUrl} + expandConsole={expandConsole} + clearConsole={clearConsole} /> -
+ ); }; @@ -98,42 +108,93 @@ MobileSketchView.propTypes = { project_id: PropTypes.string, username: PropTypes.string }).isRequired, + htmlFile: PropTypes.shape({ id: PropTypes.string.isRequired, content: PropTypes.string.isRequired, name: PropTypes.string.isRequired }).isRequired, - jsFiles: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - content: PropTypes.string.isRequired, - name: PropTypes.string.isRequired - })).isRequired, - cssFiles: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - content: PropTypes.string.isRequired, - name: PropTypes.string.isRequired - })).isRequired, files: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired, content: PropTypes.string.isRequired, name: PropTypes.string.isRequired })).isRequired, - getProject: PropTypes.func.isRequired, - startSketch: PropTypes.func.isRequired, + + selectedFile: PropTypes.shape({ + id: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + }).isRequired, + + preferences: PropTypes.shape({ + fontSize: PropTypes.number.isRequired, + autosave: PropTypes.bool.isRequired, + linewrap: PropTypes.bool.isRequired, + lineNumbers: PropTypes.bool.isRequired, + lintWarning: PropTypes.bool.isRequired, + textOutput: PropTypes.bool.isRequired, + gridOutput: PropTypes.bool.isRequired, + soundOutput: PropTypes.bool.isRequired, + theme: PropTypes.string.isRequired, + autorefresh: PropTypes.bool.isRequired + }).isRequired, + + ide: PropTypes.shape({ + isPlaying: PropTypes.bool.isRequired, + isAccessibleOutputPlaying: PropTypes.bool.isRequired, + consoleEvent: PropTypes.array, + modalIsVisible: PropTypes.bool.isRequired, + sidebarIsExpanded: PropTypes.bool.isRequired, + consoleIsExpanded: PropTypes.bool.isRequired, + preferencesIsVisible: PropTypes.bool.isRequired, + projectOptionsVisible: PropTypes.bool.isRequired, + newFolderModalVisible: PropTypes.bool.isRequired, + shareModalVisible: PropTypes.bool.isRequired, + shareModalProjectId: PropTypes.string.isRequired, + shareModalProjectName: PropTypes.string.isRequired, + shareModalProjectUsername: PropTypes.string.isRequired, + editorOptionsVisible: PropTypes.bool.isRequired, + keyboardShortcutVisible: PropTypes.bool.isRequired, + unsavedChanges: PropTypes.bool.isRequired, + infiniteLoop: PropTypes.bool.isRequired, + previewIsRefreshing: PropTypes.bool.isRequired, + infiniteLoopMessage: PropTypes.string.isRequired, + projectSavedTime: PropTypes.string, + previousPath: PropTypes.string.isRequired, + justOpenedProject: PropTypes.bool.isRequired, + errorType: PropTypes.string, + runtimeErrorWarningVisible: PropTypes.bool.isRequired, + uploadFileModalVisible: PropTypes.bool.isRequired + }).isRequired, + + setTextOutput: PropTypes.func.isRequired, + setGridOutput: PropTypes.func.isRequired, + setSoundOutput: PropTypes.func.isRequired, + dispatchConsoleEvent: PropTypes.func.isRequired, + endSketchRefresh: PropTypes.func.isRequired, + stopSketch: PropTypes.func.isRequired, + setBlobUrl: PropTypes.func.isRequired, + expandConsole: PropTypes.func.isRequired, + clearConsole: PropTypes.func.isRequired, }; function mapStateToProps(state) { return { htmlFile: getHTMLFile(state.files), - jsFiles: getJSFiles(state.files), - cssFiles: getCSSFiles(state.files), project: state.project, - files: state.files + files: state.files, + ide: state.ide, + preferences: state.preferences, + selectedFile: state.files.find(file => file.isSelectedFile) || + state.files.find(file => file.name === 'sketch.js') || + state.files.find(file => file.name !== 'root'), }; } function mapDispatchToProps(dispatch) { - return bindActionCreators({ ...ProjectActions, ...IDEActions }, dispatch); + return bindActionCreators({ + ...ProjectActions, ...IDEActions, ...PreferencesActions, ...ConsoleActions, ...FilesActions + }, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView); diff --git a/client/routes.jsx b/client/routes.jsx index e7789943..a98bc04d 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -1,4 +1,4 @@ -import { Route, IndexRoute, Router, Switch, useRouteMatch } from 'react-router'; +import { Route, IndexRoute } from 'react-router'; import React from 'react'; import App from './modules/App/App'; import IDEView from './modules/IDE/pages/IDEView'; @@ -23,6 +23,9 @@ const checkAuth = (store) => { }; const onRouteChange = (store) => { + // FIXME: This seems unnecessary - using the mobile navigator should prevent this from being called + const path = window.location.pathname; + if (path.includes('/mobile')) return; store.dispatch(stopSketch()); }; From a11bc446342232c82063b965944b8c237b5ae338 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 19 Jun 2020 15:24:09 -0300 Subject: [PATCH 09/27] :sparkles: render sketch --- client/modules/IDE/components/PreviewFrame.jsx | 7 +++++++ client/modules/IDE/pages/IDEViewMobile.jsx | 3 ++- client/modules/Mobile/MobileSketchView.jsx | 10 +++++++--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 76be806f..edbd68bc 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -29,10 +29,17 @@ class PreviewFrame extends React.Component { } componentDidMount() { + console.log(`componentDidMount: ${this.props.isPlaying}`); window.addEventListener('message', this.handleConsoleEvent); + + // TODO: maybe encapsulate this into a function (together with code from componentDidUpdate) + if (this.props.isPlaying && this.props.previewIsRefreshing) { + this.renderSketch(); + } } componentDidUpdate(prevProps) { + console.log(`componentDidUpdate: ${this.props.isPlaying}`); // if sketch starts or stops playing, want to rerender if (this.props.isPlaying !== prevProps.isPlaying) { this.renderSketch(); diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index c7ca9359..8c12f1f8 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,3 +1,4 @@ +/* eslint-disable */ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -66,7 +67,7 @@ const IDEViewMobile = (props) => { { - alert('starting sketch'); + // alert('starting sketch'); startSketch(); }} > diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index af68f968..fcc2b400 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -13,6 +13,8 @@ import * as PreferencesActions from '../IDE/actions/preferences'; import * as ConsoleActions from '../IDE/actions/console'; import * as FilesActions from '../IDE/actions/files'; +import FullView from '../IDE/pages/FullView'; + import { getHTMLFile } from '../IDE/reducers/files'; @@ -71,15 +73,17 @@ const MobileSketchView = (props) => {

Hello

- + } content={selectedFile.content} - isPlaying={ide.isPlaying} + fullView + isPlaying isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} previewIsRefreshing={ide.previewIsRefreshing} From 776c3d2caf9970836e072244ddca0f318e84275b Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 19 Jun 2020 15:55:37 -0300 Subject: [PATCH 10/27] :recycle: refactor call to PreviewFrame#renderSketch --- .../modules/IDE/components/PreviewFrame.jsx | 68 +++++++------------ client/modules/Mobile/MobileSketchView.jsx | 63 ++++++++--------- 2 files changed, 54 insertions(+), 77 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index edbd68bc..a3f5abfb 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -22,6 +22,24 @@ import { import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets } from '../../../utils/consoleUtils'; + +// Kept inside class just for linter's +const shouldRenderSketch = (props, prevProps = undefined) => { + const { isPlaying, previewIsRefreshing, fullView } = props; + + // if the user explicitly clicks on the play button + if (isPlaying && previewIsRefreshing) return true; + + if (!prevProps) return false; + + return (props.isPlaying !== prevProps.isPlaying // if sketch starts or stops playing, want to rerender + || props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying // if user switches textoutput preferences + || props.textOutput !== prevProps.textOutput + || props.gridOutput !== prevProps.gridOutput + || props.soundOutput !== prevProps.soundOutput + || (fullView && props.files[0].id !== prevProps.files[0].id)); +}; + class PreviewFrame extends React.Component { constructor(props) { super(props); @@ -29,54 +47,18 @@ class PreviewFrame extends React.Component { } componentDidMount() { - console.log(`componentDidMount: ${this.props.isPlaying}`); window.addEventListener('message', this.handleConsoleEvent); - // TODO: maybe encapsulate this into a function (together with code from componentDidUpdate) - if (this.props.isPlaying && this.props.previewIsRefreshing) { - this.renderSketch(); - } + const props = { + ...this.props, + previewIsRefreshing: this.props.previewIsRefreshing, + isAccessibleOutputPlaying: this.props.isAccessibleOutputPlaying + }; + if (shouldRenderSketch(props)) this.renderSketch(); } componentDidUpdate(prevProps) { - console.log(`componentDidUpdate: ${this.props.isPlaying}`); - // if sketch starts or stops playing, want to rerender - if (this.props.isPlaying !== prevProps.isPlaying) { - this.renderSketch(); - return; - } - - // if the user explicitly clicks on the play button - if (this.props.isPlaying && this.props.previewIsRefreshing) { - this.renderSketch(); - return; - } - - // if user switches textoutput preferences - if (this.props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying) { - this.renderSketch(); - return; - } - - if (this.props.textOutput !== prevProps.textOutput) { - this.renderSketch(); - return; - } - - if (this.props.gridOutput !== prevProps.gridOutput) { - this.renderSketch(); - return; - } - - if (this.props.soundOutput !== prevProps.soundOutput) { - this.renderSketch(); - return; - } - - if (this.props.fullView && this.props.files[0].id !== prevProps.files[0].id) { - this.renderSketch(); - } - + if (shouldRenderSketch(this.props, prevProps)) this.renderSketch(); // small bug - if autorefresh is on, and the usr changes files // in the sketch, preview will reload } diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index fcc2b400..a84cb12b 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,3 +1,4 @@ +/* eslint-disable */ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; @@ -13,8 +14,6 @@ import * as PreferencesActions from '../IDE/actions/preferences'; import * as ConsoleActions from '../IDE/actions/console'; import * as FilesActions from '../IDE/actions/files'; -import FullView from '../IDE/pages/FullView'; - import { getHTMLFile } from '../IDE/reducers/files'; @@ -24,7 +23,7 @@ import { remSize } from '../../theme'; const Content = styled.div` z-index: 0; - margin-top: ${remSize(48)}; + margin-top: ${remSize(68)}; `; const IconLinkWrapper = styled(Link)` @@ -41,7 +40,7 @@ const MobileSketchView = (props) => { // const files = useSelector(state => state.files); const { - htmlFile, files, selectedFile + htmlFile, files, selectedFile, projectName } = props; // Actions @@ -66,43 +65,37 @@ const MobileSketchView = (props) => {
-

Hello

+

{projectName}


-

Hello

-
- - } + } - content={selectedFile.content} + content={selectedFile.content} - fullView - isPlaying - isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} - previewIsRefreshing={ide.previewIsRefreshing} + isPlaying + isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} + previewIsRefreshing={ide.previewIsRefreshing} - textOutput={preferences.textOutput} - gridOutput={preferences.gridOutput} - soundOutput={preferences.soundOutput} - autorefresh={preferences.autorefresh} + textOutput={preferences.textOutput} + gridOutput={preferences.gridOutput} + soundOutput={preferences.soundOutput} + autorefresh={preferences.autorefresh} - setTextOutput={setTextOutput} - setGridOutput={setGridOutput} - setSoundOutput={setSoundOutput} - dispatchConsoleEvent={dispatchConsoleEvent} - endSketchRefresh={endSketchRefresh} - stopSketch={stopSketch} - setBlobUrl={setBlobUrl} - expandConsole={expandConsole} - clearConsole={clearConsole} - /> -
+ setTextOutput={setTextOutput} + setGridOutput={setGridOutput} + setSoundOutput={setSoundOutput} + dispatchConsoleEvent={dispatchConsoleEvent} + endSketchRefresh={endSketchRefresh} + stopSketch={stopSketch} + setBlobUrl={setBlobUrl} + expandConsole={expandConsole} + clearConsole={clearConsole} + /> ); }; @@ -171,6 +164,8 @@ MobileSketchView.propTypes = { uploadFileModalVisible: PropTypes.bool.isRequired }).isRequired, + projectName: PropTypes.func.isRequired, + setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, setSoundOutput: PropTypes.func.isRequired, @@ -185,7 +180,7 @@ MobileSketchView.propTypes = { function mapStateToProps(state) { return { htmlFile: getHTMLFile(state.files), - project: state.project, + projectName: state.project.name, files: state.files, ide: state.ide, preferences: state.preferences, From eb3bc59382a27474ed41d906bd9f6b6f49ca1938 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 19 Jun 2020 15:58:48 -0300 Subject: [PATCH 11/27] :broom: clean up routes.js --- client/routes.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/routes.jsx b/client/routes.jsx index a98bc04d..43c1918d 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -22,10 +22,11 @@ const checkAuth = (store) => { store.dispatch(getUser()); }; +// This short-circuit seems unnecessary - using the mobile navigator (future) should prevent this from being called const onRouteChange = (store) => { - // FIXME: This seems unnecessary - using the mobile navigator should prevent this from being called const path = window.location.pathname; if (path.includes('/mobile')) return; + store.dispatch(stopSketch()); }; From 0e66756600e72ab44afd22ab3a6f1e7416826603 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 19 Jun 2020 16:30:39 -0300 Subject: [PATCH 12/27] :bug: correct projectName propType to string --- client/modules/Mobile/MobileSketchView.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index a84cb12b..a9adab25 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -164,7 +164,7 @@ MobileSketchView.propTypes = { uploadFileModalVisible: PropTypes.bool.isRequired }).isRequired, - projectName: PropTypes.func.isRequired, + projectName: PropTypes.string.isRequired, setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, From 597cb9baf9c217b8a843b56ae12e836c8c041b80 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 19 Jun 2020 17:50:21 -0300 Subject: [PATCH 13/27] :sparkles: strech preview canvas to full-width on demand --- client/modules/IDE/components/PreviewFrame.jsx | 11 ++++++++++- client/modules/Mobile/MobileSketchView.jsx | 7 ++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index a3f5abfb..66f45ee8 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -201,6 +201,12 @@ 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}`; } @@ -331,6 +337,7 @@ class PreviewFrame extends React.Component { if (this.props.endSketchRefresh) { this.props.endSketchRefresh(); } + // debugger; // eslint-disable-line } else { doc.srcdoc = ''; srcDoc.set(doc, ' '); @@ -384,11 +391,13 @@ PreviewFrame.propTypes = { clearConsole: PropTypes.func.isRequired, cmController: PropTypes.shape({ getContent: PropTypes.func - }) + }), + forceFullWidth: PropTypes.bool }; PreviewFrame.defaultProps = { fullView: false, + forceFullWidth: false, cmController: {} }; diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index a9adab25..e6d522f1 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,5 +1,5 @@ /* eslint-disable */ -import React from 'react'; +import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; import { bindActionCreators } from 'redux'; @@ -53,10 +53,10 @@ const MobileSketchView = (props) => { const { preferences, ide } = props; - // useEffect(() => { + useEffect(() => { // console.log(params); // getProject(params.project_id, params.username); - // }, []); + }); return ( @@ -78,6 +78,7 @@ const MobileSketchView = (props) => { content={selectedFile.content} isPlaying + forceFullWidth isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} previewIsRefreshing={ide.previewIsRefreshing} From 7604e27c4014ff99302b77718e861a4ad8e3c16a Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:30:34 -0300 Subject: [PATCH 14/27] :ok_hand: mark comment on routes.jsx as TODO --- client/routes.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/routes.jsx b/client/routes.jsx index 43c1918d..3a6a4b77 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -22,7 +22,7 @@ const checkAuth = (store) => { store.dispatch(getUser()); }; -// This short-circuit seems unnecessary - using the mobile navigator (future) should prevent this from being called +// TODO: This short-circuit seems unnecessary - using the mobile navigator (future) should prevent this from being called const onRouteChange = (store) => { const path = window.location.pathname; if (path.includes('/mobile')) return; From ec8566feeede9088d82e0cbcfcc48796078b3647 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:32:37 -0300 Subject: [PATCH 15/27] :ok_hand: remove empty useEffect --- client/modules/Mobile/MobileSketchView.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index e6d522f1..903177ea 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -53,11 +53,6 @@ const MobileSketchView = (props) => { const { preferences, ide } = props; - useEffect(() => { - // console.log(params); - // getProject(params.project_id, params.username); - }); - return (
From ebb952527c81c6a07a0215d43940a5abe6b005b7 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:40:54 -0300 Subject: [PATCH 16/27] :ok_hand: move icons to common/icons --- client/common/icons.jsx | 4 ++++ client/modules/IDE/pages/IDEViewMobile.jsx | 3 +-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 5b42fa83..bbc2a662 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -10,6 +10,8 @@ import Plus from '../images/plus-icon.svg'; import Close from '../images/close.svg'; import Exit from '../images/exit.svg'; import DropdownArrow from '../images/down-filled-triangle.svg'; +import Preferences from '../images/preferences.svg'; +import Play from '../images/triangle-arrow-right.svg'; // HOC that adds the right web accessibility props // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html @@ -70,3 +72,5 @@ export const PlusIcon = withLabel(Plus); export const CloseIcon = withLabel(Close); export const ExitIcon = withLabel(Exit); export const DropdownArrowIcon = withLabel(DropdownArrow); +export const PreferencesIcon = withLabel(Preferences); +export const PlayIcon = withLabel(Play); diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 8c12f1f8..eb742484 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -23,8 +23,7 @@ import { getHTMLFile } from '../reducers/files'; import Editor from '../components/Editor'; import { ExitIcon } from '../../../common/icons'; -import PreferencesIcon from '../../../images/preferences.svg'; -import PlayIcon from '../../../images/triangle-arrow-right.svg'; +import { PreferencesIcon, PlayIcon } from '../../../common/icons'; import IconButton from '../../../components/mobile/IconButton'; import Header from '../../../components/mobile/Header'; From 75bd5a3920e1a46da8ac53fb180d97fb01333bed Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:45:17 -0300 Subject: [PATCH 17/27] :ok_hand: remove eslint-disable --- client/modules/IDE/pages/IDEViewMobile.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index eb742484..6c9b6af6 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,4 +1,3 @@ -/* eslint-disable */ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -41,12 +40,15 @@ const isUserOwner = ({ project, user }) => (project.owner && project.owner.id == const IDEViewMobile = (props) => { const { - preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch + preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, + selectedFile, updateFileContent, files, + closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, + startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, + showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch } = props; - const [tmController, setTmController] = useState(null); - - const [overlay, setOverlay] = useState(null); + const [tmController, setTmController] = useState(null); // eslint-disable-line + const [overlay, setOverlay] = useState(null); // eslint-disable-line return ( From 1eb1bff7760f8283e56853dd1fb36c106550a0e7 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:46:35 -0300 Subject: [PATCH 18/27] :ok_hand: remove debugger comment --- client/modules/IDE/components/PreviewFrame.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 66f45ee8..54283bb4 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -337,7 +337,6 @@ class PreviewFrame extends React.Component { if (this.props.endSketchRefresh) { this.props.endSketchRefresh(); } - // debugger; // eslint-disable-line } else { doc.srcdoc = ''; srcDoc.set(doc, ' '); From c39211d4722f548896a76aa8ad2cdeeefc509dd8 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:49:15 -0300 Subject: [PATCH 19/27] :ok_hand: remove linter comment --- client/modules/IDE/components/PreviewFrame.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 54283bb4..b1867622 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -23,7 +23,6 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets } from '../../../utils/consoleUtils'; -// Kept inside class just for linter's const shouldRenderSketch = (props, prevProps = undefined) => { const { isPlaying, previewIsRefreshing, fullView } = props; From 78ec304e1572819874ee4631ef8560539b138eec Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:51:40 -0300 Subject: [PATCH 20/27] :ok_hand: remove eslint-disable --- client/modules/Mobile/MobileSketchView.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 903177ea..366c68bf 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,5 +1,4 @@ -/* eslint-disable */ -import React, { useEffect } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; import { bindActionCreators } from 'redux'; From 9ca0995461da854e6c7c52f95e6ad6bcb549fe38 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 18:13:42 -0300 Subject: [PATCH 21/27] :ok_hand: create Panel color object in theme --- client/components/mobile/Footer.jsx | 2 +- client/components/mobile/Header.jsx | 2 +- client/theme.js | 21 +++++++++++++++++++++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index 84e50d1b..45a3d87d 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('Button.default.background'); +const background = prop('Panel.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 d638c1ac..35ccf538 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('Button.default.background'); +const background = prop('Panel.default.background'); const textColor = prop('primaryTextColor'); const Header = styled.div` diff --git a/client/theme.js b/client/theme.js index 561fd835..cc9cb48f 100644 --- a/client/theme.js +++ b/client/theme.js @@ -88,6 +88,13 @@ export default { Icon: { default: grays.middleGray, hover: grays.darker + }, + Panel: { + default: { + foreground: colors.black, + background: grays.light, + border: grays.middleLight, + }, } }, [Theme.dark]: { @@ -120,6 +127,13 @@ export default { Icon: { default: grays.middleLight, hover: grays.lightest + }, + Panel: { + default: { + foreground: grays.light, + background: grays.dark, + border: grays.middleDark, + }, } }, [Theme.contrast]: { @@ -152,6 +166,13 @@ export default { Icon: { default: grays.mediumLight, hover: colors.yellow + }, + Panel: { + default: { + foreground: grays.light, + background: grays.dark, + border: grays.middleDark, + }, } }, }; From 7d24c07fcccec000c295daab08435d9ce3176abd Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 18:35:00 -0300 Subject: [PATCH 22/27] :ok_hand: use common/Button component for IconButton --- client/components/mobile/IconButton.jsx | 19 +++++++++++++------ client/modules/IDE/pages/IDEViewMobile.jsx | 2 +- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index ce758376..1057d952 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -1,17 +1,24 @@ import React from 'react'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { prop, remSize } from '../../theme'; +import Button from '../../common/Button'; -const textColor = prop('primaryTextColor'); - -const IconButton = styled.button` +const ButtonWrapper = styled(Button)` width: 3rem; > svg { width: 100%; height: auto; - fill: ${textColor}; - stroke: ${textColor}; } `; +const IconButton = ({ children }) => (); + +IconButton.propTypes = { + children: PropTypes.element.isRequired +}; + export default IconButton; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 6c9b6af6..a16a27f1 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -61,7 +61,7 @@ const IDEViewMobile = (props) => {

{selectedFile.name}

-
+
setOverlay('preferences')}> From 8a0b09d4168404253ab38aa40aade7654e807a7d Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 19:54:48 -0300 Subject: [PATCH 23/27] :ok_hand: use common/Button component for IconButton on screens --- client/components/mobile/Header.jsx | 9 ++++-- client/components/mobile/IconButton.jsx | 8 ++--- client/modules/IDE/pages/IDEViewMobile.jsx | 37 ++++++++++------------ client/modules/Mobile/MobileSketchView.jsx | 11 ++----- 4 files changed, 30 insertions(+), 35 deletions(-) diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 35ccf538..559f2efa 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -11,8 +11,8 @@ const Header = styled.div` background: ${background}; color: ${textColor}; padding: ${remSize(12)}; - padding-left: ${remSize(32)}; - padding-right: ${remSize(32)}; + padding-left: ${remSize(16)}; + padding-right: ${remSize(16)}; z-index: 1; display: flex; @@ -20,6 +20,11 @@ const Header = styled.div` flex-direction: row; justify-content: flex-start; align-items: center; + + // TODO: + svg { + height: 2rem; + } `; export default Header; diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index 1057d952..0aeed2b7 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -7,14 +7,14 @@ const ButtonWrapper = styled(Button)` width: 3rem; > svg { width: 100%; - height: auto; + height: 100%; } `; -const IconButton = ({ children }) => ( (); IconButton.propTypes = { diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index a16a27f1..58845f1d 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -30,10 +30,13 @@ import Screen from '../../../components/mobile/MobileScreen'; import Footer from '../../../components/mobile/Footer'; import IDEWrapper from '../../../components/mobile/IDEWrapper'; -const IconLinkWrapper = styled(Link)` - width: 3rem; - margin-right: 1.25rem; - margin-left: none; +const IconContainer = styled.div` + marginLeft: 2rem; + display: flex; +`; + +const TitleContainer = styled.div` + `; const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); @@ -53,30 +56,22 @@ const IDEViewMobile = (props) => { return (
- - - -
+ + + +

{project.name}

{selectedFile.name}

-
+ setOverlay('preferences')}> - { - // alert('starting sketch'); - startSketch(); - }} - > - - - -
+ { startSketch(); }}> + +
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 366c68bf..e48ec8b1 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import styled from 'styled-components'; 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 * as ProjectActions from '../IDE/actions/project'; @@ -25,12 +26,6 @@ const Content = styled.div` margin-top: ${remSize(68)}; `; -const IconLinkWrapper = styled(Link)` - width: 2rem; - margin-right: 1.25rem; - margin-left: none; -`; - const MobileSketchView = (props) => { // TODO: useSelector requires react-redux ^7.1.0 // const htmlFile = useSelector(state => getHTMLFile(state.files)); @@ -55,9 +50,9 @@ const MobileSketchView = (props) => { return (
- + - +

{projectName}


From 7805accf95d13ecee87e09ae0df47d59abed2b1b Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 19:57:39 -0300 Subject: [PATCH 24/27] :bug: fix margin on header title --- client/modules/Mobile/MobileSketchView.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index e48ec8b1..fb50ffe2 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -53,7 +53,7 @@ const MobileSketchView = (props) => { -
+

{projectName}


From a1d6abf00f53ec2bf71187985135ad398a0bebf4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 15:36:17 -0300 Subject: [PATCH 25/27] :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 26/27] :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 27/27] :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}