diff options
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} |