Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

feat: locale select should be dropdown menu

Browse Source
This commit is contained in:
Ivar Conradi Østhus 2020-05-12 22:24:21 +02:00
parent ae8fd61ea4
commit e61e786cef
5 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/LICENSE
View File

@ -186,7 +186,7 @@ Apache License
same "printed page" as the copyright notice for easier same "printed page" as the copyright notice for easier
identification within third-party archives. identification within third-party archives.
Copyright 2014 FINN.no AS Copyright 2014 Bricks Software AS
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.

BIN
frontend/public/fr-FR.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 B

BIN
frontend/public/pt_BR.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
frontend/public/sv-SE.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 559 B

28
frontend/src/component/user/show-user-component.jsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './user.scss'; import styles from './user.scss';
import { Menu, MenuItem } from 'react-mdl';
export default class ShowUserComponent extends React.Component { export default class ShowUserComponent extends React.Component {
static propTypes = { static propTypes = {
@ -10,13 +11,16 @@ export default class ShowUserComponent extends React.Component {
updateSettingLocation: PropTypes.func.isRequired, updateSettingLocation: PropTypes.func.isRequired,
}; };
possibleLocales = [ possibleLocales = [
{ value: 'nb-NO', image: 'nb-NO' },
{ value: 'en-US', image: 'en-US' }, { value: 'en-US', image: 'en-US' },
{ value: 'en-GB', image: 'en-GB' }, { value: 'en-GB', image: 'en-GB' },
{ value: 'en-IN', image: 'en-IN' }, { value: 'nb-NO', image: 'nb-NO' },
{ value: 'sv-SE', image: 'sv-SE' },
{ value: 'da-DK', image: 'da-DK' }, { value: 'da-DK', image: 'da-DK' },
{ value: 'en-IN', image: 'en-IN' },
{ value: 'de', image: 'de_DE' }, { value: 'de', image: 'de_DE' },
{ value: 'cs', image: 'cs_CZ' }, { value: 'cs', image: 'cs_CZ' },
{ value: 'pt-BR', image: 'pt_BR' },
{ value: 'fr-FR', image: 'fr-FR' },
]; ];
componentDidMount() { componentDidMount() {
@ -33,11 +37,8 @@ export default class ShowUserComponent extends React.Component {
return (this.props.location && this.props.location.locale) || navigator.language || navigator.userLanguage; return (this.props.location && this.props.location.locale) || navigator.language || navigator.userLanguage;
} }
updateLocale() { setLocale(locale) {
const locale = this.getLocale(); this.props.updateSettingLocation('locale', locale.value);
let index = this.possibleLocales.findIndex(v => v.value === locale);
index = (index + 1) % this.possibleLocales.length;
this.props.updateSettingLocation('locale', this.possibleLocales[index].value);
} }
render() { render() {
@ -48,9 +49,18 @@ export default class ShowUserComponent extends React.Component {
const imageLocale = foundLocale ? `public/${foundLocale.image}.png` : `public/unknown-locale.png`; const imageLocale = foundLocale ? `public/${foundLocale.image}.png` : `public/unknown-locale.png`;
return ( return (
<div className={styles.showUserSettings}> <div className={styles.showUserSettings}>
<div className={styles.showLocale}> <div className={styles.showLocale} id="select-locale" style={{ cursor: 'pointer' }}>
<img src={imageLocale} title={locale} alt={locale} onClick={this.updateLocale.bind(this)} /> <img src={imageLocale} title={`Current locale is ${locale}`} alt={locale} />
</div> </div>
<Menu target="select-locale" valign="bottom" align="right" ripple>
{this.possibleLocales.map(i => (
<MenuItem key={i.value} style={{ textAlign: 'center' }} onClick={() => this.setLocale(i)}>
<div className={styles.showLocale}>
<img src={`public/${i.image}.png`} title={i.value} alt={i.value} />
</div>
</MenuItem>
))}
</Menu>
&nbsp; &nbsp;
<div className={styles.showUser}> <div className={styles.showUser}>
<img src={imageUrl} title={email} alt={email} /> <img src={imageUrl} title={email} alt={email} />