From 167bbe88a0d9133925a79e109c6086b74070fa27 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 23 Jun 2020 15:54:09 -0300 Subject: [PATCH] :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()); }); }