From 1b56f8ce54e24d38f915c212985e85774b28fa25 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Wed, 6 Jul 2016 11:27:39 -0400 Subject: [PATCH] add more preferences --- client/constants.js | 2 ++ client/modules/IDE/actions/preferences.js | 12 +++++++ client/modules/IDE/components/Editor.js | 7 +++- client/modules/IDE/components/Preferences.js | 20 +++++++++-- client/modules/IDE/pages/IDEView.js | 9 ++++- client/modules/IDE/reducers/preferences.js | 35 +++++++++++--------- client/styles/base/_base.scss | 6 +++- client/styles/components/_preferences.scss | 2 ++ package.json | 2 +- server/server.js | 3 +- 10 files changed, 75 insertions(+), 23 deletions(-) diff --git a/client/constants.js b/client/constants.js index 2f5571d5..90453065 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index 2cfafcf4..5d1e0a81 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/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 + }; +} diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index e7cb8647..e1b2be63 100644 --- a/client/modules/IDE/components/Editor.js +++ b/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; diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index fb4bdffd..a8adf80a 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -19,8 +19,9 @@ function Preferences(props) { +
-

Text Size

+

Text Size

@@ -29,6 +30,18 @@ function Preferences(props) {
+ +
+

Indentation Amount

+ +

{props.indentationAmount}

+ +
+ ); } @@ -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; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index cb4c2ce1..620b828b 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/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} /> { 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; } diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index 6a66bf88..61030f10 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -45,4 +45,8 @@ h2 { h3 { font-weight: normal; -} \ No newline at end of file +} + +h4 { + font-weight: normal; +} diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 96224827..b979f9d2 100644 --- a/client/styles/components/_preferences.scss +++ b/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 { diff --git a/package.json b/package.json index 168f71b7..2ba555a0 100644 --- a/package.json +++ b/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", diff --git a/server/server.js b/server/server.js index e0e97fe2..d9a8ea9d 100644 --- a/server/server.js +++ b/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; -