diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
4 files changed, 152 insertions, 48 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index 136302166..665b0de6f 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -20,7 +20,10 @@ */ import { Banner } from "./Banner"; -import { Fragment, h } from "preact"; +import { Fragment, h, VNode } from "preact"; +import { Avatar } from "../mui/Avatar"; +import { Icon } from "./styled"; +import { Typography } from "../mui/Typography"; export default { title: "mui/banner", @@ -44,11 +47,72 @@ function Wrapper({ children }: any) { </div> ); } +function SignalWifiOffIcon({ ...rest }: any): VNode { + return <Icon {...rest} />; +} export const BasicExample = () => ( <Fragment> <Wrapper> - <Banner /> + <p> + Example taken from: + <a + target="_blank" + rel="noreferrer" + href="https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df" + > + https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df + </a> + </p> + <Banner + elements={[ + { + icon: <SignalWifiOffIcon />, + description: ( + <Typography> + You have lost connection to the internet. This app is offline. + </Typography> + ), + }, + ]} + confirm={{ + label: "turn on wifi", + action: () => { + return null; + }, + }} + /> + </Wrapper> + </Fragment> +); + +export const PendingOperation = () => ( + <Fragment> + <Wrapper> + <Banner + title="PENDING TRANSACTIONS" + style={{ backgroundColor: "lightblue", padding: 8 }} + elements={[ + { + icon: ( + <Avatar + style={{ + border: "solid blue 1px", + color: "blue", + boxSizing: "border-box", + }} + > + P + </Avatar> + ), + description: ( + <Typography> + <b>EUR 37.95</b> - 5 feb 2022 + </Typography> + ), + }, + ]} + /> </Wrapper> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index f6af81184..09dfac816 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -1,64 +1,57 @@ -import { h, Fragment, VNode } from "preact"; +import { h, Fragment, VNode, JSX } from "preact"; import { Divider } from "../mui/Divider"; import { Button } from "../mui/Button"; import { Typography } from "../mui/Typography"; import { Avatar } from "../mui/Avatar"; import { Grid } from "../mui/Grid"; import { Paper } from "../mui/Paper"; -import { Icon } from "./styled"; -import settingsIcon from "../../static/img/settings_black_24dp.svg"; -// & > a > div.settings-icon { -// mask: url(${settingsIcon}) no-repeat center; -// background-color: white; -// width: 24px; -// height: 24px; -// margin-left: auto; -// margin-right: 8px; -// padding: 4px; -// } -// & > a.active { -// background-color: #f8faf7; -// color: #0042b2; -// font-weight: bold; -// } -// & > a.active > div.settings-icon { -// background-color: #0042b2; -// } -function SignalWifiOffIcon({ ...rest }: any): VNode { - return <Icon {...rest} />; +interface Props extends JSX.HTMLAttributes<HTMLDivElement> { + title?: string; + elements: { + icon?: VNode; + description: VNode; + }[]; + confirm?: { + label: string; + action: () => void; + }; } -export function Banner({}: {}) { +export function Banner({ title, elements, confirm, ...rest }: Props) { return ( <Fragment> - <Paper elevation={3} /*className={classes.paper}*/> - <Grid - container - // wrap="nowrap" - // spacing={10} - alignItems="center" - columns={3} - > - <Grid item xs={1}> - <Avatar> - <SignalWifiOffIcon style={{ backgroundColor: "red" }} /> - </Avatar> - </Grid> - <Grid item xs={1}> - <Typography> - You have lost connection to the internet. This app is offline. - </Typography> + <Paper elevation={0} {...rest}> + {title && ( + <Grid container> + <Grid item> + <Typography>{title}</Typography> + </Grid> </Grid> + )} + <Grid container wrap="nowrap" spacing={1} alignItems="center"> + {elements.map((e, i) => ( + <Fragment key={i}> + {e.icon && ( + <Grid item> + <Avatar>{e.icon}</Avatar> + </Grid> + )} + <Grid item>{e.description}</Grid> + </Fragment> + ))} </Grid> - <Grid container justifyContent="flex-end" spacing={8} columns={3}> - <Grid item xs={1}> - <Button color="primary">Turn on wifi</Button> + {confirm && ( + <Grid container justifyContent="flex-end" spacing={8}> + <Grid item> + <Button color="primary" onClick={confirm.action}> + {confirm.label} + </Button> + </Grid> </Grid> - </Grid> + )} </Paper> <Divider /> - {/* <CssBaseline /> */} </Fragment> ); } diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx new file mode 100644 index 000000000..99f43a62b --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -0,0 +1,46 @@ +import { Amounts, Transaction } from "@gnu-taler/taler-util"; +import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core"; +import { Fragment, h, VNode } from "preact"; +import { Avatar } from "../mui/Avatar"; +import { Typography } from "../mui/Typography"; +import Banner from "./Banner"; +import { Time } from "./Time"; + +interface Props { + transactions: Transaction[]; +} + +export function PendingTransactions({ transactions }: Props) { + return ( + <Banner + title="PENDING OPERATIONS" + style={{ backgroundColor: "lightblue", padding: 8 }} + elements={transactions.map((t) => { + const amount = Amounts.parseOrThrow(t.amountEffective); + return { + icon: ( + <Avatar + style={{ + border: "solid blue 1px", + color: "blue", + boxSizing: "border-box", + }} + > + {t.type.substring(0, 1)} + </Avatar> + ), + description: ( + <Typography> + <b> + {amount.currency} {Amounts.stringifyValue(amount)} + </b>{" "} + - <Time timestamp={t.timestamp} format="dd MMMM yyyy" /> + </Typography> + ), + }; + })} + /> + ); +} + +export default PendingTransactions; diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 80bfaa549..92f149ea3 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -778,6 +778,7 @@ export const WarningBox = styled(ErrorBox)` `; import settingsIcon from "../../../static/img/settings_black_24dp.svg"; +import wifiIcon from "../../../static/img/wifi.svg"; export const NavigationHeaderHolder = styled.div` width: 100%; @@ -827,7 +828,7 @@ export const NavigationHeader = styled.div` `; export const Icon = styled.div` - mask: url(${settingsIcon}) no-repeat center; + mask: url(${wifiIcon}) no-repeat center; background-color: gray; width: 24px; height: 24px; |