From 6a0c5263bba435b3ab3a8cda335ceadf7cdd4664 Mon Sep 17 00:00:00 2001
From: Florian Dold <florian@dold.me>
Date: Mon, 8 Nov 2021 16:51:23 +0100
Subject: anastasis-webui: ui tweaks

---
 .../anastasis-webui/src/components/menu/index.tsx  | 132 +++++++++++++--------
 1 file changed, 81 insertions(+), 51 deletions(-)

(limited to 'packages/anastasis-webui/src/components/menu/index.tsx')

diff --git a/packages/anastasis-webui/src/components/menu/index.tsx b/packages/anastasis-webui/src/components/menu/index.tsx
index febcd79c8..89add9603 100644
--- a/packages/anastasis-webui/src/components/menu/index.tsx
+++ b/packages/anastasis-webui/src/components/menu/index.tsx
@@ -15,41 +15,53 @@
  */
 
 import { ComponentChildren, Fragment, h, VNode } from "preact";
-import Match from 'preact-router/match';
+import Match from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
 import { NavigationBar } from "./NavigationBar";
 import { Sidebar } from "./SideBar";
 
-
-
-
 interface MenuProps {
   title: string;
 }
 
-function WithTitle({ title, children }: { title: string; children: ComponentChildren }): VNode {
+function WithTitle({
+  title,
+  children,
+}: {
+  title: string;
+  children: ComponentChildren;
+}): VNode {
   useEffect(() => {
-    document.title = `Taler Backoffice: ${title}`
-  }, [title])
-  return <Fragment>{children}</Fragment>
+    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>
-
+  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 {
@@ -60,37 +72,56 @@ interface NotYetReadyAppMenuProps {
 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>
+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>
-  </div>
+  );
 }
 
-export function NotYetReadyAppMenu({ onLogout, title }: NotYetReadyAppMenuProps): VNode {
-  const [mobileOpen, setMobileOpen] = useState(false)
+export function NotYetReadyAppMenu({
+  onLogout,
+  title,
+}: NotYetReadyAppMenuProps): VNode {
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
-    document.title = `Taler Backoffice: ${title}`
-  }, [title])
-
-  return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""} onClick={() => setMobileOpen(false)}>
-    <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} title={title} />
-    {onLogout && <Sidebar mobile={mobileOpen} />}
-  </div>
-
+    document.title = `Taler Backoffice: ${title}`;
+  }, [title]);
+
+  return (
+    <div
+      class={mobileOpen ? "has-aside-mobile-expanded" : ""}
+      onClick={() => setMobileOpen(false)}
+    >
+      <NavigationBar
+        onMobileMenu={() => setMobileOpen(!mobileOpen)}
+        title={title}
+      />
+      {onLogout && <Sidebar mobile={mobileOpen} />}
+    </div>
+  );
 }
 
 export interface Notification {
@@ -99,6 +130,5 @@ export interface Notification {
   type: MessageType;
 }
 
-export type ValueOrFunction<T> = T | ((p: T) => T)
-export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'
-
+export type ValueOrFunction<T> = T | ((p: T) => T);
+export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS";
-- 
cgit v1.2.3