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

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';

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({

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_size: INDENTATION_AMOUNT,
-      indent_with_tabs: this.props.isTabIndent
+      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({

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 {
                 <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,

client/modules/IDE/pages/IDEView.jsx

@@ -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,

client/modules/IDE/reducers/preferences.js

@@ -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:

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%;
 }