From 1b56f8ce54e24d38f915c212985e85774b28fa25 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Wed, 6 Jul 2016 11:27:39 -0400 Subject: [PATCH 01/12] 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; - From 3bdd02e859b2e7adf2fdfd110740c21dc1029a20 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Sun, 10 Jul 2016 20:13:37 -0400 Subject: [PATCH 02/12] make preference value input tag --- client/constants.js | 2 ++ client/modules/IDE/actions/preferences.js | 16 ++++++++++++++++ client/modules/IDE/components/Preferences.js | 8 +++++--- client/modules/IDE/pages/IDEView.js | 4 ++++ client/modules/IDE/reducers/preferences.js | 8 ++++++++ client/styles/components/_preferences.scss | 2 +- 6 files changed, 36 insertions(+), 4 deletions(-) diff --git a/client/constants.js b/client/constants.js index 90453065..0a817cd6 100644 --- a/client/constants.js +++ b/client/constants.js @@ -8,8 +8,10 @@ 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 UPDATE_FONTSIZE = 'UPDATE_FONTSIZE'; export const INCREASE_INDENTATION = 'INCREASE_INDENTATION'; export const DECREASE_INDENTATION = 'DECREASE_INDENTATION'; +export const UPDATE_INDENTATION = 'UPDATE_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 5d1e0a81..331e33b6 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -24,6 +24,14 @@ export function decreaseFont() { }; } +export function updateFont(event) { + const value = event.target.value; + return { + type: ActionTypes.UPDATE_FONTSIZE, + value + }; +} + export function increaseIndentation() { return { type: ActionTypes.INCREASE_INDENTATION @@ -35,3 +43,11 @@ export function decreaseIndentation() { type: ActionTypes.DECREASE_INDENTATION }; } + +export function updateIndentation() { + const value = event.target.value; + return { + type: ActionTypes.UPDATE_INDENTATION, + value + }; +} diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index a8adf80a..17137554 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -25,7 +25,7 @@ function Preferences(props) { -

{props.fontSize}

+ @@ -36,7 +36,7 @@ function Preferences(props) { -

{props.indentationAmount}

+ @@ -50,11 +50,13 @@ Preferences.propTypes = { isVisible: PropTypes.bool.isRequired, closePreferences: PropTypes.func.isRequired, decreaseFont: PropTypes.func.isRequired, + updateFont: PropTypes.func.isRequired, fontSize: PropTypes.number.isRequired, increaseFont: PropTypes.func.isRequired, indentationAmount: PropTypes.number.isRequired, decreaseIndentation: PropTypes.func.isRequired, - increaseIndentation: PropTypes.func.isRequired + increaseIndentation: PropTypes.func.isRequired, + updateIndentation: PropTypes.func.isRequired }; export default Preferences; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 620b828b..bc98f378 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -42,9 +42,11 @@ class IDEView extends React.Component { closePreferences={this.props.closePreferences} increaseFont={this.props.increaseFont} decreaseFont={this.props.decreaseFont} + updateFont={this.props.updateFont} fontSize={this.props.preferences.fontSize} increaseIndentation={this.props.increaseIndentation} decreaseIndentation={this.props.decreaseIndentation} + updateIndentation={this.props.updateIndentation} indentationAmount={this.props.preferences.indentationAmount} /> { return Object.assign({}, state, { fontSize: state.fontSize - 2 }); + case ActionTypes.UPDATE_FONTSIZE: + return Object.assign({}, state, { + fontSize: action.value + }); case ActionTypes.INCREASE_INDENTATION: return Object.assign({}, state, { indentationAmount: state.indentationAmount + 2 @@ -32,6 +36,10 @@ const preferences = (state = initialState, action) => { return Object.assign({}, state, { indentationAmount: state.indentationAmount - 2 }); + case ActionTypes.UPDATE_INDENTATION: + return Object.assign({}, state, { + indentationAmount: action.value + }); default: return state; } diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index b979f9d2..e8aeca3a 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -48,6 +48,6 @@ .preference__value { border: 1px solid $light-button-border-color; text-align: center; - line-height: #{48 / $base-font-size}rem; width: #{48 / $base-font-size}rem; + background-color: $light-button-background-color; } From 65bd8c2e63f94c976017b124f690247f8821a175 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Sun, 10 Jul 2016 22:52:48 -0400 Subject: [PATCH 03/12] include space and tab --- client/constants.js | 2 ++ client/modules/IDE/actions/preferences.js | 12 +++++++++ client/modules/IDE/components/Editor.js | 6 ++++- client/modules/IDE/components/Preferences.js | 28 +++++++++++++++++--- client/modules/IDE/pages/IDEView.js | 9 ++++++- client/modules/IDE/reducers/preferences.js | 11 +++++++- client/styles/abstracts/_placeholders.scss | 15 +++++++++++ client/styles/base/_base.scss | 4 +++ client/styles/components/_preferences.scss | 25 ++++++++++++++--- 9 files changed, 103 insertions(+), 9 deletions(-) diff --git a/client/constants.js b/client/constants.js index 0a817cd6..00480bcd 100644 --- a/client/constants.js +++ b/client/constants.js @@ -12,6 +12,8 @@ export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE'; export const INCREASE_INDENTATION = 'INCREASE_INDENTATION'; export const DECREASE_INDENTATION = 'DECREASE_INDENTATION'; export const UPDATE_INDENTATION = 'UPDATE_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'; diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index 331e33b6..4a3d0c9c 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -51,3 +51,15 @@ export function updateIndentation() { value }; } + +export function indentWithTab() { + return { + type: ActionTypes.INDENT_WITH_TAB + }; +} + +export function indentWithSpace() { + return { + type: ActionTypes.INDENT_WITH_SPACE + }; +} diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index e1b2be63..d750180a 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -17,7 +17,10 @@ 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('indentWithTabs', this.props.indentWithTab); this._cm.setOption('tabSize', this.props.indentationAmount); + this._cm.setOption('indentUnit', this.props.indentationAmount); } componentDidUpdate(prevProps) { @@ -48,7 +51,8 @@ Editor.propTypes = { content: PropTypes.string.isRequired, updateFile: PropTypes.func.isRequired, fontSize: PropTypes.number.isRequired, - indentationAmount: PropTypes.number.isRequired + indentationAmount: PropTypes.number.isRequired, + isTabIndent: PropTypes.bool.isRequired }; export default Editor; diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index 17137554..e0fd2d2b 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -11,6 +11,14 @@ function Preferences(props) { preferences: true, 'preferences--selected': props.isVisible }); + let preferencesTabOptionClass = classNames({ + preference__option: true, + 'preference__option--selected': props.isTabIndent + }); + let preferencesSpaceOptionClass = classNames({ + preference__option: true, + 'preference__option--selected': !props.isTabIndent + }); return (
@@ -24,22 +32,33 @@ function Preferences(props) {

Text Size

- + + + +

Indentation Amount

- + +
    +
  • Spaces
    • +
  • Tabs
    • +
@@ -56,7 +75,10 @@ Preferences.propTypes = { indentationAmount: PropTypes.number.isRequired, decreaseIndentation: PropTypes.func.isRequired, increaseIndentation: PropTypes.func.isRequired, - updateIndentation: PropTypes.func.isRequired + updateIndentation: PropTypes.func.isRequired, + indentWithSpace: PropTypes.func.isRequired, + indentWithTab: PropTypes.func.isRequired, + isTabIndent: PropTypes.bool.isRequired }; export default Preferences; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index bc98f378..2eead4f9 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -48,12 +48,16 @@ class IDEView extends React.Component { decreaseIndentation={this.props.decreaseIndentation} updateIndentation={this.props.updateIndentation} indentationAmount={this.props.preferences.indentationAmount} + isTabIndent={this.props.preferences.isTabIndent} + indentWithSpace={this.props.indentWithSpace} + indentWithTab={this.props.indentWithTab} /> { @@ -40,6 +41,14 @@ const preferences = (state = initialState, action) => { 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 + }); default: return state; } diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 021d3a3f..c622a0db 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -69,6 +69,7 @@ @extend %toolbar-button; color: $light-primary-text-color; background-color: $light-modal-button-background-color; + padding: 0; & g { fill: $light-primary-text-color; } @@ -88,3 +89,17 @@ color: $light-primary-text-color; } } + +%preference-option { + color: $light-secondary-text-color; + font-size: #{14 / $base-font-size}rem; + cursor: pointer; + text-align: left; + margin-bottom: #{5 / $base-font-size}rem; + &:hover { + color: $light-primary-text-color; + } + &--selected { + color: $light-primary-text-color; + } +} diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index 61030f10..5f451ca7 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -50,3 +50,7 @@ h3 { h4 { font-weight: normal; } + +h6 { + font-weight: normal; +} diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index e8aeca3a..1e9c84ae 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -2,7 +2,7 @@ position: absolute; top: #{66 / $base-font-size}rem; right: #{40 / $base-font-size}rem; - width: #{276 / $base-font-size}rem; + width: #{300 / $base-font-size}rem; background-color: $light-button-background-color; display: none; padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem; @@ -35,8 +35,7 @@ .preference { display: flex; flex-wrap: wrap; - justify-content: space-between; - padding-bottom: #{20 / $base-font-size}rem; + padding-bottom: #{40 / $base-font-size}rem; border-bottom: 2px dashed $light-button-border-color; } @@ -49,5 +48,25 @@ border: 1px solid $light-button-border-color; text-align: center; width: #{48 / $base-font-size}rem; + height: #{48 / $base-font-size}rem; + margin: 0 #{20 / $base-font-size}rem; background-color: $light-button-background-color; } + +.preference__label { + margin: 0; + line-height: #{20 / $base-font-size}rem; + color: $light-button-border-color; + &:hover { + color: $light-button-border-color; + } +} + +.preference__option { + @extend %preference-option; + list-style-type: none; + padding-left: #{12 / $base-font-size}rem; + &--selected { + @extend %preference-option--selected; + } +} From 8746558fa82b75a945bbd34c9ca2bb2201fd80e5 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Sun, 10 Jul 2016 23:11:06 -0400 Subject: [PATCH 04/12] add isTabIndent to componentchange --- client/modules/IDE/components/Editor.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index d750180a..d6ef5ba2 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -17,9 +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('indentWithTabs', this.props.indentWithTab); - this._cm.setOption('tabSize', this.props.indentationAmount); + this._cm.setOption('indentWithTabs', this.props.isTabIndent); this._cm.setOption('indentUnit', this.props.indentationAmount); } @@ -34,6 +32,9 @@ class Editor extends React.Component { if (this.props.indentationAmount !== prevProps.indentationAmount) { this._cm.setOption('tabSize', this.props.indentationAmount); } + if (this.props.isTabIndent !== prevProps.isTabIndent) { + this._cm.setOption('indentWithTabs', this.props.isTabIndent); + } } componentWillUnmount() { From 42d59d3fb33acdfc043fec4bb3bb9d96513b3a02 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 08:44:27 -0400 Subject: [PATCH 05/12] change list to buttons - accessibility --- client/modules/IDE/components/Preferences.js | 8 ++++---- client/styles/abstracts/_placeholders.scss | 2 ++ client/styles/components/_preferences.scss | 5 +++++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index e0fd2d2b..5259df6c 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -55,10 +55,10 @@ function Preferences(props) {
Increase
-
    -
  • Spaces
    • -
  • Tabs
    • -
+
+ + +
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index c622a0db..3355d095 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -91,11 +91,13 @@ } %preference-option { + background-color: $light-button-background-color; color: $light-secondary-text-color; font-size: #{14 / $base-font-size}rem; cursor: pointer; text-align: left; margin-bottom: #{5 / $base-font-size}rem; + border: 0px; &:hover { color: $light-primary-text-color; } diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 1e9c84ae..1d0620ea 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -62,6 +62,11 @@ } } +.preference__vertical-list { + display: flex; + flex-direction: column; +} + .preference__option { @extend %preference-option; list-style-type: none; From 7f5d83a161dc2acb4f4275087fc016fcdceecd8e Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 09:00:44 -0400 Subject: [PATCH 06/12] change default indentation --- client/modules/IDE/components/Editor.js | 2 +- client/modules/IDE/reducers/preferences.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index d6ef5ba2..5375ff04 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -18,7 +18,7 @@ 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('indentUnit', this.props.indentationAmount); + this._cm.setOption('tabSize', this.props.indentationAmount); } componentDidUpdate(prevProps) { diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js index 0fb4c13b..0f7b084c 100644 --- a/client/modules/IDE/reducers/preferences.js +++ b/client/modules/IDE/reducers/preferences.js @@ -3,7 +3,7 @@ import * as ActionTypes from '../../../constants'; const initialState = { isVisible: false, fontSize: 18, - indentationAmount: 4, + indentationAmount: 2, isTabIndent: true }; From 094237881287f9b25f5dca842fe923cc0c19402e Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 09:06:43 -0400 Subject: [PATCH 07/12] remove dev changes --- client/modules/IDE/components/Preferences.js | 3 --- client/styles/components/_preferences.scss | 2 +- package.json | 2 +- server/server.js | 2 +- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index 5259df6c..961f4101 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -40,8 +40,6 @@ function Preferences(props) {
Increase
- -
@@ -60,7 +58,6 @@ function Preferences(props) {
- ); } diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 1d0620ea..cae4f7a0 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -48,7 +48,7 @@ border: 1px solid $light-button-border-color; text-align: center; width: #{48 / $base-font-size}rem; - height: #{48 / $base-font-size}rem; + line-height: #{48 / $base-font-size}rem; margin: 0 #{20 / $base-font-size}rem; background-color: $light-button-background-color; } diff --git a/package.json b/package.json index 2ba555a0..168f71b7 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.0.0", + "connect-mongo": "^1.2.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 d9a8ea9d..99879244 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/es5')(session); +const MongoStore = require('connect-mongo')(session); import passport from 'passport'; import path from 'path'; From 5ef51a939e8b86b176844140bb3f82f672f23f23 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 19:14:45 -0400 Subject: [PATCH 08/12] fix styling --- client/styles/abstracts/_placeholders.scss | 3 ++- client/styles/abstracts/_variables.scss | 3 ++- client/styles/components/_preferences.scss | 16 +++++++++------- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 3355d095..30f866ac 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -70,6 +70,7 @@ color: $light-primary-text-color; background-color: $light-modal-button-background-color; padding: 0; + line-height: #{48 / $base-font-size}rem; & g { fill: $light-primary-text-color; } @@ -92,7 +93,7 @@ %preference-option { background-color: $light-button-background-color; - color: $light-secondary-text-color; + color: $light-inactive-text-color; font-size: #{14 / $base-font-size}rem; cursor: pointer; text-align: left; diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 096ddd45..a0e4da39 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -13,12 +13,13 @@ $light-background-color: #fdfdfd; $light-button-background-color: #f4f4f4; $light-button-color: $black; $light-button-border-color: #979797; +$light-value-border-color: #e6e6e6; $light-toolbar-button-color: $p5js-pink; $light-button-background-hover-color: $p5js-pink; $light-button-background-active-color: #f10046; $light-button-hover-color: $white; $light-button-active-color: $white; -$light-modal-button-background-color: #e6e6e6; +$light-modal-button-background-color: #e6e6e6; $light-icon-color: #8b8b8b; $light-icon-hover-color: $light-primary-text-color; diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index cae4f7a0..86cc3e50 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -2,7 +2,7 @@ position: absolute; top: #{66 / $base-font-size}rem; right: #{40 / $base-font-size}rem; - width: #{300 / $base-font-size}rem; + width: #{332 / $base-font-size}rem; background-color: $light-button-background-color; display: none; padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem; @@ -45,20 +45,22 @@ } .preference__value { - border: 1px solid $light-button-border-color; + border: 2px solid $light-value-border-color; text-align: center; + border-radius: 0%; width: #{48 / $base-font-size}rem; - line-height: #{48 / $base-font-size}rem; - margin: 0 #{20 / $base-font-size}rem; + height: #{44 / $base-font-size}rem; + margin: 0 #{28 / $base-font-size}rem; + padding: 0; background-color: $light-button-background-color; } .preference__label { margin: 0; line-height: #{20 / $base-font-size}rem; - color: $light-button-border-color; + color: $light-inactive-text-color; &:hover { - color: $light-button-border-color; + color: $light-inactive-text-color; } } @@ -70,7 +72,7 @@ .preference__option { @extend %preference-option; list-style-type: none; - padding-left: #{12 / $base-font-size}rem; + padding-left: #{28 / $base-font-size}rem; &--selected { @extend %preference-option--selected; } From 81c5f91ab3881f93a5319f4a73f5bf074f62dc5d Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 22:53:27 -0400 Subject: [PATCH 09/12] fix border styles --- client/styles/components/_preferences.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 86cc3e50..8cd0e0ad 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -36,7 +36,9 @@ display: flex; flex-wrap: wrap; padding-bottom: #{40 / $base-font-size}rem; - border-bottom: 2px dashed $light-button-border-color; + & + & { + border-top: 2px dashed $light-button-border-color; + } } .preference__title { From 99f6ab562cf123d463b2e3784ed9ac5af495b3aa Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 23:40:30 -0400 Subject: [PATCH 10/12] fix merge conflicts --- client/modules/IDE/components/Editor.js | 11 ++++------- client/modules/IDE/pages/IDEView.js | 4 ---- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index a2639912..fa4fe305 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -50,17 +50,14 @@ class Editor extends React.Component { } Editor.propTypes = { - content: PropTypes.string.isRequired, - updateFile: PropTypes.func.isRequired, - fontSize: PropTypes.number.isRequired, indentationAmount: PropTypes.number.isRequired, - isTabIndent: PropTypes.bool.isRequired + isTabIndent: PropTypes.bool.isRequired, + updateFileContent: PropTypes.func.isRequired, + fontSize: PropTypes.number.isRequired, file: PropTypes.shape({ name: PropTypes.string.isRequired, content: PropTypes.string.isRequired - }), - updateFileContent: PropTypes.func.isRequired, - fontSize: PropTypes.number.isRequired + }) }; export default Editor; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 84d86289..c7308fa9 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -110,20 +110,16 @@ IDEView.propTypes = { closePreferences: PropTypes.func.isRequired, increaseFont: PropTypes.func.isRequired, decreaseFont: PropTypes.func.isRequired, -<<<<<<< HEAD updateFont: PropTypes.func.isRequired, increaseIndentation: PropTypes.func.isRequired, decreaseIndentation: PropTypes.func.isRequired, updateIndentation: PropTypes.func.isRequired, indentWithSpace: PropTypes.func.isRequired, indentWithTab: PropTypes.func.isRequired, - file: PropTypes.shape({ -======= files: PropTypes.array.isRequired, updateFileContent: PropTypes.func.isRequired, selectedFile: PropTypes.shape({ id: PropTypes.string.isRequired, ->>>>>>> b89a1103b9c5616820f4b6b005c118d9f1f9bf13 content: PropTypes.string.isRequired }), setSelectedFile: PropTypes.func.isRequired, From 1f286bc9487e6d85ca2e07225352b143e8283c24 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 11:13:09 -0400 Subject: [PATCH 11/12] add sound and dom by default --- client/modules/IDE/reducers/files.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index 5e47a1d6..db53dbc3 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -12,7 +12,9 @@ const defaultHTML = ` - + + + From d96e7132dc5bd73807cb0b8e4700bda5540e144d Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 12:07:06 -0400 Subject: [PATCH 12/12] fix minor styling bugs from PR --- client/styles/abstracts/_placeholders.scss | 2 +- client/styles/abstracts/_variables.scss | 1 - client/styles/components/_preferences.scss | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 007b0433..4b89cf7c 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -70,7 +70,7 @@ color: $light-primary-text-color; background-color: $light-modal-button-background-color; padding: 0; - line-height: #{48 / $base-font-size}rem; + line-height: #{50 / $base-font-size}rem; & g { fill: $light-primary-text-color; } diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 805bd0fc..a41a2097 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -13,7 +13,6 @@ $light-background-color: #fdfdfd; $light-button-background-color: #f4f4f4; $light-button-color: $black; $light-button-border-color: #979797; -$light-value-border-color: #e6e6e6; $light-toolbar-button-color: $p5js-pink; $light-button-background-hover-color: $p5js-pink; $light-button-background-active-color: #f10046; diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 8cd0e0ad..35371645 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -47,7 +47,7 @@ } .preference__value { - border: 2px solid $light-value-border-color; + border: 2px solid $light-button-border-color; text-align: center; border-radius: 0%; width: #{48 / $base-font-size}rem;