r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

more nav restyling

This commit is contained in:
Cassie Tarakajian 2017-07-19 17:35:25 -04:00
parent fd26279fed
commit 394772c32c
2 changed files with 61 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
client/components/Nav.jsx
View File

@ -6,6 +6,10 @@ const triangleUrl = require('../images/down-filled-triangle.svg');
const logoUrl = require('../images/p5js-logo-small.svg'); const logoUrl = require('../images/p5js-logo-small.svg');
class Nav extends React.PureComponent { class Nav extends React.PureComponent {
isUserOwner() {
return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
}
render() { render() {
return ( return (
<nav className="nav" role="navigation" title="main-navigation"> <nav className="nav" role="navigation" title="main-navigation">
@ -19,7 +23,7 @@ class Nav extends React.PureComponent {
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li> <li className="nav__dropdown-item">
<button <button
onClick={() => { onClick={() => {
if (!this.props.unsavedChanges) { if (!this.props.unsavedChanges) {
@ -32,97 +36,9 @@ class Nav extends React.PureComponent {
New New
</button> </button>
</li> </li>
<li> { (!this.props.project.owner || this.isUserOwner()) &&
<button> <li className="nav__dropdown-item">
Save
</button>
</li>
<li>
<button>
Duplicate
</button>
</li>
<li>
<button>
Open
</button>
</li>
<li>
<button>
Download
</button>
</li>
</ul>
</li>
<li className="nav__item">
<button>
Edit
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li>
Tidy Code
</li>
<li>
Find
</li>
</ul>
</li>
<li className="nav__item">
<button>
Sketch
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li>
Run
</li>
<li>
Stop
</li>
</ul>
</li>
<li className="nav__item">
<button>
Help
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li>
Keyboard Shortcuts
</li>
<li>
Reference
</li>
<li>
About
</li>
</ul>
</li>
<li className="nav__item">
<button <button
className="nav__new"
onClick={() => {
if (!this.props.unsavedChanges) {
this.props.newProject();
} else if (this.props.warnIfUnsavedChanges()) {
this.props.newProject();
}
}}
>
New
</button>
</li>
{(() => { // eslint-disable-line
if (
!this.props.project.owner ||
(this.props.project.owner && this.props.project.owner.id === this.props.user.id)
) {
return (
<li className="nav__item">
<button
className="nav__save"
onClick={() => { onClick={() => {
if (this.props.user.authenticated) { if (this.props.user.authenticated) {
this.props.saveProject(); this.props.saveProject();
@ -133,82 +49,90 @@ class Nav extends React.PureComponent {
> >
Save Save
</button> </button>
</li> </li> }
); { this.props.project.id && this.props.user.authenticated &&
} <li className="nav__dropdown-item">
})()} <button onClick={this.props.cloneProject}>
{(() => { // eslint-disable-line
if (this.props.project.id && this.props.user.authenticated) {
return (
<li className="nav__item">
<button className="nav__clone" onClick={this.props.cloneProject}>
Duplicate Duplicate
</button> </button>
</li> </li> }
); { this.props.project.id &&
} <li className="nav__dropdown-item">
})()}
{(() => { // eslint-disable-line
if (this.props.project.id) {
return (
<li className="nav__item">
<button className="nav__export" onClick={() => this.props.exportProjectAsZip(this.props.project.id)}>
Download
</button>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.project.id) {
return (
<li className="nav__item">
<button onClick={this.props.showShareModal}> <button onClick={this.props.showShareModal}>
Share Share
</button> </button>
</li> </li> }
); { this.props.project.id &&
} <li className="nav__dropdown-item">
})()} <button onClick={() => this.props.exportProjectAsZip(this.props.project.id)}>
{(() => { // eslint-disable-line Download
if (this.props.user.authenticated) { </button>
return ( </li> }
<li className="nav__item"> { this.props.user.authenticated &&
<p className="nav__open"> <li className="nav__dropdown-item">
<Link <Link to={`/${this.props.user.username}/sketches`}>
to={`/${this.props.user.username}/sketches`}
>
Open Open
</Link> </Link>
</p> </li> }
</li> <li className="nav__dropdown-item">
);
}
})()}
<li className="nav__item">
<p className="nav__open">
<Link <Link
to="/p5/sketches" to="/p5/sketches"
> >
Examples Examples
</Link> </Link>
</p> </li>
</ul>
</li> </li>
<li className="nav__item"> <li className="nav__item">
<p className="nav__reference"> <button>
Edit
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li className="nav__dropdown-item">
Tidy Code
</li>
<li cclassName="nav__dropdown-item">
Find
</li>
</ul>
</li>
<li className="nav__item">
<button>
Sketch
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li className="nav__dropdown-item">
Run
</li>
<li className="nav__dropdown-item">
Stop
</li>
</ul>
</li>
<li className="nav__item">
<button>
Help
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li className="nav__dropdown-item">
Keyboard Shortcuts
</li>
<li className="nav__dropdown-item">
<a <a
href="https://p5js.org/reference/" href="https://p5js.org/reference/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
>Reference</a> >Reference</a>
</p>
</li> </li>
<li className="nav__item"> <li className="nav__dropdown-item">
<p className="nav__about">
<Link to="/about"> <Link to="/about">
About About
</Link> </Link>
</p> </li>
</ul>
</li> </li>
</ul> </ul>
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">

9
client/styles/components/_nav.scss
View File

@ -28,7 +28,6 @@
.nav__item { .nav__item {
position: relative; position: relative;
padding: 0 #{24 / $base-font-size}rem; padding: 0 #{24 / $base-font-size}rem;
text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -49,15 +48,15 @@
border: 1px solid map-get($theme-map, 'modal-border-color'); border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color'); box-shadow: 0 0 18px getThemifyVariable('shadow-color');
} }
@extend %hidden-element; display: none;
text-align: left; text-align: left;
width: #{140 / $base-font-size}rem; width: #{140 / $base-font-size}rem;
.nav__item:hover & { .nav__item:hover &, .nav__item--open & {
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
top: #{-8 / $base-font-size}rem;; top: 50%;
left: #{-11 / $base-font-size}rem; left: 0;
height: auto; height: auto;
} }
padding-bottom: #{8 / $base-font-size}rem; padding-bottom: #{8 / $base-font-size}rem;