Refactor Nav
This commit is contained in:
Andrew Nicolaou
parent
8ac95c0084
commit
611730c289
1 changed files with 393 additions and 364 deletions
|
|
@ -217,6 +217,396 @@ class Nav extends React.PureComponent {
|
|||
this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10);
|
||||
}
|
||||
|
||||
renderProjectMenu(navDropdownState) {
|
||||
return (
|
||||
<ul className="nav__items-left" title="project-menu">
|
||||
<li className="nav__item-logo">
|
||||
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
|
||||
</li>
|
||||
<li className={navDropdownState.file}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForFile}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('file');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">File</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleNew}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
New
|
||||
</button>
|
||||
</li>
|
||||
{ __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleSave}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Save
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.project.id && this.props.user.authenticated &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleDuplicate}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Duplicate
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.project.id &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleShare}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.project.id &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleDownload}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.user.authenticated &&
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to={`/${this.props.user.username}/sketches`}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Open
|
||||
</Link>
|
||||
</li> }
|
||||
{ __process.env.EXAMPLES_ENABLED &&
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/p5/sketches"
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Examples
|
||||
</Link>
|
||||
</li> }
|
||||
</ul>
|
||||
</li>
|
||||
<li className={navDropdownState.edit}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('edit');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">Edit</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown" >
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={() => {
|
||||
this.props.cmController.tidyCode();
|
||||
this.setDropdown('none');
|
||||
}}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Tidy Code
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleFind}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Find
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleFindNext}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Find Next
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleFindPrevious}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Find Previous
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className={navDropdownState.sketch}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('sketch');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">Sketch</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleAddFile}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Add File
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleAddFolder}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Add Folder
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleRun}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Run
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleStop}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Stop
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
|
||||
</button>
|
||||
</li>
|
||||
{/* <li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleStartAccessible}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Start Accessible
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+1</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleStopAccessible}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Stop Accessible
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+2</span>
|
||||
</button>
|
||||
</li> */}
|
||||
</ul>
|
||||
</li>
|
||||
<li className={navDropdownState.help}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('help');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">Help & Feedback</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.handleKeyboardShortcuts}
|
||||
>
|
||||
Keyboard Shortcuts
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<a
|
||||
href="https://p5js.org/reference/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>Reference
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/about"
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/feedback"
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Feedback
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
renderUnauthenticatedUserMenu(navDropdownState) {
|
||||
return (
|
||||
<ul className="nav__items-right" title="user-menu">
|
||||
<li>
|
||||
<Link to="/login">
|
||||
<span className="nav__item-header">Log in</span>
|
||||
</Link>
|
||||
</li>
|
||||
<span className="nav__item-spacer">or</span>
|
||||
<li>
|
||||
<Link to="/signup">
|
||||
<span className="nav__item-header">Sign up</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
renderAuthenticatedUserMenu(navDropdownState) {
|
||||
return (
|
||||
<ul className="nav__items-right" title="user-menu">
|
||||
<li className="nav__item">
|
||||
<span>Hello, {this.props.user.username}!</span>
|
||||
</li>
|
||||
<span className="nav__item-spacer">|</span>
|
||||
<li className={navDropdownState.account}>
|
||||
<button
|
||||
className="nav__item-header"
|
||||
onClick={this.toggleDropdownForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('account');
|
||||
}
|
||||
}}
|
||||
>
|
||||
My Account
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to={`/${this.props.user.username}/sketches`}
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
My sketches
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to={`/${this.props.user.username}/assets`}
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
My assets
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/account"
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleLogout}
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
renderUserMenu(navDropdownState) {
|
||||
const isLoginEnabled = __process.env.LOGIN_ENABLED;
|
||||
const isAuthenticated = this.props.user.authenticated;
|
||||
|
||||
if (isLoginEnabled && isAuthenticated) {
|
||||
return this.renderAuthenticatedUserMenu(navDropdownState);
|
||||
} else if (isLoginEnabled && !isAuthenticated) {
|
||||
return this.renderUnauthenticatedUserMenu(navDropdownState);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
render() {
|
||||
const navDropdownState = {
|
||||
file: classNames({
|
||||
|
|
@ -240,372 +630,11 @@ class Nav extends React.PureComponent {
|
|||
'nav__item--open': this.state.dropdownOpen === 'account'
|
||||
})
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
|
||||
<ul className="nav__items-left" title="project-menu">
|
||||
<li className="nav__item-logo">
|
||||
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
|
||||
</li>
|
||||
<li className={navDropdownState.file}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForFile}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('file');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">File</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleNew}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
New
|
||||
</button>
|
||||
</li>
|
||||
{ __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleSave}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Save
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.project.id && this.props.user.authenticated &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleDuplicate}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Duplicate
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.project.id &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleShare}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.project.id &&
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleDownload}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.user.authenticated &&
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to={`/${this.props.user.username}/sketches`}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Open
|
||||
</Link>
|
||||
</li> }
|
||||
{ __process.env.EXAMPLES_ENABLED &&
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/p5/sketches"
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Examples
|
||||
</Link>
|
||||
</li> }
|
||||
</ul>
|
||||
</li>
|
||||
<li className={navDropdownState.edit}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('edit');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">Edit</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown" >
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={() => {
|
||||
this.props.cmController.tidyCode();
|
||||
this.setDropdown('none');
|
||||
}}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Tidy Code
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleFind}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Find
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleFindNext}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Find Next
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleFindPrevious}
|
||||
onFocus={this.handleFocusForEdit}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Find Previous
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className={navDropdownState.sketch}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('sketch');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">Sketch</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleAddFile}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Add File
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleAddFolder}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Add Folder
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleRun}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Run
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleStop}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Stop
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
|
||||
</button>
|
||||
</li>
|
||||
{/* <li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleStartAccessible}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Start Accessible
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+1</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleStopAccessible}
|
||||
onFocus={this.handleFocusForSketch}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Stop Accessible
|
||||
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+2</span>
|
||||
</button>
|
||||
</li> */}
|
||||
</ul>
|
||||
</li>
|
||||
<li className={navDropdownState.help}>
|
||||
<button
|
||||
onClick={this.toggleDropdownForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('help');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav__item-header">Help & Feedback</span>
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.handleKeyboardShortcuts}
|
||||
>
|
||||
Keyboard Shortcuts
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<a
|
||||
href="https://p5js.org/reference/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>Reference
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/about"
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/feedback"
|
||||
onFocus={this.handleFocusForHelp}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Feedback
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
|
||||
<ul className="nav__items-right" title="user-menu">
|
||||
<li>
|
||||
<Link to="/login">
|
||||
<span className="nav__item-header">Log in</span>
|
||||
</Link>
|
||||
</li>
|
||||
<span className="nav__item-spacer">or</span>
|
||||
<li>
|
||||
<Link to="/signup">
|
||||
<span className="nav__item-header">Sign up</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>}
|
||||
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated &&
|
||||
<ul className="nav__items-right" title="user-menu">
|
||||
<li className="nav__item">
|
||||
<span>Hello, {this.props.user.username}!</span>
|
||||
</li>
|
||||
<span className="nav__item-spacer">|</span>
|
||||
<li className={navDropdownState.account}>
|
||||
<button
|
||||
className="nav__item-header"
|
||||
onClick={this.toggleDropdownForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onFocus={this.clearHideTimeout}
|
||||
onMouseOver={() => {
|
||||
if (this.state.dropdownOpen !== 'none') {
|
||||
this.setDropdown('account');
|
||||
}
|
||||
}}
|
||||
>
|
||||
My Account
|
||||
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
||||
</button>
|
||||
<ul className="nav__dropdown">
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to={`/${this.props.user.username}/sketches`}
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
My sketches
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to={`/${this.props.user.username}/assets`}
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
My assets
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/account"
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav__dropdown-item">
|
||||
<button
|
||||
onClick={this.handleLogout}
|
||||
onFocus={this.handleFocusForAccount}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> }
|
||||
{this.renderProjectMenu(navDropdownState)}
|
||||
{this.renderUserMenu(navDropdownState)}
|
||||
{/*
|
||||
<div className="nav__announce">
|
||||
This is a preview version of the editor, that has not yet been officially released.
|
||||
|
|
|
|||
Loading…
Reference in a new issue