This commit is contained in:
Cassie Tarakajian 2018-02-09 16:32:06 -05:00 committed by GitHub
parent dcdb81aa80
commit daeed8749d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 112 additions and 2 deletions

View file

@ -341,12 +341,12 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur} onBlur={this.handleBlur}
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
> >
<span className="nav__item-header">Help</span> <span className="nav__item-header">Help & Feedback</span>
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading"> <li className="nav__dropdown-heading">
<span>Help</span> <span>Help & Feedback</span>
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
@ -379,6 +379,16 @@ class Nav extends React.PureComponent {
About About
</Link> </Link>
</li> </li>
<li className="nav__dropdown-item">
<Link
to="/feedback"
onFocus={this.handleFocus.bind(this, 'help')}
onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
>
Feedback
</Link>
</li>
</ul> </ul>
</li> </li>
</ul> </ul>

View file

@ -0,0 +1,47 @@
import React from 'react';
import InlineSVG from 'react-inlinesvg';
import githubLogoUrl from '../../../images/github.svg';
function Feedback(props) {
return (
<div className="feedback__content">
<div className="feedback__content-pane">
<h2 className="feedback__content-pane-header">
Via Github Issues
</h2>
<p className="feedback__content-pane-copy">
{'If you\'re familiar with Github, this is our preferred method for receiving bug reports and feedback.'}
</p>
<p className="feedback__content-pane-copy">
<a
href="https://github.com/processing/p5.js-web-editor"
target="_blank"
rel="noopener noreferrer"
className="feedback__github-link"
>
Go to Github
<InlineSVG className="feedback__github-logo" src={githubLogoUrl} />
</a>
</p>
</div>
<div className="feedback__content-pane">
<h2 className="feedback__content-pane-header">
Via Google Form
</h2>
<p className="feedback__content-pane-copy">
You can also submit this quick form.
</p>
<p className="feedback__content-pane-copy">
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSexU8W2EIhXjktl-_XzwjH6vgnelHirH4Yn4liN5BXltPWqBg/viewform"
target="_blank"
rel="noopener noreferrer"
>Go to Form</a>
</p>
</div>
</div>
);
}
export default Feedback;

View file

@ -33,6 +33,7 @@ import Overlay from '../../App/components/Overlay';
import SketchList from '../components/SketchList'; import SketchList from '../components/SketchList';
import AssetList from '../components/AssetList'; import AssetList from '../components/AssetList';
import About from '../components/About'; import About from '../components/About';
import Feedback from '../components/Feedback';
class IDEView extends React.Component { class IDEView extends React.Component {
constructor(props) { constructor(props) {
@ -456,6 +457,15 @@ class IDEView extends React.Component {
<About previousPath={this.props.ide.previousPath} /> <About previousPath={this.props.ide.previousPath} />
</Overlay> </Overlay>
} }
{ this.props.location.pathname === '/feedback' &&
<Overlay
previousPath={this.props.ide.previousPath}
title="Submit Feedback"
ariaLabel="submit-feedback"
>
<Feedback previousPath={this.props.ide.previousPath} />
</Overlay>
}
{ this.props.ide.shareModalVisible && { this.props.ide.shareModalVisible &&
<Overlay <Overlay
title="Share This Sketch" title="Share This Sketch"

View file

@ -52,6 +52,7 @@ const routes = (store) => {
<Route path="/:username/assets" component={IDEView} /> <Route path="/:username/assets" component={IDEView} />
<Route path="/:username/account" component={forceToHttps(AccountView)} /> <Route path="/:username/account" component={forceToHttps(AccountView)} />
<Route path="/about" component={IDEView} /> <Route path="/about" component={IDEView} />
<Route path="/feedback" component={IDEView} />
</Route> </Route>
); );
}; };

View file

@ -0,0 +1,37 @@
.feedback__content {
display: flex;
width: #{650 / $base-font-size}rem;
padding-top: #{17 / $base-font-size}rem;
padding-right: #{20 / $base-font-size}rem;
padding-bottom: #{20 / $base-font-size}rem;
padding-left: #{20 / $base-font-size}rem;
}
.feedback__content-pane {
flex: 1;
& + & {
margin-left: #{20 / $base-font-size}rem;
}
}
.feedback__content-pane-header {
margin-bottom: #{20 / $base-font-size}rem;
}
.feedback__content-pane-copy {
margin-bottom: #{20 / $base-font-size}rem;
}
.feedback__github-logo svg {
width: #{12 / $base-font-size}rem;
height: #{12 / $base-font-size}rem;
@include themify() {
fill: getThemifyVariable('inactive-text-color');
}
}
.feedback__github-link:hover svg {
@include themify() {
fill: getThemifyVariable('primary-text-color');
}
}

View file

@ -39,6 +39,7 @@
@import 'components/asset-list'; @import 'components/asset-list';
@import 'components/keyboard-shortcuts'; @import 'components/keyboard-shortcuts';
@import 'components/copyable-input'; @import 'components/copyable-input';
@import 'components/feedback';
@import 'layout/ide'; @import 'layout/ide';
@import 'layout/fullscreen'; @import 'layout/fullscreen';

View file

@ -59,6 +59,10 @@ router.get('/about', (req, res) => {
res.send(renderIndex()); res.send(renderIndex());
}); });
router.get('/feedback', (req, res) => {
res.send(renderIndex());
});
router.get('/:username/sketches', (req, res) => { router.get('/:username/sketches', (req, res) => {
userExists(req.params.username, exists => ( userExists(req.params.username, exists => (
exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html)) exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))