Skip to content

Minimal Viable Navigation Menu #1510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Jul 31, 2020
Merged

Minimal Viable Navigation Menu #1510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2fda172
Minimal Viable Navigation Menu
oruburos Jul 22, 2020
8f90cf7
Minimal Viable Navigation Menu
oruburos Jul 22, 2020
fc7e3cd
Translation.json : Changes in translation for new namespace
oruburos Jul 23, 2020
02e6cef
Voice Over Labels in Preferences:index
oruburos Jul 23, 2020
11145cc
Voice Over Labels in Preferences:index
oruburos Jul 27, 2020
11941b7
Voice Over Labels in Preferences:index
oruburos Jul 27, 2020
63d2913
Voice Over Labels in Preferences:index
oruburos Jul 27, 2020
b3606c9
translations.json ARIA labels adjacent to respective label
oruburos Jul 28, 2020
3bce95c
Merge remote-tracking branch 'remotes/upstream/develop' into minimal_nav
oruburos Jul 28, 2020
2fc71c1
Update Nav.jsx
oruburos Jul 30, 2020
1e809a9
Update Toolbar.test.jsx
oruburos Jul 30, 2020
118741a
Update in keys
oruburos Jul 30, 2020
eca1d3b
Merge branch 'minimal_nav' of https://github.com/oruburos/p5.js-web-e…
oruburos Jul 30, 2020
563f296
Merge branch 'develop' into minimal_nav
andrewn Jul 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 41 additions & 41 deletions client/components/Nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,11 @@ class Nav extends React.PureComponent {
const { unsavedChanges, warnIfUnsavedChanges } = this.props;
if (!unsavedChanges) {
this.props.showToast(1500);
this.props.setToastText('Opened new sketch.');
this.props.setToastText('Toast.OpenedNewSketch');
this.props.newProject();
} else if (warnIfUnsavedChanges && warnIfUnsavedChanges()) {
this.props.showToast(1500);
this.props.setToastText('Opened new sketch.');
this.props.setToastText('Toast.OpenedNewSketch');
this.props.newProject();
}
this.setDropdown('none');
Expand Down Expand Up @@ -172,7 +172,7 @@ class Nav extends React.PureComponent {
handleLangSelection(event) {
i18next.changeLanguage(event.target.value);
this.props.showToast(1500);
this.props.setToastText('LangChange');
this.props.setToastText('Toast.LangChange');
this.setDropdown('none');
}

Expand Down Expand Up @@ -240,13 +240,13 @@ class Nav extends React.PureComponent {
return (
<ul className="nav__items-left">
<li className="nav__item-logo">
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
<LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
</li>
<li className="nav__item nav__item--no-icon">
<Link to="/" className="nav__back-link">
<CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
<span className="nav__item-header">
{this.props.t('BackEditor')}
{this.props.t('Nav.BackEditor')}
</span>
</Link>
</li>
Expand All @@ -258,7 +258,7 @@ class Nav extends React.PureComponent {
return (
<ul className="nav__items-left">
<li className="nav__item-logo">
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
<LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
</li>
<li className={navDropdownState.file}>
<button
Expand All @@ -271,7 +271,7 @@ class Nav extends React.PureComponent {
}
}}
>
<span className="nav__item-header">{this.props.t('File')}</span>
<span className="nav__item-header">{this.props.t('Nav.File.Title')}</span>
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown">
Expand All @@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
{this.props.t('New')}
{this.props.t('Nav.File.New')}
</button>
</li>
{ getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
Expand All @@ -291,7 +291,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
{this.props.t('Save')}
{this.props.t('Common.Save')}
<span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
</button>
</li> }
Expand All @@ -302,7 +302,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
{this.props.t('Duplicate')}
{this.props.t('Nav.File.Duplicate')}
</button>
</li> }
{ this.props.project.id &&
Expand All @@ -312,7 +312,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
{this.props.t('Share')}
{this.props.t('Nav.File.Share')}
</button>
</li> }
{ this.props.project.id &&
Expand All @@ -322,7 +322,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
{this.props.t('Download')}
{this.props.t('Nav.File.Download')}
</button>
</li> }
{ this.props.user.authenticated &&
Expand All @@ -333,7 +333,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('Open')}
{this.props.t('Nav.File.Open')}
</Link>
</li> }
{getConfig('UI_COLLECTIONS_ENABLED') &&
Expand All @@ -346,7 +346,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('AddToCollection')}
{this.props.t('Nav.File.AddToCollection')}
</Link>
</li>}
{ getConfig('EXAMPLES_ENABLED') &&
Expand All @@ -357,7 +357,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('Examples')}
{this.props.t('Nav.File.Examples')}
</Link>
</li> }
</ul>
Expand All @@ -373,7 +373,7 @@ class Nav extends React.PureComponent {
}
}}
>
<span className="nav__item-header">{this.props.t('Edit')}</span>
<span className="nav__item-header">{this.props.t('Nav.Edit.Title')}</span>
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown" >
Expand All @@ -386,7 +386,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForEdit}
onBlur={this.handleBlur}
>
{this.props.t('TidyCode')}
{this.props.t('Nav.Edit.TidyCode')}
<span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
</button>
</li>
Expand All @@ -396,7 +396,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForEdit}
onBlur={this.handleBlur}
>
{this.props.t('Find')}
{this.props.t('Nav.Edit.Find')}
<span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
</button>
</li>
Expand All @@ -406,7 +406,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForEdit}
onBlur={this.handleBlur}
>
{this.props.t('FindNext')}
{this.props.t('Nav.Edit.FindNext')}
<span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
</button>
</li>
Expand All @@ -416,7 +416,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForEdit}
onBlur={this.handleBlur}
>
{this.props.t('FindPrevious')}
{this.props.t('Nav.Edit.FindPrevious')}
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
</button>
</li>
Expand All @@ -433,7 +433,7 @@ class Nav extends React.PureComponent {
}
}}
>
<span className="nav__item-header">{this.props.t('Sketch')}</span>
<span className="nav__item-header">{this.props.t('Nav.Sketch.Title')}</span>
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown">
Expand All @@ -443,7 +443,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForSketch}
onBlur={this.handleBlur}
>
{this.props.t('AddFile')}
{this.props.t('Nav.Sketch.AddFile')}
</button>
</li>
<li className="nav__dropdown-item">
Expand All @@ -452,7 +452,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForSketch}
onBlur={this.handleBlur}
>
{this.props.t('AddFolder')}
{this.props.t('Nav.Sketch.AddFolder')}
</button>
</li>
<li className="nav__dropdown-item">
Expand All @@ -461,7 +461,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForSketch}
onBlur={this.handleBlur}
>
{this.props.t('Run')}
{this.props.t('Nav.Sketch.Run')}
<span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
</button>
</li>
Expand All @@ -471,7 +471,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForSketch}
onBlur={this.handleBlur}
>
{this.props.t('Stop')}
{this.props.t('Nav.Sketch.Stop')}
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
</button>
</li>
Expand Down Expand Up @@ -508,7 +508,7 @@ class Nav extends React.PureComponent {
}
}}
>
<span className="nav__item-header">{this.props.t('Help')}</span>
<span className="nav__item-header">{this.props.t('Nav.Help.Title')}</span>
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown">
Expand All @@ -518,7 +518,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.handleKeyboardShortcuts}
>
{this.props.t('KeyboardShortcuts')}
{this.props.t('Nav.Help.KeyboardShortcuts')}
</button>
</li>
<li className="nav__dropdown-item">
Expand All @@ -529,7 +529,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForHelp}
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>{this.props.t('Reference')}
>{this.props.t('Nav.Help.Reference')}
</a>
</li>
<li className="nav__dropdown-item">
Expand All @@ -539,7 +539,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('About')}
{this.props.t('Nav.Help.About')}
</Link>
</li>
</ul>
Expand All @@ -562,7 +562,7 @@ class Nav extends React.PureComponent {
}
}}
>
<span className="nav__item-header"> {this.props.t('Lang')}</span>
<span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown">
Expand Down Expand Up @@ -608,13 +608,13 @@ class Nav extends React.PureComponent {
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
<Link to="/login" className="nav__auth-button">
<span className="nav__item-header">{this.props.t('Login')}</span>
<span className="nav__item-header">{this.props.t('Nav.Login.Login')}</span>
</Link>
</li>
<span className="nav__item-or">{this.props.t('LoginOr')}</span>
<span className="nav__item-or">{this.props.t('Nav.Login.LoginOr')}</span>
<li className="nav__item">
<Link to="/signup" className="nav__auth-button">
<span className="nav__item-header">{this.props.t('SignUp')}</span>
<span className="nav__item-header">{this.props.t('Nav.Login.SignUp')}</span>
</Link>
</li>
</ul>
Expand All @@ -625,7 +625,7 @@ class Nav extends React.PureComponent {
return (
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
<span>{this.props.t('Hello')}, {this.props.user.username}!</span>
<span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
</li>
<span className="nav__item-spacer">|</span>
<li className={navDropdownState.account}>
Expand All @@ -640,7 +640,7 @@ class Nav extends React.PureComponent {
}
}}
>
{this.props.t('MyAccount')}
{this.props.t('Nav.Auth.MyAccount')}
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown">
Expand All @@ -651,7 +651,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('MySketches')}
{this.props.t('Nav.Auth.MySketches')}
</Link>
</li>
{getConfig('UI_COLLECTIONS_ENABLED') &&
Expand All @@ -662,7 +662,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('MyCollections')}
{this.props.t('Nav.Auth.MyCollections')}
</Link>
</li>
}
Expand All @@ -673,7 +673,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('MyAssets')}
{this.props.t('Nav.Auth.MyAssets')}
</Link>
</li>
<li className="nav__dropdown-item">
Expand All @@ -683,7 +683,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
{this.props.t('Settings')}
{this.props.t('Preferences.Settings')}
</Link>
</li>
<li className="nav__dropdown-item">
Expand All @@ -692,7 +692,7 @@ class Nav extends React.PureComponent {
onFocus={this.handleFocusForAccount}
onBlur={this.handleBlur}
>
{this.props.t('LogOut')}
{this.props.t('Nav.Auth.LogOut')}
</button>
</li>
</ul>
Expand Down Expand Up @@ -842,5 +842,5 @@ const mapDispatchToProps = {
setAllAccessibleOutput
};

export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
export { Nav as NavComponent };
1 change: 0 additions & 1 deletion client/components/__test__/__snapshots__/Nav.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ exports[`Nav renders correctly 1`] = `
class="nav__item-logo"
>
<test-file-stub
aria-label="p5.js Logo"
classname="svg__logo"
focusable="false"
role="img"
Expand Down
3 changes: 1 addition & 2 deletions client/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,10 @@ const options = {

i18n
.use(initReactI18next) // pass the i18n instance to react-i18next.
.use(LanguageDetector)// to detect the language from currentBrowser
// .use(LanguageDetector)// to detect the language from currentBrowser
.use(Backend) // to fetch the data from server
.init({
lng: 'en-US',
defaultNS: 'WebEditor',
fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
debug: false,
backend: options,
Expand Down
Loading