Skip to content

Language UI Dropdown new location #1582

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 8 commits into from
Aug 27, 2020
Merged

Language UI Dropdown new location #1582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bed6a56
Add prorotype of language selector design
catarak Aug 19, 2020
bf1d7da
Adjust authenticated nav to consolidate Account dropdown
catarak Aug 19, 2020
9e6575d
Merge remote-tracking branch 'remotes/upstream/feature/language-selec…
oruburos Aug 24, 2020
108135e
Necesita las pruebas de Andrew
oruburos Aug 24, 2020
055833e
Merge remote-tracking branch 'remotes/upstream/develop' into languageUI
oruburos Aug 26, 2020
85edfda
Merge remote-tracking branch 'remotes/upstream/develop' into languageUI
oruburos Aug 26, 2020
61cee77
Removing default value for language.
oruburos Aug 27, 2020
c2dbbdb
Adding language in NavTest
oruburos Aug 27, 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
21 changes: 10 additions & 11 deletions client/components/Nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { withRouter } from 'react-router';
import { Link } from 'react-router';
import classNames from 'classnames';
import { withTranslation } from 'react-i18next';
import i18next from 'i18next';
import { languageKeyToLabel } from '../i18n';
import * as IDEActions from '../modules/IDE/actions/ide';
import * as toastActions from '../modules/IDE/actions/toast';
import * as projectActions from '../modules/IDE/actions/project';
Expand Down Expand Up @@ -549,7 +549,7 @@ class Nav extends React.PureComponent {

renderLanguageMenu(navDropdownState) {
return (
<ul className="nav__items-right" title="user-menu">
<React.Fragment>
<li className={navDropdownState.lang}>
<button
onClick={this.toggleDropdownForLang}
Expand All @@ -561,7 +561,7 @@ class Nav extends React.PureComponent {
}
}}
>
<span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
<span className="nav__item-header"> {languageKeyToLabel(this.props.language)}</span>
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown">
Expand Down Expand Up @@ -597,14 +597,15 @@ class Nav extends React.PureComponent {
</li>
</ul>
</li>
</ul>
</React.Fragment>
);
}


renderUnauthenticatedUserMenu(navDropdownState) {
return (
<ul className="nav__items-right" title="user-menu">
{getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
<li className="nav__item">
<Link to="/login" className="nav__auth-button">
<span className="nav__item-header">{this.props.t('Nav.Login')}</span>
Expand All @@ -623,10 +624,7 @@ class Nav extends React.PureComponent {
renderAuthenticatedUserMenu(navDropdownState) {
return (
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
<span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
</li>
<span className="nav__item-spacer">|</span>
{getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
<li className={navDropdownState.account}>
<button
className="nav__item-header"
Expand All @@ -639,7 +637,7 @@ class Nav extends React.PureComponent {
}
}}
>
{this.props.t('Nav.Auth.MyAccount')}
<span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
</button>
<ul className="nav__dropdown">
Expand Down Expand Up @@ -755,7 +753,6 @@ class Nav extends React.PureComponent {
<header>
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderLeftLayout(navDropdownState)}
{getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
{this.renderUserMenu(navDropdownState)}
</nav>
</header>
Expand Down Expand Up @@ -809,6 +806,7 @@ Nav.propTypes = {
}),
t: PropTypes.func.isRequired,
setLanguage: PropTypes.func.isRequired,
language: PropTypes.string.isRequired,
};

Nav.defaultProps = {
Expand All @@ -829,7 +827,8 @@ function mapStateToProps(state) {
project: state.project,
user: state.user,
unsavedChanges: state.ide.unsavedChanges,
rootFile: state.files.filter(file => file.name === 'root')[0]
rootFile: state.files.filter(file => file.name === 'root')[0],
language: state.preferences.language
};
}

Expand Down
3 changes: 2 additions & 1 deletion client/components/__test__/Nav.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ describe('Nav', () => {
id: 'root-file'
},
t: jest.fn(),
setLanguage: jest.fn()
setLanguage: jest.fn(),
language: 'en-US'
};

it('renders correctly', () => {
Expand Down
8 changes: 8 additions & 0 deletions client/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ import Backend from 'i18next-http-backend';
const fallbackLng = ['en-US'];
const availableLanguages = ['en-US', 'es-419'];

export function languageKeyToLabel(lang) {
const languageMap = {
'en-US': 'English',
'es-419': 'Español'
};
return languageMap[lang];
}

const options = {
loadPath: '/locales/{{lng}}/translations.json',
requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })
Expand Down