add more preferences

client/constants.js

@@ -8,6 +8,8 @@ export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
 export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
 export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
+export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
+export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
 
 export const AUTH_USER = 'AUTH_USER';
 export const UNAUTH_USER = 'UNAUTH_USER';

client/modules/IDE/actions/preferences.js

@@ -23,3 +23,15 @@ export function decreaseFont() {
     type: ActionTypes.DECREASE_FONTSIZE
   };
 }
+
+export function increaseIndentation() {
+  return {
+    type: ActionTypes.INCREASE_INDENTATION
+  };
+}
+
+export function decreaseIndentation() {
+  return {
+    type: ActionTypes.DECREASE_INDENTATION
+  };
+}

client/modules/IDE/components/Editor.js

@@ -17,6 +17,7 @@ class Editor extends React.Component {
       this.props.updateFile('sketch.js', this._cm.getValue());
     });
     this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
+    this._cm.setOption('tabSize', this.props.indentationAmount);
   }
 
   componentDidUpdate(prevProps) {
@@ -27,6 +28,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);
+    }
   }
 
   componentWillUnmount() {
@@ -43,7 +47,8 @@ class Editor extends React.Component {
 Editor.propTypes = {
   content: PropTypes.string.isRequired,
   updateFile: PropTypes.func.isRequired,
-  fontSize: PropTypes.number.isRequired
+  fontSize: PropTypes.number.isRequired,
+  indentationAmount: PropTypes.number.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/Preferences.js

@@ -19,8 +19,9 @@ function Preferences(props) {
           <Isvg src={exitUrl} alt="Exit Preferences" />
         </button>
       </div>
+
       <div className="preference">
-        <h3 className="preference__title">Text Size</h3>
+        <h4 className="preference__title">Text Size</h4>
         <button className="preference__plus-button" onClick={props.decreaseFont}>
           <Isvg src={minusUrl} alt="Decrease Font Size" />
         </button>
@@ -29,6 +30,18 @@ function Preferences(props) {
           <Isvg src={plusUrl} alt="Increase Font Size" />
         </button>
       </div>
+
+      <div className="preference">
+        <h4 className="preference__title">Indentation Amount</h4>
+        <button className="preference__plus-button" onClick={props.decreaseIndentation}>
+          <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
+        </button>
+        <p className="preference__value">{props.indentationAmount}</p>
+        <button className="preference__minus-button" onClick={props.increaseIndentation}>
+          <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
+        </button>
+      </div>
+
     </div>
   );
 }
@@ -38,7 +51,10 @@ Preferences.propTypes = {
   closePreferences: PropTypes.func.isRequired,
   decreaseFont: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
-  increaseFont: PropTypes.func.isRequired
+  increaseFont: PropTypes.func.isRequired,
+  indentationAmount: PropTypes.number.isRequired,
+  decreaseIndentation: PropTypes.func.isRequired,
+  increaseIndentation: PropTypes.func.isRequired
 };
 
 export default Preferences;

client/modules/IDE/pages/IDEView.js

@@ -43,11 +43,15 @@ class IDEView extends React.Component {
           increaseFont={this.props.increaseFont}
           decreaseFont={this.props.decreaseFont}
           fontSize={this.props.preferences.fontSize}
+          increaseIndentation={this.props.increaseIndentation}
+          decreaseIndentation={this.props.decreaseIndentation}
+          indentationAmount={this.props.preferences.indentationAmount}
         />
         <Editor
           content={this.props.file.content}
           updateFile={this.props.updateFile}
           fontSize={this.props.preferences.fontSize}
+          indentationAmount={this.props.preferences.indentationAmount}
         />
         <PreviewFrame
           content={this.props.file.content}
@@ -81,11 +85,14 @@ IDEView.propTypes = {
   openPreferences: PropTypes.func.isRequired,
   preferences: PropTypes.shape({
     isVisible: PropTypes.bool.isRequired,
-    fontSize: PropTypes.number.isRequired
+    fontSize: PropTypes.number.isRequired,
+    indentationAmount: PropTypes.number.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   increaseFont: PropTypes.func.isRequired,
   decreaseFont: PropTypes.func.isRequired,
+  increaseIndentation: PropTypes.func.isRequired,
+  decreaseIndentation: PropTypes.func.isRequired,
   file: PropTypes.shape({
     content: PropTypes.string.isRequired
   }).isRequired,

client/modules/IDE/reducers/preferences.js

@@ -2,31 +2,36 @@ import * as ActionTypes from '../../../constants';
 
 const initialState = {
   isVisible: false,
-  fontSize: 18
+  fontSize: 18,
+  indentationAmount: 4
 };
 
 const preferences = (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.OPEN_PREFERENCES:
-      return {
-        isVisible: true,
-        fontSize: state.fontSize
-      };
+      return Object.assign({}, state, {
+        isVisible: true
+      });
     case ActionTypes.CLOSE_PREFERENCES:
-      return {
-        isVisible: false,
-        fontSize: state.fontSize
-      };
+      return Object.assign({}, state, {
+        isVisible: false
+      });
     case ActionTypes.INCREASE_FONTSIZE:
-      return {
-        isVisible: state.isVisible,
+      return Object.assign({}, state, {
         fontSize: state.fontSize + 2
-      };
+      });
     case ActionTypes.DECREASE_FONTSIZE:
-      return {
-        isVisible: state.isVisible,
+      return Object.assign({}, state, {
         fontSize: state.fontSize - 2
-      };
+      });
+    case ActionTypes.INCREASE_INDENTATION:
+      return Object.assign({}, state, {
+        indentationAmount: state.indentationAmount + 2
+      });
+    case ActionTypes.DECREASE_INDENTATION:
+      return Object.assign({}, state, {
+        indentationAmount: state.indentationAmount - 2
+      });
     default:
       return state;
   }

client/styles/base/_base.scss

@@ -46,3 +46,7 @@ h2 {
 h3 {
 	font-weight: normal;
 }
+
+h4 {
+	font-weight: normal;
+}

client/styles/components/_preferences.scss

@@ -36,6 +36,8 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
+	padding-bottom: #{20 / $base-font-size}rem;
+	border-bottom: 2px dashed $light-button-border-color;
 }
 
 .preference__title {

package.json

@@ -62,7 +62,7 @@
     "body-parser": "^1.15.1",
     "classnames": "^2.2.5",
     "codemirror": "^5.14.2",
-    "connect-mongo": "^1.2.0",
+    "connect-mongo": "^1.0.0",
     "cookie-parser": "^1.4.1",
     "dotenv": "^2.0.0",
     "eslint-loader": "^1.3.0",

server/server.js

@@ -3,7 +3,7 @@ import mongoose from 'mongoose';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import session from 'express-session';
-const MongoStore = require('connect-mongo')(session);
+const MongoStore = require('connect-mongo/es5')(session);
 import passport from 'passport';
 import path from 'path';
 
@@ -83,4 +83,3 @@ app.listen(serverConfig.port, (error) => {
 });
 
 export default app;
-