From c8b3da90e860c103c641d1663160fce6837e35ae Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 22 Jun 2020 15:10:20 -0300 Subject: [PATCH 01/17] :recycle: rename IDEViewMobile to MobileIDEView --- .../IDE/pages/{IDEViewMobile.jsx => MobileIDEView.jsx} | 6 +++--- client/routes.jsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename client/modules/IDE/pages/{IDEViewMobile.jsx => MobileIDEView.jsx} (99%) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/MobileIDEView.jsx similarity index 99% rename from client/modules/IDE/pages/IDEViewMobile.jsx rename to client/modules/IDE/pages/MobileIDEView.jsx index 8c12f1f8..45a038ce 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -40,7 +40,7 @@ const IconLinkWrapper = styled(Link)` const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); -const IDEViewMobile = (props) => { +const MobileIDEView = (props) => { const { preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch } = props; @@ -120,7 +120,7 @@ const IDEViewMobile = (props) => { }; -IDEViewMobile.propTypes = { +MobileIDEView.propTypes = { preferences: PropTypes.shape({ fontSize: PropTypes.number.isRequired, @@ -267,4 +267,4 @@ function mapDispatchToProps(dispatch) { } -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEViewMobile)); +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobileIDEView)); diff --git a/client/routes.jsx b/client/routes.jsx index 43c1918d..dcd47ff3 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -2,7 +2,7 @@ import { Route, IndexRoute } from 'react-router'; import React from 'react'; import App from './modules/App/App'; import IDEView from './modules/IDE/pages/IDEView'; -import IDEViewMobile from './modules/IDE/pages/IDEViewMobile'; +import MobileIDEView from './modules/IDE/pages/MobileIDEView'; import MobileSketchView from './modules/Mobile/MobileSketchView'; import FullView from './modules/IDE/pages/FullView'; import LoginView from './modules/User/pages/LoginView'; @@ -56,7 +56,7 @@ const routes = store => ( - + ); From b27ee57aeebc835b9cdbe1f04295bcc519d7d2b8 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 22 Jun 2020 21:06:40 -0300 Subject: [PATCH 02/17] :construction: connect MobileSettings --- client/modules/IDE/pages/MobileIDEView.jsx | 17 +- client/modules/Mobile/MobilePreferences.jsx | 233 ++++++++++++++++++++ client/routes.jsx | 2 + 3 files changed, 242 insertions(+), 10 deletions(-) create mode 100644 client/modules/Mobile/MobilePreferences.jsx diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 45a038ce..d1d98a46 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -61,16 +61,13 @@ const MobileIDEView = (props) => {
- setOverlay('preferences')}> - - { - // alert('starting sketch'); - startSketch(); - }} - > + + setOverlay('preferences')}> + + + + startSketch()}> diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx new file mode 100644 index 00000000..9c44aace --- /dev/null +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -0,0 +1,233 @@ +import React, { useEffect } from 'react'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { Link } from 'react-router'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import Screen from '../../components/mobile/MobileScreen'; +import Header from '../../components/mobile/Header'; +import { ExitIcon } from '../../common/icons'; +import { remSize } from '../../theme'; +import * as PreferencesActions from '../IDE/actions/preferences'; +import * as IdeActions from '../IDE/actions/ide'; + +const IconLinkWrapper = styled(Link)` + width: 3rem; + margin-right: 1.25rem; + margin-left: none; +`; + +const Content = styled.div` + z-index: 0; + margin-top: ${remSize(68)}; +`; + +/* +
+

Word Wrap

+
+ this.props.setLinewrap(true)} + aria-label="linewrap on" + name="linewrap" + id="linewrap-on" + className="preference__radio-button" + value="On" + checked={this.props.linewrap} + /> + + this.props.setLinewrap(false)} + aria-label="linewrap off" + name="linewrap" + id="linewrap-off" + className="preference__radio-button" + value="Off" + checked={!this.props.linewrap} + /> + +
+
+*/ + +const Selector = ({ + title, value, onSelect, ariaLabel, name, id, options, +}) => ( +
+

{title}

+ {options.map(option => ( +
+ onSelect(option.value)} + aria-label={ariaLabel} + name={name} + id={id} + className="preference__radio-button" + value={option.value} + checked={value === option.value} + /> + +
))} + +
+); + +Selector.defaultProps = { + options: [] +}; + +Selector.propTypes = { + title: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + options: PropTypes.arrayOf(PropTypes.string), + ariaLabel: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + id: PropTypes.string.isRequired, + onSelect: PropTypes.string.isRequired, +}; + +const SettingsHeader = styled(Header)` + background: transparent +`; + + +const MobilePreferences = (props) => { + const { setTheme } = props; + const preferences = [ + { + title: 'Theme', + value: 'light', + options: [ + { + value: 'light', label: 'light', ariaLabel: 'light theme on', name: 'light theme', id: 'light-theme-on' + }, + { + 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' + } + ], + onSelect: setTheme // setTheme + }, + + { + title: 'Autosave', + value: true, + options: [ + { + value: 'On', label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on' + }, + { + value: 'Off', label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off' + }, + ], + onSelect: () => {} // setAutosave + } + ]; + + useEffect(() => { }); + + return ( + + +
+

Settings

+
+ +
+ + + + +
+ + +
+ + { preferences.map(option => ) } + +
+ ); +}; + + +MobilePreferences.propTypes = { + fontSize: PropTypes.number.isRequired, + lineNumbers: PropTypes.bool.isRequired, + autosave: PropTypes.bool.isRequired, + linewrap: PropTypes.bool.isRequired, + textOutput: PropTypes.bool.isRequired, + gridOutput: PropTypes.bool.isRequired, + soundOutput: PropTypes.bool.isRequired, + lintWarning: PropTypes.bool.isRequired, + theme: PropTypes.string.isRequired, + + setLinewrap: PropTypes.func.isRequired, + setLintWarning: PropTypes.func.isRequired, + setTheme: PropTypes.func.isRequired, + setFontSize: PropTypes.func.isRequired, + setLineNumbers: PropTypes.func.isRequired, + setAutosave: PropTypes.func.isRequired, + setTextOutput: PropTypes.func.isRequired, + setGridOutput: PropTypes.func.isRequired, + setSoundOutput: PropTypes.func.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, + autorefreshIdeActions: 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, +}; + +const mapStateToProps = state => ({ + preferences: state.preferences, +}); + +const mapDispatchToProps = dispatch => bindActionCreators({ + ...PreferencesActions, + ...IdeActions +}, dispatch); + + +export default connect(mapStateToProps, mapDispatchToProps)(MobilePreferences); diff --git a/client/routes.jsx b/client/routes.jsx index dcd47ff3..92c3f2b3 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -4,6 +4,7 @@ import App from './modules/App/App'; import IDEView from './modules/IDE/pages/IDEView'; import MobileIDEView from './modules/IDE/pages/MobileIDEView'; import MobileSketchView from './modules/Mobile/MobileSketchView'; +import MobilePreferences from './modules/Mobile/MobilePreferences'; import FullView from './modules/IDE/pages/FullView'; import LoginView from './modules/User/pages/LoginView'; import SignupView from './modules/User/pages/SignupView'; @@ -58,6 +59,7 @@ const routes = store => ( + ); From 167bbe88a0d9133925a79e109c6086b74070fa27 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 23 Jun 2020 15:54:09 -0300 Subject: [PATCH 03/17] :sparkles: Navigation to Settings Screen --- client/components/mobile/MobileScreen.jsx | 12 +- client/modules/IDE/pages/MobileIDEView.jsx | 3 +- client/modules/Mobile/MobilePreferences.jsx | 155 +++++++------------- client/modules/Mobile/MobileSketchView.jsx | 2 +- server/routes/server.routes.js | 2 +- 5 files changed, 61 insertions(+), 113 deletions(-) diff --git a/client/components/mobile/MobileScreen.jsx b/client/components/mobile/MobileScreen.jsx index 1e50f80a..e78baa2c 100644 --- a/client/components/mobile/MobileScreen.jsx +++ b/client/components/mobile/MobileScreen.jsx @@ -1,13 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Screen = ({ children }) => ( -
+const Screen = ({ children, fullscreen }) => ( +
{children}
); + +Screen.defaultProps = { + fullscreen: false +}; + Screen.propTypes = { - children: PropTypes.node.isRequired + children: PropTypes.node.isRequired, + fullscreen: PropTypes.bool }; export default Screen; diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index d1d98a46..7f11777b 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -1,4 +1,3 @@ -/* eslint-disable */ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -50,7 +49,7 @@ const MobileIDEView = (props) => { const [overlay, setOverlay] = useState(null); return ( - +
diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index 9c44aace..b905e152 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -1,15 +1,17 @@ import React, { useEffect } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { Link } from 'react-router'; +import { Link, 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 Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; import { ExitIcon } from '../../common/icons'; import { remSize } from '../../theme'; -import * as PreferencesActions from '../IDE/actions/preferences'; -import * as IdeActions from '../IDE/actions/ide'; const IconLinkWrapper = styled(Link)` width: 3rem; @@ -22,57 +24,25 @@ const Content = styled.div` margin-top: ${remSize(68)}; `; -/* -
-

Word Wrap

-
- this.props.setLinewrap(true)} - aria-label="linewrap on" - name="linewrap" - id="linewrap-on" - className="preference__radio-button" - value="On" - checked={this.props.linewrap} - /> - - this.props.setLinewrap(false)} - aria-label="linewrap off" - name="linewrap" - id="linewrap-off" - className="preference__radio-button" - value="Off" - checked={!this.props.linewrap} - /> - -
-
-*/ - const Selector = ({ - title, value, onSelect, ariaLabel, name, id, options, + title, value, onSelect, options, }) => (

{title}

{options.map(option => ( -
+
onSelect(option.value)} - aria-label={ariaLabel} - name={name} - id={id} + aria-label={option.ariaLabel} + name={option.name} + id={option.id} className="preference__radio-button" value={option.value} checked={value === option.value} /> - +
))} -
); @@ -82,12 +52,14 @@ Selector.defaultProps = { Selector.propTypes = { title: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - options: PropTypes.arrayOf(PropTypes.string), - ariaLabel: PropTypes.string.isRequired, - name: PropTypes.string.isRequired, - id: PropTypes.string.isRequired, - onSelect: PropTypes.string.isRequired, + value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired, + options: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + label: PropTypes.string, + ariaLabel: PropTypes.string, + })), + onSelect: PropTypes.func.isRequired, }; const SettingsHeader = styled(Header)` @@ -96,11 +68,13 @@ const SettingsHeader = styled(Header)` const MobilePreferences = (props) => { - const { setTheme } = props; + const { setTheme, setAutosave, setLinewrap } = props; + const { theme, autosave, linewrap } = props; + const preferences = [ { title: 'Theme', - value: 'light', + value: theme, options: [ { value: 'light', label: 'light', ariaLabel: 'light theme on', name: 'light theme', id: 'light-theme-on' @@ -112,44 +86,55 @@ const MobilePreferences = (props) => { value: 'contrast', label: 'contrast', ariaLabel: 'contrast theme on', name: 'contrast theme', id: 'contrast-theme-on' } ], - onSelect: setTheme // setTheme + onSelect: x => setTheme(x) // setTheme }, { title: 'Autosave', - value: true, + value: autosave, options: [ { - value: 'On', label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on' + value: true, label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on' }, { - value: 'Off', label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off' + value: false, label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off' }, ], - onSelect: () => {} // setAutosave + onSelect: x => setAutosave(x) // setAutosave + }, + + { + title: 'Word Wrap', + value: linewrap, + options: [ + { + value: true, label: 'On', ariaLabel: 'linewrap on', name: 'linewrap', id: 'linewrap-on' + }, + { + value: false, label: 'Off', ariaLabel: 'linewrap off', name: 'linewrap', id: 'linewrap-off' + }, + ], + onSelect: x => setLinewrap(x) } ]; - useEffect(() => { }); + // useEffect(() => { }); return ( -
-

Settings

-
+

Settings

- - + -
+
- { preferences.map(option => ) } + { preferences.map(option => ) }
); @@ -176,52 +161,10 @@ MobilePreferences.propTypes = { setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, setSoundOutput: PropTypes.func.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, - autorefreshIdeActions: 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, }; const mapStateToProps = state => ({ - preferences: state.preferences, + ...state.preferences, }); const mapDispatchToProps = dispatch => bindActionCreators({ @@ -230,4 +173,4 @@ const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch); -export default connect(mapStateToProps, mapDispatchToProps)(MobilePreferences); +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobilePreferences)); diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index e6d522f1..4d101d45 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -59,7 +59,7 @@ const MobileSketchView = (props) => { }); return ( - +
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js index f7666f29..c038a3c7 100644 --- a/server/routes/server.routes.js +++ b/server/routes/server.routes.js @@ -123,7 +123,7 @@ if (process.env.MOBILE_ENABLED) { res.send(renderIndex()); }); - router.get('/mobile/*', (req, res) => { + router.get('/mobile/preferences', (req, res) => { res.send(renderIndex()); }); } From ad3db32fa37243c14a7caf2e0244360aab108469 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 23 Jun 2020 16:18:34 -0300 Subject: [PATCH 04/17] :bug: fix settings text color --- client/components/mobile/Selector.jsx | 50 +++++++++++++++ client/modules/Mobile/MobilePreferences.jsx | 67 ++++++--------------- 2 files changed, 67 insertions(+), 50 deletions(-) create mode 100644 client/components/mobile/Selector.jsx diff --git a/client/components/mobile/Selector.jsx b/client/components/mobile/Selector.jsx new file mode 100644 index 00000000..e5da2f00 --- /dev/null +++ b/client/components/mobile/Selector.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { prop } from '../../theme'; + + +const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))` + color: ${prop('primaryTextColor')} !important; +`; + +const Selector = ({ + title, value, onSelect, options, +}) => ( +
+ {/*

{title}

*/} + {title} + {options.map(option => ( +
+ onSelect(option.value)} + aria-label={option.ariaLabel} + name={option.name} + id={option.id} + className="preference__radio-button" + value={option.value} + checked={value === option.value} + /> + +
))} +
+); + +Selector.defaultProps = { + options: [] +}; + +Selector.propTypes = { + title: PropTypes.string.isRequired, + value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired, + options: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + label: PropTypes.string, + ariaLabel: PropTypes.string, + })), + onSelect: PropTypes.func.isRequired, +}; + +export default Selector; diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index b905e152..a7634701 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -10,6 +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 { ExitIcon } from '../../common/icons'; import { remSize } from '../../theme'; @@ -24,43 +25,6 @@ const Content = styled.div` margin-top: ${remSize(68)}; `; -const Selector = ({ - title, value, onSelect, options, -}) => ( -
-

{title}

- {options.map(option => ( -
- onSelect(option.value)} - aria-label={option.ariaLabel} - name={option.name} - id={option.id} - className="preference__radio-button" - value={option.value} - checked={value === option.value} - /> - -
))} -
-); - -Selector.defaultProps = { - options: [] -}; - -Selector.propTypes = { - title: PropTypes.string.isRequired, - value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired, - options: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - label: PropTypes.string, - ariaLabel: PropTypes.string, - })), - onSelect: PropTypes.func.isRequired, -}; const SettingsHeader = styled(Header)` background: transparent @@ -121,21 +85,24 @@ const MobilePreferences = (props) => { // useEffect(() => { }); return ( - - -

Settings

+ +
-
- - - + +

Settings

-
- -
- - { preferences.map(option => ) } - +
+ + + + +
+ +
+ + { preferences.map(option => ) } + +
); }; From 181e832bfd0dcf69e8cb6c882d62519dee324d6b Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 23 Jun 2020 16:45:35 -0300 Subject: [PATCH 05/17] :lipstick: fix options styling --- client/components/mobile/Selector.jsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/client/components/mobile/Selector.jsx b/client/components/mobile/Selector.jsx index e5da2f00..8541454c 100644 --- a/client/components/mobile/Selector.jsx +++ b/client/components/mobile/Selector.jsx @@ -8,27 +8,34 @@ const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'prefer color: ${prop('primaryTextColor')} !important; `; +const Preference = styled.div.attrs(props => ({ ...props, className: 'preference' }))` + flex-wrap: nowrap !important; + align-items: baseline !important; + justify-items: space-between +`; + + const Selector = ({ title, value, onSelect, options, }) => ( -
- {/*

{title}

*/} + {title} - {options.map(option => ( -
- + {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} - /> - -
))} -
+ /> + ))} +
+ ); Selector.defaultProps = { From a9c17b52676bd9a5e3f37f9ea6c3ed6f750e44df Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 23 Jun 2020 17:03:51 -0300 Subject: [PATCH 06/17] :sparkles: create settings section header component --- client/components/mobile/Selector.jsx | 2 +- client/modules/Mobile/MobilePreferences.jsx | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/client/components/mobile/Selector.jsx b/client/components/mobile/Selector.jsx index 8541454c..5ef41a9e 100644 --- a/client/components/mobile/Selector.jsx +++ b/client/components/mobile/Selector.jsx @@ -5,7 +5,7 @@ import { prop } from '../../theme'; const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))` - color: ${prop('primaryTextColor')} !important; + color: ${prop('primaryTextColor')}; `; const Preference = styled.div.attrs(props => ({ ...props, className: 'preference' }))` diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index a7634701..f8500e2b 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -12,7 +12,7 @@ import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; import Selector from '../../components/mobile/Selector'; import { ExitIcon } from '../../common/icons'; -import { remSize } from '../../theme'; +import { remSize, prop } from '../../theme'; const IconLinkWrapper = styled(Link)` width: 3rem; @@ -30,12 +30,17 @@ const SettingsHeader = styled(Header)` background: transparent `; +const SectionHeader = styled.h2` + color: ${prop('primaryTextColor')}; + padding-top: 2rem +`; + const MobilePreferences = (props) => { const { setTheme, setAutosave, setLinewrap } = props; const { theme, autosave, linewrap } = props; - const preferences = [ + const generalSettings = [ { title: 'Theme', value: theme, @@ -95,12 +100,14 @@ const MobilePreferences = (props) => { -
- { preferences.map(option => ) } + General Settings + { generalSettings.map(option => ) } + + Accessibility
From 1f69786aaa665d4535297ccd80b36d8d16ce33f9 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 23 Jun 2020 17:15:59 -0300 Subject: [PATCH 07/17] :sparkles: add accessible output settings --- client/modules/Mobile/MobilePreferences.jsx | 53 +++++++++++++++++++-- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index f8500e2b..45ebe53e 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -37,8 +37,12 @@ const SectionHeader = styled.h2` const MobilePreferences = (props) => { - const { setTheme, setAutosave, setLinewrap } = props; - const { theme, autosave, linewrap } = props; + const { + setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput + } = props; + const { + theme, autosave, linewrap, textOutput, gridOutput, soundOutput + } = props; const generalSettings = [ { @@ -87,6 +91,48 @@ const MobilePreferences = (props) => { } ]; + const accessibilitySettings = [ + { + title: 'Plain-text', + value: textOutput, + options: [ + { + value: true, label: 'On', ariaLabel: 'text output on', name: 'text output', id: 'text-output-on' + }, + { + value: false, label: 'Off', ariaLabel: 'text output off', name: 'text output', id: 'text-output-off' + }, + ], + onSelect: x => setTextOutput(x) + }, + { + title: 'Table-text', + value: gridOutput, + options: [ + { + value: true, label: 'On', ariaLabel: 'table output on', name: 'table output', id: 'table-output-on' + }, + { + value: false, label: 'Off', ariaLabel: 'table output off', name: 'table output', id: 'table-output-off' + }, + ], + onSelect: x => setGridOutput(x) + }, + { + title: 'Sound', + value: soundOutput, + options: [ + { + value: true, label: 'On', ariaLabel: 'sound output on', name: 'sound output', id: 'sound-output-on' + }, + { + value: false, label: 'Off', ariaLabel: 'sound output off', name: 'sound output', id: 'sound-output-off' + }, + ], + onSelect: x => setSoundOutput(x) + }, + ]; + // useEffect(() => { }); return ( @@ -108,13 +154,14 @@ const MobilePreferences = (props) => { { generalSettings.map(option => ) } Accessibility + { accessibilitySettings.map(option => ) } + ); }; - MobilePreferences.propTypes = { fontSize: PropTypes.number.isRequired, lineNumbers: PropTypes.bool.isRequired, From 3ba1b262811fe0150f1642276ff80c9860ac195a Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 23 Jun 2020 17:27:43 -0300 Subject: [PATCH 08/17] :sparkles: add accessibility settings --- client/modules/Mobile/MobilePreferences.jsx | 40 +++++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index 45ebe53e..92cc2ec9 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -38,10 +38,10 @@ const SectionHeader = styled.h2` const MobilePreferences = (props) => { const { - setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput + setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, lineNumbers, lintWarning } = props; const { - theme, autosave, linewrap, textOutput, gridOutput, soundOutput + theme, autosave, linewrap, textOutput, gridOutput, soundOutput, setLineNumbers, setLintWarning } = props; const generalSettings = [ @@ -91,7 +91,7 @@ const MobilePreferences = (props) => { } ]; - const accessibilitySettings = [ + const outputSettings = [ { title: 'Plain-text', value: textOutput, @@ -133,6 +133,35 @@ const MobilePreferences = (props) => { }, ]; + const accessibilitySettings = [ + { + title: 'Line Numbers', + value: lineNumbers, + options: [ + { + value: true, label: 'On', ariaLabel: 'line numbers on', name: 'line numbers', id: 'line-numbers-on' + }, + { + value: false, label: 'Off', ariaLabel: 'line numbers off', name: 'line numbers', id: 'line-numbers-off' + }, + ], + onSelect: x => setLineNumbers(x) + }, + { + title: 'Lint Warning Sound', + value: lintWarning, + options: [ + { + value: true, label: 'On', ariaLabel: 'lint warning on', name: 'lint warning', id: 'lint-warning-on' + }, + { + value: false, label: 'Off', ariaLabel: 'lint warning off', name: 'lint warning', id: 'lint-warning-off' + }, + ], + onSelect: x => setLintWarning(x) + }, + ]; + // useEffect(() => { }); return ( @@ -156,12 +185,17 @@ const MobilePreferences = (props) => { Accessibility { accessibilitySettings.map(option => ) } + Accessible Output +

Used with screen reader

+ { outputSettings.map(option => ) } + ); }; + MobilePreferences.propTypes = { fontSize: PropTypes.number.isRequired, lineNumbers: PropTypes.bool.isRequired, From b96b9d350a857af461ddc4b732cdbe00b20b67ee Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 30 Jun 2020 16:41:26 -0300 Subject: [PATCH 09/17] :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 10/17] :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 11/17] :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 12/17] :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 13/17] :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 3ce0a51c492983b8bc281bb3e202d0d852f99594 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 1 Jul 2020 17:20:32 -0300 Subject: [PATCH 14/17] :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 15/17] :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 16/17] :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 17/17] 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);