more nav restyling
This commit is contained in:
parent
fd26279fed
commit
394772c32c
2 changed files with 61 additions and 138 deletions
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue