From 0d119aa5e7315c4b61f05e7ee21fd5cd307597ea Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 16 Jun 2020 16:25:40 -0300 Subject: [PATCH 01/56] :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/56] :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/56] :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/56] :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/56] :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/56] :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/56] :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/56] :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 26bdef9a3d865040837437b677148b2e61b8496c Mon Sep 17 00:00:00 2001 From: Sai Jatin K Date: Fri, 19 Jun 2020 20:18:58 +0530 Subject: [PATCH 09/56] Refactored getTitle and isUserOwner #1458 --- client/modules/IDE/pages/IDEView.jsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 9ff8351d..c427f4c5 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -92,7 +92,7 @@ class IDEView extends React.Component { } componentDidUpdate(prevProps) { - if (this.isUserOwner() && this.props.project.id) { + if (this.isUserOwner(this.props) && this.props.project.id) { if (this.props.preferences.autosave && this.props.ide.unsavedChanges && !this.props.ide.justOpenedProject) { if ( this.props.selectedFile.name === prevProps.selectedFile.name && @@ -123,21 +123,19 @@ class IDEView extends React.Component { this.autosaveInterval = null; } - getTitle = () => { - const { id } = this.props.project; - return id ? `p5.js Web Editor | ${this.props.project.name}` : 'p5.js Web Editor'; + getTitle = (props) => { + const { id } = props.project; + return id ? `p5.js Web Editor | ${props.project.name}` : 'p5.js Web Editor'; } - isUserOwner() { - return this.props.project.owner && this.props.project.owner.id === this.props.user.id; - } + isUserOwner = props => props.project.owner && props.project.owner.id === props.user.id; handleGlobalKeydown(e) { // 83 === s if (e.keyCode === 83 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) { e.preventDefault(); e.stopPropagation(); - if (this.isUserOwner() || (this.props.user.authenticated && !this.props.project.owner)) { + if (this.isUserOwner(this.props) || (this.props.user.authenticated && !this.props.project.owner)) { this.props.saveProject(this.cmController.getContent()); } else if (this.props.user.authenticated) { this.props.cloneProject(); @@ -208,7 +206,7 @@ class IDEView extends React.Component { return (
- {this.getTitle()} + {this.getTitle(this.props)} {this.props.toast.isVisible && }
-
+
setOverlay('preferences')}> From dc01823602218621f1281762a6c4d174844f2af4 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 29 Jun 2020 18:22:55 -0400 Subject: [PATCH 40/56] [#1234] Add header to clear cache for present view --- server/controllers/embed.controller.js | 1 + 1 file changed, 1 insertion(+) diff --git a/server/controllers/embed.controller.js b/server/controllers/embed.controller.js index 67edcd04..2d8bef6a 100644 --- a/server/controllers/embed.controller.js +++ b/server/controllers/embed.controller.js @@ -34,6 +34,7 @@ export function serveProject(req, res) { resolveScripts(sketchDoc, files); resolveStyles(sketchDoc, files); + res.setHeader('Cache-Control', 'public, max-age=0'); res.send(serializeDocument(sketchDoc)); }); }); From 03467849201185a755cb478d835bca5897201f62 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 29 Jun 2020 18:28:24 -0400 Subject: [PATCH 41/56] [#1473] Update `master` to `main` in examples.js - Update CDN URL links for assets on p5.js website --- server/scripts/examples.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/scripts/examples.js b/server/scripts/examples.js index be0d4ef4..e905fca3 100644 --- a/server/scripts/examples.js +++ b/server/scripts/examples.js @@ -264,7 +264,7 @@ function createProjectsInP5user(projectsInAllCategories) { const fileID = objectID().toHexString(); newProject.files.push({ name: assetName, - url: `https://cdn.jsdelivr.net/gh/processing/p5.js-website@master/src/data/examples/assets/${assetName}`, + url: `https://cdn.jsdelivr.net/gh/processing/p5.js-website@main/src/data/examples/assets/${assetName}`, id: fileID, _id: fileID, children: [], From 8a0b09d4168404253ab38aa40aade7654e807a7d Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 19:54:48 -0300 Subject: [PATCH 42/56] :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 43/56] :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 b96b9d350a857af461ddc4b732cdbe00b20b67ee Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 30 Jun 2020 16:41:26 -0300 Subject: [PATCH 44/56] :ok_hand: use remSize on IconButton --- client/components/mobile/IconButton.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index 0aeed2b7..544612b4 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -2,9 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import Button from '../../common/Button'; +import { remSize } from '../../theme'; const ButtonWrapper = styled(Button)` -width: 3rem; +width: ${remSize(48)}; > svg { width: 100%; height: 100%; From 30c47d6fe50f1ee627479af97de2d313a461869a Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 30 Jun 2020 16:52:03 -0300 Subject: [PATCH 45/56] :ok_hand: rename to --- .../mobile/{Selector.jsx => PreferencePicker.jsx} | 0 client/modules/Mobile/MobilePreferences.jsx | 8 ++++---- 2 files changed, 4 insertions(+), 4 deletions(-) rename client/components/mobile/{Selector.jsx => PreferencePicker.jsx} (100%) diff --git a/client/components/mobile/Selector.jsx b/client/components/mobile/PreferencePicker.jsx similarity index 100% rename from client/components/mobile/Selector.jsx rename to client/components/mobile/PreferencePicker.jsx diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index 92cc2ec9..b985963a 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -10,7 +10,7 @@ import * as IdeActions from '../IDE/actions/ide'; import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; -import Selector from '../../components/mobile/Selector'; +import PreferencePicker from '../../components/mobile/PreferencePicker'; import { ExitIcon } from '../../common/icons'; import { remSize, prop } from '../../theme'; @@ -180,14 +180,14 @@ const MobilePreferences = (props) => {
General Settings - { generalSettings.map(option => ) } + { generalSettings.map(option => ) } Accessibility - { accessibilitySettings.map(option => ) } + { accessibilitySettings.map(option => ) } Accessible Output

Used with screen reader

- { outputSettings.map(option => ) } + { outputSettings.map(option => ) }
From 1c1ea98a0bdbe0f9bbff55d346cdf72d86948be8 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 30 Jun 2020 17:01:24 -0300 Subject: [PATCH 46/56] :ok_hand: unimplement canvas stretching behavior --- client/modules/IDE/components/PreviewFrame.jsx | 9 +-------- client/modules/Mobile/MobileSketchView.jsx | 1 - 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index b1867622..5046a4fe 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -200,11 +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}`; } @@ -389,13 +384,11 @@ 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 49af2c2e..b871edf9 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -67,7 +67,6 @@ const MobileSketchView = (props) => { content={selectedFile.content} isPlaying - forceFullWidth isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} previewIsRefreshing={ide.previewIsRefreshing} From 24a72daf2c9b56f34fe54bb7dea69322fd777643 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 30 Jun 2020 19:11:48 -0300 Subject: [PATCH 47/56] :lipstick: improve
component structure and layout --- client/components/mobile/Header.jsx | 56 +++++++++++++++++++-- client/modules/IDE/pages/MobileIDEView.jsx | 41 ++++++--------- client/modules/Mobile/MobilePreferences.jsx | 31 +++++------- client/modules/Mobile/MobileSketchView.jsx | 16 +++--- 4 files changed, 87 insertions(+), 57 deletions(-) diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 559f2efa..04b336a2 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -1,14 +1,16 @@ import React from 'react'; import styled from 'styled-components'; +import PropTypes from 'prop-types'; import { prop, remSize } from '../../theme'; const background = prop('Panel.default.background'); const textColor = prop('primaryTextColor'); -const Header = styled.div` + +const HeaderDiv = styled.div` position: fixed; width: 100%; - background: ${background}; + background: ${props => (props.transparent ? 'transparent' : background)}; color: ${textColor}; padding: ${remSize(12)}; padding-left: ${remSize(16)}; @@ -23,8 +25,56 @@ const Header = styled.div` // TODO: svg { - height: 2rem; + max-height: ${remSize(32)}; + padding: ${remSize(4)} } `; +const IconContainer = styled.div` + margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))}; + display: flex; +`; + + +const TitleContainer = styled.div` + margin-left: ${remSize(4)}; + margin-right: auto; + + ${props => props.padded && `h2{ + padding-top: ${remSize(10)}; + padding-bottom: ${remSize(10)}; + }`} +`; + +const Header = ({ + title, subtitle, leftButton, children, transparent +}) => ( + + {leftButton} + + {title &&

{title}

} + {subtitle &&

{subtitle}

} + + + {children} + + +); + +Header.propTypes = { + title: PropTypes.string, + subtitle: PropTypes.string, + leftButton: PropTypes.element, + children: PropTypes.arrayOf(PropTypes.element), + transparent: PropTypes.bool +}; + +Header.defaultProps = { + title: null, + subtitle: null, + leftButton: null, + children: [], + transparent: false +}; + export default Header; diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 1fb95139..016dc1b7 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -1,7 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { Link } from 'react-router'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { useState } from 'react'; @@ -30,15 +28,6 @@ import Screen from '../../../components/mobile/MobileScreen'; import Footer from '../../../components/mobile/Footer'; import IDEWrapper from '../../../components/mobile/IDEWrapper'; -const IconContainer = styled.div` - marginLeft: 2rem; - display: flex; -`; - -const TitleContainer = styled.div` - -`; - const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); const MobileIDEView = (props) => { @@ -55,23 +44,21 @@ const MobileIDEView = (props) => { return ( -
- - +
+ + + } + > + setOverlay('preferences')}> + + { startSketch(); }}> + -
-

{project.name}

-

{selectedFile.name}

-
- - - setOverlay('preferences')}> - - { startSketch(); }}> - -
diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index b985963a..68277907 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -1,25 +1,20 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { Link, withRouter } from 'react-router'; +import { withRouter } from 'react-router'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import * as PreferencesActions from '../IDE/actions/preferences'; import * as IdeActions from '../IDE/actions/ide'; +import IconButton from '../../components/mobile/IconButton'; import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; import PreferencePicker from '../../components/mobile/PreferencePicker'; import { ExitIcon } from '../../common/icons'; import { remSize, prop } from '../../theme'; -const IconLinkWrapper = styled(Link)` - width: 3rem; - margin-right: 1.25rem; - margin-left: none; -`; - const Content = styled.div` z-index: 0; margin-top: ${remSize(68)}; @@ -32,7 +27,11 @@ const SettingsHeader = styled(Header)` const SectionHeader = styled.h2` color: ${prop('primaryTextColor')}; - padding-top: 2rem + padding-top: ${remSize(32)} +`; + +const SectionSubeader = styled.h3` + color: ${prop('primaryTextColor')}; `; @@ -167,15 +166,11 @@ const MobilePreferences = (props) => { return (
+ - -

Settings

- -
- - - -
+ + +
@@ -186,7 +181,7 @@ const MobilePreferences = (props) => { { accessibilitySettings.map(option => ) } Accessible Output -

Used with screen reader

+ Used with screen reader { outputSettings.map(option => ) } diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index b871edf9..f42a2382 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -49,15 +49,13 @@ const MobileSketchView = (props) => { return ( -
- - - -
-

{projectName}

-


-
-
+
+ + } + title={projectName} + /> Date: Tue, 30 Jun 2020 19:17:05 -0300 Subject: [PATCH 48/56] :lipstick: change screen header title to Preferences --- client/modules/Mobile/MobilePreferences.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index 68277907..b7e530fe 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -166,7 +166,7 @@ const MobilePreferences = (props) => { return (
- + From a1d6abf00f53ec2bf71187985135ad398a0bebf4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 15:36:17 -0300 Subject: [PATCH 49/56] :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 50/56] :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 51/56] :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}


From 3ce0a51c492983b8bc281bb3e202d0d852f99594 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 17:20:32 -0300 Subject: [PATCH 52/56] :ok_hand: increase option label size --- client/components/mobile/PreferencePicker.jsx | 9 ++++++--- client/modules/App/App.jsx | 4 +++- client/modules/IDE/pages/MobileIDEView.jsx | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/client/components/mobile/PreferencePicker.jsx b/client/components/mobile/PreferencePicker.jsx index 5ef41a9e..2c236f4c 100644 --- a/client/components/mobile/PreferencePicker.jsx +++ b/client/components/mobile/PreferencePicker.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { prop } from '../../theme'; +import { prop, remSize } from '../../theme'; const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))` @@ -11,9 +11,12 @@ const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'prefer const Preference = styled.div.attrs(props => ({ ...props, className: 'preference' }))` flex-wrap: nowrap !important; align-items: baseline !important; - justify-items: space-between + justify-items: space-between; `; +const OptionLabel = styled.label.attrs({ className: 'preference__option' })` + font-size: ${remSize(14)} !important; +`; const Selector = ({ title, value, onSelect, options, @@ -32,7 +35,7 @@ const Selector = ({ className="preference__radio-button" value={option.value} checked={value === option.value} - /> + />{option.label} ))}
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..701e4838 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -2,9 +2,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; import getConfig from '../../utils/getConfig'; -import DevTools from './components/DevTools'; +// import DevTools from './components/DevTools'; import { setPreviousPath } from '../IDE/actions/ide'; +const DevTools = () => <>; + class App extends React.Component { constructor(props, context) { super(props, context); diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 417a1f4a..180cbb2e 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -50,7 +50,7 @@ const MobileIDEView = (props) => { } > setOverlay('preferences')} icon={PreferencesIcon} aria-label="Open preferences menu" From 82ec5207cbc9c4ede0bdd583df734e619e889577 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 17:36:25 -0300 Subject: [PATCH 53/56] :ok_hand: fixed warnings --- client/components/mobile/Header.jsx | 2 +- client/components/mobile/PreferencePicker.jsx | 37 +++++++++++-------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 445ef93e..1f7f7a29 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -65,7 +65,7 @@ Header.propTypes = { title: PropTypes.string, subtitle: PropTypes.string, leftButton: PropTypes.element, - children: PropTypes.arrayOf(PropTypes.element), + children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]), transparent: PropTypes.bool }; diff --git a/client/components/mobile/PreferencePicker.jsx b/client/components/mobile/PreferencePicker.jsx index 2c236f4c..0e2e085a 100644 --- a/client/components/mobile/PreferencePicker.jsx +++ b/client/components/mobile/PreferencePicker.jsx @@ -18,34 +18,41 @@ const OptionLabel = styled.label.attrs({ className: 'preference__option' })` font-size: ${remSize(14)} !important; `; -const Selector = ({ +const PreferencePicker = ({ title, value, onSelect, options, }) => ( {title}
{options.map(option => ( - onSelect(option.value)} - aria-label={option.ariaLabel} - name={option.name} - key={option.id} - id={option.id} - className="preference__radio-button" - value={option.value} - checked={value === option.value} - />{option.label} + + onSelect(option.value)} + aria-label={option.ariaLabel} + name={option.name} + key={`${option.name}-${option.id}-input`} + id={option.id} + className="preference__radio-button" + value={option.value} + checked={value === option.value} + /> + + {option.label} + ))}
); -Selector.defaultProps = { +PreferencePicker.defaultProps = { options: [] }; -Selector.propTypes = { +PreferencePicker.propTypes = { title: PropTypes.string.isRequired, value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired, options: PropTypes.arrayOf(PropTypes.shape({ @@ -57,4 +64,4 @@ Selector.propTypes = { onSelect: PropTypes.func.isRequired, }; -export default Selector; +export default PreferencePicker; From 58d8fc18d5a954dd9fe230eb755abf115e054863 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 17:37:32 -0300 Subject: [PATCH 54/56] :ok_hand: fixed warnings on MobileSketchView and MobilePreferences --- client/modules/Mobile/MobilePreferences.jsx | 6 +++++- client/modules/Mobile/MobileSketchView.jsx | 1 - 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index ce91833b..a9dc9f34 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -55,7 +55,11 @@ const MobilePreferences = (props) => { value: 'dark', label: 'dark', ariaLabel: 'dark theme on', name: 'dark theme', id: 'dark-theme-on' }, { - value: 'contrast', label: 'contrast', ariaLabel: 'contrast theme on', name: 'contrast theme', id: 'contrast-theme-on' + value: 'contrast', + label: 'contrast', + ariaLabel: 'contrast theme on', + name: 'contrast theme', + id: 'contrast-theme-on' } ], onSelect: x => setTheme(x) // setTheme diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 4f20d6a3..64eabb5e 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,6 +1,5 @@ import React 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'; From 88ebe9e7ea8a7b4ee6655a031a9634acb43ac6ee Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 1 Jul 2020 16:56:05 -0400 Subject: [PATCH 55/56] Re-add Redux DevTools to App.jsx --- client/modules/App/App.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 701e4838..af441a9d 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -2,11 +2,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; import getConfig from '../../utils/getConfig'; -// import DevTools from './components/DevTools'; +import DevTools from './components/DevTools'; import { setPreviousPath } from '../IDE/actions/ide'; -const DevTools = () => <>; - class App extends React.Component { constructor(props, context) { super(props, context); From b05d1b1a0290e932957b965ac47b62b6f71cb4fe Mon Sep 17 00:00:00 2001 From: ov Date: Mon, 6 Jul 2020 10:36:45 +0100 Subject: [PATCH 56/56] Prototype with proposed i18n architecture (#1478) * Branch with i18n functionality * Translation files with new entries * includes Loader in index.jsx * Uses WithTranslation In Nav * New Namespace * Shortcuts Modal Complete * Preferences complete * About overlay title translated --- client/components/Nav.jsx | 147 +++++++++++++----- client/components/__test__/Nav.test.jsx | 3 +- .../__test__/__snapshots__/Nav.test.jsx.snap | 78 +++------- client/i18n.js | 38 +++++ client/index.jsx | 8 +- client/modules/IDE/components/About.jsx | 23 +-- .../IDE/components/KeyboardShortcutModal.jsx | 30 ++-- client/modules/IDE/components/Preferences.jsx | 58 +++---- client/modules/IDE/components/Toast.jsx | 4 +- client/modules/IDE/pages/IDEView.jsx | 18 ++- package-lock.json | 66 +++++++- package.json | 4 + server/server.js | 1 + server/views/index.js | 2 + translations/locales/en-US/translations.json | 115 ++++++++++++++ translations/locales/es-419/translations.json | 113 ++++++++++++++ 16 files changed, 550 insertions(+), 158 deletions(-) create mode 100644 client/i18n.js create mode 100644 translations/locales/en-US/translations.json create mode 100644 translations/locales/es-419/translations.json diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index dd7c800e..4c27d6fa 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -4,6 +4,8 @@ import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { Link } from 'react-router'; import classNames from 'classnames'; +import { withTranslation } from 'react-i18next'; +import i18next from 'i18next'; import * as IDEActions from '../modules/IDE/actions/ide'; import * as toastActions from '../modules/IDE/actions/toast'; import * as projectActions from '../modules/IDE/actions/project'; @@ -55,6 +57,10 @@ class Nav extends React.PureComponent { this.handleFocusForHelp = this.handleFocus.bind(this, 'help'); this.toggleDropdownForAccount = this.toggleDropdown.bind(this, 'account'); this.handleFocusForAccount = this.handleFocus.bind(this, 'account'); + this.toggleDropdownForLang = this.toggleDropdown.bind(this, 'lang'); + this.handleFocusForLang = this.handleFocus.bind(this, 'lang'); + this.handleLangSelection = this.handleLangSelection.bind(this); + this.closeDropDown = this.closeDropDown.bind(this); } @@ -163,6 +169,13 @@ class Nav extends React.PureComponent { this.setDropdown('none'); } + handleLangSelection(event) { + i18next.changeLanguage(event.target.value); + this.props.showToast(1500); + this.props.setToastText('LangChange'); + this.setDropdown('none'); + } + handleLogout() { this.props.logoutUser(); this.setDropdown('none'); @@ -233,7 +246,7 @@ class Nav extends React.PureComponent {
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index 1b5c342b..1a658c3c 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Helmet } from 'react-helmet'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; +import { withTranslation } from 'react-i18next'; // import { bindActionCreators } from 'redux'; // import { connect } from 'react-redux'; // import * as PreferencesActions from '../actions/preferences'; @@ -98,13 +99,13 @@ class Preferences extends React.Component {
-

General Settings

 -

Accessibility

 +

{this.props.t('GeneralSettings')}

 +

{this.props.t('Accessibility')}
-

Theme

+

{this.props.t('Theme')}

- + this.props.setTheme('dark')} @@ -127,7 +128,7 @@ class Preferences extends React.Component { value="dark" checked={this.props.theme === 'dark'} /> - + this.props.setTheme('contrast')} @@ -138,11 +139,11 @@ class Preferences extends React.Component { value="contrast" checked={this.props.theme === 'contrast'} /> - +
-

Text size

+

{this.props.t('TextSize')}

= 36} >
-

Autosave

+

{this.props.t('Autosave')}

- + this.props.setAutosave(false)} @@ -198,11 +199,11 @@ class Preferences extends React.Component { value="Off" checked={!this.props.autosave} /> - +
-

Word Wrap

+

{this.props.t('WordWrap')}

- + this.props.setLinewrap(false)} @@ -225,13 +226,13 @@ class Preferences extends React.Component { value="Off" checked={!this.props.linewrap} /> - +
-

Line numbers

+

{this.props.t('LineNumbers')}

- + this.props.setLineNumbers(false)} @@ -254,11 +255,11 @@ class Preferences extends React.Component { value="Off" checked={!this.props.lineNumbers} /> - +
-

Lint warning sound

+

{this.props.t('LintWarningSound')}

- + this.props.setLintWarning(false)} @@ -281,19 +282,19 @@ class Preferences extends React.Component { value="Off" checked={!this.props.lintWarning} /> - +
-

Accessible text-based canvas

-
Used with screen reader
+

{this.props.t('AccessibleTextBasedCanvas')}

+
{this.props.t('UsedScreenReader')}
- + { @@ -319,7 +320,7 @@ class Preferences extends React.Component { value="On" checked={(this.props.gridOutput)} /> - + { @@ -331,7 +332,7 @@ class Preferences extends React.Component { value="On" checked={(this.props.soundOutput)} /> - +
@@ -360,6 +361,7 @@ Preferences.propTypes = { setLintWarning: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, setTheme: PropTypes.func.isRequired, + t: PropTypes.func.isRequired, }; -export default Preferences; +export default withTranslation('WebEditor')(Preferences); diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx index 2b9a0d58..5aaa3f70 100644 --- a/client/modules/IDE/components/Toast.jsx +++ b/client/modules/IDE/components/Toast.jsx @@ -2,15 +2,17 @@ import PropTypes from 'prop-types'; import React from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import { useTranslation } from 'react-i18next'; import * as ToastActions from '../actions/toast'; import ExitIcon from '../../../images/exit.svg'; function Toast(props) { + const { t } = useTranslation('WebEditor'); return (

- {props.text} + {t(props.text)}