switch sketch list to sketch list modal, which you now can close

This commit is contained in:
catarak 2016-08-15 17:06:12 -04:00
parent 89c641c845
commit 2f6d5e84e8
10 changed files with 180 additions and 9 deletions

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

@ -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

@ -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')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</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

@ -16,9 +16,12 @@ import * as EditorAccessibilityActions from '../actions/editorAccessibility';
import * as PreferencesActions from '../actions/preferences'; import * as PreferencesActions from '../actions/preferences';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files'; import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
import SplitPane from 'react-split-pane'; import SplitPane from 'react-split-pane';
import Overlay from '../../App/components/Overlay';
import SketchList from '../components/SketchList';
class IDEView extends React.Component { class IDEView extends React.Component {
constructor(props) { constructor(props) {
console.log(props);
super(props); super(props);
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this); this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this); this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
@ -50,6 +53,10 @@ class IDEView extends React.Component {
if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) { if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20; 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) { componentDidUpdate(prevProps) {
@ -227,6 +234,15 @@ class IDEView extends React.Component {
} }
return ''; return '';
})()} })()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/sketches') {
return (
<Overlay>
<SketchList />
</Overlay>
);
}
})()}
</div> </div>
); );
@ -237,6 +253,9 @@ IDEView.propTypes = {
params: PropTypes.shape({ params: PropTypes.shape({
project_id: PropTypes.string project_id: PropTypes.string
}), }),
location: PropTypes.shape({
pathname: PropTypes.string
}),
getProject: PropTypes.func.isRequired, getProject: PropTypes.func.isRequired,
user: PropTypes.shape({ user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired, authenticated: PropTypes.bool.isRequired,

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

@ -4,7 +4,7 @@ import App from './modules/App/App';
import IDEView from './modules/IDE/pages/IDEView'; import IDEView from './modules/IDE/pages/IDEView';
import LoginView from './modules/User/pages/LoginView'; import LoginView from './modules/User/pages/LoginView';
import SignupView from './modules/User/pages/SignupView'; 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'; import { getUser } from './modules/User/actions';
const checkAuth = (store) => { const checkAuth = (store) => {
@ -18,7 +18,7 @@ const routes = (store) =>
<Route path="/login" component={LoginView} /> <Route path="/login" component={LoginView} />
<Route path="/signup" component={SignupView} /> <Route path="/signup" component={SignupView} />
<Route path="/projects/:project_id" component={IDEView} /> <Route path="/projects/:project_id" component={IDEView} />
<Route path="/sketches" component={SketchListView} /> <Route path="/sketches" component={IDEView} />
</Route> </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,10 +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 { .sketches-table {
width: 100%; width: 100%;
padding: #{10 / $base-font-size}rem 0; padding: #{10 / $base-font-size}rem 0;
padding-left: #{170 / $base-font-size}rem; padding-left: #{20 / $base-font-size}rem;
height: 100%; height: 100%;
} }
.sketches-table__row { .sketches-table__row {
margin: #{10 / $base-font-size}rem; margin: #{10 / $base-font-size}rem;
}
.sketch-list__exit-button {
@extend %icon;
} }

View file

@ -1,11 +1,8 @@
.sketch-list { .sketch-list {
@extend %modal;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%;
flex-flow: column; flex-flow: column;
width: #{1000 / $base-font-size}rem;
height: #{700 / $base-font-size}rem;
} }
.sketches-table-container {
flex: 1 0 0%;
overflow-y: scroll;
}

View file

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