🚧 connect MobileSettings

client/modules/IDE/pages/MobileIDEView.jsx

@@ -61,16 +61,13 @@ const MobileIDEView = (props) => {
         </div>
 
         <div style={{ marginLeft: '2rem' }}>
+          <Link to="/mobile/preferences">
             <IconButton onClick={() => setOverlay('preferences')}>
               <PreferencesIcon focusable="false" aria-hidden="true" />
             </IconButton>
-          <Link
+          </Link>
-            to="/mobile/preview"
+
-            onClick={() => {
+          <Link to="/mobile/preview" onClick={() => startSketch()}>
-              // alert('starting sketch');
-              startSketch();
-            }}
-          >
             <IconButton>
               <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
             </IconButton>

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)};
+`;
+
+/*
+ <div className="preference">
+   <h4 className="preference__title">Word Wrap</h4>
+   <div className="preference__options">
+     <input
+       type="radio"
+       onChange={() => this.props.setLinewrap(true)}
+       aria-label="linewrap on"
+       name="linewrap"
+       id="linewrap-on"
+       className="preference__radio-button"
+       value="On"
+       checked={this.props.linewrap}
+     />
+     <label htmlFor="linewrap-on" className="preference__option">On</label>
+     <input
+       type="radio"
+       onChange={() => this.props.setLinewrap(false)}
+       aria-label="linewrap off"
+       name="linewrap"
+       id="linewrap-off"
+       className="preference__radio-button"
+       value="Off"
+       checked={!this.props.linewrap}
+     />
+     <label htmlFor="linewrap-off" className="preference__option">Off</label>
+   </div>
+ </div>
+*/
+
+const Selector = ({
+  title, value, onSelect, ariaLabel, name, id, options,
+}) => (
+  <div className="preference">
+    <h4 className="preference__title">{title}</h4>
+    {options.map(option => (
+      <div className="preference__options">
+        <input
+          type="radio"
+
+          onChange={() => onSelect(option.value)}
+          aria-label={ariaLabel}
+          name={name}
+          id={id}
+          className="preference__radio-button"
+          value={option.value}
+          checked={value === option.value}
+        />
+        <label htmlFor={id} className="preference__option">{option.label}</label>
+      </div>))}
+
+  </div>
+);
+
+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 (
+    <Screen>
+      <SettingsHeader>
+        <div>
+          <h1>Settings</h1>
+        </div>
+
+        <div style={{ marginLeft: '2rem' }}>
+
+          <IconLinkWrapper to="/mobile" aria-label="Return to original editor">
+            <ExitIcon />
+          </IconLinkWrapper>
+        </div>
+
+      </SettingsHeader>
+      <section className="preferences">
+        <Content>
+          { preferences.map(option => <Selector {...option} />) }
+        </Content>
+      </section>
+    </Screen>);
+};
+
+
+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);

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 => (
 
     <Route path="/mobile" component={MobileIDEView} />
     <Route path="/mobile/preview" component={MobileSketchView} />
+    <Route path="/mobile/preferences" component={MobilePreferences} />
   </Route>
 );