From b4bad2deaf93eff5858d903cd68b8fdd5a5eecd3 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 26 Oct 2022 14:50:50 -0300 Subject: pretty --- .../src/components/menu/LangSelector.tsx | 63 +++++++++++----------- .../src/components/menu/NavigationBar.tsx | 6 +-- .../demobank-ui/src/components/menu/SideBar.tsx | 8 +-- packages/demobank-ui/src/components/menu/index.tsx | 24 ++++----- 4 files changed, 52 insertions(+), 49 deletions(-) (limited to 'packages/demobank-ui/src/components/menu') 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 ( - -
+
+ 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)} ))} 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 (