From 45e6a28fdb4aea85896783d4b8aa3298e4e98953 Mon Sep 17 00:00:00 2001 From: Jamie Guthrie Date: Sat, 19 Aug 2023 12:50:32 +0200 Subject: Add country flags --- modern/package.json | 1 + .../src/common/components/LocalizationProvider.js | 112 ++++++++++----------- modern/src/login/LoginPage.js | 11 +- 3 files changed, 66 insertions(+), 58 deletions(-) (limited to 'modern') diff --git a/modern/package.json b/modern/package.json index 0faec5e7..7988d78b 100644 --- a/modern/package.json +++ b/modern/package.json @@ -20,6 +20,7 @@ "maplibre-gl": "^3.0.1", "moment": "^2.29.4", "react": "^18.2.0", + "react-country-flag": "3.1.0", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-mui-dropzone": "^4.0.6", diff --git a/modern/src/common/components/LocalizationProvider.js b/modern/src/common/components/LocalizationProvider.js index 6bc64831..e1bafd09 100644 --- a/modern/src/common/components/LocalizationProvider.js +++ b/modern/src/common/components/LocalizationProvider.js @@ -64,62 +64,62 @@ import zhTW from '../../resources/l10n/zh_TW.json'; import usePersistedState from '../util/usePersistedState'; const languages = { - af: { data: af, name: 'Afrikaans' }, - ar: { data: ar, name: 'العربية' }, - az: { data: az, name: 'Azərbaycanca' }, - bg: { data: bg, name: 'Български' }, - bn: { data: bn, name: 'বাংলা' }, - ca: { data: ca, name: 'Català' }, - cs: { data: cs, name: 'Čeština' }, - de: { data: de, name: 'Deutsch' }, - da: { data: da, name: 'Dansk' }, - el: { data: el, name: 'Ελληνικά' }, - en: { data: en, name: 'English' }, - es: { data: es, name: 'Español' }, - fa: { data: fa, name: 'فارسی' }, - fi: { data: fi, name: 'Suomi' }, - fr: { data: fr, name: 'Français' }, - gl: { data: gl, name: 'Galego' }, - he: { data: he, name: 'עברית' }, - hi: { data: hi, name: 'हिन्दी' }, - hr: { data: hr, name: 'Hrvatski' }, - hu: { data: hu, name: 'Magyar' }, - id: { data: id, name: 'Bahasa Indonesia' }, - it: { data: it, name: 'Italiano' }, - ja: { data: ja, name: '日本語' }, - ka: { data: ka, name: 'ქართული' }, - kk: { data: kk, name: 'Қазақша' }, - ko: { data: ko, name: '한국어' }, - km: { data: km, name: 'ភាសាខ្មែរ' }, - lo: { data: lo, name: 'ລາວ' }, - lt: { data: lt, name: 'Lietuvių' }, - lv: { data: lv, name: 'Latviešu' }, - ml: { data: ml, name: 'മലയാളം' }, - mn: { data: mn, name: 'Монгол хэл' }, - ms: { data: ms, name: 'بهاس ملايو' }, - nb: { data: nb, name: 'Norsk bokmål' }, - ne: { data: ne, name: 'नेपाली' }, - nl: { data: nl, name: 'Nederlands' }, - nn: { data: nn, name: 'Norsk nynorsk' }, - pl: { data: pl, name: 'Polski' }, - pt: { data: pt, name: 'Português' }, - ptBR: { data: ptBR, name: 'Português (Brasil)' }, - ro: { data: ro, name: 'Română' }, - ru: { data: ru, name: 'Русский' }, - si: { data: si, name: 'සිංහල' }, - sk: { data: sk, name: 'Slovenčina' }, - sl: { data: sl, name: 'Slovenščina' }, - sq: { data: sq, name: 'Shqipëria' }, - sr: { data: sr, name: 'Srpski' }, - sv: { data: sv, name: 'Svenska' }, - ta: { data: ta, name: 'தமிழ்' }, - th: { data: th, name: 'ไทย' }, - tr: { data: tr, name: 'Türkçe' }, - uk: { data: uk, name: 'Українська' }, - uz: { data: uz, name: 'Oʻzbekcha' }, - vi: { data: vi, name: 'Tiếng Việt' }, - zh: { data: zh, name: '中文' }, - zhTW: { data: zhTW, name: '中文 (Taiwan)' }, + af: { data: af, countryCode: 'ZA', name: 'Afrikaans' }, + ar: { data: ar, countryCode: 'AE', name: 'العربية' }, + az: { data: az, countryCode: 'AZ', name: 'Azərbaycanca' }, + bg: { data: bg, countryCode: 'BG', name: 'Български' }, + bn: { data: bn, countryCode: 'IN', name: 'বাংলা' }, + ca: { data: ca, countryCode: 'ES', name: 'Català' }, + cs: { data: cs, countryCode: 'CZ', name: 'Čeština' }, + de: { data: de, countryCode: 'DE', name: 'Deutsch' }, + da: { data: da, countryCode: 'DK', name: 'Dansk' }, + el: { data: el, countryCode: 'GR', name: 'Ελληνικά' }, + en: { data: en, countryCode: 'GB', name: 'English' }, + es: { data: es, countryCode: 'ES', name: 'Español' }, + fa: { data: fa, countryCode: 'IR', name: 'فارسی' }, + fi: { data: fi, countryCode: 'FI', name: 'Suomi' }, + fr: { data: fr, countryCode: 'FR', name: 'Français' }, + gl: { data: gl, countryCode: 'ES', name: 'Galego' }, + he: { data: he, countryCode: 'IL', name: 'עברית' }, + hi: { data: hi, countryCode: 'IN', name: 'हिन्दी' }, + hr: { data: hr, countryCode: 'HR', name: 'Hrvatski' }, + hu: { data: hu, countryCode: 'HU', name: 'Magyar' }, + id: { data: id, countryCode: 'ID', name: 'Bahasa Indonesia' }, + it: { data: it, countryCode: 'IT', name: 'Italiano' }, + ja: { data: ja, countryCode: 'JP', name: '日本語' }, + ka: { data: ka, countryCode: 'GE', name: 'ქართული' }, + kk: { data: kk, countryCode: 'KZ', name: 'Қазақша' }, + ko: { data: ko, countryCode: 'KR', name: '한국어' }, + km: { data: km, countryCode: 'KH', name: 'ភាសាខ្មែរ' }, + lo: { data: lo, countryCode: 'LA', name: 'ລາວ' }, + lt: { data: lt, countryCode: 'LT', name: 'Lietuvių' }, + lv: { data: lv, countryCode: 'LV', name: 'Latviešu' }, + ml: { data: ml, countryCode: 'IN', name: 'മലയാളം' }, + mn: { data: mn, countryCode: 'MN', name: 'Монгол хэл' }, + ms: { data: ms, countryCode: 'MY', name: 'بهاس ملايو' }, + ne: { data: ne, countryCode: 'NP', name: 'नेपाली' }, + nl: { data: nl, countryCode: 'NL', name: 'Nederlands' }, + nb: { data: nb, countryCode: 'NO', name: 'Norsk bokmål' }, + nn: { data: nn, countryCode: 'NO', name: 'Norsk nynorsk' }, + pl: { data: pl, countryCode: 'PL', name: 'Polski' }, + pt: { data: pt, countryCode: 'PT', name: 'Português' }, + ptBR: { data: ptBR, countryCode: 'BR', name: 'Português (Brasil)' }, + ro: { data: ro, countryCode: 'RO', name: 'Română' }, + ru: { data: ru, countryCode: 'RU', name: 'Русский' }, + si: { data: si, countryCode: 'LK', name: 'සිංහල' }, + sk: { data: sk, countryCode: 'SK', name: 'Slovenčina' }, + sl: { data: sl, countryCode: 'SI', name: 'Slovenščina' }, + sq: { data: sq, countryCode: 'AL', name: 'Shqipëria' }, + sr: { data: sr, countryCode: 'RS', name: 'Srpski' }, + sv: { data: sv, countryCode: 'SE', name: 'Svenska' }, + ta: { data: ta, countryCode: 'IN', name: 'தமிழ்' }, + th: { data: th, countryCode: 'TH', name: 'ไทย' }, + tr: { data: tr, countryCode: 'TR', name: 'Türkçe' }, + uk: { data: uk, countryCode: 'UA', name: 'Українська' }, + uz: { data: uz, countryCode: 'UZ', name: 'Oʻzbekcha' }, + vi: { data: vi, countryCode: 'VN', name: 'Tiếng Việt' }, + zh: { data: zh, countryCode: 'CN', name: '中文' }, + zhTW: { data: zhTW, countryCode: 'TW', name: '中文 (Taiwan)' }, }; const getDefaultLanguage = () => { diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 54fd09fb..8a64bebf 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -3,6 +3,7 @@ import moment from 'moment'; import { useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress, } from '@mui/material'; +import ReactCountryFlag from 'react-country-flag'; import makeStyles from '@mui/styles/makeStyles'; import CloseIcon from '@mui/icons-material/Close'; import LockOpenIcon from '@mui/icons-material/LockOpen'; @@ -50,7 +51,7 @@ const LoginPage = () => { const t = useTranslation(); const { languages, language, setLanguage } = useLocalization(); - const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name })); + const languageList = Object.entries(languages).map((values) => ({ code: values[0], countryCode: values[1].countryCode, name: values[1].name })); const [failed, setFailed] = useState(false); @@ -209,7 +210,13 @@ const LoginPage = () => { {t('loginLanguage')} )} -- cgit v1.2.3 From 4e105f414083bd7a312ab9cc91a8f640e8ede1b6 Mon Sep 17 00:00:00 2001 From: Jamie Guthrie Date: Sat, 19 Aug 2023 12:53:18 +0200 Subject: Add country flags --- modern/package-lock.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'modern') diff --git a/modern/package-lock.json b/modern/package-lock.json index 173813af..3e87ddc4 100644 --- a/modern/package-lock.json +++ b/modern/package-lock.json @@ -25,6 +25,7 @@ "maplibre-gl": "^3.0.1", "moment": "^2.29.4", "react": "^18.2.0", + "react-country-flag": "3.1.0", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-mui-dropzone": "^4.0.6", @@ -15425,6 +15426,17 @@ "node": ">=14" } }, + "node_modules/react-country-flag": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz", + "integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==", + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", -- cgit v1.2.3 From 28d4bf17b1c5217b13f44f69bfdd4bb6b40873ed Mon Sep 17 00:00:00 2001 From: Jamie Guthrie Date: Sat, 19 Aug 2023 21:05:03 +0200 Subject: Switch UK to US flag (absolute heresy!) --- modern/src/common/components/LocalizationProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'modern') diff --git a/modern/src/common/components/LocalizationProvider.js b/modern/src/common/components/LocalizationProvider.js index e1bafd09..226f1be2 100644 --- a/modern/src/common/components/LocalizationProvider.js +++ b/modern/src/common/components/LocalizationProvider.js @@ -74,7 +74,7 @@ const languages = { de: { data: de, countryCode: 'DE', name: 'Deutsch' }, da: { data: da, countryCode: 'DK', name: 'Dansk' }, el: { data: el, countryCode: 'GR', name: 'Ελληνικά' }, - en: { data: en, countryCode: 'GB', name: 'English' }, + en: { data: en, countryCode: 'US', name: 'English' }, es: { data: es, countryCode: 'ES', name: 'Español' }, fa: { data: fa, countryCode: 'IR', name: 'فارسی' }, fi: { data: fi, countryCode: 'FI', name: 'Suomi' }, -- cgit v1.2.3 From 5a3c8d0ed1ecdce69963e79c95d4f910d86e0537 Mon Sep 17 00:00:00 2001 From: Jamie Guthrie Date: Sat, 19 Aug 2023 23:04:47 +0200 Subject: Use emojis for flags --- modern/package.json | 1 - modern/src/common/components/LocalizationProvider.js | 8 ++++++++ modern/src/login/LoginPage.js | 5 ++--- 3 files changed, 10 insertions(+), 4 deletions(-) (limited to 'modern') diff --git a/modern/package.json b/modern/package.json index 7988d78b..0faec5e7 100644 --- a/modern/package.json +++ b/modern/package.json @@ -20,7 +20,6 @@ "maplibre-gl": "^3.0.1", "moment": "^2.29.4", "react": "^18.2.0", - "react-country-flag": "3.1.0", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-mui-dropzone": "^4.0.6", diff --git a/modern/src/common/components/LocalizationProvider.js b/modern/src/common/components/LocalizationProvider.js index 226f1be2..a6a14859 100644 --- a/modern/src/common/components/LocalizationProvider.js +++ b/modern/src/common/components/LocalizationProvider.js @@ -186,3 +186,11 @@ export const useTranslationKeys = (predicate) => { const { data } = context.languages[context.language]; return Object.keys(data).filter(predicate); }; + +export const getFlagEmoji = (countryCode) => { + const codePoints = countryCode + .toUpperCase() + .split('') + .map((char) => 127397 + char.charCodeAt()); + return String.fromCodePoint(...codePoints); +}; diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 8a64bebf..3ccb954f 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -3,7 +3,6 @@ import moment from 'moment'; import { useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress, } from '@mui/material'; -import ReactCountryFlag from 'react-country-flag'; import makeStyles from '@mui/styles/makeStyles'; import CloseIcon from '@mui/icons-material/Close'; import LockOpenIcon from '@mui/icons-material/LockOpen'; @@ -11,7 +10,7 @@ import { useTheme } from '@mui/material/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { sessionActions } from '../store'; -import { useLocalization, useTranslation } from '../common/components/LocalizationProvider'; +import { useLocalization, useTranslation, getFlagEmoji } from '../common/components/LocalizationProvider'; import LoginLayout from './LoginLayout'; import usePersistedState from '../common/util/usePersistedState'; import { handleLoginTokenListeners, nativeEnvironment, nativePostMessage } from '../common/components/NativeInterface'; @@ -212,7 +211,7 @@ const LoginPage = () => { setLanguage(e.target.value)}> {languageList.map((it) => ( - {getFlagEmoji(it.countryCode)} + {getFlagEmoji(it.country)}    {it.name} -- cgit v1.2.3 From 67b57c189c6e43732d09018f669df87f4491be5a Mon Sep 17 00:00:00 2001 From: Jamie Guthrie Date: Sat, 19 Aug 2023 23:28:21 +0200 Subject: Revert country list order --- modern/src/common/components/LocalizationProvider.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'modern') diff --git a/modern/src/common/components/LocalizationProvider.jsx b/modern/src/common/components/LocalizationProvider.jsx index 0010b381..1c87bc7d 100644 --- a/modern/src/common/components/LocalizationProvider.jsx +++ b/modern/src/common/components/LocalizationProvider.jsx @@ -97,9 +97,9 @@ const languages = { ml: { data: ml, country: 'IN', name: 'മലയാളം' }, mn: { data: mn, country: 'MN', name: 'Монгол хэл' }, ms: { data: ms, country: 'MY', name: 'بهاس ملايو' }, + nb: { data: nb, country: 'NO', name: 'Norsk bokmål' }, ne: { data: ne, country: 'NP', name: 'नेपाली' }, nl: { data: nl, country: 'NL', name: 'Nederlands' }, - nb: { data: nb, country: 'NO', name: 'Norsk bokmål' }, nn: { data: nn, country: 'NO', name: 'Norsk nynorsk' }, pl: { data: pl, country: 'PL', name: 'Polski' }, pt: { data: pt, country: 'PT', name: 'Português' }, -- cgit v1.2.3