🚧 connect MobileSettings
This commit is contained in:
ghalestrilo
parent
c8b3da90e8
commit
b27ee57aee
3 changed files with 242 additions and 10 deletions
|
|
@ -61,16 +61,13 @@ const MobileIDEView = (props) => {
|
|||
</div>
|
||||
|
||||
<div style={{ marginLeft: '2rem' }}>
|
||||
<IconButton onClick={() => setOverlay('preferences')}>
|
||||
<PreferencesIcon focusable="false" aria-hidden="true" />
|
||||
</IconButton>
|
||||
<Link
|
||||
to="/mobile/preview"
|
||||
onClick={() => {
|
||||
// alert('starting sketch');
|
||||
startSketch();
|
||||
}}
|
||||
>
|
||||
<Link to="/mobile/preferences">
|
||||
<IconButton onClick={() => setOverlay('preferences')}>
|
||||
<PreferencesIcon focusable="false" aria-hidden="true" />
|
||||
</IconButton>
|
||||
</Link>
|
||||
|
||||
<Link to="/mobile/preview" onClick={() => startSketch()}>
|
||||
<IconButton>
|
||||
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
|
||||
</IconButton>
|
||||
|
|
|
|||
233
client/modules/Mobile/MobilePreferences.jsx
Normal file
233
client/modules/Mobile/MobilePreferences.jsx
Normal file
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue