jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-04-27 07:48:01 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

add fr and nl translations (#4587)

Browse source 
* add fr and nl translations

* update fr

* fix password label translation

* translate country strings

* fix double accents

* fix Ivory Coast

* sort countries

* use more performant Collator over localeCompare

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2022-03-06 17:19:51 -06:00 • committed by GitHub
parent f5b973e15c
commit 21f7dd5eba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 555 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

21
webclient/src/components/CountryDropdown/CountryDropdown.tsx
View file

@ -3,15 +3,28 @@ import React, { useEffect, useState } from 'react';
import { Select, MenuItem } from '@material-ui/core';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { useTranslation } from 'react-i18next';
import { Images } from 'images/Images';
import { CountryCode } from 'types';
import './CountryDropdown.css';
import { CountryLabel } from 'types';
const CountryDropdown = ({ input: { onChange } }) => {
const [state, setState] = useState('');
const [sortedCountries, setSortedCountries] = useState([]);
const { t, i18n } = useTranslation();
useEffect(() => onChange(state), [state]);
useEffect(() => {
const collator = new Intl.Collator(i18n.language);
setSortedCountries(Object.keys(CountryCode).sort((a, b) =>
collator.compare(t(`Common.countries.${a}`), t(`Common.countries.${b}`))
));
}, [i18n.language]);
return (
<FormControl variant='outlined' className='CountryDropdown'>
<InputLabel id='CountryDropdown-select'>Country</InputLabel>
@ -31,11 +44,11 @@ const CountryDropdown = ({ input: { onChange } }) => {
</MenuItem>
{
Object.keys(CountryLabel).map((country, index:number) => (
sortedCountries.map((country, index:number) => (
<MenuItem value={country} key={index}>
<div className="CountryDropdown-item">
<img className="CountryDropdown-item__image" src={Images.Countries[country.toLowerCase()]} alt={CountryLabel[country]} />
<span className="CountryDropdown-item__label">{CountryLabel[country.toUpperCase()] || country.toUpperCase()}</span>
<img className="CountryDropdown-item__image" src={Images.Countries[country.toLowerCase()]} />
<span className="CountryDropdown-item__label">{t(`Common.countries.${country}`)}</span>
</div>
</MenuItem>
))

4
webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
View file

@ -6,7 +6,7 @@ import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { Images } from 'images/Images';
import { CountryLabel, Language, LanguageCountry } from 'types';
import { Language, LanguageCountry } from 'types';
import './LanguageDropdown.css';
@ -36,7 +36,7 @@ const LanguageDropdown = () => {
return (
<MenuItem value={lang} key={lang}>
<div className="LanguageDropdown-item">
<img className="LanguageDropdown-item__image" src={Images.Countries[country]} alt={CountryLabel[country]} />
<img className="LanguageDropdown-item__image" src={Images.Countries[country]} />
<span className="LanguageDropdown-item__label">{lang}</span>
</div>
</MenuItem>