Skip to content

Commit b27ee57

Browse files
ghalestriloghalestrilo
committed
🚧 connect MobileSettings
1 parent c8b3da9 commit b27ee57

File tree

3 files changed

+242
-10
lines changed

3 files changed

+242
-10
lines changed

‎client/modules/IDE/pages/MobileIDEView.jsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,16 +61,13 @@ const MobileIDEView = (props) => {
6161
</div>
6262

6363
<div style={{ marginLeft: '2rem' }}>
64-
<IconButton onClick={() => setOverlay('preferences')}>
65-
<PreferencesIcon focusable="false" aria-hidden="true" />
66-
</IconButton>
67-
<Link
68-
to="/mobile/preview"
69-
onClick={() => {
70-
// alert('starting sketch');
71-
startSketch();
72-
}}
73-
>
64+
<Link to="/mobile/preferences">
65+
<IconButton onClick={() => setOverlay('preferences')}>
66+
<PreferencesIcon focusable="false" aria-hidden="true" />
67+
</IconButton>
68+
</Link>
69+
70+
<Link to="/mobile/preview" onClick={() => startSketch()}>
7471
<IconButton>
7572
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
7673
</IconButton>

‎client/modules/Mobile/MobilePreferences.jsx

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
import React, { useEffect } from 'react';
2+
import { bindActionCreators } from 'redux';
3+
import { connect } from 'react-redux';
4+
import { Link } from 'react-router';
5+
import PropTypes from 'prop-types';
6+
import styled from 'styled-components';
7+
import Screen from '../../components/mobile/MobileScreen';
8+
import Header from '../../components/mobile/Header';
9+
import { ExitIcon } from '../../common/icons';
10+
import { remSize } from '../../theme';
11+
import * as PreferencesActions from '../IDE/actions/preferences';
12+
import * as IdeActions from '../IDE/actions/ide';
13+
14+
const IconLinkWrapper = styled(Link)`
15+
width: 3rem;
16+
margin-right: 1.25rem;
17+
margin-left: none;
18+
`;
19+
20+
const Content = styled.div`
21+
z-index: 0;
22+
margin-top: ${remSize(68)};
23+
`;
24+
25+
/*
26+
<div className="preference">
27+
<h4 className="preference__title">Word Wrap</h4>
28+
<div className="preference__options">
29+
<input
30+
type="radio"
31+
onChange={() => this.props.setLinewrap(true)}
32+
aria-label="linewrap on"
33+
name="linewrap"
34+
id="linewrap-on"
35+
className="preference__radio-button"
36+
value="On"
37+
checked={this.props.linewrap}
38+
/>
39+
<label htmlFor="linewrap-on" className="preference__option">On</label>
40+
<input
41+
type="radio"
42+
onChange={() => this.props.setLinewrap(false)}
43+
aria-label="linewrap off"
44+
name="linewrap"
45+
id="linewrap-off"
46+
className="preference__radio-button"
47+
value="Off"
48+
checked={!this.props.linewrap}
49+
/>
50+
<label htmlFor="linewrap-off" className="preference__option">Off</label>
51+
</div>
52+
</div>
53+
*/
54+
55+
const Selector = ({
56+
title, value, onSelect, ariaLabel, name, id, options,
57+
}) => (
58+
<div className="preference">
59+
<h4 className="preference__title">{title}</h4>
60+
{options.map(option => (
61+
<div className="preference__options">
62+
<input
63+
type="radio"
64+
65+
onChange={() => onSelect(option.value)}
66+
aria-label={ariaLabel}
67+
name={name}
68+
id={id}
69+
className="preference__radio-button"
70+
value={option.value}
71+
checked={value === option.value}
72+
/>
73+
<label htmlFor={id} className="preference__option">{option.label}</label>
74+
</div>))}
75+
76+
</div>
77+
);
78+
79+
Selector.defaultProps = {
80+
options: []
81+
};
82+
83+
Selector.propTypes = {
84+
title: PropTypes.string.isRequired,
85+
value: PropTypes.string.isRequired,
86+
options: PropTypes.arrayOf(PropTypes.string),
87+
ariaLabel: PropTypes.string.isRequired,
88+
name: PropTypes.string.isRequired,
89+
id: PropTypes.string.isRequired,
90+
onSelect: PropTypes.string.isRequired,
91+
};
92+
93+
const SettingsHeader = styled(Header)`
94+
background: transparent
95+
`;
96+
97+
98+
const MobilePreferences = (props) => {
99+
const { setTheme } = props;
100+
const preferences = [
101+
{
102+
title: 'Theme',
103+
value: 'light',
104+
options: [
105+
{
106+
value: 'light', label: 'light', ariaLabel: 'light theme on', name: 'light theme', id: 'light-theme-on'
107+
},
108+
{
109+
value: 'dark', label: 'dark', ariaLabel: 'dark theme on', name: 'dark theme', id: 'dark-theme-on'
110+
},
111+
{
112+
value: 'contrast', label: 'contrast', ariaLabel: 'contrast theme on', name: 'contrast theme', id: 'contrast-theme-on'
113+
}
114+
],
115+
onSelect: setTheme // setTheme
116+
},
117+
118+
{
119+
title: 'Autosave',
120+
value: true,
121+
options: [
122+
{
123+
value: 'On', label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on'
124+
},
125+
{
126+
value: 'Off', label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off'
127+
},
128+
],
129+
onSelect: () => {} // setAutosave
130+
}
131+
];
132+
133+
useEffect(() => { });
134+
135+
return (
136+
<Screen>
137+
<SettingsHeader>
138+
<div>
139+
<h1>Settings</h1>
140+
</div>
141+
142+
<div style={{ marginLeft: '2rem' }}>
143+
144+
<IconLinkWrapper to="/mobile" aria-label="Return to original editor">
145+
<ExitIcon />
146+
</IconLinkWrapper>
147+
</div>
148+
149+
</SettingsHeader>
150+
<section className="preferences">
151+
<Content>
152+
{ preferences.map(option => <Selector {...option} />) }
153+
</Content>
154+
</section>
155+
</Screen>);
156+
};
157+
158+
159+
MobilePreferences.propTypes = {
160+
fontSize: PropTypes.number.isRequired,
161+
lineNumbers: PropTypes.bool.isRequired,
162+
autosave: PropTypes.bool.isRequired,
163+
linewrap: PropTypes.bool.isRequired,
164+
textOutput: PropTypes.bool.isRequired,
165+
gridOutput: PropTypes.bool.isRequired,
166+
soundOutput: PropTypes.bool.isRequired,
167+
lintWarning: PropTypes.bool.isRequired,
168+
theme: PropTypes.string.isRequired,
169+
170+
setLinewrap: PropTypes.func.isRequired,
171+
setLintWarning: PropTypes.func.isRequired,
172+
setTheme: PropTypes.func.isRequired,
173+
setFontSize: PropTypes.func.isRequired,
174+
setLineNumbers: PropTypes.func.isRequired,
175+
setAutosave: PropTypes.func.isRequired,
176+
setTextOutput: PropTypes.func.isRequired,
177+
setGridOutput: PropTypes.func.isRequired,
178+
setSoundOutput: PropTypes.func.isRequired,
179+
180+
181+
preferences: PropTypes.shape({
182+
fontSize: PropTypes.number.isRequired,
183+
autosave: PropTypes.bool.isRequired,
184+
linewrap: PropTypes.bool.isRequired,
185+
lineNumbers: PropTypes.bool.isRequired,
186+
lintWarning: PropTypes.bool.isRequired,
187+
textOutput: PropTypes.bool.isRequired,
188+
gridOutput: PropTypes.bool.isRequired,
189+
soundOutput: PropTypes.bool.isRequired,
190+
theme: PropTypes.string.isRequired,
191+
autorefreshIdeActions: PropTypes.bool.isRequired
192+
}).isRequired,
193+
194+
ide: PropTypes.shape({
195+
isPlaying: PropTypes.bool.isRequired,
196+
isAccessibleOutputPlaying: PropTypes.bool.isRequired,
197+
consoleEvent: PropTypes.array,
198+
modalIsVisible: PropTypes.bool.isRequired,
199+
sidebarIsExpanded: PropTypes.bool.isRequired,
200+
consoleIsExpanded: PropTypes.bool.isRequired,
201+
preferencesIsVisible: PropTypes.bool.isRequired,
202+
projectOptionsVisible: PropTypes.bool.isRequired,
203+
newFolderModalVisible: PropTypes.bool.isRequired,
204+
shareModalVisible: PropTypes.bool.isRequired,
205+
shareModalProjectId: PropTypes.string.isRequired,
206+
shareModalProjectName: PropTypes.string.isRequired,
207+
shareModalProjectUsername: PropTypes.string.isRequired,
208+
editorOptionsVisible: PropTypes.bool.isRequired,
209+
keyboardShortcutVisible: PropTypes.bool.isRequired,
210+
unsavedChanges: PropTypes.bool.isRequired,
211+
infiniteLoop: PropTypes.bool.isRequired,
212+
previewIsRefreshing: PropTypes.bool.isRequired,
213+
infiniteLoopMessage: PropTypes.string.isRequired,
214+
projectSavedTime: PropTypes.string,
215+
previousPath: PropTypes.string.isRequired,
216+
justOpenedProject: PropTypes.bool.isRequired,
217+
errorType: PropTypes.string,
218+
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
219+
uploadFileModalVisible: PropTypes.bool.isRequired
220+
}).isRequired,
221+
};
222+
223+
const mapStateToProps = state => ({
224+
preferences: state.preferences,
225+
});
226+
227+
const mapDispatchToProps = dispatch => bindActionCreators({
228+
...PreferencesActions,
229+
...IdeActions
230+
}, dispatch);
231+
232+
233+
export default connect(mapStateToProps, mapDispatchToProps)(MobilePreferences);

‎client/routes.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import App from './modules/App/App';
44
import IDEView from './modules/IDE/pages/IDEView';
55
import MobileIDEView from './modules/IDE/pages/MobileIDEView';
66
import MobileSketchView from './modules/Mobile/MobileSketchView';
7+
import MobilePreferences from './modules/Mobile/MobilePreferences';
78
import FullView from './modules/IDE/pages/FullView';
89
import LoginView from './modules/User/pages/LoginView';
910
import SignupView from './modules/User/pages/SignupView';
@@ -58,6 +59,7 @@ const routes = store => (
5859

5960
<Route path="/mobile" component={MobileIDEView} />
6061
<Route path="/mobile/preview" component={MobileSketchView} />
62+
<Route path="/mobile/preferences" component={MobilePreferences} />
6163
</Route>
6264
);
6365

0 commit comments

Comments
 (0)