diff --git a/client/constants.js b/client/constants.js index 5d10b458..66bceff7 100644 --- a/client/constants.js +++ b/client/constants.js @@ -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'; diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index c5fb44ad..567425cc 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -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({ diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 859baf77..3f749955 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -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({ diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index 16d8bf15..6723c038 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -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 {
Increase
-
-

Indentation amount

- - { this.indentationInput = element; }} - onClick={() => { - this.indentationInput.select(); - }} - /> - - - - - -

Autosave

@@ -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, diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index bd8c785e..5967c9e3 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -202,11 +202,6 @@ class IDEView extends React.Component { > { 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: diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss index 8662bc2d..2065a230 100644 --- a/client/styles/components/_overlay.scss +++ b/client/styles/components/_overlay.scss @@ -22,7 +22,7 @@ display: flex; flex-wrap: wrap; flex-flow: column; - max-height: 88%; + max-height: 80%; max-width: 65%; }