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);
|
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() {
|
render() {
|
||||||
const navDropdownState = {
|
const navDropdownState = {
|
||||||
file: classNames({
|
file: classNames({
|
||||||
|
|
@ -240,372 +630,11 @@ class Nav extends React.PureComponent {
|
||||||
'nav__item--open': this.state.dropdownOpen === 'account'
|
'nav__item--open': this.state.dropdownOpen === 'account'
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
|
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
|
||||||
<ul className="nav__items-left" title="project-menu">
|
{this.renderProjectMenu(navDropdownState)}
|
||||||
<li className="nav__item-logo">
|
{this.renderUserMenu(navDropdownState)}
|
||||||
<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> }
|
|
||||||
{/*
|
{/*
|
||||||
<div className="nav__announce">
|
<div className="nav__announce">
|
||||||
This is a preview version of the editor, that has not yet been officially released.
|
This is a preview version of the editor, that has not yet been officially released.
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue