add about modal to link to github

This commit is contained in:
catarak 2016-08-22 12:35:59 -04:00
parent 1734852f68
commit 8713e297dd
7 changed files with 84 additions and 0 deletions

View file

@ -67,6 +67,13 @@ function Nav(props) {
); );
} }
})()} })()}
<li className="nav__item">
<p className="nav__about">
<Link to="/about">
About
</Link>
</p>
</li>
</ul> </ul>
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">
<li className="nav__item"> <li className="nav__item">

View file

@ -0,0 +1,41 @@
import React from 'react';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
import { browserHistory } from 'react-router';
class About extends React.Component {
closeAboutModal() {
browserHistory.push('/');
}
render() {
return (
<div className="about">
<header className="about__header">
<h2>About</h2>
<button className="about__exit-button" onClick={this.closeAboutModal}>
<InlineSVG src={exitUrl} alt="Close About Overlay" />
</button>
</header>
<div className="about__copy">
<p>
The p5.js Web Editor is an open source project.
</p>
<p>
<a
href="https://github.com/processing/p5.js-web-editor"
target="_blank"
>Contribute </a>
or
<a
href="https://github.com/processing/p5.js-web-editor/issues/new"
target="_blank"
> report a bug.</a>
</p>
</div>
</div>
);
}
}
export default About;

View file

@ -19,6 +19,7 @@ import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '
import SplitPane from 'react-split-pane'; import SplitPane from 'react-split-pane';
import Overlay from '../../App/components/Overlay'; import Overlay from '../../App/components/Overlay';
import SketchList from '../components/SketchList'; import SketchList from '../components/SketchList';
import About from '../components/About';
class IDEView extends React.Component { class IDEView extends React.Component {
constructor(props) { constructor(props) {
@ -263,6 +264,15 @@ class IDEView extends React.Component {
); );
} }
})()} })()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/about') {
return (
<Overlay>
<About />
</Overlay>
);
}
})()}
</div> </div>
); );

View file

@ -22,6 +22,7 @@ const routes = (store) =>
<Route path="/full/:project_id" component={FullView} /> <Route path="/full/:project_id" component={FullView} />
<Route path="/sketches" component={IDEView} /> <Route path="/sketches" component={IDEView} />
<Route path="/:username/sketches" component={IDEView} /> <Route path="/:username/sketches" component={IDEView} />
<Route path="/about" component={IDEView} />
</Route> </Route>
); );

View file

@ -0,0 +1,20 @@
.about {
@extend %modal;
display: flex;
flex-wrap: wrap;
flex-flow: column;
}
.about__header {
display: flex;
justify-content: space-between;
padding: #{20 / $base-font-size}rem;
}
.about__exit-button {
@extend %icon;
}
.about__copy {
padding: #{20 / $base-font-size}rem;
}

View file

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

View file

@ -29,6 +29,10 @@ router.route('/sketches').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.sendFile(path.resolve(`${__dirname}/../../index.html`));
}); });
router.route('/about').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`));
});
router.route('/:username/sketches').get((req, res) => { router.route('/:username/sketches').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.sendFile(path.resolve(`${__dirname}/../../index.html`));
}); });