merge master

This commit is contained in:
MathuraMG 2016-08-15 21:09:47 -04:00
commit 8659251bcf
19 changed files with 349 additions and 100 deletions

View file

@ -30,6 +30,8 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
export const NEW_PROJECT = 'NEW_PROJECT';
export const RESET_PROJECT = 'RESET_PROJECT';
export const SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME';
export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
export const SET_PROJECT = 'SET_PROJECT';
export const SET_PROJECTS = 'SET_PROJECTS';

View file

@ -0,0 +1,17 @@
import React, { PropTypes } from 'react';
function Overlay(props) {
return (
<div className="overlay">
<div className="overlay-content">
{props.children}
</div>
</div>
);
}
Overlay.propTypes = {
children: PropTypes.object
};
export default Overlay;

View file

@ -41,8 +41,7 @@ export function getProject(id) {
};
}
export function setProjectName(event) {
const name = event.target.textContent;
export function setProjectName(name) {
return {
type: ActionTypes.SET_PROJECT_NAME,
name
@ -171,3 +170,15 @@ export function cloneProject() {
};
}
export function showEditProjectName() {
return {
type: ActionTypes.SHOW_EDIT_PROJECT_NAME
};
}
export function hideEditProjectName() {
return {
type: ActionTypes.HIDE_EDIT_PROJECT_NAME
};
}

View file

@ -0,0 +1,25 @@
import * as ActionTypes from '../../../constants';
import { browserHistory } from 'react-router';
import axios from 'axios';
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
export function getProjects() {
return (dispatch) => {
axios.get(`${ROOT_URL}/projects`, { withCredentials: true })
.then(response => {
dispatch({
type: ActionTypes.SET_PROJECTS,
projects: response.data
});
})
.catch(response => dispatch({
type: ActionTypes.ERROR,
error: response.data
}));
};
}
export function closeSketchList() {
browserHistory.push('/');
}

View file

@ -16,7 +16,6 @@ class SidebarItem extends React.Component {
}
handleKeyPress(event) {
console.log(event.key);
if (event.key === 'Enter') {
this.props.hideEditFileName(this.props.file.id);
}

View file

@ -0,0 +1,68 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import moment from 'moment';
import { Link } from 'react-router';
import * as SketchActions from '../actions/projects';
import * as ProjectActions from '../actions/project';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
class SketchList extends React.Component {
componentDidMount() {
this.props.getProjects();
}
render() {
return (
<div className="sketch-list">
<header className="sketch-list__header">
<h2>Sketches</h2>
<button className="sketch-list__exit-button" onClick={this.props.closeSketchList}>
<InlineSVG src={exitUrl} alt="Close Sketch List Overlay" />
</button>
</header>
<div className="sketches-table-container">
<table className="sketches-table" summary="table containing all saved projects">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Created</th>
<th scope="col">Last Updated</th>
</tr>
</thead>
<tbody>
{this.props.sketches.map(sketch =>
<tr className="sketches-table__row" key={sketch.id}>
<td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
<td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm:ss A')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm:ss A')}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
}
SketchList.propTypes = {
user: PropTypes.object.isRequired,
getProjects: PropTypes.func.isRequired,
sketches: PropTypes.array.isRequired,
closeSketchList: PropTypes.func.isRequired
};
function mapStateToProps(state) {
return {
user: state.user,
sketches: state.sketches
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({}, SketchActions, ProjectActions), dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(SketchList);

View file

@ -10,7 +10,6 @@ class TextOutput extends React.Component {
className="text-output"
id="canvas-sub"
tabIndex="0"
role="main"
aria-label="text-output"
title="canvas text output"
>
@ -18,23 +17,17 @@ class TextOutput extends React.Component {
</section>
<p
tabIndex="0"
role="main"
role="region"
id="textOutput-content-summary"
aria-label="text output summary"
>
</p>
<p
<table
tabIndex="0"
role="main"
role="region"
id="textOutput-content-details"
aria-label="text output summary details"
>
</p>
<table
id="textOutput-content-table"
summary="text output object details"
title="output details"
>
</table>
</section>
);

View file

@ -6,67 +6,106 @@ const stopUrl = require('../../../images/stop.svg');
const preferencesUrl = require('../../../images/preferences.svg');
import classNames from 'classnames';
function Toolbar(props) {
let playButtonClass = classNames({
'toolbar__play-button': true,
'toolbar__play-button--selected': props.isPlaying
});
let stopButtonClass = classNames({
'toolbar__stop-button': true,
'toolbar__stop-button--selected': !props.isPlaying
});
let preferencesButtonClass = classNames({
'toolbar__preferences-button': true,
'toolbar__preferences-button--selected': props.preferencesIsVisible
});
class Toolbar extends React.Component {
constructor(props) {
super(props);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
}
return (
<section className="toolbar" title="toolbar" role="main">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
<InlineSVG src={playUrl} alt="Play Sketch" />
</button>
<button
className="toolbar__play-sketch-button"
onClick={() => { props.startTextOutput(); props.startSketch(); }}
aria-label="play sketch with output text"
>
<InlineSVG src={playUrl} alt="Play Sketch with output text" />
</button>
<button
className={stopButtonClass}
onClick={() => { props.stopTextOutput(); props.stopSketch(); }}
aria-label="stop sketch"
>
<InlineSVG src={stopUrl} alt="Stop Sketch" />
</button>
<div className="toolbar__project-name-container">
<span
className="toolbar__project-name"
// TODO change this span into an input
onBlur={props.setProjectName.bind(this)} // eslint-disable-line
contentEditable
suppressContentEditableWarning
handleKeyPress(event) {
if (event.key === 'Enter') {
this.props.hideEditProjectName();
}
}
handleProjectNameChange(event) {
this.props.setProjectName(event.target.value);
}
validateProjectName() {
if (this.props.project.name === '') {
this.props.setProjectName(this.originalProjectName);
}
}
render() {
let playButtonClass = classNames({
'toolbar__play-button': true,
'toolbar__play-button--selected': this.props.isPlaying
});
let stopButtonClass = classNames({
'toolbar__stop-button': true,
'toolbar__stop-button--selected': !this.props.isPlaying
});
let preferencesButtonClass = classNames({
'toolbar__preferences-button': true,
'toolbar__preferences-button--selected': this.props.preferencesIsVisible
});
let nameContainerClass = classNames({
'toolbar__project-name-container': true,
'toolbar__project-name-container--editing': this.props.project.isEditingName
});
return (
<div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button className={playButtonClass} onClick={this.props.startSketch} aria-label="play sketch">
<InlineSVG src={playUrl} alt="Play Sketch" />
</button>
<button
className="toolbar__play-sketch-button"
onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
aria-label="play sketch with output text"
>
{props.projectName}
</span>
{(() => { // eslint-disable-line
if (props.owner) {
return (
<p className="toolbar__project-owner">by <span>{props.owner.username}</span></p>
);
}
})()}
<InlineSVG src={playUrl} alt="Play Sketch with output text" />
</button>
<button
className={stopButtonClass}
onClick={() => { this.props.stopTextOutput(); this.props.stopSketch(); }}
aria-label="stop sketch"
>
<InlineSVG src={stopUrl} alt="Stop Sketch" />
</button>
<div className={nameContainerClass}>
<a
className="toolbar__project-name"
onClick={() => {
this.originalProjectName = this.props.project.name;
this.props.showEditProjectName();
setTimeout(() => this.refs.projectNameInput.focus(), 0);
}}
>{this.props.project.name}</a>
<input
type="text"
className="toolbar__project-name-input"
value={this.props.project.name}
onChange={this.handleProjectNameChange}
ref="projectNameInput"
onBlur={() => {
this.validateProjectName();
this.props.hideEditProjectName();
}}
onKeyPress={this.handleKeyPress}
/>
{(() => { // eslint-disable-line
if (this.props.owner) {
return (
<p className="toolbar__project-owner">by <span>{this.props.owner.username}</span></p>
);
}
})()}
</div>
<button
className={preferencesButtonClass}
onClick={this.props.openPreferences}
aria-label="open preferences"
>
<InlineSVG src={preferencesUrl} alt="Show Preferences" />
</button>
</div>
<button
className={preferencesButtonClass}
onClick={props.openPreferences}
aria-label="open preferences"
>
<InlineSVG src={preferencesUrl} alt="Show Preferences" />
</button>
</section>
);
);
}
}
Toolbar.propTypes = {
@ -77,11 +116,16 @@ Toolbar.propTypes = {
startTextOutput: PropTypes.func.isRequired,
stopTextOutput: PropTypes.func.isRequired,
setProjectName: PropTypes.func.isRequired,
projectName: PropTypes.string.isRequired,
openPreferences: PropTypes.func.isRequired,
owner: PropTypes.shape({
username: PropTypes.string
})
}),
project: PropTypes.shape({
name: PropTypes.string.isRequired,
isEditingName: PropTypes.bool
}).isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired
};
export default Toolbar;

View file

@ -17,9 +17,12 @@ import * as EditorAccessibilityActions from '../actions/editorAccessibility';
import * as PreferencesActions from '../actions/preferences';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
import SplitPane from 'react-split-pane';
import Overlay from '../../App/components/Overlay';
import SketchList from '../components/SketchList';
class IDEView extends React.Component {
constructor(props) {
console.log(props);
super(props);
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
@ -51,6 +54,10 @@ class IDEView extends React.Component {
if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20;
}
if (nextProps.params.project_id && !this.props.params.project_id) {
this.props.getProject(nextProps.params.project_id);
}
}
componentDidUpdate(prevProps) {
@ -118,10 +125,13 @@ class IDEView extends React.Component {
stopTextOutput={this.props.stopTextOutput}
projectName={this.props.project.name}
setProjectName={this.props.setProjectName}
showEditProjectName={this.props.showEditProjectName}
hideEditProjectName={this.props.hideEditProjectName}
openPreferences={this.props.openPreferences}
preferencesIsVisible={this.props.ide.preferencesIsVisible}
setTextOutput={this.props.setTextOutput}
owner={this.props.project.owner}
project={this.props.project}
/>
<Preferences
isVisible={this.props.ide.preferencesIsVisible}
@ -243,6 +253,15 @@ class IDEView extends React.Component {
}
return '';
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/sketches') {
return (
<Overlay>
<SketchList />
</Overlay>
);
}
})()}
</div>
);
@ -253,6 +272,9 @@ IDEView.propTypes = {
params: PropTypes.shape({
project_id: PropTypes.string
}),
location: PropTypes.shape({
pathname: PropTypes.string
}),
getProject: PropTypes.func.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired,
@ -330,7 +352,9 @@ IDEView.propTypes = {
deleteFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired
updateFileName: PropTypes.func.isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired
};
function mapStateToProps(state) {

View file

@ -22,6 +22,10 @@ const project = (state = initialState, action) => {
};
case ActionTypes.RESET_PROJECT:
return initialState;
case ActionTypes.SHOW_EDIT_PROJECT_NAME:
return Object.assign({}, state, { isEditingName: true });
case ActionTypes.HIDE_EDIT_PROJECT_NAME:
return Object.assign({}, state, { isEditingName: false });
default:
return state;
}

View file

@ -0,0 +1,12 @@
import * as ActionTypes from '../../../constants';
const sketches = (state = [], action) => {
switch (action.type) {
case ActionTypes.SET_PROJECTS:
return action.projects;
default:
return state;
}
};
export default sketches;

View file

@ -22,24 +22,26 @@ class SketchListView extends React.Component {
exportProjectAsZip={this.props.exportProjectAsZip}
cloneProject={this.props.cloneProject}
/>
<table className="sketches-table" summary="table containing all saved projects">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Created</th>
<th scope="col">Last Updated</th>
</tr>
</thead>
<tbody>
{this.props.sketches.map(sketch =>
<tr className="sketches-table__row" key={sketch.id}>
<td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
<td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
<div className="sketches-table-container">
<table className="sketches-table" summary="table containing all saved projects">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Created</th>
<th scope="col">Last Updated</th>
</tr>
)}
</tbody>
</table>
</thead>
<tbody>
{this.props.sketches.map(sketch =>
<tr className="sketches-table__row" key={sketch.id}>
<td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
<td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}

View file

@ -4,7 +4,7 @@ import App from './modules/App/App';
import IDEView from './modules/IDE/pages/IDEView';
import LoginView from './modules/User/pages/LoginView';
import SignupView from './modules/User/pages/SignupView';
import SketchListView from './modules/Sketch/pages/SketchListView';
// import SketchListView from './modules/Sketch/pages/SketchListView';
import { getUser } from './modules/User/actions';
const checkAuth = (store) => {
@ -18,7 +18,7 @@ const routes = (store) =>
<Route path="/login" component={LoginView} />
<Route path="/signup" component={SignupView} />
<Route path="/projects/:project_id" component={IDEView} />
<Route path="/sketches" component={SketchListView} />
<Route path="/sketches" component={IDEView} />
</Route>
);

View file

@ -0,0 +1,17 @@
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.1);
}
.overlay-content {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

View file

@ -1,9 +1,25 @@
.sketch-list__header {
display: flex;
justify-content: space-between;
padding: #{20 / $base-font-size}rem;
}
.sketches-table-container {
flex: 1 0 0%;
overflow-y: scroll;
}
.sketches-table {
width: 100%;
padding: #{10 / $base-font-size}rem 0;
padding-left: #{170 / $base-font-size}rem;
padding-left: #{20 / $base-font-size}rem;
height: 100%;
}
.sketches-table__row {
margin: #{10 / $base-font-size}rem;
}
.sketch-list__exit-button {
@extend %icon;
}

View file

@ -57,6 +57,18 @@
&:focus {
color: $light-inactive-text-color;
}
.toolbar__project-name-container--editing & {
display: none;
}
}
.toolbar__project-name-input {
display: none;
border: 0px;
.toolbar__project-name-container--editing & {
display: block;
}
}
.toolbar__project-owner {

View file

@ -1,6 +1,8 @@
.sketch-list {
@extend %modal;
display: flex;
flex-wrap: wrap;
height: 100%;
flex-flow: column;
}
width: #{1000 / $base-font-size}rem;
height: #{700 / $base-font-size}rem;
}

View file

@ -20,6 +20,7 @@
@import 'components/modal';
@import 'components/console';
@import 'components/resizer';
@import 'components/overlay';
@import 'layout/ide';
@import 'layout/sketch-list';

View file

@ -188,7 +188,7 @@ var Interceptor = {
if(!(typeof(arguments[i])).localeCompare('number')){
arguments[i] = round(arguments[i]);
}
objectArray[objectCount][x.params[i].description]=arguments[i];
objectArray[objectCount][x.params[i].description.slice(3,-5)]=arguments[i];
}
if(objectTypeCount[x.name]) {
objectTypeCount[x.name]++;
@ -215,7 +215,7 @@ var Interceptor = {
var tempCol = row.children.length;
var properties = Object.keys(objectArray[j]);
if(tempCol<properties.length){ //ie - there are more cols now
if(tempCol<=properties.length){ //ie - there are more cols now
for(var i =0;i<tempCol;i++) {
row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
}
@ -247,8 +247,8 @@ var Interceptor = {
var tempCol = row.children.length;
var properties = Object.keys(objectArray[j]);
if(tempCol<properties.length){ //ie - there are more cols now
for(var i =0;i<=tempCol;i++) {
if(tempCol<=properties.length){ //ie - there are more cols now
for(var i =0;i<tempCol;i++) {
row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
}
for(var i=tempCol;i < properties.length;i++) {