r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge branch 'qualitymanifest-feature/remove-indentation-options'

Browse source
This commit is contained in:
Cassie Tarakajian 2019-03-26 15:52:13 -04:00
commit 8a8c01f0cb
7 changed files with 7 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/constants.js
View file

@ -13,14 +13,6 @@ export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
export const SET_FONT_SIZE = 'SET_FONT_SIZE';
export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
export const SET_INDENTATION = 'SET_INDENTATION';
export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
export const AUTH_USER = 'AUTH_USER';
export const UNAUTH_USER = 'UNAUTH_USER';
export const AUTH_ERROR = 'AUTH_ERROR';

52
client/modules/IDE/actions/preferences.js
View file

@ -32,58 +32,6 @@ export function setFontSize(value) {
};
}
export function setIndentation(value) {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.SET_INDENTATION,
value
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
indentationAmount: value
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function indentWithTab() {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.INDENT_WITH_TAB
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
isTabIndent: true
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function indentWithSpace() {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.INDENT_WITH_SPACE
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
isTabIndent: false
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function setAutosave(value) {
return (dispatch, getState) => {
dispatch({

20
client/modules/IDE/components/Editor.jsx
View file

@ -50,6 +50,9 @@ const unsavedChangesDotUrl = require('../../../images/unsaved-changes-dot.svg');
const rightArrowUrl = require('../../../images/right-arrow.svg');
const leftArrowUrl = require('../../../images/left-arrow.svg');
const IS_TAB_INDENT = false;
const INDENTATION_AMOUNT = 2;
class Editor extends React.Component {
constructor(props) {
super(props);
@ -105,6 +108,7 @@ class Editor extends React.Component {
delete this._cm.options.lint.options.errors;
this._cm.setOption('extraKeys', {
Tab: cm => cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT)),
[`${metaKey}-Enter`]: () => null,
[`Shift-${metaKey}-Enter`]: () => null,
[`${metaKey}-F`]: 'findPersistent',
@ -137,9 +141,6 @@ class Editor extends React.Component {
});
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
this._cm.setOption('tabSize', this.props.indentationAmount);
this._cm.setOption('indentUnit', this.props.indentationAmount);
this.props.provideController({
tidyCode: this.tidyCode,
@ -174,16 +175,9 @@ class Editor extends React.Component {
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
}
if (this.props.indentationAmount !== prevProps.indentationAmount) {
this._cm.setOption('tabSize', this.props.indentationAmount);
this._cm.setOption('indentUnit', this.props.indentationAmount);
}
if (this.props.linewrap !== prevProps.linewrap) {
this._cm.setOption('lineWrapping', this.props.linewrap);
}
if (this.props.isTabIndent !== prevProps.isTabIndent) {
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
}
if (this.props.theme !== prevProps.theme) {
this._cm.setOption('theme', `p5-${this.props.theme}`);
}
@ -257,8 +251,8 @@ class Editor extends React.Component {
tidyCode() {
const beautifyOptions = {
indent_size: this.props.indentationAmount,
indent_with_tabs: this.props.isTabIndent
indent_size: INDENTATION_AMOUNT,
indent_with_tabs: IS_TAB_INDENT
};
const mode = this._cm.getOption('mode');
@ -355,8 +349,6 @@ Editor.propTypes = {
})),
updateLintMessage: PropTypes.func.isRequired,
clearLintMessage: PropTypes.func.isRequired,
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired,
updateFileContent: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
file: PropTypes.shape({

79
client/modules/IDE/components/Preferences.jsx
View file

@ -17,7 +17,6 @@ class Preferences extends React.Component {
this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this);
this.handleUpdateFont = this.handleUpdateFont.bind(this);
this.handleUpdateIndentation = this.handleUpdateIndentation.bind(this);
this.handleLintWarning = this.handleLintWarning.bind(this);
}
@ -35,20 +34,6 @@ class Preferences extends React.Component {
this.props.setFontSize(value);
}
handleUpdateIndentation(event) {
let value = parseInt(event.target.value, 10);
if (Number.isNaN(value)) {
value = 2;
}
if (value > 6) {
value = 6;
}
if (value < 0) {
value = 0;
}
this.props.setIndentation(value);
}
handleUpdateAutosave(event) {
const value = event.target.value === 'true';
this.props.setAutosave(value);
@ -150,65 +135,6 @@ class Preferences extends React.Component {
<h6 className="preference__label">Increase</h6>
</button>
</div>
<div className="preference">
<h4 className="preference__title">Indentation amount</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
aria-label="decrease indentation amount"
disabled={this.props.indentationAmount <= 0}
>
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="polite"
aria-atomic="true"
value={this.props.indentationAmount}
onChange={this.handleUpdateIndentation}
ref={(element) => { this.indentationInput = element; }}
onClick={() => {
this.indentationInput.select();
}}
/>
<button
className="preference__plus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
aria-label="increase indentation amount"
disabled={this.props.indentationAmount >= 6}
>
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<input
type="radio"
onChange={this.props.indentWithSpace}
aria-label="indentation with space"
name="indentation"
id="indentation-space"
className="preference__radio-button"
value="Spaces"
checked={!this.props.isTabIndent}
/>
<label
htmlFor="indentation-space"
className="preference__option preference__whitespace-button"
>
Spaces
</label>
<input
type="radio"
onChange={this.props.indentWithTab}
aria-label="indentation with tab"
name="indentation"
id="indentation-tab"
className="preference__radio-button"
value="Tabs"
checked={this.props.isTabIndent}
/>
<label htmlFor="indentation-tab" className="preference__option preference__whitespace-button">Tabs</label>
</div>
<div className="preference">
<h4 className="preference__title">Autosave</h4>
<div className="preference__options">
@ -351,11 +277,6 @@ class Preferences extends React.Component {
Preferences.propTypes = {
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired,
setIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
isTabIndent: PropTypes.bool.isRequired,
setFontSize: PropTypes.func.isRequired,
autosave: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,

12
client/modules/IDE/pages/IDEView.jsx
View file

@ -202,11 +202,6 @@ class IDEView extends React.Component {
>
<Preferences
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
setIndentation={this.props.setIndentation}
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
isTabIndent={this.props.preferences.isTabIndent}
setFontSize={this.props.setFontSize}
autosave={this.props.preferences.autosave}
linewrap={this.props.preferences.linewrap}
@ -275,8 +270,6 @@ class IDEView extends React.Component {
file={this.props.selectedFile}
updateFileContent={this.props.updateFileContent}
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
isTabIndent={this.props.preferences.isTabIndent}
files={this.props.files}
editorOptionsVisible={this.props.ide.editorOptionsVisible}
showEditorOptions={this.props.showEditorOptions}
@ -516,8 +509,6 @@ IDEView.propTypes = {
clearLintMessage: PropTypes.func.isRequired,
preferences: PropTypes.shape({
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired,
autosave: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired,
@ -529,9 +520,6 @@ IDEView.propTypes = {
}).isRequired,
closePreferences: PropTypes.func.isRequired,
setFontSize: PropTypes.func.isRequired,
setIndentation: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
setAutosave: PropTypes.func.isRequired,
setLinewrap: PropTypes.func.isRequired,
setLintWarning: PropTypes.func.isRequired,

12
client/modules/IDE/reducers/preferences.js
View file

@ -2,8 +2,6 @@ import * as ActionTypes from '../../../constants';
const initialState = {
fontSize: 18,
indentationAmount: 2,
isTabIndent: true,
autosave: true,
linewrap: true,
lintWarning: false,
@ -18,16 +16,6 @@ const preferences = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.SET_FONT_SIZE:
return Object.assign({}, state, { fontSize: action.value });
case ActionTypes.SET_INDENTATION:
return Object.assign({}, state, { indentationAmount: action.value });
case ActionTypes.INDENT_WITH_TAB:
return Object.assign({}, state, {
isTabIndent: true
});
case ActionTypes.INDENT_WITH_SPACE:
return Object.assign({}, state, {
isTabIndent: false
});
case ActionTypes.SET_AUTOSAVE:
return Object.assign({}, state, { autosave: action.value });
case ActionTypes.SET_LINEWRAP:

2
client/styles/components/_overlay.scss
View file

@ -22,7 +22,7 @@
display: flex;
flex-wrap: wrap;
flex-flow: column;
max-height: 88%;
max-height: 80%;
max-width: 65%;
}