Skip to content

Commit cddc1cd

Browse files
peilingjiangpeilingjiang
committed
add switch for desktop and mobile and update ui
1 parent 1056400 commit cddc1cd

File tree

17 files changed

+590
-241
lines changed

17 files changed

+590
-241
lines changed

‎client/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';
7575
export const SET_GRID_OUTPUT = 'SET_GRID_OUTPUT';
7676
export const SET_SOUND_OUTPUT = 'SET_SOUND_OUTPUT';
7777
export const SET_AUTOCLOSE_BRACKETS_QUOTES = 'SET_AUTOCLOSE_BRACKETS_QUOTES';
78+
export const SET_AUTOCOMPLETE_HINTER = 'SET_AUTOCOMPLETE_HINTER';
7879

7980
export const OPEN_PROJECT_OPTIONS = 'OPEN_PROJECT_OPTIONS';
8081
export const CLOSE_PROJECT_OPTIONS = 'CLOSE_PROJECT_OPTIONS';

‎client/modules/IDE/actions/preferences.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ function updatePreferences(formParams, dispatch) {
1616
}
1717

1818
export function setFontSize(value) {
19-
return (dispatch, getState) => { // eslint-disable-line
19+
return (dispatch, getState) => {
20+
// eslint-disable-line
2021
dispatch({
2122
type: ActionTypes.SET_FONT_SIZE,
2223
value
@@ -69,6 +70,24 @@ export function setAutocloseBracketsQuotes(value) {
6970
};
7071
}
7172

73+
export function setAutocompleteHinter(value) {
74+
return (dispatch, getState) => {
75+
dispatch({
76+
type: ActionTypes.SET_AUTOCOMPLETE_HINTER,
77+
value
78+
});
79+
const state = getState();
80+
if (state.user.authenticated) {
81+
const formParams = {
82+
preferences: {
83+
autocompleteHinter: value
84+
}
85+
};
86+
updatePreferences(formParams, dispatch);
87+
}
88+
};
89+
}
90+
7291
export function setAutosave(value) {
7392
return (dispatch, getState) => {
7493
dispatch({

‎client/modules/IDE/components/Editor.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ class Editor extends React.Component {
134134
mode: 'edit'
135135
}
136136
});
137+
137138
this.hinter = new Fuse(hinter.p5Hinter, {
138139
threshold: 0.05,
139140
keys: ['text']
@@ -266,6 +267,12 @@ class Editor extends React.Component {
266267
this.props.autocloseBracketsQuotes
267268
);
268269
}
270+
if (this.props.autocompleteHinter !== prevProps.autocompleteHinter) {
271+
if (!this.props.autocompleteHinter) {
272+
// close the hinter window once the preference is turned off
273+
CodeMirror.showHint(this._cm, () => {});
274+
}
275+
}
269276

270277
if (this.props.runtimeErrorWarningVisible) {
271278
if (this.props.consoleEvents.length !== prevProps.consoleEvents.length) {
@@ -345,6 +352,11 @@ class Editor extends React.Component {
345352
}
346353

347354
showHint(_cm) {
355+
if (!this.props.autocompleteHinter) {
356+
CodeMirror.showHint(_cm, () => {});
357+
return;
358+
}
359+
348360
let focusedLinkElement = null;
349361
const setFocusedLinkElement = (set) => {
350362
if (set && !focusedLinkElement) {
@@ -539,6 +551,7 @@ class Editor extends React.Component {
539551

540552
Editor.propTypes = {
541553
autocloseBracketsQuotes: PropTypes.bool.isRequired,
554+
autocompleteHinter: PropTypes.bool.isRequired,
542555
lineNumbers: PropTypes.bool.isRequired,
543556
lintWarning: PropTypes.bool.isRequired,
544557
linewrap: PropTypes.bool.isRequired,

‎client/modules/IDE/components/Preferences/Preferences.unit.test.jsx‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Preferences from './index';
77
* - this.props.fontSize : number
88
* - this.props.autosave : bool
99
* - this.props.autocloseBracketsQuotes : bool
10+
* - this.props.autocompleteHinter : bool
1011
* - this.props.linewrap : bool
1112
* - this.props.lineNumbers : bool
1213
* - this.props.theme : string
@@ -35,6 +36,7 @@ describe('<Preferences />', () => {
3536
fontSize: 12,
3637
autosave: false,
3738
autocloseBracketsQuotes: false,
39+
autocompleteHinter: false,
3840
linewrap: false,
3941
lineNumbers: false,
4042
theme: 'contrast',
@@ -45,6 +47,7 @@ describe('<Preferences />', () => {
4547
setFontSize: jest.fn(),
4648
setAutosave: jest.fn(),
4749
setAutocloseBracketsQuotes: jest.fn(),
50+
setAutocompleteHinter: jest.fn(),
4851
setLinewrap: jest.fn(),
4952
setLineNumbers: jest.fn(),
5053
setTheme: jest.fn(),
@@ -426,6 +429,28 @@ describe('<Preferences />', () => {
426429
);
427430
});
428431

432+
it('autocompleteHinter toggle, starting at false', () => {
433+
// render the component with autocompleteHinter prop set to false
434+
act(() => {
435+
subject();
436+
});
437+
438+
// get ahold of the radio buttons for toggling autocompleteHinter
439+
const autocompleteRadioFalse = screen.getByRole('radio', {
440+
name: /autocomplete off/i
441+
});
442+
const autocompleteRadioTrue = screen.getByRole('radio', {
443+
name: /autocomplete on/i
444+
});
445+
446+
testToggle(
447+
autocompleteRadioFalse,
448+
autocompleteRadioTrue,
449+
props.setAutocompleteHinter,
450+
true
451+
);
452+
});
453+
429454
describe('start autosave value at true', () => {
430455
beforeAll(() => {
431456
props.autosave = true;
@@ -481,6 +506,34 @@ describe('<Preferences />', () => {
481506
});
482507
});
483508

509+
describe('start autocomplete hinter value at true', () => {
510+
beforeAll(() => {
511+
props.autocompleteHinter = true;
512+
});
513+
514+
it('autocompleteHinter toggle, starting at true', () => {
515+
// render the component with autocompleteHinter prop set to true
516+
act(() => {
517+
subject();
518+
});
519+
520+
// get ahold of the radio buttons for toggling autocompleteHinter
521+
const autocompleteRadioFalse = screen.getByRole('radio', {
522+
name: /autocomplete off/i
523+
});
524+
const autocompleteRadioTrue = screen.getByRole('radio', {
525+
name: /autocomplete on/i
526+
});
527+
528+
testToggle(
529+
autocompleteRadioTrue,
530+
autocompleteRadioFalse,
531+
props.setAutocompleteHinter,
532+
false
533+
);
534+
});
535+
});
536+
484537
describe('start linewrap at false', () => {
485538
beforeAll(() => {
486539
props.linewrap = false;
@@ -492,7 +545,7 @@ describe('<Preferences />', () => {
492545
subject();
493546
});
494547

495-
// get ahold of the radio buttons for toggling autocloseBracketsQuotes
548+
// get ahold of the radio buttons for toggling linewrap
496549
const linewrapRadioFalse = screen.getByRole('radio', {
497550
name: /linewrap off/i
498551
});
@@ -520,7 +573,7 @@ describe('<Preferences />', () => {
520573
subject();
521574
});
522575

523-
// get ahold of the radio buttons for toggling autocloseBracketsQuotes
576+
// get ahold of the radio buttons for toggling linewrap
524577
const linewrapRadioFalse = screen.getByRole('radio', {
525578
name: /linewrap off/i
526579
});

‎client/modules/IDE/components/Preferences/index.jsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,49 @@ class Preferences extends React.Component {
287287
</label>
288288
</div>
289289
</div>
290+
<div className="preference">
291+
<h4 className="preference__title">
292+
{this.props.t('Preferences.AutocompleteHinter')}
293+
</h4>
294+
<div className="preference__options">
295+
<input
296+
type="radio"
297+
onChange={() => this.props.setAutocompleteHinter(true)}
298+
aria-label={this.props.t(
299+
'Preferences.AutocompleteHinterOnARIA'
300+
)}
301+
name="autocompletehinter"
302+
id="autocompletehinter-on"
303+
className="preference__radio-button"
304+
value="On"
305+
checked={this.props.autocompleteHinter}
306+
/>
307+
<label
308+
htmlFor="autocompletehinter-on"
309+
className="preference__option"
310+
>
311+
{this.props.t('Preferences.On')}
312+
</label>
313+
<input
314+
type="radio"
315+
onChange={() => this.props.setAutocompleteHinter(false)}
316+
aria-label={this.props.t(
317+
'Preferences.AutocompleteHinterOffARIA'
318+
)}
319+
name="autocompletehinter"
320+
id="autocompletehinter-off"
321+
className="preference__radio-button"
322+
value="Off"
323+
checked={!this.props.autocompleteHinter}
324+
/>
325+
<label
326+
htmlFor="autocompletehinter-off"
327+
className="preference__option"
328+
>
329+
{this.props.t('Preferences.Off')}
330+
</label>
331+
</div>
332+
</div>
290333
<div className="preference">
291334
<h4 className="preference__title">
292335
{this.props.t('Preferences.WordWrap')}
@@ -472,6 +515,8 @@ Preferences.propTypes = {
472515
setTheme: PropTypes.func.isRequired,
473516
autocloseBracketsQuotes: PropTypes.bool.isRequired,
474517
setAutocloseBracketsQuotes: PropTypes.func.isRequired,
518+
autocompleteHinter: PropTypes.bool.isRequired,
519+
setAutocompleteHinter: PropTypes.func.isRequired,
475520
t: PropTypes.func.isRequired
476521
};
477522

0 commit comments

Comments
 (0)