diff options
Diffstat (limited to 'packages/demobank-ui/src/components/menu')
4 files changed, 52 insertions, 49 deletions
diff --git a/packages/demobank-ui/src/components/menu/LangSelector.tsx b/packages/demobank-ui/src/components/menu/LangSelector.tsx index 221237a5b..69d6ee64a 100644 --- a/packages/demobank-ui/src/components/menu/LangSelector.tsx +++ b/packages/demobank-ui/src/components/menu/LangSelector.tsx @@ -19,23 +19,23 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, Fragment } from 'preact'; -import { useCallback, useEffect, useState } from 'preact/hooks'; -import langIcon from '../../assets/icons/languageicon.svg'; -import { useTranslationContext } from '../../context/translation'; -import { strings as messages } from '../../i18n/strings'; +import { h, VNode, Fragment } from "preact"; +import { useCallback, useEffect, useState } from "preact/hooks"; +import langIcon from "../../assets/icons/languageicon.svg"; +import { useTranslationContext } from "../../context/translation"; +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]', + es: "Español [es]", + en: "English [en]", + fr: "Français [fr]", + de: "Deutsch [de]", + sv: "Svenska [sv]", + it: "Italiano [it]", }; function getLangName(s: keyof LangsNames | string): string { @@ -47,36 +47,38 @@ function getLangName(s: keyof LangsNames | string): string { export function LangSelectorLikePy(): VNode { const [updatingLang, setUpdatingLang] = useState(false); const { lang, changeLanguage } = useTranslationContext(); - const [hidden, setHidden] = useState(true) + const [hidden, setHidden] = useState(true); useEffect(() => { - function bodyKeyPress(event:KeyboardEvent) { - if (event.code === 'Escape') - setHidden(true); - + function bodyKeyPress(event: KeyboardEvent) { + if (event.code === "Escape") setHidden(true); } - function bodyOnClick(event:Event) { + function bodyOnClick(event: Event) { setHidden(true); } - document.body.addEventListener('click', bodyOnClick) - document.body.addEventListener('keydown', bodyKeyPress as any) + document.body.addEventListener("click", bodyOnClick); + document.body.addEventListener("keydown", bodyKeyPress as any); return () => { - document.body.removeEventListener('keydown', bodyKeyPress as any) - document.body.removeEventListener('click', bodyOnClick) - } - },[]) + document.body.removeEventListener("keydown", bodyKeyPress as any); + document.body.removeEventListener("click", bodyOnClick); + }; + }, []); return ( <Fragment> - <button name="language" onClick={(ev) => { - setHidden(h => !h); - ev.stopPropagation(); - }}> + <button + name="language" + onClick={(ev) => { + setHidden((h) => !h); + ev.stopPropagation(); + }} + > {getLangName(lang)} </button> - <div id="lang" class={hidden ? 'hide' : ''}> + <div id="lang" class={hidden ? "hide" : ""}> <div style="position: relative; overflow: visible;"> <div class="nav" - style="position: absolute; max-height: 60vh; overflow-y: scroll"> + style="position: absolute; max-height: 60vh; overflow-y: scroll" + > {Object.keys(messages) .filter((l) => l !== lang) .map((l) => ( @@ -88,7 +90,8 @@ export function LangSelectorLikePy(): VNode { onClick={() => { changeLanguage(l); setUpdatingLang(false); - }}> + }} + > {getLangName(l)} </a> ))} diff --git a/packages/demobank-ui/src/components/menu/NavigationBar.tsx b/packages/demobank-ui/src/components/menu/NavigationBar.tsx index 9e540213d..d344875eb 100644 --- a/packages/demobank-ui/src/components/menu/NavigationBar.tsx +++ b/packages/demobank-ui/src/components/menu/NavigationBar.tsx @@ -19,9 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import logo from '../../assets/logo.jpeg'; -import { LangSelectorLikePy as LangSelector } from './LangSelector'; +import { h, VNode } from "preact"; +import logo from "../../assets/logo.jpeg"; +import { LangSelectorLikePy as LangSelector } from "./LangSelector"; interface Props { onMobileMenu: () => void; diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx index 7f9981a1c..d7833df5a 100644 --- a/packages/demobank-ui/src/components/menu/SideBar.tsx +++ b/packages/demobank-ui/src/components/menu/SideBar.tsx @@ -19,8 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import { Translate } from '../../i18n'; +import { h, VNode } from "preact"; +import { Translate } from "../../i18n"; interface Props { mobile?: boolean; @@ -28,9 +28,9 @@ interface Props { export function Sidebar({ mobile }: Props): VNode { // const config = useConfigContext(); - const config = { version: 'none' }; + const config = { version: "none" }; // FIXME: add replacement for __VERSION__ with the current version - const process = { env: { __VERSION__: '0.0.0' } }; + const process = { env: { __VERSION__: "0.0.0" } }; return ( <aside class="aside is-placed-left is-expanded"> diff --git a/packages/demobank-ui/src/components/menu/index.tsx b/packages/demobank-ui/src/components/menu/index.tsx index 07e1c5265..99d0f7646 100644 --- a/packages/demobank-ui/src/components/menu/index.tsx +++ b/packages/demobank-ui/src/components/menu/index.tsx @@ -14,11 +14,11 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { ComponentChildren, Fragment, h, VNode } from 'preact'; -import Match from 'preact-router/match'; -import { useEffect, useState } from 'preact/hooks'; -import { NavigationBar } from './NavigationBar'; -import { Sidebar } from './SideBar'; +import { ComponentChildren, Fragment, h, VNode } from "preact"; +import Match from "preact-router/match"; +import { useEffect, useState } from "preact/hooks"; +import { NavigationBar } from "./NavigationBar"; +import { Sidebar } from "./SideBar"; interface MenuProps { title: string; @@ -47,7 +47,7 @@ export function Menu({ title }: MenuProps): VNode { return ( <WithTitle title={titleWithSubtitle}> <div - class={mobileOpen ? 'has-aside-mobile-expanded' : ''} + class={mobileOpen ? "has-aside-mobile-expanded" : ""} onClick={() => setMobileOpen(false)} > <NavigationBar @@ -82,11 +82,11 @@ export function NotificationCard({ <div class="column is-12"> <article class={ - n.type === 'ERROR' - ? 'message is-danger' - : n.type === 'WARN' - ? 'message is-warning' - : 'message is-info' + n.type === "ERROR" + ? "message is-danger" + : n.type === "WARN" + ? "message is-warning" + : "message is-info" } > <div class="message-header"> @@ -132,4 +132,4 @@ export interface Notification { } export type ValueOrFunction<T> = T | ((p: T) => T); -export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'; +export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS"; |