Client - add a language dropdown
This commit is contained in:
parent
c83351ea1f
commit
44d0c36485
@ -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;
|
||||
}
|
||||
|
64
fittrackee_client/src/components/NavBar/LanguageDropdown.jsx
Normal file
64
fittrackee_client/src/components/NavBar/LanguageDropdown.jsx
Normal 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
|
@ -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>
|
||||
|
27
fittrackee_client/src/images/flags/en.svg
Normal file
27
fittrackee_client/src/images/flags/en.svg
Normal 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 |
1
fittrackee_client/src/images/flags/fr.svg
Normal file
1
fittrackee_client/src/images/flags/fr.svg
Normal 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 |
Loading…
Reference in New Issue
Block a user