diff options
author | Sebastian <sebasjm@gmail.com> | 2021-07-26 11:27:56 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-07-26 11:33:49 -0300 |
commit | 44551245dab36570d937affdb89735c937b4ae55 (patch) | |
tree | fca0e201ce8157122af15abb9aebd1061a773b92 /packages/taler-wallet-webextension/src/popup/Settings.tsx | |
parent | e70e664da982baf1b74e6210adaa870c298281d4 (diff) |
i18n
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup/Settings.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/Settings.tsx | 42 |
1 files changed, 36 insertions, 6 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx index d8cd04380..9bb10a4e3 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -15,18 +15,23 @@ */ +import { i18n } from "@gnu-taler/taler-util"; import { VNode } from "preact"; import { Checkbox } from "../components/Checkbox"; import { EditableText } from "../components/EditableText"; -import { useDevContext } from "../context/useDevContext"; +import { SelectList } from "../components/SelectList"; +import { useDevContext } from "../context/devContext"; import { useBackupDeviceName } from "../hooks/useBackupDeviceName"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; +import { useLang } from "../hooks/useLang"; export function SettingsPage(): VNode { const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); const { devMode, toggleDevMode } = useDevContext() const { name, update } = useBackupDeviceName() + const [lang, changeLang] = useLang() return <SettingsView + lang={lang} changeLang={changeLang} deviceName={name} setDeviceName={update} permissionsEnabled={permissionsEnabled} togglePermissions={togglePermissions} developerMode={devMode} toggleDeveloperMode={toggleDevMode} @@ -34,6 +39,8 @@ export function SettingsPage(): VNode { } export interface ViewProps { + lang: string; + changeLang: (s: string) => void; deviceName: string; setDeviceName: (s: string) => Promise<void>; permissionsEnabled: boolean; @@ -42,20 +49,43 @@ export interface ViewProps { toggleDeveloperMode: () => void; } -export function SettingsView({ deviceName, setDeviceName, permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode }: ViewProps): VNode { +import { strings as messages } from '../i18n/strings' + +type LangsNames = { + [P in keyof typeof messages]: string +} + +const names: LangsNames = { + es: 'Español [es]', + en: 'English [en]', + fr: 'Français [fr]', + de: 'Deutsch [de]', + sv: 'Svenska [sv]', + it: 'Italiano [it]', +} + + +export function SettingsView({ lang, changeLang, deviceName, setDeviceName, permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode }: ViewProps): VNode { return ( <div> <section style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}> - - <h2>Wallet</h2> + <h2><i18n.Translate>Wallet</i18n.Translate></h2> + <SelectList + value={lang} + onChange={changeLang} + name="lang" + list={names} + label={i18n.str`Lang`} + description="(Choose your preferred lang)" + /> <EditableText value={deviceName} onChange={setDeviceName} name="device-id" - label="Device name" + label={i18n.str`Device name`} description="(This is how you will recognize the wallet in the backup provider)" /> - <h2>Permissions</h2> + <h2><i18n.Translate>Permissions</i18n.Translate></h2> <Checkbox label="Automatically open wallet based on page content" name="perm" description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" |