diff options
Diffstat (limited to 'packages/demobank-ui/src/components/menu')
-rw-r--r-- | packages/demobank-ui/src/components/menu/NavigationBar.tsx | 51 | ||||
-rw-r--r-- | packages/demobank-ui/src/components/menu/SideBar.tsx | 74 | ||||
-rw-r--r-- | packages/demobank-ui/src/components/menu/index.tsx | 135 |
3 files changed, 0 insertions, 260 deletions
diff --git a/packages/demobank-ui/src/components/menu/NavigationBar.tsx b/packages/demobank-ui/src/components/menu/NavigationBar.tsx deleted file mode 100644 index 5c57d2c95..000000000 --- a/packages/demobank-ui/src/components/menu/NavigationBar.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { h, VNode } from "preact"; - -interface Props { - onMobileMenu: () => void; - title: string; -} - -export function NavigationBar({ onMobileMenu, title }: Props): VNode { - return ( - <nav - class="navbar is-fixed-top" - role="navigation" - aria-label="main navigation" - > - <div class="navbar-brand"> - <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}> - {title} - </span> - </div> - - <div class="navbar-menu "> - <div class="navbar-end"> - <div class="navbar-item" style={{ paddingTop: 4, paddingBottom: 4 }}> - {/* <LangSelector /> */} - </div> - </div> - </div> - </nav> - ); -} diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx deleted file mode 100644 index 32fe216ab..000000000 --- a/packages/demobank-ui/src/components/menu/SideBar.tsx +++ /dev/null @@ -1,74 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { h, VNode } from "preact"; -import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; - -interface Props { - mobile?: boolean; -} - -export function Sidebar({ mobile }: Props): VNode { - // const config = useConfigContext(); - const config = { version: "none" }; - // FIXME: add replacement for __VERSION__ with the current version - const process = { env: { __VERSION__: "0.0.0" } }; - const { i18n } = useTranslationContext(); - - return ( - <aside class="aside is-placed-left is-expanded"> - <div class="aside-tools"> - <div class="aside-tools-label"> - <div> - <b>euFin bank</b> - </div> - <div - class="is-size-7 has-text-right" - style={{ lineHeight: 0, marginTop: -10 }} - > - Version {process.env.__VERSION__} ({config.version}) - </div> - </div> - </div> - <div class="menu is-menu-main"> - <p class="menu-label"> - <i18n.Translate>Bank menu</i18n.Translate> - </p> - <ul class="menu-list"> - <li> - <div class="ml-4"> - <span class="menu-item-label"> - <i18n.Translate>Select option1</i18n.Translate> - </span> - </div> - </li> - <li> - <div class="ml-4"> - <span class="menu-item-label"> - <i18n.Translate>Select option2</i18n.Translate> - </span> - </div> - </li> - </ul> - </div> - </aside> - ); -} diff --git a/packages/demobank-ui/src/components/menu/index.tsx b/packages/demobank-ui/src/components/menu/index.tsx deleted file mode 100644 index c0a845a62..000000000 --- a/packages/demobank-ui/src/components/menu/index.tsx +++ /dev/null @@ -1,135 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - 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.js"; -import { Sidebar } from "./SideBar.js"; - -interface MenuProps { - title: string; -} - -function WithTitle({ - title, - children, -}: { - title: string; - children: ComponentChildren; -}): VNode { - useEffect(() => { - document.title = `${title}`; - }, [title]); - return <Fragment>{children}</Fragment>; -} - -export function Menu({ title }: MenuProps): VNode { - const [mobileOpen, setMobileOpen] = useState(false); - - return ( - <Match> - {({ path }: { path: string }) => { - const titleWithSubtitle = title; // title ? title : (!admin ? getInstanceTitle(path, instance) : getAdminTitle(path, instance)) - return ( - <WithTitle title={titleWithSubtitle}> - <div - class={mobileOpen ? "has-aside-mobile-expanded" : ""} - onClick={() => setMobileOpen(false)} - > - <NavigationBar - onMobileMenu={() => setMobileOpen(!mobileOpen)} - title={titleWithSubtitle} - /> - - <Sidebar mobile={mobileOpen} /> - </div> - </WithTitle> - ); - }} - </Match> - ); -} - -interface NotYetReadyAppMenuProps { - title: string; - onLogout?: () => void; -} - -interface NotifProps { - notification?: Notification; -} -export function NotificationCard({ - notification: n, -}: NotifProps): VNode | null { - if (!n) return null; - return ( - <div class="notification"> - <div class="columns is-vcentered"> - <div class="column is-12"> - <article - class={ - n.type === "ERROR" - ? "message is-danger" - : n.type === "WARN" - ? "message is-warning" - : "message is-info" - } - > - <div class="message-header"> - <p>{n.message}</p> - </div> - {n.description && <div class="message-body">{n.description}</div>} - </article> - </div> - </div> - </div> - ); -} - -export function NotYetReadyAppMenu({ - onLogout, - title, -}: NotYetReadyAppMenuProps): VNode { - const [mobileOpen, setMobileOpen] = useState(false); - - useEffect(() => { - document.title = `Taler Backoffice: ${title}`; - }, [title]); - - return ( - <div - class="has-aside-mobile-expanded" - // class={mobileOpen ? "has-aside-mobile-expanded" : ""} - onClick={() => setMobileOpen(false)} - > - <NavigationBar - onMobileMenu={() => setMobileOpen(!mobileOpen)} - title={title} - /> - {onLogout && <Sidebar mobile={mobileOpen} />} - </div> - ); -} - -export interface Notification { - message: string; - description?: string | VNode; - type: MessageType; -} - -export type ValueOrFunction<T> = T | ((p: T) => T); -export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS"; |