[taler-wallet-core] branch master updated (ef11eea5 -> 74b2d2fe)

[gnunet]

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

sebasjm pushed a change to branch master
in repository wallet-core.

    from ef11eea5 fix package prefix
     new c9a6f3d4 removing missing select
     new 74b2d2fe add language selector

The 2 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:
 .../src/components/SelectList.tsx                  | 46 +++++++++++++++++-----
 .../src/components/styled/index.tsx                | 45 +++++++++++++++++++++
 .../src/popup/Settings.tsx                         |  2 +-
 3 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx 
b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 2c4a106e..74b22177 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx
@@ -14,9 +14,8 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { VNode } from "preact";
-import { useRef, useState } from "preact/hooks";
 import { JSX } from "preact/jsx-runtime";
+import { NiceSelect } from "./styled/index";
 
 interface Props {
   value: string;
@@ -27,14 +26,41 @@ interface Props {
   }
   name: string;
   description?: string;
+  canBeNull?: boolean;
 }
 
-export function SelectList({ name, value, list, onChange, label, description 
}: Props): JSX.Element {
-  return <select name={name} id="slct">
-    <option selected disabled>Choose an option</option>
-    {Object.keys(list)
-      .filter((l) => l !== value)
-      .map(key => <option value={key} key={key}>{list[key]}</option> )
-    }
-  </select>
+export function SelectList({ name, value, list, canBeNull, onChange, label, 
description }: Props): JSX.Element {
+  console.log("==>", name, value)
+  return <div>
+    <label
+      htmlFor={`text-${name}`}
+      style={{ marginLeft: "0.5em", fontWeight: "bold" }}
+    > {label}</label>
+    <NiceSelect>
+      <select name={name} onChange={(e) => {
+        console.log(e.currentTarget.value, value)
+        onChange(e.currentTarget.value)
+      }}>
+        <option selected>
+          {list[value]}
+        </option>
+        {Object.keys(list)
+          .filter((l) => l !== value)
+          .map(key => <option value={key} key={key}>{list[key]}</option>)
+        }
+      </select>
+    </NiceSelect>
+    {description && <span
+      style={{
+        color: "#383838",
+        fontSize: "smaller",
+        display: "block",
+        marginLeft: "2em",
+      }}
+    >
+      {description}
+    </span>}
+
+  </div>
+
 }
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx 
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 7cc6d427..cf7f3e06 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -263,4 +263,49 @@ export const PopupNavigation = styled.div`
     font-weight: bold;
 
   }
+`;
+
+export const NiceSelect = styled.div`
+
+  & > select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    outline: 0;
+    box-shadow: none;
+    background-image: none;
+    background-color: white;
+
+    flex: 1;
+    padding: 0.5em 1em;
+    cursor: pointer;
+  }
+
+  position: relative;
+  display: flex;
+  width: 10em;
+  overflow: hidden;
+  border-radius: .25em;
+
+  &::after {
+    content: '\u25BC';
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5em 1em;
+    cursor: pointer;
+    pointer-events: none;
+    -webkit-transition: .25s all ease;
+    -o-transition: .25s all ease;
+    transition: .25s all ease;
+  }
+
+  &:hover::after {
+    /* color: #f39c12; */
+  }
+
+  &::-ms-expand {
+    display: none;
+  }
 `
diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx 
b/packages/taler-wallet-webextension/src/popup/Settings.tsx
index 9bb10a4e..18afcd10 100644
--- a/packages/taler-wallet-webextension/src/popup/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx
@@ -75,7 +75,7 @@ export function SettingsView({ lang, changeLang, deviceName, 
setDeviceName, perm
           onChange={changeLang}
           name="lang"
           list={names}
-          label={i18n.str`Lang`}
+          label={i18n.str`Language`}
           description="(Choose your preferred lang)"
         />
         <EditableText

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