From e6d94a0db8ec5cc223661a79b74c218437b8460d Mon Sep 17 00:00:00 2001 From: catarak Date: Wed, 6 Jul 2016 15:09:05 -0400 Subject: [PATCH] start to add multiple file functionality --- client/constants.js | 2 +- client/modules/IDE/components/Sidebar.js | 19 ++++++ client/modules/IDE/pages/IDEView.js | 12 ++-- client/modules/IDE/reducers/files.js | 74 +++++++++++++----------- client/reducers.js | 4 +- client/styles/abstracts/_variables.scss | 2 +- client/styles/components/_editor.scss | 2 +- client/styles/components/_sidebar.scss | 13 +++++ client/styles/layout/_ide.scss | 8 ++- client/styles/main.scss | 1 + server/models/project.js | 14 ++++- 11 files changed, 103 insertions(+), 48 deletions(-) create mode 100644 client/modules/IDE/components/Sidebar.js create mode 100644 client/styles/components/_sidebar.scss diff --git a/client/constants.js b/client/constants.js index 446a6c34..29d9f701 100644 --- a/client/constants.js +++ b/client/constants.js @@ -1,4 +1,4 @@ -export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE'; +export const UPDATE_FILE = 'UPDATE_FILE'; export const TOGGLE_SKETCH = 'TOGGLE_SKETCH'; export const START_SKETCH = 'START_SKETCH'; diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js new file mode 100644 index 00000000..bcf11473 --- /dev/null +++ b/client/modules/IDE/components/Sidebar.js @@ -0,0 +1,19 @@ +import React, { PropTypes } from 'react'; + +function Sidebar(props) { + return ( +
+ +
+ ); +} + +Sidebar.propTypes = { + files: PropTypes.array.isRequired +}; + +export default Sidebar; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index cb4c2ce1..6b74c737 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import Editor from '../components/Editor'; +import Sidebar from '../components/Sidebar'; import PreviewFrame from '../components/PreviewFrame'; import Toolbar from '../components/Toolbar'; import Preferences from '../components/Preferences'; @@ -44,13 +45,14 @@ class IDEView extends React.Component { decreaseFont={this.props.decreaseFont} fontSize={this.props.preferences.fontSize} /> + } @@ -86,15 +88,13 @@ IDEView.propTypes = { closePreferences: PropTypes.func.isRequired, increaseFont: PropTypes.func.isRequired, decreaseFont: PropTypes.func.isRequired, - file: PropTypes.shape({ - content: PropTypes.string.isRequired - }).isRequired, + files: PropTypes.array.isRequired, updateFile: PropTypes.func.isRequired }; function mapStateToProps(state) { return { - file: state.file, + files: 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 3067b546..dc82f77b 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -1,50 +1,56 @@ import * as ActionTypes from '../../../constants'; -const initialState = { - name: 'sketch.js', - content: `function setup() { +const defaultSketch = `function setup() { createCanvas(400, 400); } function draw() { background(220); -}` -}; +}`; -const file = (state = initialState, action) => { +const defaultHTML = +` + + + + + + + + +`; + +const initialState = [ + { + name: 'sketch.js', + content: defaultSketch + }, + { + name: 'index.html', + content: defaultHTML + }]; + + +const files = (state = initialState, action) => { switch (action.type) { - case ActionTypes.CHANGE_SELECTED_FILE: - return { - name: action.name, - content: action.content - }; + case ActionTypes.UPDATE_FILE: + return state.map(file => { + if (file.name !== action.name) { + return file; + } + + return { + name: file.name, + content: action.content + }; + }); case ActionTypes.NEW_PROJECT: - return { - name: action.file.name, - content: action.file.content - }; + return { ...action.files }; case ActionTypes.SET_PROJECT: - return { - name: action.file.name, - content: action.file.content - }; + return { ...action.files }; default: return state; } }; -export default file; - -// i'll add this in when there are multiple files -// const files = (state = [], action) => { -// switch (action.type) { -// case ActionTypes.CHANGE_SELECTED_FILE: -// //find the file with the name -// //update it -// //put in into the new array of files -// default: -// return state -// } -// } - -// export default files +export default files; diff --git a/client/reducers.js b/client/reducers.js index 64305956..1dfafa9e 100644 --- a/client/reducers.js +++ b/client/reducers.js @@ -1,5 +1,5 @@ import { combineReducers } from 'redux'; -import file from './modules/IDE/reducers/files'; +import files from './modules/IDE/reducers/files'; import ide from './modules/IDE/reducers/ide'; import preferences from './modules/IDE/reducers/preferences'; import project from './modules/IDE/reducers/project'; @@ -10,7 +10,7 @@ import { reducer as form } from 'redux-form'; const rootReducer = combineReducers({ form, ide, - file, + files, preferences, user, project, diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 096ddd45..e07d9e55 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -35,6 +35,6 @@ $dark-button-background-active-color: #f10046; $dark-button-hover-color: $white; $dark-button-active-color: $white; -$editor-border-color: #f4f4f4; +$ide-border-color: #f4f4f4; $editor-selected-line-color: #f3f3f3; $input-border-color: #979797; diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 65b8b2e8..5209e517 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -1,7 +1,7 @@ .CodeMirror { font-family: Inconsolata, monospace; height: 100%; - border: 1px solid $editor-border-color; + border: 1px solid $ide-border-color; } .CodeMirror-linenumbers { diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss new file mode 100644 index 00000000..afa53bc9 --- /dev/null +++ b/client/styles/components/_sidebar.scss @@ -0,0 +1,13 @@ +.sidebar__file-list { + padding: #{4 / $base-font-size}rem #{20 / $base-font-size}rem; + border-top: 1px solid $ide-border-color; +} + +.sidebar__file-item { + padding: #{4 / $base-font-size}rem 0; + color: $light-inactive-text-color; +} + +.sidebar__file-item--selected { + background-color: $ide-border-color; +} \ No newline at end of file diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss index 6c90f921..ffb6561e 100644 --- a/client/styles/layout/_ide.scss +++ b/client/styles/layout/_ide.scss @@ -6,14 +6,18 @@ } .editor-holder { - width: 50%; + flex-grow: 1; height: 100%; } .preview-frame { - width: 50%; + flex-grow: 1; } .toolbar { width: 100%; } + +.sidebar { + width: #{140 / $base-font-size}rem; +} diff --git a/client/styles/main.scss b/client/styles/main.scss index 74e48bc4..c16cff9d 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -14,6 +14,7 @@ @import 'components/signup'; @import 'components/login'; @import 'components/sketch-list'; +@import 'components/sidebar'; @import 'layout/ide'; @import 'layout/sketch-list'; diff --git a/server/models/project.js b/server/models/project.js index 4dcac580..b5e5785f 100644 --- a/server/models/project.js +++ b/server/models/project.js @@ -9,6 +9,18 @@ draw() { background(220); }` +const defaultHTML = +` + + + + + + + + +` + const fileSchema = new Schema({ name: { type: String, default: 'sketch.js' }, content: { type: String, default: defaultSketch } @@ -17,7 +29,7 @@ const fileSchema = new Schema({ const projectSchema = new Schema({ name: { type: String, default: "Hello p5.js, it's the server" }, user: { type: Schema.Types.ObjectId, ref: 'User' }, - file: { type: fileSchema }, + files: {type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch }, { name: 'index.html', content: defaultHTML }]}, _id: { type: String, default: shortid.generate } }, { timestamps: true });