Client - add a language dropdown

This commit is contained in:
Sam 2019-09-08 15:16:27 +02:00
parent c83351ea1f
commit 44d0c36485
5 changed files with 116 additions and 0 deletions

View File

@ -262,6 +262,22 @@ label {
margin-top: 30px;
}
.dropdown-wrapper {
width: 50px;
}
.dropdown-list {
background-color: #fff;
padding: 5px 0;
position: absolute;
z-index: 10;
}
.dropdown-item {
cursor: default;
font-size: 0.9em;
font-weight: bold;
}
.fa-question-circle {
color: #6c757d;
margin-left: 3px;
@ -294,6 +310,12 @@ label {
font-size: 25px;
}
.i18n-flag svg {
height: 100%;
opacity: .9;
width: 15px;
}
.inactive-link {
color: lightgrey;
}

View File

@ -0,0 +1,64 @@
import React, { Component } from 'react'
import { ReactComponent as EnFlag } from '../../images/flags/en.svg'
import { ReactComponent as FrFlag } from '../../images/flags/fr.svg'
const languages = [
{
name: 'en',
selected: true,
flag: <EnFlag />,
},
{
name: 'fr',
selected: false,
flag: <FrFlag />,
},
]
class Dropdown extends Component {
constructor(props) {
super(props)
this.state = {
isOpen: false,
selected: 'en',
}
}
selectLanguage(name) {
this.setState({
selected: name,
})
}
toggleDropdown() {
this.setState(prevState => ({
isOpen: !prevState.isOpen,
}))
}
render() {
const { isOpen, selected } = this.state
return (
<div className="dropdown-wrapper" onClick={() => this.toggleDropdown()}>
<ul className="dropdown-list i18n-flag">
{languages
.filter(language =>
isOpen ? language : language.name === selected
)
.map(language => (
<li
className="dropdown-item"
key={language.name}
onClick={() => this.selectLanguage(language.name)}
>
{language.flag} {language.name}
</li>
))}
</ul>
</div>
)
}
}
export default Dropdown

View File

@ -3,6 +3,7 @@ import { Translation } from 'react-i18next'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import LanguageDropdown from './LanguageDropdown'
import { apiUrl } from '../../utils'
class NavBar extends React.PureComponent {
@ -149,6 +150,7 @@ class NavBar extends React.PureComponent {
</Link>
</li>
)}
<li><LanguageDropdown /></li>
</ul>
</div>
</div>

View File

@ -0,0 +1,27 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512"
viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
<path d="m466.916 27.803h-421.832c-24.859 0-45.084 20.225-45.084 45.084v366.226c0 24.859 20.225 45.084 45.084 45.084h421.832c24.859 0 45.084-20.225 45.084-45.084v-366.226c0-24.859-20.225-45.084-45.084-45.084z"
fill="#f0f9ff"/>
<path d="m198.58 188.334-181.344-150.862c-7.75 6.107-13.456 14.691-15.905 24.554l164.142 136.551h33.102z"
fill="#f40055"/>
<path d="m313.425 198.576h33.93l163.447-135.973c-2.325-9.923-7.93-18.592-15.613-24.796l-181.764 151.211z"
fill="#c20044"/>
<path d="m165.472 313.425-164.141 136.549c2.449 9.863 8.155 18.447 15.905 24.553l181.344-150.861-.005-10.241z"
fill="#f40055"/>
<path d="m313.425 313.425v9.557l181.765 151.211c7.683-6.204 13.288-14.874 15.613-24.796l-163.446-135.971z"
fill="#c20044"/>
<path d="m53.273 27.803 145.302 120.879v-120.879z" fill="#406bd4"/>
<path d="m313.425 150.571v-122.768h148.082z" fill="#3257b0"/>
<path d="m394.732 198.575 117.268-97.556v97.556z" fill="#3257b0"/>
<g fill="#406bd4">
<path d="m0 99.317v99.258h119.313z"/>
<path d="m0 313.425v97.699l117.44-97.699z"/>
<path d="m50.49 484.197 148.085-122.676v122.676z"/>
</g>
<path d="m313.425 484.197v-124.139l149.221 124.139z" fill="#3257b0"/>
<path d="m512 409.423-115.395-95.998h115.395z" fill="#3257b0"/>
<path d="m512 222.142h-222.142v-194.339h-67.716v194.339h-222.142v67.716h222.142v194.339h67.716v-194.339h222.142z"
fill="#f40055"/>
<path d="m289.858 222.142v-194.339h-33.858v456.394h33.858v-194.339h222.142v-67.716z"
fill="#c20044"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m173.899 31.804h-8.707l-4.397-4h-115.711c-24.859-.001-45.084 20.224-45.084 45.083v366.226c0 24.859 20.225 45.084 45.084 45.084h115.711l6.348-4h6.755v-448.393z" fill="#406bd4"/><path d="m466.916 27.803h-115.711l-4.523 4h-5.141v448.393h4.141l5.523 4h115.711c24.859 0 45.084-20.225 45.084-45.084v-366.225c0-24.859-20.225-45.084-45.084-45.084z" fill="#c20044"/><path d="m160.795 27.803h190.409v456.394h-190.409z" fill="#f0f9ff"/><path d="m256 27.803h95.205v456.394h-95.205z" fill="#cee5f5"/></svg>

After

Width:  |  Height:  |  Size: 637 B