From 1b56f8ce54e24d38f915c212985e85774b28fa25 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Wed, 6 Jul 2016 11:27:39 -0400 Subject: [PATCH 01/78] 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 14ede1388be8d461ea8f96a45d43e740416f8f89 Mon Sep 17 00:00:00 2001 From: therewasaguy Date: Fri, 8 Jul 2016 14:33:06 -0400 Subject: [PATCH 02/78] console: hijack iframe console messages --- client/modules/IDE/components/PreviewFrame.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 94d5d7ce..08b916c0 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -4,6 +4,8 @@ import ReactDOM from 'react-dom'; class PreviewFrame extends React.Component { componentDidMount() { + this.hijackConsole(); + if (this.props.isPlaying) { this.renderFrameContents(); } @@ -33,6 +35,25 @@ class PreviewFrame extends React.Component { doc.close(); } + hijackConsole() { + const iframeWindow = ReactDOM.findDOMNode(this).contentWindow; + const originalConsole = iframeWindow.console; + iframeWindow.console = {}; + + const methods = [ + 'debug', 'clear', 'error', 'info', 'log', 'warn' + ]; + + methods.forEach((method) => { + iframeWindow.console[method] = (...theArgs) => { + originalConsole[method].apply(originalConsole, theArgs); + + // TO DO: do something with the arguments + // window.alert(JSON.stringify(theArgs)); + }; + }); + } + renderSketch() { const doc = ReactDOM.findDOMNode(this).contentDocument; this.clearPreview(); From 3bdd02e859b2e7adf2fdfd110740c21dc1029a20 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Sun, 10 Jul 2016 20:13:37 -0400 Subject: [PATCH 03/78] 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 04/78] 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 05/78] 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 06/78] 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 07/78] 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 08/78] 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 09/78] 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 10/78] 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 11/78] 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 d72a6be009e23c4811e5dcc8b43ad99c2a20f5db Mon Sep 17 00:00:00 2001 From: mathuramg Date: Tue, 12 Jul 2016 10:16:19 -0400 Subject: [PATCH 12/78] add table scope --- client/modules/Sketch/pages/SketchListView.js | 8 ++++---- package.json | 2 +- server/server.js | 3 +-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/client/modules/Sketch/pages/SketchListView.js b/client/modules/Sketch/pages/SketchListView.js index fec25baf..f38c806a 100644 --- a/client/modules/Sketch/pages/SketchListView.js +++ b/client/modules/Sketch/pages/SketchListView.js @@ -22,14 +22,14 @@ class SketchListView extends React.Component { /> - - - + + + {this.props.sketches.map(sketch => - + diff --git a/package.json b/package.json index dca229de..9fc1ef6b 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "bson-objectid": "^1.1.4", "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", "escape-string-regexp": "^1.0.5", 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 1f286bc9487e6d85ca2e07225352b143e8283c24 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 11:13:09 -0400 Subject: [PATCH 13/78] 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 22ac7214bdd7b85d12f369175f9f349ab43c2f17 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Tue, 12 Jul 2016 11:22:27 -0400 Subject: [PATCH 14/78] make sidebar accessible --- client/modules/IDE/components/Sidebar.js | 13 ++++++++----- client/styles/abstracts/_variables.scss | 3 ++- client/styles/components/_sidebar.scss | 14 +++++++++----- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js index cd75d0a7..3f82a2cc 100644 --- a/client/modules/IDE/components/Sidebar.js +++ b/client/modules/IDE/components/Sidebar.js @@ -11,11 +11,14 @@ function Sidebar(props) { 'sidebar__file-item--selected': file.id === props.selectedFile.id }); return ( -
  • props.setSelectedFile(file.id)} - >{file.name}
    • +
  • + +
    • ); })} diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index e07d9e55..0a70ada0 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -9,6 +9,7 @@ $light-primary-text-color: #333; $light-secondary-text-color: #6b6b6b; $light-inactive-text-color: #b5b5b5; $light-background-color: #fdfdfd; +$light-sidebar-background: $white; $light-button-background-color: #f4f4f4; $light-button-color: $black; @@ -18,7 +19,7 @@ $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/_sidebar.scss b/client/styles/components/_sidebar.scss index f7fb4ff8..02513754 100644 --- a/client/styles/components/_sidebar.scss +++ b/client/styles/components/_sidebar.scss @@ -1,12 +1,16 @@ .sidebar__file-list { - border-top: 1px solid $ide-border-color; + border-top: 1px solid $ide-border-color; } .sidebar__file-item { padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem; color: $light-inactive-text-color; + background-color: $light-sidebar-background; + border: none; + width: 100%; + outline: none; + cursor: pointer; + &--selected { + background-color: $ide-border-color; + } } - -.sidebar__file-item--selected { - background-color: $ide-border-color; -} \ No newline at end of file From d96e7132dc5bd73807cb0b8e4700bda5540e144d Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 12:07:06 -0400 Subject: [PATCH 15/78] 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; From 624d79075a913880edf26d1fcea34bcaaf0b41a6 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Tue, 12 Jul 2016 12:25:48 -0400 Subject: [PATCH 16/78] make links accessible --- client/components/Nav.js | 8 ++++---- client/modules/IDE/components/Sidebar.js | 12 +++++++----- client/modules/IDE/components/Toolbar.js | 2 +- client/styles/abstracts/_variables.scss | 2 +- client/styles/components/_sidebar.scss | 10 +++++----- client/styles/components/_signup.scss | 6 +++--- 6 files changed, 21 insertions(+), 19 deletions(-) diff --git a/client/components/Nav.js b/client/components/Nav.js index ddccbc1a..85c82bb2 100644 --- a/client/components/Nav.js +++ b/client/components/Nav.js @@ -6,20 +6,20 @@ function Nav(props) {
    NameCreatedLast UpdatedNameCreatedLast Updated
    {sketch.name}{sketch.name} {moment(sketch.createdAt).format('MMM D, YYYY')} {moment(sketch.updatedAt).format('MMM D, YYYY')}
    +
    From da493e401402ac8ddf8b64b06af71b030083a541 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Tue, 12 Jul 2016 14:50:54 -0400 Subject: [PATCH 18/78] remove dev changes --- client/styles/abstracts/_variables.scss | 1 - package.json | 2 +- server/server.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 0a70ada0..a41a2097 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -9,7 +9,6 @@ $light-primary-text-color: #333; $light-secondary-text-color: #6b6b6b; $light-inactive-text-color: #b5b5b5; $light-background-color: #fdfdfd; -$light-sidebar-background: $white; $light-button-background-color: #f4f4f4; $light-button-color: $black; diff --git a/package.json b/package.json index 9fc1ef6b..dca229de 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "bson-objectid": "^1.1.4", "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", "escape-string-regexp": "^1.0.5", 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 70f5638a478ffb15ba75c6d05a1ea7c28584347f Mon Sep 17 00:00:00 2001 From: mathuramg Date: Tue, 12 Jul 2016 15:11:45 -0400 Subject: [PATCH 19/78] move keyCode --- client/modules/IDE/components/Sidebar.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js index 701e5887..cb8c276f 100644 --- a/client/modules/IDE/components/Sidebar.js +++ b/client/modules/IDE/components/Sidebar.js @@ -11,12 +11,13 @@ function Sidebar(props) { 'sidebar__file-item--selected': file.id === props.selectedFile.id }); return ( -
  • +
  • props.setSelectedFile(file.id)} - >{file.name} - + >{file.name}
    • ); })} From b4ba44a67e1663dd3e2e63db8ea672f7c2d5b1b1 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 15:58:11 -0400 Subject: [PATCH 20/78] fix editor overflow --- client/modules/IDE/components/Editor.js | 3 ++- client/styles/layout/_ide.scss | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index fa4fe305..70ee4030 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -11,7 +11,8 @@ class Editor extends React.Component { value: this.props.file.content, lineNumbers: true, styleActiveLine: true, - mode: 'javascript' + mode: 'javascript', + lineWrapping: true }); this._cm.on('change', () => { // eslint-disable-line // this.props.updateFileContent('sketch.js', this._cm.getValue()); diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss index ffb6561e..7f78e871 100644 --- a/client/styles/layout/_ide.scss +++ b/client/styles/layout/_ide.scss @@ -6,12 +6,13 @@ } .editor-holder { - flex-grow: 1; + flex: 1 0 0; + max-width: 45%; height: 100%; } .preview-frame { - flex-grow: 1; + flex: 1 0 0; } .toolbar { From bc69995fb1c2c474cd31956071baa2db34b73d41 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 17:38:24 -0400 Subject: [PATCH 21/78] super ugly, but added jslinting --- client/modules/IDE/components/Editor.js | 8 ++- client/styles/main.scss | 1 + client/styles/vendors/_lint.scss | 73 +++++++++++++++++++++++++ package.json | 1 + 4 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 client/styles/vendors/_lint.scss diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index 70ee4030..9be67dff 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -2,6 +2,10 @@ import React, { PropTypes } from 'react'; import CodeMirror from 'codemirror'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/addon/selection/active-line'; +import 'codemirror/addon/lint/lint'; +import 'codemirror/addon/lint/javascript-lint'; +import { JSHINT } from 'jshint'; +window.JSHINT = JSHINT; class Editor extends React.Component { @@ -12,7 +16,9 @@ class Editor extends React.Component { lineNumbers: true, styleActiveLine: true, mode: 'javascript', - lineWrapping: true + lineWrapping: true, + gutters: ['CodeMirror-lint-markers'], + lint: true }); this._cm.on('change', () => { // eslint-disable-line // this.props.updateFileContent('sketch.js', this._cm.getValue()); diff --git a/client/styles/main.scss b/client/styles/main.scss index c16cff9d..4a20ba94 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -5,6 +5,7 @@ @import 'base/base'; @import 'vendors/codemirror'; +@import 'vendors/lint'; @import 'components/p5-widget-codemirror-theme'; @import 'components/editor'; diff --git a/client/styles/vendors/_lint.scss b/client/styles/vendors/_lint.scss new file mode 100644 index 00000000..414a9a0e --- /dev/null +++ b/client/styles/vendors/_lint.scss @@ -0,0 +1,73 @@ +/* The lint marker gutter */ +.CodeMirror-lint-markers { + width: 16px; +} + +.CodeMirror-lint-tooltip { + background-color: infobackground; + border: 1px solid black; + border-radius: 4px 4px 4px 4px; + color: infotext; + font-family: monospace; + font-size: 10pt; + overflow: hidden; + padding: 2px 5px; + position: fixed; + white-space: pre; + white-space: pre-wrap; + z-index: 100; + max-width: 600px; + opacity: 0; + transition: opacity .4s; + -moz-transition: opacity .4s; + -webkit-transition: opacity .4s; + -o-transition: opacity .4s; + -ms-transition: opacity .4s; +} + +.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning { + background-position: left bottom; + background-repeat: repeat-x; +} + +.CodeMirror-lint-mark-error { + background-image: + url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==") + ; +} + +.CodeMirror-lint-mark-warning { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning { + background-position: center center; + background-repeat: no-repeat; + cursor: pointer; + display: inline-block; + height: 16px; + width: 16px; + vertical-align: middle; + position: relative; +} + +.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { + padding-left: 18px; + background-position: top left; + background-repeat: no-repeat; +} + +.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-multiple { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC"); + background-repeat: no-repeat; + background-position: right bottom; + width: 100%; height: 100%; +} diff --git a/package.json b/package.json index dca229de..1623aa62 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "eslint-loader": "^1.3.0", "express": "^4.13.4", "express-session": "^1.13.0", + "jshint": "^2.9.2", "moment": "^2.14.1", "mongoose": "^4.4.16", "passport": "^0.3.2", From cbdf68cbd07f4b22d4748f8a39e99ef3e546507d Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 19:11:07 -0400 Subject: [PATCH 22/78] add styling for error/warning, not for tooltip --- client/styles/components/_editor.scss | 29 +++++++++++++++++++ .../_p5-widget-codemirror-theme.scss | 1 + 2 files changed, 30 insertions(+) diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 5209e517..d75fbfbc 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -19,3 +19,32 @@ .CodeMirror-line { padding-left: #{5 / $base-font-size}rem; } + +.CodeMirror-gutter-wrapper { + right: 100%; + top: 0; + bottom: 0; +} + + +.CodeMirror-lint-marker-warning, .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-multiple { + background-image: none; + width: 70px; + position: absolute; + height: 100%; +} + +.CodeMirror-lint-marker-warning { + background-color: rgb(255, 190, 5); +} + +.CodeMirror-lint-marker-error { + background-color: rgb(255, 95, 82); +} + +.CodeMirror-gutter-elt:not(.CodeMirror-linenumber) { + opacity: 0.3; + width: 70px !important; + height: 100%; + // background-color: rgb(255, 95, 82); +} diff --git a/client/styles/components/_p5-widget-codemirror-theme.scss b/client/styles/components/_p5-widget-codemirror-theme.scss index 1c7fab3e..fe3be0b1 100644 --- a/client/styles/components/_p5-widget-codemirror-theme.scss +++ b/client/styles/components/_p5-widget-codemirror-theme.scss @@ -27,6 +27,7 @@ .cm-s-p5-widget span.cm-error { color: #f00; } .cm-s-p5-widget .CodeMirror-activeline-background { background-color: #e8f2ff; } +// .cm-s-p5-widget .CodeMirror-activeline-gutter { background-color: #e8f2ff; } .cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } /* These styles don't seem to be set by CodeMirror's javascript mode. */ From 30992ac2de854de698a68ec2f7ba93b9cb9ccaa0 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 12 Jul 2016 19:24:57 -0400 Subject: [PATCH 23/78] fix tooltip styling --- client/styles/components/_editor.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index d75fbfbc..0964019c 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -26,7 +26,6 @@ bottom: 0; } - .CodeMirror-lint-marker-warning, .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-multiple { background-image: none; width: 70px; @@ -34,6 +33,11 @@ height: 100%; } +.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { + background-image: none; + padding-left: inherit; +} + .CodeMirror-lint-marker-warning { background-color: rgb(255, 190, 5); } @@ -48,3 +52,11 @@ height: 100%; // background-color: rgb(255, 95, 82); } + +.CodeMirror-lint-tooltip { + font-family: Montserrat, sans-serif; + border-radius: 2px; + border: 1px solid #B9D0E1; + background-color: $light-button-background-color; + +} From baec9e9e8708a9cd7f68a860267834730daaaac1 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Wed, 13 Jul 2016 11:59:47 -0400 Subject: [PATCH 24/78] add aria-tags and titles --- client/components/Nav.js | 6 +++--- client/modules/IDE/components/Editor.js | 3 ++- client/modules/IDE/components/Preferences.js | 6 +++--- client/modules/IDE/components/Sidebar.js | 2 +- client/modules/IDE/components/Toolbar.js | 2 +- package.json | 2 +- server/server.js | 2 +- 7 files changed, 12 insertions(+), 11 deletions(-) diff --git a/client/components/Nav.js b/client/components/Nav.js index 85c82bb2..193a9b4d 100644 --- a/client/components/Nav.js +++ b/client/components/Nav.js @@ -3,8 +3,8 @@ import { Link } from 'react-router'; function Nav(props) { return ( -
    Name Created