[taler-merchant-backoffice] 02/07: lang selector behavior

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository merchant-backoffice.

commit a868b2376d1fd6fc83118a1cc2cb76ff6671c8b8
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Mar 1 17:46:11 2021 -0300

    lang selector behavior
---
 packages/frontend/src/components/auth/index.tsx    |  2 +-
 .../frontend/src/components/form/InputArray.tsx    |  2 +-
 .../frontend/src/components/menu/LangSelector.tsx  | 21 +++++++++++++++++----
 .../frontend/src/components/menu/NavigationBar.tsx | 11 +++++++----
 packages/frontend/src/components/menu/SideBar.tsx  | 11 +++++------
 packages/frontend/src/components/menu/index.tsx    | 22 +++++++++++++++++++---
 packages/frontend/src/index.tsx                    |  4 ++--
 packages/frontend/src/schemas/index.ts             |  1 +
 8 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/auth/index.tsx 
b/packages/frontend/src/components/auth/index.tsx
index 8eaa659..456a111 100644
--- a/packages/frontend/src/components/auth/index.tsx
+++ b/packages/frontend/src/components/auth/index.tsx
@@ -81,7 +81,7 @@ export function LoginModal({ onConfirm, withMessage }: 
Props): VNode {
 
               <div class="field">
                 <p class="control is-expanded">
-                  <input class="input" type="text" placeholder={true ? "set 
new token" : "hidden token value"} name="id" value={token} onInput={(e): void 
=> setToken(e?.currentTarget.value)} />
+                  <input class="input" type="text" placeholder={"set new 
token"} name="id" value={token} onInput={(e): void => 
setToken(e?.currentTarget.value)} />
                 </p>
               </div>
             </div>
diff --git a/packages/frontend/src/components/form/InputArray.tsx 
b/packages/frontend/src/components/form/InputArray.tsx
index d7aef82..da9b48d 100644
--- a/packages/frontend/src/components/form/InputArray.tsx
+++ b/packages/frontend/src/components/form/InputArray.tsx
@@ -87,7 +87,7 @@ export function InputArray<T>({ name, readonly, addonBefore, 
isValid, fromStr =
           <Message id={`validation.${error.type}`} 
fields={error.params}>{error.message}</Message>
         </p> : null}
         {array.map(v => <div class="tags has-addons">
-          <span class="tag is-medium is-info">{v}</span>
+          <span class="tag is-medium is-info" 
style={{maxWidth:'90%'}}>{v}</span>
           <a class="tag is-medium is-danger is-delete" onClick={() => {
             onChange(array.filter(f => f !== v) as any);
             setCurrentValue(toStr(v));
diff --git a/packages/frontend/src/components/menu/LangSelector.tsx 
b/packages/frontend/src/components/menu/LangSelector.tsx
index 25a5de7..27a58a0 100644
--- a/packages/frontend/src/components/menu/LangSelector.tsx
+++ b/packages/frontend/src/components/menu/LangSelector.tsx
@@ -1,12 +1,25 @@
-import { h, VNode } from "preact";
+/*
+ This file is part of GNU Taler
+ (C) 2021 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 { h, VNode } from "preact";
 import { useContext, useState } from "preact/hooks";
 import { BackendContext } from "../../context/backend";
 import langIcon from '../../assets/icons/languageicon.svg'
 import * as messages from '../../messages'
 
-interface Props {
-}
-
 type LangsNames = {
   [P in keyof typeof messages]: string
 }
diff --git a/packages/frontend/src/components/menu/NavigationBar.tsx 
b/packages/frontend/src/components/menu/NavigationBar.tsx
index 740d78a..bb9719b 100644
--- a/packages/frontend/src/components/menu/NavigationBar.tsx
+++ b/packages/frontend/src/components/menu/NavigationBar.tsx
@@ -32,10 +32,13 @@ export function NavigationBar({ onMobileMenu }: Props): 
VNode {
     <div class="navbar-brand">
       <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 
}}>Instances</span>
 
-      <a role="button" class="navbar-burger" aria-label="menu" 
aria-expanded="false" onClick={onMobileMenu}>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
+      <a role="button" class="navbar-burger" aria-label="menu" 
aria-expanded="false" onClick={(e) => {
+        onMobileMenu()
+        e.stopPropagation()
+      }}>
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
       </a>
     </div>
 
diff --git a/packages/frontend/src/components/menu/SideBar.tsx 
b/packages/frontend/src/components/menu/SideBar.tsx
index d95ae81..983eb86 100644
--- a/packages/frontend/src/components/menu/SideBar.tsx
+++ b/packages/frontend/src/components/menu/SideBar.tsx
@@ -27,19 +27,18 @@ import { LangSelector } from './LangSelector';
 
 interface Props {
   onLogout: () => void;
-  onClick: () => void;
   mobile?: boolean;
 }
 
-export function Sidebar({ onLogout, onClick }: Props): VNode {
+export function Sidebar({ mobile, onLogout }: Props): VNode {
   const config = useConfigContext();
   const backend = useContext(BackendContext);
 
   return (
-    <aside class="aside is-placed-left is-expanded" onClick={onClick}>
-      <div class="footer" onClick={(e)=>{return e.stopImmediatePropagation()}}>
+    <aside class="aside is-placed-left is-expanded">
+      { mobile && <div class="footer" onClick={(e)=>{return 
e.stopImmediatePropagation()}}>
         <LangSelector />
-      </div>
+      </div> }
       <div class="aside-tools">
         <div class="aside-tools-label">
           <div><b>Taler</b> Merchant Office</div>
@@ -95,7 +94,7 @@ export function Sidebar({ onLogout, onClick }: Props): VNode {
           </li>
           {!backend.token ? null : <li>
             <a class="has-icon is-state-info is-hoverable" onClick={(): void 
=> onLogout()}>
-              <span class="icon"><i class="mdi mdi-logout default"></i></span>
+              <span class="icon"><i class="mdi mdi-logout default" /></span>
               <span class="menu-item-label">Log out</span>
             </a>
           </li>}
diff --git a/packages/frontend/src/components/menu/index.tsx 
b/packages/frontend/src/components/menu/index.tsx
index ec23f7e..413cfa1 100644
--- a/packages/frontend/src/components/menu/index.tsx
+++ b/packages/frontend/src/components/menu/index.tsx
@@ -1,4 +1,20 @@
-import { Fragment, h, VNode } from "preact";
+/*
+ This file is part of GNU Taler
+ (C) 2021 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 { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NavigationBar } from "./NavigationBar";
 import { Sidebar } from "./SideBar";
@@ -10,9 +26,9 @@ interface Props {
 
 export function Menu({ sidebar, onLogout }: Props): VNode {
   const [mobileOpen, setMobileOpen] = useState(false)
-  return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""}>
+  return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""} 
onClick={() => setMobileOpen(false)}>
     <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} />
-    {sidebar && <Sidebar onLogout={onLogout} mobile={mobileOpen} onClick={() 
=> setMobileOpen(false)} />}
+    {sidebar && <Sidebar onLogout={onLogout} mobile={mobileOpen} />}
   </div>
 
 }
\ No newline at end of file
diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx
index 19b6bd7..3624af2 100644
--- a/packages/frontend/src/index.tsx
+++ b/packages/frontend/src/index.tsx
@@ -80,12 +80,12 @@ function ApplicationStatusRoutes(): VNode {
   const addTokenCleaner = (c: () => void) => setCleaners(cs => [...cs, c])
   const addTokenCleanerNemo = useCallback((c: () => void) => { 
addTokenCleaner(c) }, [cleaner])
 
-  const v = backendConfig.data?.currency + ' ' + backendConfig.data?.version
+  const v = `${backendConfig.data?.currency} ${backendConfig.data?.version}`
   const ctx = useMemo(() => ({ currency: backendConfig.data?.currency || '', 
version: backendConfig.data?.version || '' }), [v])
 
   if (!backendConfig.data) {
 
-    if (!backendConfig.error) return <div class="is-loading"></div>
+    if (!backendConfig.error) return <div class="is-loading" />
 
     if (backendConfig.unauthorized) {
       return <div id="app">
diff --git a/packages/frontend/src/schemas/index.ts 
b/packages/frontend/src/schemas/index.ts
index a2def9d..f772cf3 100644
--- a/packages/frontend/src/schemas/index.ts
+++ b/packages/frontend/src/schemas/index.ts
@@ -51,6 +51,7 @@ export const InstanceSchema = yup.object().shape({
   auth_token: yup.string()
     .min(8).max(20)
     .optional()
+    .nullable()
     .meta({type: 'secured'}),
   payto_uris: yup.array().of(yup.string())
     .min(1)

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.