hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navigation improvements & Fix language selection

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-05-09 19:55:01 +10:00
parent 85a3149cdf
commit b3ea386307
7 changed files with 82 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sidebar/UI/Translations.tsx
+33 -10
View File
@@ -3,6 +3,7 @@ import React from 'react';
import { Br, Jp, Us } from 'react-flags-select';
import { Disclosure } from '@headlessui/react';
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
import { LanguageEnum, languageTemplate } from '../../../App';
@@ -17,27 +18,49 @@ const Translations = (props: TranslationsProps) => {
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
<div className="flex my-auto">
<Disclosure.Button className="flex bg-gray-50 w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
<div className="flex ml-4">
{open ? (
<ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
) : (
<ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
)}
{props.translations.language_title}
<div className="my-auto">
{props.language === LanguageEnum.ENGLISH ? (
<Us className="ml-2 w-8 shadow-md" />
<Us className="ml-2 w-8" />
) : props.language === LanguageEnum.JAPANESE ? (
<Jp className="ml-2 w-8 shadow-md" />
<Jp className="ml-2 w-8" />
) : props.language === LanguageEnum.PORTUGUESE ? (
<Br className="ml-2 w-8" />
) : null}
</div>
</div>
</Disclosure.Button>
<Disclosure.Panel>
<div>
English <Us className="w-8 shadow-md" />
<div
className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
onClick={() => {
props.setLanguage(LanguageEnum.ENGLISH);
}}
>
English <Us className="w-8 my-auto" />
</div>
<div>
Português <Br className="w-8 shadow-md" />
<div
className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
onClick={() => {
props.setLanguage(LanguageEnum.PORTUGUESE);
}}
>
Português <Br className="w-8 my-auto" />
</div>
<div>
日本語 <Jp className="w-8 shadow-md" />
<div
className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
onClick={() => {
props.setLanguage(LanguageEnum.JAPANESE);
}}
>
日本語 <Jp className="w-8 my-auto" />
</div>
</Disclosure.Panel>
</>