[taler-merchant-backoffice] branch master updated (0f2925b -> 89cb08b)

[gnunet]

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

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

    from 0f2925b  sebas
     new ab4b1f1  better contrast
     new bddf351  update html lang after updating lang
     new 353f964  better style for lang selector
     new 89cb08b  fix: #7384

The 4 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 packages/bank/src/components/menu/LangSelector.tsx | 97 ++++++++--------------
 packages/bank/src/hooks/index.ts                   | 43 ++++++----
 packages/bank/src/scss/colors-bank.scss            |  9 +-
 packages/bank/src/scss/demo.scss                   | 17 ++--
 packages/bank/src/scss/pure.scss                   |  2 +-
 5 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/packages/bank/src/components/menu/LangSelector.tsx 
b/packages/bank/src/components/menu/LangSelector.tsx
index 3b32ba8..5bd7e4f 100644
--- a/packages/bank/src/components/menu/LangSelector.tsx
+++ b/packages/bank/src/components/menu/LangSelector.tsx
@@ -20,7 +20,7 @@
  */
 
 import { h, VNode, Fragment } from 'preact';
-import { useState } from 'preact/hooks';
+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';
@@ -47,81 +47,56 @@ 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)
+  useEffect(() => {
+    function bodyKeyPress(event:KeyboardEvent) {
+      console.log(event.code)
+      if (event.code === 'Escape') 
+        setHidden(true);
+      
+    }
+    function bodyOnClick(event:Event) {
+      setHidden(true);
+    }
+    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)
+    }
+  },[])
   return (
     <Fragment>
-      <span>{getLangName(lang)}</span>
-      <div style="position: relative; overflow: visible;">
-        <div
-          class="nav"
-          style="position: absolute; background: inherit; max-height: 60vh; 
overflow-y: scroll">
-          <br />
-          {Object.keys(messages)
-            .filter((l) => l !== lang)
-            .map((l) => (
-              <a
-                key={l}
-                class="navbtn"
-                value={l}
-                onClick={() => {
-                  changeLanguage(l);
-                  setUpdatingLang(false);
-                }}>
-                {getLangName(l)}
-              </a>
-            ))}
-          <br />
-        </div>
-      </div>
-    </Fragment>
-  );
-}
-
-// Unused (?)
-export function LangSelector(): VNode {
-  const [updatingLang, setUpdatingLang] = useState(false);
-  const { lang, changeLanguage } = useTranslationContext();
-
-  return (
-    <div class="dropdown is-active ">
-      <div class="dropdown-trigger">
-        <button
-          class="button has-tooltip-left"
-          data-tooltip="change language selection"
-          aria-haspopup="true"
-          aria-controls="dropdown-menu"
-          onClick={() => setUpdatingLang(!updatingLang)}
-        >
-          <div class="icon is-small is-left">
-            <img src={langIcon} />
-          </div>
-          <span>{getLangName(lang)}</span>
-          <div class="icon is-right">
-            <i class="mdi mdi-chevron-down" />
-          </div>
-        </button>
-      </div>
-      {updatingLang && (
-        <div class="dropdown-menu" id="dropdown-menu" role="menu">
-          <div class="dropdown-content">
+      <button name="language" onClick={(ev) => {
+        setHidden(h => !h);
+        ev.stopPropagation();
+      }}>
+        {getLangName(lang)}
+      </button>
+      <div id="lang" class={hidden ? 'hide' : ''}>
+        <div style="position: relative; overflow: visible;">
+          <div
+            class="nav"
+            style="position: absolute; max-height: 60vh; overflow-y: scroll">
             {Object.keys(messages)
               .filter((l) => l !== lang)
               .map((l) => (
                 <a
                   key={l}
-                  class="dropdown-item"
+                  href="#"
+                  class="navbtn langbtn"
                   value={l}
                   onClick={() => {
                     changeLanguage(l);
                     setUpdatingLang(false);
-                  }}
-                >
+                  }}>
                   {getLangName(l)}
                 </a>
               ))}
+            <br />
           </div>
         </div>
-      )}
-    </div>
+      </div>
+    </Fragment>
   );
 }
diff --git a/packages/bank/src/hooks/index.ts b/packages/bank/src/hooks/index.ts
index a75b00d..09ce989 100644
--- a/packages/bank/src/hooks/index.ts
+++ b/packages/bank/src/hooks/index.ts
@@ -53,7 +53,7 @@ export function useBackendURL(
 export function useBackendDefaultToken(): [
   string | undefined,
   StateUpdater<string | undefined>,
-  ] {
+] {
   return useLocalStorage('backend-token');
 }
 
@@ -64,9 +64,9 @@ export function useBackendInstanceToken(
   const [defaultToken, defaultSetToken] = useBackendDefaultToken();
 
   // instance named 'default' use the default token
-  if (id === 'default') 
+  if (id === 'default')
     return [defaultToken, defaultSetToken];
-  
+
   return [token, setToken];
 }
 
@@ -76,7 +76,22 @@ export function useLang(initial?: string): [string, 
StateUpdater<string>] {
       ? navigator.language || (navigator as any).userLanguage
       : undefined;
   const defaultLang = (browserLang || initial || 'en').substring(0, 2);
-  return useNotNullLocalStorage('lang-preference', defaultLang);
+  const [value, setValue] = useNotNullLocalStorage('lang-preference', 
defaultLang);
+  function updateValue(newValue: (string | ((v: string) => string))) {
+    if (document.body.parentElement) {
+      const htmlElement = document.body.parentElement
+      if (typeof newValue === 'string') {
+        htmlElement.lang = newValue;
+        setValue(newValue)
+      } else if (typeof newValue === 'function')
+        setValue((old) => {
+          const nv = newValue(old)
+          htmlElement.lang = nv;
+          return nv
+        })
+    } else setValue(newValue)
+  }
+  return [value, updateValue]
 }
 
 export function useLocalStorage(
@@ -96,13 +111,13 @@ export function useLocalStorage(
   ) => {
     setStoredValue((p) => {
       const toStore = value instanceof Function ? value(p) : value;
-      if (typeof window !== 'undefined') 
-        if (!toStore) 
+      if (typeof window !== 'undefined')
+        if (!toStore)
           window.localStorage.removeItem(key);
-        else 
+        else
           window.localStorage.setItem(key, toStore);
-        
-      
+
+
       return toStore;
     });
   };
@@ -123,13 +138,13 @@ export function useNotNullLocalStorage(
   const setValue = (value: string | ((val: string) => string)) => {
     const valueToStore = value instanceof Function ? value(storedValue) : 
value;
     setStoredValue(valueToStore);
-    if (typeof window !== 'undefined') 
-      if (!valueToStore) 
+    if (typeof window !== 'undefined')
+      if (!valueToStore)
         window.localStorage.removeItem(key);
-      else 
+      else
         window.localStorage.setItem(key, valueToStore);
-      
-    
+
+
   };
 
   return [storedValue, setValue];
diff --git a/packages/bank/src/scss/colors-bank.scss 
b/packages/bank/src/scss/colors-bank.scss
index 8f41bdf..c346109 100644
--- a/packages/bank/src/scss/colors-bank.scss
+++ b/packages/bank/src/scss/colors-bank.scss
@@ -2,13 +2,15 @@ nav,
 nav a,
 nav span,
 .navcontainer,
+nav button,
 .demobar,
 .navbtn {
   color: white;
-  background: #c00000;
+  background: #a00000;
 }
 
 nav a.active,
+nav button,
 nav span.active,
 .navbtn.active {
   background-color: #7a0606;
@@ -17,8 +19,13 @@ nav span.active,
 nav a.active:hover,
 nav span.active:hover,
 .navbtn.active:hover,
+nav button:hover,
 nav a:hover,
 nav span:hover,
 .navbtn:hover {
   background: #df3d3d;
 }
+
+nav a.navbtn.langbtn:focus {
+  background-color: #df3d3d;
+}
\ No newline at end of file
diff --git a/packages/bank/src/scss/demo.scss b/packages/bank/src/scss/demo.scss
index 1452a66..71db4b4 100644
--- a/packages/bank/src/scss/demo.scss
+++ b/packages/bank/src/scss/demo.scss
@@ -76,6 +76,7 @@ nav {
 }
 
 nav a,
+nav button,
 nav span,
 .navbtn {
   border: none;
@@ -89,6 +90,7 @@ nav span,
 }
 
 nav a,
+nav button,
 nav span,
 .navbtn {
   padding: 15px 32px;
@@ -107,6 +109,7 @@ nav span.active,
 }
 
 nav a.active:hover,
+nav button.active:hover,
 nav span.active:hover,
 .navbtn.active:hover {
   background: #3daee9;
@@ -122,16 +125,16 @@ nav .right {
   float: right;
   margin-right: 5vw;
 }
-nav .right div.nav {
+nav .hide div.nav {
   display: none;
 }
-nav .right div.nav:hover {
-  display: block;
-}
+// nav .right div.nav:hover {
+//   display: block;
+// }
 
-nav .right:hover div.nav {
-  display: block;
-}
+// nav .right:hover div.nav {
+//   display: block;
+// }
 
 .langbtn {
   width: 100%;
diff --git a/packages/bank/src/scss/pure.scss b/packages/bank/src/scss/pure.scss
index 3dd68e6..0d804d6 100644
--- a/packages/bank/src/scss/pure.scss
+++ b/packages/bank/src/scss/pure.scss
@@ -736,7 +736,7 @@ this the same font stack that Normalize.css sets for the 
`body`.
 .pure-button-selected,
 a.pure-button-primary,
 a.pure-button-selected {
-  background-color: #0078e7;
+  background-color: #00509b;
   color: #fff; }
 
 /* Button Groups */

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