From 1b56f8ce54e24d38f915c212985e85774b28fa25 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Wed, 6 Jul 2016 11:27:39 -0400 Subject: [PATCH 01/23] 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 7a84137e9b03a986da4e77d86db489bf330e0c27 Mon Sep 17 00:00:00 2001 From: catarak Date: Fri, 8 Jul 2016 14:57:22 -0400 Subject: [PATCH 02/23] start to add selected file stuff --- client/constants.js | 2 ++ client/modules/IDE/actions/project.js | 13 +++++++++++-- client/modules/IDE/components/Sidebar.js | 24 +++++++++++++++++------- client/modules/IDE/pages/IDEView.js | 18 ++++++++++++++---- client/modules/IDE/reducers/files.js | 10 ++++++++-- client/modules/IDE/reducers/ide.js | 7 ++++++- package.json | 1 + server/controllers/project.controller.js | 3 +-- server/models/project.js | 11 ++++++++++- 9 files changed, 70 insertions(+), 19 deletions(-) diff --git a/client/constants.js b/client/constants.js index b69e22b2..1a4f1741 100644 --- a/client/constants.js +++ b/client/constants.js @@ -23,5 +23,7 @@ export const NEW_PROJECT = 'NEW_PROJECT'; export const SET_PROJECT = 'SET_PROJECT'; export const SET_PROJECTS = 'SET_PROJECTS'; +export const SET_SELECTED_FILE = 'SET_SELECTED_FILE'; + // eventually, handle errors more specifically and better export const ERROR = 'ERROR'; diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index 8d4e1e56..8f820c30 100644 --- a/client/modules/IDE/actions/project.js +++ b/client/modules/IDE/actions/project.js @@ -12,7 +12,8 @@ export function getProject(id) { dispatch({ type: ActionTypes.SET_PROJECT, project: response.data, - files: response.data.files + files: response.data.files, + selectedFile: response.data.selectedFile }); }) .catch(response => dispatch({ @@ -34,7 +35,7 @@ export function saveProject() { return (dispatch, getState) => { const state = getState(); const formParams = Object.assign({}, state.project); - formParams.files = state.files; + formParams.files = [...state.files]; if (state.project.id) { axios.put(`${ROOT_URL}/projects/${state.project.id}`, formParams, { withCredentials: true }) .then(() => { @@ -47,6 +48,12 @@ export function saveProject() { error: response.data })); } else { + // this might be unnecessary, but to prevent collisions in mongodb + formParams.files.map(file => { + const newFile = Object.assign({}, file); + delete newFile.id; + return newFile; + }); axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true }) .then(response => { browserHistory.push(`/projects/${response.data.id}`); @@ -54,6 +61,7 @@ export function saveProject() { type: ActionTypes.NEW_PROJECT, name: response.data.name, id: response.data.id, + selectedFile: response.data.selectedFile, files: response.data.files }); }) @@ -75,6 +83,7 @@ export function createProject() { type: ActionTypes.NEW_PROJECT, name: response.data.name, id: response.data.id, + selectedFile: response.data.selectedFile, files: response.data.files }); }) diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js index 3c5d0fe6..4fe0b85b 100644 --- a/client/modules/IDE/components/Sidebar.js +++ b/client/modules/IDE/components/Sidebar.js @@ -1,22 +1,32 @@ import React, { PropTypes } from 'react'; +import classNames from 'classnames'; function Sidebar(props) { return (
    - {props.files.map(file => -
  • {file.name}
    • - )} + {props.files.map(file => { + let itemClass = classNames({ + 'sidebar__file-item': true, + 'sidebar__file-item--selected': file.id === props.selectedFile.id + }); + return ( +
  • {file.name}
    • + ); + })}
); } Sidebar.propTypes = { - files: PropTypes.array.isRequired + files: PropTypes.array.isRequired, + selectedFile: PropTypes.shape({ + id: PropTypes.string.isRequired + }) }; export default Sidebar; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 2278a095..6d891791 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -11,6 +11,7 @@ import * as FileActions from '../actions/files'; import * as IDEActions from '../actions/ide'; import * as PreferencesActions from '../actions/preferences'; import * as ProjectActions from '../actions/project'; +import { getFile } from '../reducers/files'; class IDEView extends React.Component { componentDidMount() { @@ -45,14 +46,18 @@ class IDEView extends React.Component { decreaseFont={this.props.decreaseFont} fontSize={this.props.preferences.fontSize} /> - + } @@ -89,12 +94,17 @@ IDEView.propTypes = { increaseFont: PropTypes.func.isRequired, decreaseFont: PropTypes.func.isRequired, files: PropTypes.array.isRequired, - updateFileContent: PropTypes.func.isRequired + updateFileContent: PropTypes.func.isRequired, + selectedFile: PropTypes.shape({ + id: PropTypes.string, + content: PropTypes.string.isRequired + }) }; function mapStateToProps(state) { return { files: state.files, + selectedFile: getFile(state.files, state.ide.selectedFile), ide: state.ide, preferences: state.preferences, user: state.user, diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index 3a1a03d5..a8bb6991 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -20,14 +20,18 @@ const defaultHTML = `; + +// if the project has never been saved, const initialState = [ { name: 'sketch.js', - content: defaultSketch + content: defaultSketch, + id: '1' }, { name: 'index.html', - content: defaultHTML + content: defaultHTML, + id: '2' }]; @@ -50,4 +54,6 @@ const files = (state = initialState, action) => { } }; +export const getFile = (state, id) => state.filter(file => file.id === id)[0]; + export default files; diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js index e89ffdee..5d80ca81 100644 --- a/client/modules/IDE/reducers/ide.js +++ b/client/modules/IDE/reducers/ide.js @@ -1,7 +1,8 @@ import * as ActionTypes from '../../../constants'; const initialState = { - isPlaying: false + isPlaying: false, + selectedFile: '1' }; const ide = (state = initialState, action) => { @@ -18,6 +19,10 @@ const ide = (state = initialState, action) => { return { isPlaying: false }; + case ActionTypes.SET_SELECTED_FILE: + case ActionTypes.SET_PROJECT: + case ActionTypes.NEW_PROJECT: + return Object.assign({}, state, { selectedFile: action.selectedFile }); default: return state; } diff --git a/package.json b/package.json index 53f5d57d..6d64719d 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "babel-core": "^6.8.0", "bcrypt-nodejs": "0.0.3", "body-parser": "^1.15.1", + "bson-objectid": "^1.1.4", "classnames": "^2.2.5", "codemirror": "^5.14.2", "connect-mongo": "^1.2.0", diff --git a/server/controllers/project.controller.js b/server/controllers/project.controller.js index 03baa4e5..6c8f55c4 100644 --- a/server/controllers/project.controller.js +++ b/server/controllers/project.controller.js @@ -2,8 +2,7 @@ import Project from '../models/project'; export function createProject(req, res) { const projectValues = { - user: req.user ? req.user._id : undefined, // eslint-disable-line no-underscore-dangle - file: {} + user: req.user ? req.user._id : undefined // eslint-disable-line no-underscore-dangle }; Object.assign(projectValues, req.body); diff --git a/server/models/project.js b/server/models/project.js index 709ea58d..b000843d 100644 --- a/server/models/project.js +++ b/server/models/project.js @@ -40,7 +40,8 @@ const projectSchema = new Schema({ name: { type: String, default: "Hello p5.js, it's the server" }, user: { type: Schema.Types.ObjectId, ref: 'User' }, files: {type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch, _id: new ObjectId() }, { name: 'index.html', content: defaultHTML, _id: new ObjectId() }]}, - _id: { type: String, default: shortid.generate } + _id: { type: String, default: shortid.generate }, + selectedFile: Schema.Types.ObjectId }, { timestamps: true }); projectSchema.virtual('id').get(function(){ @@ -51,4 +52,12 @@ projectSchema.set('toJSON', { virtuals: true }); +projectSchema.pre('save', function createSelectedFile(next) { + const project = this; + if (!project.selectedFile) { + project.selectedFile = project.files[0]._id; // eslint-disable-line no-underscore-dangle + return next(); + } +}); + export default mongoose.model('Project', projectSchema); From ebfd1fce0d9ea04e4e4ee357e8227dcadda0f175 Mon Sep 17 00:00:00 2001 From: catarak Date: Fri, 8 Jul 2016 15:58:49 -0400 Subject: [PATCH 03/23] add Sidebar click to change Editor content --- client/modules/IDE/actions/ide.js | 7 +++++++ client/modules/IDE/components/Editor.js | 16 ++++++++++------ client/modules/IDE/components/Sidebar.js | 4 +++- client/modules/IDE/pages/IDEView.js | 8 +++++--- client/styles/components/_sidebar.scss | 3 +-- 5 files changed, 26 insertions(+), 12 deletions(-) diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 1d40ed12..0bcbc414 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -17,3 +17,10 @@ export function stopSketch() { type: ActionTypes.STOP_SKETCH }; } + +export function setSelectedFile(fileId) { + return { + type: ActionTypes.SET_SELECTED_FILE, + selectedFile: fileId + }; +} diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index b028d705..21956a58 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -8,21 +8,22 @@ class Editor extends React.Component { componentDidMount() { this._cm = CodeMirror(this.refs.container, { // eslint-disable-line theme: 'p5-widget', - value: this.props.content, + value: this.props.file.content, lineNumbers: true, styleActiveLine: true, mode: 'javascript' }); this._cm.on('change', () => { // eslint-disable-line - this.props.updateFileContent('sketch.js', this._cm.getValue()); + // this.props.updateFileContent('sketch.js', this._cm.getValue()); + this.props.updateFileContent(this.props.file.name, this._cm.getValue()); }); this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; } componentDidUpdate(prevProps) { - if (this.props.content !== prevProps.content && - this.props.content !== this._cm.getValue()) { - this._cm.setValue(this.props.content); // eslint-disable-line no-underscore-dangle + if (this.props.file.content !== prevProps.file.content && + this.props.file.content !== this._cm.getValue()) { + this._cm.setValue(this.props.file.content); // eslint-disable-line no-underscore-dangle } if (this.props.fontSize !== prevProps.fontSize) { this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; @@ -41,7 +42,10 @@ class Editor extends React.Component { } Editor.propTypes = { - content: PropTypes.string.isRequired, + file: PropTypes.shape({ + name: PropTypes.string.isRequired, + content: PropTypes.string.isRequired + }), updateFileContent: PropTypes.func.isRequired, fontSize: PropTypes.number.isRequired }; diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js index 4fe0b85b..cd75d0a7 100644 --- a/client/modules/IDE/components/Sidebar.js +++ b/client/modules/IDE/components/Sidebar.js @@ -14,6 +14,7 @@ function Sidebar(props) {
  • props.setSelectedFile(file.id)} >{file.name}
    • ); })} @@ -26,7 +27,8 @@ Sidebar.propTypes = { files: PropTypes.array.isRequired, selectedFile: PropTypes.shape({ id: PropTypes.string.isRequired - }) + }), + setSelectedFile: PropTypes.func.isRequired }; export default Sidebar; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 6d891791..95d1876d 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -49,9 +49,10 @@ class IDEView extends React.Component { Date: Sun, 10 Jul 2016 20:13:37 -0400 Subject: [PATCH 04/23] 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 05/23] 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 06/23] 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 07/23] 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 08/23] 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 09/23] 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 7a164d9cdd0155b117fdae1f92722e59eef0ff6c Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 15:22:29 -0400 Subject: [PATCH 10/23] multiple files rendering --- client/modules/IDE/components/PreviewFrame.js | 67 ++++++++++++++----- client/modules/IDE/pages/IDEView.js | 11 ++- client/modules/IDE/reducers/files.js | 3 + client/modules/IDE/reducers/ide.js | 12 +--- package.json | 1 + server/models/project.js | 1 + 6 files changed, 66 insertions(+), 29 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 94d5d7ce..0706901e 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; +import escapeStringRegexp from 'escape-string-regexp'; class PreviewFrame extends React.Component { @@ -11,11 +12,12 @@ class PreviewFrame extends React.Component { componentDidUpdate(prevProps) { if (this.props.isPlaying !== prevProps.isPlaying) { - if (this.props.isPlaying) { - this.renderSketch(); - } else { - this.clearPreview(); - } + this.renderSketch(); + // if (this.props.isPlaying) { + // this.renderSketch(); + // } else { + // this.clearPreview(); + // } } if (this.props.isPlaying && this.props.content !== prevProps.content) { @@ -28,22 +30,47 @@ class PreviewFrame extends React.Component { } clearPreview() { - const doc = ReactDOM.findDOMNode(this).contentDocument; - doc.write(''); - doc.close(); + const doc = ReactDOM.findDOMNode(this); + doc.srcDoc = ''; + } + + injectLocalFiles() { + let htmlFile = this.props.htmlFile.content; + + this.props.jsFiles.forEach(jsFile => { + const fileName = escapeStringRegexp(jsFile.name); + const fileRegex = new RegExp(`([\s\S]*?)<\/script>`, 'gmi'); + htmlFile = htmlFile.replace(fileRegex, ``); + }); + + const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); + const headRegex = new RegExp('head', 'i'); + let htmlHeadContents = htmlHead[0].split(headRegex)[1]; + htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2); + htmlHeadContents += '\n'; + htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); + + return htmlFile; } renderSketch() { - const doc = ReactDOM.findDOMNode(this).contentDocument; - this.clearPreview(); - ReactDOM.render(this.props.head, doc.head); - const p5Script = doc.createElement('script'); - p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js'); - doc.body.appendChild(p5Script); + const doc = ReactDOM.findDOMNode(this); + if (this.props.isPlaying) { + doc.srcdoc = this.injectLocalFiles(); + } else { + doc.srcdoc = ''; + } - const sketchScript = doc.createElement('script'); - sketchScript.textContent = this.props.content; - doc.body.appendChild(sketchScript); + // this.clearPreview(); + // ReactDOM.render(this.props.head, doc.head); + // const p5Script = doc.createElement('script'); + // p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/ + // p5.js/0.5.0/p5.min.js'); + // doc.body.appendChild(p5Script); + + // const sketchScript = doc.createElement('script'); + // sketchScript.textContent = this.props.content; + // doc.body.appendChild(sketchScript); } renderFrameContents() { @@ -70,7 +97,11 @@ class PreviewFrame extends React.Component { PreviewFrame.propTypes = { isPlaying: PropTypes.bool.isRequired, head: PropTypes.object.isRequired, - content: PropTypes.string.isRequired + content: PropTypes.string.isRequired, + htmlFile: PropTypes.shape({ + content: PropTypes.string.isRequired + }), + jsFiles: PropTypes.array.isRequired }; export default PreviewFrame; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 95d1876d..ad78daa2 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -11,7 +11,7 @@ import * as FileActions from '../actions/files'; import * as IDEActions from '../actions/ide'; import * as PreferencesActions from '../actions/preferences'; import * as ProjectActions from '../actions/project'; -import { getFile } from '../reducers/files'; +import { getFile, getHTMLFile, getJSFiles } from '../reducers/files'; class IDEView extends React.Component { componentDidMount() { @@ -58,6 +58,9 @@ class IDEView extends React.Component { files={this.props.files} /> @@ -100,13 +103,17 @@ IDEView.propTypes = { id: PropTypes.string.isRequired, content: PropTypes.string.isRequired }), - setSelectedFile: PropTypes.func.isRequired + setSelectedFile: PropTypes.func.isRequired, + htmlFile: PropTypes.object.isRequired, + jsFiles: PropTypes.array.isRequired }; function mapStateToProps(state) { return { files: state.files, selectedFile: getFile(state.files, state.ide.selectedFile), + htmlFile: getHTMLFile(state.files), + jsFiles: getJSFiles(state.files), ide: state.ide, preferences: state.preferences, user: state.user, diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index a8bb6991..c96c23e5 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -13,6 +13,7 @@ const defaultHTML = + @@ -55,5 +56,7 @@ const files = (state = initialState, action) => { }; export const getFile = (state, id) => state.filter(file => file.id === id)[0]; +export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*html$/))[0]; +export const getJSFiles = (state) => state.filter(file => file.name.match(/.*.js$/)); export default files; diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js index 5d80ca81..9c4c5b88 100644 --- a/client/modules/IDE/reducers/ide.js +++ b/client/modules/IDE/reducers/ide.js @@ -8,17 +8,11 @@ const initialState = { const ide = (state = initialState, action) => { switch (action.type) { case ActionTypes.TOGGLE_SKETCH: - return { - isPlaying: !state.isPlaying - }; + return Object.assign({}, state, { isPlaying: !state.isPlaying }); case ActionTypes.START_SKETCH: - return { - isPlaying: true - }; + return Object.assign({}, state, { isPlaying: true }); case ActionTypes.STOP_SKETCH: - return { - isPlaying: false - }; + return Object.assign({}, state, { isPlaying: false }); case ActionTypes.SET_SELECTED_FILE: case ActionTypes.SET_PROJECT: case ActionTypes.NEW_PROJECT: diff --git a/package.json b/package.json index 6d64719d..e33b4385 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "connect-mongo": "^1.2.0", "cookie-parser": "^1.4.1", "dotenv": "^2.0.0", + "escape-string-regexp": "^1.0.5", "eslint-loader": "^1.3.0", "express": "^4.13.4", "express-session": "^1.13.0", diff --git a/server/models/project.js b/server/models/project.js index b000843d..94cf17d3 100644 --- a/server/models/project.js +++ b/server/models/project.js @@ -16,6 +16,7 @@ const defaultHTML = + From dcc39afb45e30b5abefbeeab3f55511b10d4b8f4 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 15:27:00 -0400 Subject: [PATCH 11/23] add comment about adding srddoc polyfill --- client/modules/IDE/components/PreviewFrame.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 0706901e..a73cf6d1 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -56,6 +56,7 @@ class PreviewFrame extends React.Component { renderSketch() { const doc = ReactDOM.findDOMNode(this); if (this.props.isPlaying) { + // TODO add polyfill for this doc.srcdoc = this.injectLocalFiles(); } else { doc.srcdoc = ''; From 016325be9b08099b6452b923cbd904705e0ccc16 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 15:50:08 -0400 Subject: [PATCH 12/23] add srcdoc polyfill --- client/modules/IDE/components/PreviewFrame.js | 1 + package.json | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index a73cf6d1..aa2134ef 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import escapeStringRegexp from 'escape-string-regexp'; +import 'srcdoc-polyfill'; class PreviewFrame extends React.Component { diff --git a/package.json b/package.json index e33b4385..dca229de 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "redux": "^3.5.2", "redux-form": "^5.2.5", "redux-thunk": "^2.1.0", - "shortid": "^2.2.6" + "shortid": "^2.2.6", + "srcdoc-polyfill": "^0.2.0" } } From 960701942a6ad610e9253d23552482c3ff7c549b Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 16:12:31 -0400 Subject: [PATCH 13/23] temporarily remove sandbox --- client/modules/IDE/components/PreviewFrame.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index aa2134ef..a4e46e87 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -3,6 +3,8 @@ import ReactDOM from 'react-dom'; import escapeStringRegexp from 'escape-string-regexp'; import 'srcdoc-polyfill'; +// sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" + class PreviewFrame extends React.Component { componentDidMount() { @@ -89,7 +91,6 @@ class PreviewFrame extends React.Component { ); From 7b8561a55cb61cbe663c1ea90cedde45b0ba5668 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 17:00:30 -0400 Subject: [PATCH 14/23] add srcdoc polyfill to static --- client/modules/IDE/components/PreviewFrame.js | 1 - index.html | 1 + static/srcdoc-polyfill.js | 82 +++++++++++++++++++ 3 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 static/srcdoc-polyfill.js diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index a4e46e87..36d70ceb 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -1,7 +1,6 @@ import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import escapeStringRegexp from 'escape-string-regexp'; -import 'srcdoc-polyfill'; // sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" diff --git a/index.html b/index.html index de2e4106..3153c672 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,6 @@
    + diff --git a/static/srcdoc-polyfill.js b/static/srcdoc-polyfill.js new file mode 100644 index 00000000..83fc788b --- /dev/null +++ b/static/srcdoc-polyfill.js @@ -0,0 +1,82 @@ +(function(root, factory) { + // `root` does not resolve to the global window object in a Browserified + // bundle, so a direct reference to that object is used instead. + var _srcDoc = window.srcDoc; + + if (typeof define === "function" && define.amd) { + define(['exports'], function(exports) { + factory(exports, _srcDoc); + root.srcDoc = exports; + }); + } else if (typeof exports === "object") { + factory(exports, _srcDoc); + } else { + root.srcDoc = {}; + factory(root.srcDoc, _srcDoc); + } +})(this, function(exports, _srcDoc) { + var idx, iframes; + var isCompliant = !!("srcdoc" in document.createElement("iframe")); + var implementations = { + compliant: function( iframe, content ) { + + if (content) { + iframe.setAttribute("srcdoc", content); + } + }, + legacy: function( iframe, content ) { + + var jsUrl; + + if (!iframe || !iframe.getAttribute) { + return; + } + + if (!content) { + content = iframe.getAttribute("srcdoc"); + } else { + iframe.setAttribute("srcdoc", content); + } + + if (content) { + // The value returned by a script-targeted URL will be used as + // the iFrame's content. Create such a URL which returns the + // iFrame element's `srcdoc` attribute. + jsUrl = "javascript: window.frameElement.getAttribute('srcdoc');"; + + iframe.setAttribute("src", jsUrl); + + // Explicitly set the iFrame's window.location for + // compatability with IE9, which does not react to changes in + // the `src` attribute when it is a `javascript:` URL, for + // some reason + if (iframe.contentWindow) { + iframe.contentWindow.location = jsUrl; + } + } + } + }; + var srcDoc = exports; + // Assume the best + srcDoc.set = implementations.compliant; + srcDoc.noConflict = function() { + window.srcDoc = _srcDoc; + return srcDoc; + }; + + // If the browser supports srcdoc, no shimming is necessary + if (isCompliant) { + return; + } + + srcDoc.set = implementations.legacy; + + // Automatically shim any iframes already present in the document + iframes = document.getElementsByTagName("iframe"); + idx = iframes.length; + + while (idx--) { + srcDoc.set( iframes[idx] ); + } + +}); From 552036c7ce685ab176c95708f5950b21e5f41a68 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 17:21:20 -0400 Subject: [PATCH 15/23] add srcdoc polyfill again, maybe this time it will work --- client/modules/IDE/components/PreviewFrame.js | 10 ++- index.html | 1 - static/srcdoc-polyfill.js | 82 ------------------- 3 files changed, 8 insertions(+), 85 deletions(-) delete mode 100644 static/srcdoc-polyfill.js diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 36d70ceb..e700b291 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import escapeStringRegexp from 'escape-string-regexp'; +import srcDoc from 'srcdoc-polyfill'; // sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" @@ -59,9 +60,14 @@ class PreviewFrame extends React.Component { const doc = ReactDOM.findDOMNode(this); if (this.props.isPlaying) { // TODO add polyfill for this - doc.srcdoc = this.injectLocalFiles(); + // doc.srcdoc = this.injectLocalFiles(); + srcDoc.set(doc, this.injectLocalFiles()); } else { - doc.srcdoc = ''; + // doc.srcdoc = ''; + srcDoc.set(doc, ''); + doc.contentWindow.document.open(); + doc.contentWindow.document.write(''); + doc.contentWindow.document.close(); } // this.clearPreview(); diff --git a/index.html b/index.html index 3153c672..de2e4106 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,5 @@
    - diff --git a/static/srcdoc-polyfill.js b/static/srcdoc-polyfill.js deleted file mode 100644 index 83fc788b..00000000 --- a/static/srcdoc-polyfill.js +++ /dev/null @@ -1,82 +0,0 @@ -(function(root, factory) { - // `root` does not resolve to the global window object in a Browserified - // bundle, so a direct reference to that object is used instead. - var _srcDoc = window.srcDoc; - - if (typeof define === "function" && define.amd) { - define(['exports'], function(exports) { - factory(exports, _srcDoc); - root.srcDoc = exports; - }); - } else if (typeof exports === "object") { - factory(exports, _srcDoc); - } else { - root.srcDoc = {}; - factory(root.srcDoc, _srcDoc); - } -})(this, function(exports, _srcDoc) { - var idx, iframes; - var isCompliant = !!("srcdoc" in document.createElement("iframe")); - var implementations = { - compliant: function( iframe, content ) { - - if (content) { - iframe.setAttribute("srcdoc", content); - } - }, - legacy: function( iframe, content ) { - - var jsUrl; - - if (!iframe || !iframe.getAttribute) { - return; - } - - if (!content) { - content = iframe.getAttribute("srcdoc"); - } else { - iframe.setAttribute("srcdoc", content); - } - - if (content) { - // The value returned by a script-targeted URL will be used as - // the iFrame's content. Create such a URL which returns the - // iFrame element's `srcdoc` attribute. - jsUrl = "javascript: window.frameElement.getAttribute('srcdoc');"; - - iframe.setAttribute("src", jsUrl); - - // Explicitly set the iFrame's window.location for - // compatability with IE9, which does not react to changes in - // the `src` attribute when it is a `javascript:` URL, for - // some reason - if (iframe.contentWindow) { - iframe.contentWindow.location = jsUrl; - } - } - } - }; - var srcDoc = exports; - // Assume the best - srcDoc.set = implementations.compliant; - srcDoc.noConflict = function() { - window.srcDoc = _srcDoc; - return srcDoc; - }; - - // If the browser supports srcdoc, no shimming is necessary - if (isCompliant) { - return; - } - - srcDoc.set = implementations.legacy; - - // Automatically shim any iframes already present in the document - iframes = document.getElementsByTagName("iframe"); - idx = iframes.length; - - while (idx--) { - srcDoc.set( iframes[idx] ); - } - -}); From 61a6f7d4ac1e6db185164fb20fc192fd23d97fd6 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 17:32:13 -0400 Subject: [PATCH 16/23] readd sandbox --- client/modules/IDE/components/PreviewFrame.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index e700b291..0abec7f1 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -97,6 +97,7 @@ class PreviewFrame extends React.Component { className="preview-frame" frameBorder="0" title="sketch output" + sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" > ); } From 5ef51a939e8b86b176844140bb3f82f672f23f23 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 19:14:45 -0400 Subject: [PATCH 17/23] 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 9249d496faa377e2557cd15078be6d9a59f8411f Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 21:54:08 -0400 Subject: [PATCH 18/23] add css files to sketch --- client/modules/IDE/components/PreviewFrame.js | 39 +++++++------------ client/modules/IDE/pages/IDEView.js | 7 +++- client/modules/IDE/reducers/files.js | 21 ++++++++-- server/models/project.js | 15 +++++-- 4 files changed, 48 insertions(+), 34 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 0abec7f1..56a14393 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -3,8 +3,6 @@ import ReactDOM from 'react-dom'; import escapeStringRegexp from 'escape-string-regexp'; import srcDoc from 'srcdoc-polyfill'; -// sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" - class PreviewFrame extends React.Component { componentDidMount() { @@ -16,11 +14,6 @@ class PreviewFrame extends React.Component { componentDidUpdate(prevProps) { if (this.props.isPlaying !== prevProps.isPlaying) { this.renderSketch(); - // if (this.props.isPlaying) { - // this.renderSketch(); - // } else { - // this.clearPreview(); - // } } if (this.props.isPlaying && this.props.content !== prevProps.content) { @@ -46,12 +39,18 @@ class PreviewFrame extends React.Component { htmlFile = htmlFile.replace(fileRegex, ``); }); - const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); - const headRegex = new RegExp('head', 'i'); - let htmlHeadContents = htmlHead[0].split(headRegex)[1]; - htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2); - htmlHeadContents += '\n'; - htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); + this.props.cssFiles.forEach(cssFile => { + const fileName = escapeStringRegexp(cssFile.name); + const fileRegex = new RegExp(``, 'gmi'); + htmlFile = htmlFile.replace(fileRegex, ``); + }); + + // const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); + // const headRegex = new RegExp('head', 'i'); + // let htmlHeadContents = htmlHead[0].split(headRegex)[1]; + // htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2); + // htmlHeadContents += '\n'; + // htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); return htmlFile; } @@ -69,17 +68,6 @@ class PreviewFrame extends React.Component { doc.contentWindow.document.write(''); doc.contentWindow.document.close(); } - - // this.clearPreview(); - // ReactDOM.render(this.props.head, doc.head); - // const p5Script = doc.createElement('script'); - // p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/ - // p5.js/0.5.0/p5.min.js'); - // doc.body.appendChild(p5Script); - - // const sketchScript = doc.createElement('script'); - // sketchScript.textContent = this.props.content; - // doc.body.appendChild(sketchScript); } renderFrameContents() { @@ -110,7 +98,8 @@ PreviewFrame.propTypes = { htmlFile: PropTypes.shape({ content: PropTypes.string.isRequired }), - jsFiles: PropTypes.array.isRequired + jsFiles: PropTypes.array.isRequired, + cssFiles: PropTypes.array.isRequired }; export default PreviewFrame; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index ad78daa2..a3d71421 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -11,7 +11,7 @@ import * as FileActions from '../actions/files'; import * as IDEActions from '../actions/ide'; import * as PreferencesActions from '../actions/preferences'; import * as ProjectActions from '../actions/project'; -import { getFile, getHTMLFile, getJSFiles } from '../reducers/files'; +import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files'; class IDEView extends React.Component { componentDidMount() { @@ -60,6 +60,7 @@ class IDEView extends React.Component { +` + @@ -21,6 +21,13 @@ const defaultHTML = `; +const defaultCSS = +`html, body { + overflow: hidden; + margin: 0; + padding: 0; +} +`; // if the project has never been saved, const initialState = [ @@ -33,6 +40,11 @@ const initialState = [ name: 'index.html', content: defaultHTML, id: '2' + }, + { + name: 'style.css', + content: defaultCSS, + id: '3' }]; @@ -56,7 +68,8 @@ const files = (state = initialState, action) => { }; export const getFile = (state, id) => state.filter(file => file.id === id)[0]; -export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*html$/))[0]; -export const getJSFiles = (state) => state.filter(file => file.name.match(/.*.js$/)); +export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/))[0]; +export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/)); +export const getCSSFiles = (state) => state.filter(file => file.name.match(/.*\.css$/)); export default files; diff --git a/server/models/project.js b/server/models/project.js index 94cf17d3..5927a3b7 100644 --- a/server/models/project.js +++ b/server/models/project.js @@ -12,17 +12,24 @@ function draw() { }` const defaultHTML = -` - +` + ` +const defaultCSS = +`html, body { + overflow: hidden; + margin: 0; + padding: 0; +} +`; const fileSchema = new Schema({ name: { type: String, default: 'sketch.js' }, @@ -40,7 +47,9 @@ fileSchema.set('toJSON', { const projectSchema = new Schema({ name: { type: String, default: "Hello p5.js, it's the server" }, user: { type: Schema.Types.ObjectId, ref: 'User' }, - files: {type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch, _id: new ObjectId() }, { name: 'index.html', content: defaultHTML, _id: new ObjectId() }]}, + files: { type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch, _id: new ObjectId() }, + { name: 'index.html', content: defaultHTML, _id: new ObjectId() }, + { name: 'style.css', content: defaultCSS, _id: new ObjectId() }]}, _id: { type: String, default: shortid.generate }, selectedFile: Schema.Types.ObjectId }, { timestamps: true }); From b89a1103b9c5616820f4b6b005c118d9f1f9bf13 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 11 Jul 2016 22:00:11 -0400 Subject: [PATCH 19/23] adjust some colors that were incorrect --- client/styles/abstracts/_placeholders.scss | 2 +- client/styles/base/_base.scss | 2 +- client/styles/components/_toolbar.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 021d3a3f..c1738132 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -82,7 +82,7 @@ } %fake-link { - color: $light-secondary-text-color; + color: $light-inactive-text-color; cursor: pointer; &:hover { color: $light-primary-text-color; diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index f11b8d96..9e929959 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -18,7 +18,7 @@ body, input, button { a { text-decoration: none; - color: $light-secondary-text-color; + color: $light-inactive-text-color; &:hover { text-decoration: none; color: $light-primary-text-color; diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss index 30cabff6..1bad6fd1 100644 --- a/client/styles/components/_toolbar.scss +++ b/client/styles/components/_toolbar.scss @@ -45,12 +45,12 @@ } .toolbar__project-name { - color: $light-secondary-text-color; + color: $light-inactive-text-color; cursor: pointer; &:hover { color: $light-primary-text-color; } &:focus { - color: $light-secondary-text-color; + color: $light-inactive-text-color; } } From 81c5f91ab3881f93a5319f4a73f5bf074f62dc5d Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 11 Jul 2016 22:53:27 -0400 Subject: [PATCH 20/23] 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 21/23] 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 22/23] 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 23/23] 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;