From fb22009ec4799a624f00c228fbd7435b44c1cbac Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 10 Jan 2022 16:04:53 -0300 Subject: deposit design from belen, feature missing: kyc --- .../src/components/BalanceTable.tsx | 28 +++---- .../src/components/Loading.tsx | 20 +++++ .../src/components/MultiActionButton.tsx | 95 ++++++++++++++++++++++ .../src/components/styled/index.tsx | 64 ++++++++++----- 4 files changed, 169 insertions(+), 38 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/Loading.tsx create mode 100644 packages/taler-wallet-webextension/src/components/MultiActionButton.tsx (limited to 'packages/taler-wallet-webextension/src/components') diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx index 05a7d28dd..c69625cd2 100644 --- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx +++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx @@ -14,31 +14,28 @@ TALER; see the file COPYING. If not, see */ -import { amountFractionalBase, Amounts, Balance } from "@gnu-taler/taler-util"; +import { Amounts, amountToPretty, Balance } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; -import { - ButtonPrimary, - TableWithRoundRows as TableWithRoundedRows, -} from "./styled"; +import { TableWithRoundRows as TableWithRoundedRows } from "./styled"; export function BalanceTable({ balances, - goToWalletDeposit, + goToWalletHistory, }: { balances: Balance[]; - goToWalletDeposit: (currency: string) => void; + goToWalletHistory: (currency: string) => void; }): VNode { - const currencyFormatter = new Intl.NumberFormat("en-US"); return ( {balances.map((entry, idx) => { const av = Amounts.parseOrThrow(entry.available); - const v = currencyFormatter.format( - av.value + av.fraction / amountFractionalBase, - ); return ( - + goToWalletHistory(av.currency)} + style={{ cursor: "pointer" }} + > {av.currency} - {v} - - - goToWalletDeposit(av.currency)}> - Deposit - + {Amounts.stringifyValue(av)} ); diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx new file mode 100644 index 000000000..34edac551 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Loading.tsx @@ -0,0 +1,20 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ +import { h, VNode } from "preact"; + +export function Loading(): VNode { + return
Loading...
; +} diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx new file mode 100644 index 000000000..70d53640d --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -0,0 +1,95 @@ +import { h, VNode } from "preact"; +import arrowDown from "../../static/img/chevron-down.svg"; +import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled"; +import { useState } from "preact/hooks"; + +export interface Props { + label: (s: string) => string; + actions: string[]; + onClick: (s: string) => void; +} + +/** + * functionality: it will receive a list of actions, take the first actions as + * the first chosen action + * the user may change the chosen action + * when the user click the button it will call onClick with the chosen action + * as argument + * + * visually: it is a primary button with a select handler on the right + * + * @returns + */ +export function MultiActionButton({ + label, + actions, + onClick: doClick, +}: Props): VNode { + const defaultAction = actions.length > 0 ? actions[0] : ""; + + const [opened, setOpened] = useState(false); + const [selected, setSelected] = useState(defaultAction); + + const canChange = actions.length > 1; + const options = canChange ? actions.filter((a) => a !== selected) : []; + function select(m: string): void { + setSelected(m); + setOpened(false); + } + + if (!canChange) { + return ( + doClick(selected)}> + {label(selected)} + + ); + } + + return ( +
+ {opened && ( +
+ {options.map((m) => ( + select(m)}> + {label(m)} + + ))} +
+ )} + doClick(selected)} + style={{ + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + marginRight: 0, + }} + > + {label(selected)} + + + setOpened((s) => !s)} + style={{ + marginLeft: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }} + > + + +
+ ); +} diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 216a1fabc..2d16b496c 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -43,7 +43,7 @@ export const WalletAction = styled.div` } section { margin-bottom: 2em; - & button { + button { margin-right: 8px; margin-left: 8px; } @@ -92,6 +92,10 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` border-bottom: 1px solid black; border-top: 1px solid black; } + button { + margin-right: 8px; + margin-left: 8px; + } } & > header { @@ -123,7 +127,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` justify-content: space-between; display: flex; background-color: #f7f7f7; - & button { + button { margin-right: 8px; margin-left: 8px; } @@ -136,9 +140,9 @@ export const Middle = styled.div` height: 100%; `; -export const PopupBox = styled.div<{ noPadding?: boolean }>` +export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>` height: 290px; - width: 400px; + width: ${({ devMode }) => (!devMode ? "400px" : "500px")}; display: flex; flex-direction: column; justify-content: space-between; @@ -156,6 +160,10 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` border-bottom: 1px solid black; border-top: 1px solid black; } + button { + margin-right: 8px; + margin-left: 8px; + } } & > section[data-expanded] { @@ -196,7 +204,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` flex-direction: row; justify-content: space-between; display: flex; - & button { + button { margin-right: 8px; margin-left: 8px; } @@ -363,11 +371,11 @@ export const CenteredDialog = styled.div` export const Button = styled.button<{ upperCased?: boolean }>` display: inline-block; - zoom: 1; + /* zoom: 1; */ line-height: normal; white-space: nowrap; - vertical-align: middle; - text-align: center; + vertical-align: middle; //check this + /* text-align: center; */ cursor: pointer; user-select: none; box-sizing: border-box; @@ -379,7 +387,7 @@ export const Button = styled.button<{ upperCased?: boolean }>` /* color: #444; rgba not supported (IE 8) */ color: rgba(0, 0, 0, 0.8); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ - border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ + /* border: none rgba(0, 0, 0, 0); IE9 + everything else */ background-color: "#e6e6e6"; text-decoration: none; border-radius: 2px; @@ -401,11 +409,11 @@ export const Button = styled.button<{ upperCased?: boolean }>` } :hover { - filter: alpha(opacity=90); + filter: alpha(opacity=80); background-image: linear-gradient( transparent, - rgba(0, 0, 0, 0.05) 40%, - rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.1) 40%, + rgba(0, 0, 0, 0.2) ); } `; @@ -415,7 +423,7 @@ export const Link = styled.a<{ upperCased?: boolean }>` zoom: 1; line-height: normal; white-space: nowrap; - vertical-align: middle; + /* vertical-align: middle; */ text-align: center; cursor: pointer; user-select: none; @@ -463,8 +471,8 @@ export const FontIcon = styled.div` /* vertical-align: text-top; */ `; export const ButtonBox = styled(Button)` - padding: 0.5em; - font-size: x-small; + padding: 8px; + /* font-size: small; */ & > ${FontIcon} { width: 1em; @@ -472,12 +480,13 @@ export const ButtonBox = styled(Button)` display: inline; line-height: 0px; } - background-color: transparent; + background-color: #f7f7f7; border: 1px solid; border-radius: 4px; border-color: black; color: black; + /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */ /* -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; */ `; @@ -499,6 +508,7 @@ export const LinkPrimary = styled(Link)` export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` font-size: ${({ small }) => (small ? "small" : "inherit")}; background-color: rgb(66, 184, 221); + border-color: rgb(66, 184, 221); `; export const ButtonBoxPrimary = styled(ButtonBox)` color: rgb(66, 184, 221); @@ -714,6 +724,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>` border-top-right-radius: 0.25em; border-color: ${({ invalid }) => (!invalid ? "lightgray" : "red")}; } + margin-bottom: 16px; `; export const ErrorText = styled.div` @@ -772,13 +783,13 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>` display: flex; & > div { - width: 400px; + width: ${({ devMode }) => (!devMode ? "400px" : "500px")}; } & > div > a { color: #f8faf7; display: inline-block; - width: calc(400px / ${({ devMode }) => (!devMode ? 4 : 5)}); + width: 100px; text-align: center; text-decoration: none; vertical-align: middle; @@ -804,10 +815,9 @@ export const NiceSelect = styled.div` box-shadow: none; background-image: ${image}; - background-position: right 0.5rem center; + background-position: right 8px center; background-repeat: no-repeat; background-size: 1.5em 1.5em; - padding-right: 2.5rem; background-color: white; @@ -967,3 +977,17 @@ export const StyledCheckboxLabel = styled.div` box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor; } `; + +export const ParagraphClickable = styled.p` + cursor: pointer; + margin: 0px; + padding: 8px 16px; + :hover { + filter: alpha(opacity=80); + background-image: linear-gradient( + transparent, + rgba(0, 0, 0, 0.1) 40%, + rgba(0, 0, 0, 0.2) + ); + } +`; -- cgit v1.2.3