93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { bindActionCreators } from 'redux';
|
|
import { connect, useSelector, useDispatch } from 'react-redux';
|
|
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';
|
|
import { optionsOnOff, optionsPickOne, preferenceOnOff } from '../IDE/components/Preferences/PreferenceCreators';
|
|
|
|
const Content = styled.div`
|
|
z-index: 0;
|
|
margin-top: ${remSize(68)};
|
|
`;
|
|
|
|
const SectionHeader = styled.h2`
|
|
color: ${prop('primaryTextColor')};
|
|
padding-top: ${remSize(32)};
|
|
`;
|
|
|
|
const SectionSubeader = styled.h3`
|
|
color: ${prop('primaryTextColor')};
|
|
`;
|
|
|
|
|
|
const MobilePreferences = () => {
|
|
// Props
|
|
const {
|
|
theme, autosave, linewrap, textOutput, gridOutput, soundOutput, lineNumbers, lintWarning
|
|
} = useSelector(state => state.preferences);
|
|
|
|
// Actions
|
|
const {
|
|
setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, setLineNumbers, setLintWarning,
|
|
} = bindActionCreators({ ...PreferencesActions, ...IdeActions }, useDispatch());
|
|
|
|
|
|
const generalSettings = [
|
|
{
|
|
title: 'Theme',
|
|
value: theme,
|
|
options: optionsPickOne('theme', 'light', 'dark', 'contrast'),
|
|
onSelect: x => setTheme(x) // setTheme
|
|
},
|
|
preferenceOnOff('Autosave', autosave, setAutosave, 'autosave'),
|
|
preferenceOnOff('Word Wrap', linewrap, setLinewrap, 'linewrap')
|
|
];
|
|
|
|
const outputSettings = [
|
|
preferenceOnOff('Plain-text', textOutput, setTextOutput, 'text output'),
|
|
preferenceOnOff('Table-text', gridOutput, setGridOutput, 'table output'),
|
|
preferenceOnOff('Lint Warning Sound', soundOutput, setSoundOutput, 'sound output')
|
|
];
|
|
|
|
const accessibilitySettings = [
|
|
preferenceOnOff('Line Numbers', lineNumbers, setLineNumbers),
|
|
preferenceOnOff('Lint Warning Sound', lintWarning, setLintWarning)
|
|
];
|
|
|
|
return (
|
|
<Screen fullscreen>
|
|
<section>
|
|
<Header transparent title="Preferences">
|
|
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
|
|
</Header>
|
|
<section className="preferences">
|
|
<Content>
|
|
<SectionHeader>General Settings</SectionHeader>
|
|
{ generalSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
|
|
|
|
<SectionHeader>Accessibility</SectionHeader>
|
|
{ accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
|
|
|
|
<SectionHeader>Accessible Output</SectionHeader>
|
|
<SectionSubeader>Used with screen reader</SectionSubeader>
|
|
{ outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
|
|
|
|
</Content>
|
|
</section>
|
|
</section>
|
|
</Screen>);
|
|
};
|
|
|
|
export default withRouter(MobilePreferences);
|