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

Merge branch 'master' into feature/remove-indentation-options

Browse source
This commit is contained in:
Cassie Tarakajian 2019-03-26 15:38:58 -04:00 committed by GitHub
commit 2d77ddb650
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 70 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/Nav.jsx
View file

@ -487,8 +487,8 @@ class Nav extends React.PureComponent {
onFocus={this.clearHideTimeout}
>
My Account
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button>
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
<ul className="nav__dropdown">
<button
onClick={this.toggleDropdown.bind(this, 'account')}

1
client/constants.js
View file

@ -54,6 +54,7 @@ export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
export const DELETE_FILE = 'DELETE_FILE';
export const SET_AUTOSAVE = 'SET_AUTOSAVE';
export const SET_LINEWRAP = 'SET_LINEWRAP';
export const SET_LINT_WARNING = 'SET_LINT_WARNING';
export const SET_PREFERENCES = 'SET_PREFERENCES';
export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';

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

@ -50,6 +50,24 @@ export function setAutosave(value) {
};
}
export function setLinewrap(value) {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.SET_LINEWRAP,
value
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
linewrap: value
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function setLintWarning(value) {
return (dispatch, getState) => {
dispatch({

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

@ -83,7 +83,7 @@ class Editor extends React.Component {
lineNumbers: true,
styleActiveLine: true,
inputStyle: 'contenteditable',
lineWrapping: false,
lineWrapping: this.props.linewrap,
fixedGutter: false,
foldGutter: true,
foldOptions: { widget: '\u2026' },
@ -175,6 +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.linewrap !== prevProps.linewrap) {
this._cm.setOption('lineWrapping', this.props.linewrap);
}
if (this.props.theme !== prevProps.theme) {
this._cm.setOption('theme', `p5-${this.props.theme}`);
}
@ -333,6 +336,7 @@ class Editor extends React.Component {
Editor.propTypes = {
lintWarning: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
lintMessages: PropTypes.arrayOf(PropTypes.shape({
severity: PropTypes.string.isRequired,
line: PropTypes.number.isRequired,

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

@ -15,6 +15,7 @@ class Preferences extends React.Component {
constructor(props) {
super(props);
this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this);
this.handleUpdateFont = this.handleUpdateFont.bind(this);
this.handleLintWarning = this.handleLintWarning.bind(this);
}
@ -38,6 +39,11 @@ class Preferences extends React.Component {
this.props.setAutosave(value);
}
handleUpdateLinewrap(event) {
const value = event.target.value === 'true';
this.props.setLinewrap(value);
}
handleLintWarning(event) {
const value = event.target.value === 'true';
this.props.setLintWarning(value);
@ -156,6 +162,33 @@ class Preferences extends React.Component {
<label htmlFor="autosave-off" className="preference__option">Off</label>
</div>
</div>
<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>
</TabPanel>
<TabPanel>
<div className="preference">
@ -246,7 +279,9 @@ Preferences.propTypes = {
fontSize: PropTypes.number.isRequired,
setFontSize: PropTypes.func.isRequired,
autosave: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
setAutosave: PropTypes.func.isRequired,
setLinewrap: PropTypes.func.isRequired,
textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired,
soundOutput: PropTypes.bool.isRequired,

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

@ -204,7 +204,9 @@ class IDEView extends React.Component {
fontSize={this.props.preferences.fontSize}
setFontSize={this.props.setFontSize}
autosave={this.props.preferences.autosave}
linewrap={this.props.preferences.linewrap}
setAutosave={this.props.setAutosave}
setLinewrap={this.props.setLinewrap}
lintWarning={this.props.preferences.lintWarning}
setLintWarning={this.props.setLintWarning}
textOutput={this.props.preferences.textOutput}
@ -261,6 +263,7 @@ class IDEView extends React.Component {
>
<Editor
lintWarning={this.props.preferences.lintWarning}
linewrap={this.props.preferences.linewrap}
lintMessages={this.props.editorAccessibility.lintMessages}
updateLintMessage={this.props.updateLintMessage}
clearLintMessage={this.props.clearLintMessage}
@ -507,6 +510,7 @@ IDEView.propTypes = {
preferences: PropTypes.shape({
fontSize: PropTypes.number.isRequired,
autosave: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired,
@ -517,6 +521,7 @@ IDEView.propTypes = {
closePreferences: PropTypes.func.isRequired,
setFontSize: PropTypes.func.isRequired,
setAutosave: PropTypes.func.isRequired,
setLinewrap: PropTypes.func.isRequired,
setLintWarning: PropTypes.func.isRequired,
setTextOutput: PropTypes.func.isRequired,
setGridOutput: PropTypes.func.isRequired,

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

@ -3,6 +3,7 @@ import * as ActionTypes from '../../../constants';
const initialState = {
fontSize: 18,
autosave: true,
linewrap: true,
lintWarning: false,
textOutput: false,
gridOutput: false,
@ -17,6 +18,8 @@ const preferences = (state = initialState, action) => {
return Object.assign({}, state, { fontSize: action.value });
case ActionTypes.SET_AUTOSAVE:
return Object.assign({}, state, { autosave: action.value });
case ActionTypes.SET_LINEWRAP:
return Object.assign({}, state, { linewrap: action.value });
case ActionTypes.SET_LINT_WARNING:
return Object.assign({}, state, { lintWarning: action.value });
case ActionTypes.SET_TEXT_OUTPUT:

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

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

1
server/models/user.js
View file

@ -27,6 +27,7 @@ const userSchema = new Schema({
indentationAmount: { type: Number, default: 2 },
isTabIndent: { type: Boolean, default: false },
autosave: { type: Boolean, default: true },
linewrap: { type: Boolean, default: true },
lintWarning: { type: Boolean, default: false },
textOutput: { type: Boolean, default: false },
gridOutput: { type: Boolean, default: false },