diff options
author | Sebastian <sebasjm@gmail.com> | 2022-05-26 15:55:14 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-05-26 15:57:12 -0300 |
commit | 24162c1086c017305253c78280a82bfa9a572b1e (patch) | |
tree | 6842f44dad3fc029d44349527df8d0b09b92852d /packages/taler-wallet-webextension/src/components/Part.tsx | |
parent | 72d936eaf99ad1d5ee156ba8f156a983f4ec613c (diff) | |
download | wallet-core-24162c1086c017305253c78280a82bfa9a572b1e.tar.xz |
transaction details template
mayor change in the template of the transaction details for every
transaction
more work needs to be done in wallet core for tip and refund to show
more information about the merchant like logo and website
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/Part.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Part.tsx | 99 |
1 files changed, 94 insertions, 5 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index 21c0f65dc..58165a349 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -14,33 +14,122 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ import { PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; -import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js"; +import { useState } from "preact/hooks"; +import { + ExtraLargeText, + LargeText, + SmallBoldText, + SmallLightText, +} from "./styled/index.js"; export type Kind = "positive" | "negative" | "neutral"; interface Props { - title: VNode; + title: VNode | string; text: VNode | string; - kind: Kind; + kind?: Kind; big?: boolean; + showSign?: boolean; } -export function Part({ text, title, kind, big }: Props): VNode { +export function Part({ + text, + title, + kind = "neutral", + big, + showSign, +}: Props): VNode { const Text = big ? ExtraLargeText : LargeText; return ( <div style={{ margin: "1em" }}> - <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText> + <SmallBoldText style={{ marginBottom: "1em" }}>{title}</SmallBoldText> <Text style={{ color: kind == "positive" ? "green" : kind == "negative" ? "red" : "black", + fontWeight: "lighten", }} > + {!showSign || kind === "neutral" + ? undefined + : kind === "positive" + ? "+" + : "-"} {text} </Text> </div> ); } +const CollasibleBox = styled.div` + border: 1px solid black; + border-radius: 0.25em; + display: flex; + vertical-align: middle; + justify-content: space-between; + flex-direction: column; + /* margin: 0.5em; */ + padding: 0.5em; + /* margin: 1em; */ + /* width: 100%; */ + /* color: #721c24; */ + /* background: #f8d7da; */ + + & > div { + display: flex; + justify-content: space-between; + div { + margin-top: auto; + margin-bottom: auto; + } + & > button { + align-self: center; + font-size: 100%; + padding: 0; + height: 28px; + width: 28px; + } + } +`; +import arrowDown from "../svg/chevron-down.svg"; + +export function PartCollapsible({ text, title, big, showSign }: Props): VNode { + const Text = big ? ExtraLargeText : LargeText; + const [collapsed, setCollapsed] = useState(true); + + return ( + <CollasibleBox> + <div> + <SmallBoldText>{title}</SmallBoldText> + <button + onClick={() => { + setCollapsed((v) => !v); + }} + > + <div + style={{ + transform: !collapsed ? "scaleY(-1)" : undefined, + height: 24, + }} + dangerouslySetInnerHTML={{ __html: arrowDown }} + /> + </button> + </div> + {/* <SmallBoldText + style={{ + paddingBottom: "1em", + paddingTop: "1em", + paddingLeft: "1em", + border: "black solid 1px", + }} + > + + </SmallBoldText> */} + {!collapsed && <div style={{ display: "block" }}>{text}</div>} + </CollasibleBox> + ); +} + interface PropsPayto { payto: PaytoUri; kind: Kind; |