Make navigation back to Collection List more obvious

This commit is contained in:
Andrew Nicolaou 2019-12-11 14:57:19 +01:00
parent 20c2c6c38b
commit 740401d18b
2 changed files with 17 additions and 9 deletions

View file

@ -230,16 +230,22 @@ class Nav extends React.PureComponent {
return ( return (
<ul className="nav__items-left" title="project-menu"> <ul className="nav__items-left" title="project-menu">
<li className="nav__item-logo"> <li className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
</li>
<li className="nav__item nav__item--no-icon">
<Link to="/" className="nav__back-link"> <Link to="/" className="nav__back-link">
<InlineSVG src={caretLeft} className="nav__back-icon" /> <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
<span className="nav__item-header">
Back to Editor
</span>
</Link> </Link>
</li> </li>
{
this.props.ownerName && (
<li className="nav__item nav__item--no-icon">
<Link to={`/${this.props.ownerName}/collections`} className="nav__back-link">
<InlineSVG src={caretLeft} className="nav__back-icon" />
<span className="nav__item-header">
Collections
</span>
</Link>
</li>
)
}
</ul> </ul>
); );
} }
@ -715,6 +721,7 @@ Nav.propTypes = {
username: PropTypes.string, username: PropTypes.string,
id: PropTypes.string id: PropTypes.string
}).isRequired, }).isRequired,
ownerName: PropTypes.string,
project: PropTypes.shape({ project: PropTypes.shape({
id: PropTypes.string, id: PropTypes.string,
owner: PropTypes.shape({ owner: PropTypes.shape({
@ -752,7 +759,8 @@ Nav.defaultProps = {
}, },
cmController: {}, cmController: {},
layout: 'project', layout: 'project',
warnIfUnsavedChanges: undefined warnIfUnsavedChanges: undefined,
ownerName: null,
}; };
function mapStateToProps(state) { function mapStateToProps(state) {

View file

@ -56,7 +56,7 @@ class CollectionView extends React.Component {
render() { render() {
return ( return (
<div className="dashboard"> <div className="dashboard">
<Nav layout="dashboard" /> <Nav layout="dashboard" ownerName={this.ownerName()} />
{this.renderContent()} {this.renderContent()}
</div> </div>