aboutsummaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension
diff options
context:
space:
mode:
Diffstat (limited to 'packages/taler-wallet-webextension')
-rw-r--r--packages/taler-wallet-webextension/src/components/SelectList.tsx46
-rw-r--r--packages/taler-wallet-webextension/src/components/styled/index.tsx45
-rw-r--r--packages/taler-wallet-webextension/src/popup/Settings.tsx6
3 files changed, 84 insertions, 13 deletions
diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 2c4a106ee..74b221777 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 7cc6d427a..cf7f3e06a 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 7f7b5e005..18afcd100 100644
--- a/packages/taler-wallet-webextension/src/popup/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx
@@ -70,14 +70,14 @@ export function SettingsView({ lang, changeLang, deviceName, setDeviceName, perm
<div>
<section style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}>
<h2><i18n.Translate>Wallet</i18n.Translate></h2>
- {/* <SelectList
+ <SelectList
value={lang}
onChange={changeLang}
name="lang"
list={names}
- label={i18n.str`Lang`}
+ label={i18n.str`Language`}
description="(Choose your preferred lang)"
- /> */}
+ />
<EditableText
value={deviceName}
onChange={setDeviceName}