Show "Back to the editor" in nav on Account view page
This commit is contained in:
parent
eb4846c3c2
commit
4679d6a0bd
3 changed files with 34 additions and 6 deletions
|
@ -1,10 +1,15 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import InlineSVG from 'react-inlinesvg';
|
import InlineSVG from 'react-inlinesvg';
|
||||||
|
|
||||||
const logoUrl = require('../images/p5js-logo-small.svg');
|
const logoUrl = require('../images/p5js-logo-small.svg');
|
||||||
|
const arrowUrl = require('../images/triangle-arrow-left.svg');
|
||||||
|
|
||||||
class NavBasic extends React.PureComponent {
|
class NavBasic extends React.PureComponent {
|
||||||
|
static defaultProps = {
|
||||||
|
onBack: null
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
|
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
|
||||||
|
@ -12,12 +17,24 @@ class NavBasic extends React.PureComponent {
|
||||||
<li className="nav__item-logo">
|
<li className="nav__item-logo">
|
||||||
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
|
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
|
||||||
</li>
|
</li>
|
||||||
|
{ this.props.onBack && (
|
||||||
|
<li className="nav__item">
|
||||||
|
<button onClick={this.props.onBack}>
|
||||||
|
<span className="nav__item-header">
|
||||||
|
<InlineSVG src={arrowUrl} alt="Left arrow" />
|
||||||
|
</span>
|
||||||
|
Back to the editor
|
||||||
|
</button>
|
||||||
|
</li>)
|
||||||
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
NavBasic.propTypes = {};
|
NavBasic.propTypes = {
|
||||||
|
onBack: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
export default NavBasic;
|
export default NavBasic;
|
||||||
|
|
14
client/images/triangle-arrow-left.svg
Normal file
14
client/images/triangle-arrow-left.svg
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Left Arrow</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
|
||||||
|
<g id="libraries" transform="translate(21.000000, 32.000000)">
|
||||||
|
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(270.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 665 B |
|
@ -42,15 +42,12 @@ class AccountView extends React.Component {
|
||||||
<title>p5.js Web Editor | Account</title>
|
<title>p5.js Web Editor | Account</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
|
||||||
<NavBasic />
|
<NavBasic onBack={this.closeAccountPage} />
|
||||||
|
|
||||||
<section className="modal">
|
<section className="modal">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal__header">
|
<div className="modal__header">
|
||||||
<h2 className="modal__title">My Account</h2>
|
<h2 className="modal__title">My Account</h2>
|
||||||
<button className="modal__exit-button" onClick={this.closeAccountPage}>
|
|
||||||
<InlineSVG src={exitUrl} alt="Close Account Page" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<Tabs className="account__tabs">
|
<Tabs className="account__tabs">
|
||||||
<TabList>
|
<TabList>
|
||||||
|
|
Loading…
Reference in a new issue