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) { ); } +function SignalWifiOffIcon({ ...rest }: any): VNode { + return ; +} export const BasicExample = () => ( - +

+ Example taken from: + + https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df + +

+ , + description: ( + + You have lost connection to the internet. This app is offline. + + ), + }, + ]} + confirm={{ + label: "turn on wifi", + action: () => { + return null; + }, + }} + /> + + +); + +export const PendingOperation = () => ( + + + + P + + ), + description: ( + + EUR 37.95 - 5 feb 2022 + + ), + }, + ]} + /> ); 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 ; +interface Props extends JSX.HTMLAttributes { + title?: string; + elements: { + icon?: VNode; + description: VNode; + }[]; + confirm?: { + label: string; + action: () => void; + }; } -export function Banner({}: {}) { +export function Banner({ title, elements, confirm, ...rest }: Props) { return ( - - - - - - - - - - You have lost connection to the internet. This app is offline. - + + {title && ( + + + {title} + + )} + + {elements.map((e, i) => ( + + {e.icon && ( + + {e.icon} + + )} + {e.description} + + ))} - - - + {confirm && ( + + + + - + )} - {/* */} ); } 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 ( + { + const amount = Amounts.parseOrThrow(t.amountEffective); + return { + icon: ( + + {t.type.substring(0, 1)} + + ), + description: ( + + + {amount.currency} {Amounts.stringifyValue(amount)} + {" "} + - + ), + }; + })} + /> + ); +} + +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; diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx index d5bd9d421..091964a63 100644 --- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx +++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { h, Fragment, VNode, ComponentChildren } from "preact"; +import { h, JSX, VNode, ComponentChildren } from "preact"; import { theme } from "./style"; const root = css` @@ -33,7 +33,7 @@ const avatarImageStyle = css` text-indent: 10000; `; -interface Props { +interface Props extends JSX.HTMLAttributes { variant?: "circular" | "rounded" | "square"; children?: ComponentChildren; } diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx index f3272a57b..b185504e4 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.tsx @@ -15,6 +15,7 @@ interface Props { startIcon?: VNode; variant?: "contained" | "outlined" | "text"; color?: "primary" | "secondary" | "success" | "error" | "info" | "warning"; + onClick: () => void; } const baseStyle = css` @@ -139,6 +140,7 @@ export function Button({ variant = "text", size = "medium", color = "primary", + onClick, }: Props): VNode { const style = css` user-select: none; diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx index 3c9361326..7db608d27 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx @@ -178,6 +178,26 @@ export const Responsive12Spacing = () => ( ); +export const ResponsiveAuthWidth = () => ( + + + + + item 1 + + + item 2 short + + + item 3 with long text + + + item 4 + + + + +); export const Example = () => (

Item row space is responsive: xs=6 sm=4 md=1

diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx index ccabed060..345305fe1 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx @@ -90,6 +90,20 @@ const columnGapVariant = css` padding-left: var(--space-col-md); } } + ${theme.breakpoints.up("lg")} { + width: calc(100% + var(--space-col-lg)); + margin-left: calc(-1 * var(--space-col-lg)); + & > div { + padding-left: var(--space-col-lg); + } + } + ${theme.breakpoints.up("xl")} { + width: calc(100% + var(--space-col-xl)); + margin-left: calc(-1 * var(--space-col-xl)); + & > div { + padding-left: var(--space-col-xl); + } + } `; const rowGapVariant = css` ${theme.breakpoints.up("xs")} { @@ -110,31 +124,77 @@ const rowGapVariant = css` padding-top: var(--space-row-md); } } + ${theme.breakpoints.up("lg")} { + margin-top: calc(-1 * var(--space-row-lg)); + & > div { + padding-top: var(--space-row-lg); + } + } + ${theme.breakpoints.up("xl")} { + margin-top: calc(-1 * var(--space-row-xl)); + & > div { + padding-top: var(--space-row-xl); + } + } `; -const sizeVariant = css` +const sizeVariantXS = css` ${theme.breakpoints.up("xs")} { flex-basis: var(--relation-col-vs-xs); flex-grow: 0; max-width: var(--relation-col-vs-xs); } +`; +const sizeVariantSM = css` ${theme.breakpoints.up("sm")} { flex-basis: var(--relation-col-vs-sm); flex-grow: 0; max-width: var(--relation-col-vs-sm); } +`; +const sizeVariantMD = css` ${theme.breakpoints.up("md")} { flex-basis: var(--relation-col-vs-md); flex-grow: 0; max-width: var(--relation-col-vs-md); } `; +const sizeVariantLG = css` + ${theme.breakpoints.up("lg")} { + flex-basis: var(--relation-col-vs-lg); + flex-grow: 0; + max-width: var(--relation-col-vs-lg); + } +`; +const sizeVariantXL = css` + ${theme.breakpoints.up("xl")} { + flex-basis: var(--relation-col-vs-xl); + flex-grow: 0; + max-width: var(--relation-col-vs-xl); + } +`; -const GridContext = createContext(toResponsive(12)); +const sizeVariantExpand = css` + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +`; -function toResponsive(v: number | Partial): ResponsiveSize { +const sizeVariantAuto = css` + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + max-width: none; + width: auto; +`; + +const GridContext = createContext>(toResponsive(12)); + +function toResponsive( + v: number | Partial, +): Partial { const p = typeof v === "number" ? { xs: v } : v; - const xs = p.xs || 12; + const xs = p.xs; const sm = p.sm || xs; const md = p.md || sm; const lg = p.lg || md; @@ -174,6 +234,7 @@ export function Grid({ const columnSpacing = csp ? toResponsive(csp) : toResponsive(spacing); const ssize = toResponsive({ xs, md, lg, xl, sm } as any); + console.log(ssize); if (container) { console.log(rowSpacing); @@ -197,23 +258,51 @@ export function Grid({ const relationStyles = !item ? {} : { - "--relation-col-vs-sm": relation(columns, ssize, "sm"), - "--relation-col-vs-lg": relation(columns, ssize, "lg"), "--relation-col-vs-xs": relation(columns, ssize, "xs"), - "--relation-col-vs-xl": relation(columns, ssize, "xl"), + "--relation-col-vs-sm": relation(columns, ssize, "sm"), "--relation-col-vs-md": relation(columns, ssize, "md"), + "--relation-col-vs-lg": relation(columns, ssize, "lg"), + "--relation-col-vs-xl": relation(columns, ssize, "xl"), }; return (
{children} @@ -230,8 +320,8 @@ export function Grid({ ); } function relation( - cols: ResponsiveSize, - values: ResponsiveSize, + cols: Partial, + values: Partial, size: ResponsiveKeys, ) { const colsNum = typeof cols === "number" ? cols : cols[size] || 12; diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx index 00eeda324..6209aa7a0 100644 --- a/packages/taler-wallet-webextension/src/mui/Paper.tsx +++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { h, Fragment, VNode, ComponentChildren } from "preact"; +import { h, JSX, VNode, ComponentChildren } from "preact"; import { alpha } from "./colors/manipulation"; import { theme } from "./style"; @@ -20,17 +20,20 @@ const baseStyle = css` } `; +interface Props extends JSX.HTMLAttributes { + elevation?: number; + square?: boolean; + variant?: "elevation" | "outlined"; + children?: ComponentChildren; +} + export function Paper({ elevation = 1, square, variant = "elevation", children, -}: { - elevation?: number; - square?: boolean; - variant?: "elevation" | "outlined"; - children?: ComponentChildren; -}): VNode { + ...rest +}: Props): VNode { return (
{children}
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx index 830f1005a..7ff4a694c 100644 --- a/packages/taler-wallet-webextension/src/mui/Typography.tsx +++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx @@ -1,5 +1,6 @@ import { css } from "@linaria/core"; import { h, Fragment, VNode, ComponentChildren } from "preact"; +import { theme } from "./style"; type VariantEnum = | "body1" @@ -74,6 +75,7 @@ export function Typography({ : { textAlign: align, }; + console.log("typograph", cmp, variant); return h( cmp, { @@ -82,6 +84,7 @@ export function Typography({ noWrap && noWrapStyle, gutterBottom && gutterBottomStyle, paragraph && paragraphStyle, + theme.typography[variant as "button"], //FIXME: implement the rest of the typography and remove the casting ].join(" "), style: { ...alignStyle, diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index e2af05c49..5f9cd2244 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -24,7 +24,7 @@ export function pxToRem(size: number): string { export interface Spacing { (): string; - (value: number): string; + (value?: number): string; (topBottom: number, rightLeft: number): string; (top: number, rightLeft: number, bottom: number): string; (top: number, right: number, bottom: number, left: number): string; @@ -184,11 +184,14 @@ function createTheme() { spacing: spacingInput, }); - const spacing = (...argsInput: ReadonlyArray): string => { + const spacing = ( + ...argsInput: ReadonlyArray + ): string => { const args = argsInput.length === 0 ? [1] : argsInput; return args .map((argument) => { + if (argument === undefined) return ""; const output = transform(argument); return typeof output === "number" ? `${output}px` : output; }) @@ -348,6 +351,7 @@ function createTheme() { // ...other // } = typography; const variants = { + // (fontWeight, size, lineHeight, letterSpacing, casing) => // h1: buildVariant(fontWeightLight, 96, 1.167, -1.5), // h2: buildVariant(fontWeightLight, 60, 1.2, -0.5), // h3: buildVariant(fontWeightRegular, 48, 1.167, 0), @@ -356,7 +360,21 @@ function createTheme() { // h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15), // subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15), // subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1), + body1: css` + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: ${fontWeightRegular}; + font-size: ${pxToRem(16)}; + line-height: 1.5; + letter-spacing: ${round(0.15 / 16)}em; + `, // body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15), + body2: css` + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: ${fontWeightRegular}; + font-size: ${pxToRem(14)}; + line-height: 1.43; + letter-spacing: ${round(0.15 / 14)}em; + `, // body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15), button: css` font-family: "Roboto", "Helvetica", "Arial", sans-serif; @@ -366,6 +384,7 @@ function createTheme() { letter-spacing: ${round(0.4 / 14)}em; text-transform: uppercase; `, + /* just of caseAllCaps */ // button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps), // caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4), // overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps), diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index d7bfdf545..199ff10df 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -14,7 +14,13 @@ TALER; see the file COPYING. If not, see */ -import { Amounts, Balance, i18n } from "@gnu-taler/taler-util"; +import { + Amounts, + Balance, + i18n, + NotificationType, + Transaction, +} from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { BalanceTable } from "../components/BalanceTable"; @@ -22,6 +28,7 @@ import { JustInDevMode } from "../components/JustInDevMode"; import { Loading } from "../components/Loading"; import { LoadingError } from "../components/LoadingError"; import { MultiActionButton } from "../components/MultiActionButton"; +import PendingTransactions from "../components/PendingTransactions"; import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { AddNewActionView } from "../wallet/AddNewActionView"; @@ -39,8 +46,19 @@ export function BalancePage({ goToWalletHistory, }: Props): VNode { const [addingAction, setAddingAction] = useState(false); - const state = useAsyncAsHook(wxApi.getBalance); - const balances = !state || state.hasError ? [] : state.response.balances; + const state = useAsyncAsHook( + async () => ({ + balance: await wxApi.getBalance(), + pending: await wxApi.getTransactions(), + }), + [NotificationType.WithdrawGroupFinished], + ); + const balances = + !state || state.hasError ? [] : state.response.balance.balances; + const pending = + !state || state.hasError + ? [] + : state.response.pending.transactions.filter((t) => t.pending); if (!state) { return ; @@ -62,6 +80,7 @@ export function BalancePage({ return ( void; goToAddAction: () => void; goToWalletDeposit: (currency: string) => void; @@ -79,6 +99,7 @@ export interface BalanceViewProps { export function BalanceView({ balances, + pending, goToWalletManualWithdraw, goToWalletDeposit, goToWalletHistory, @@ -96,6 +117,9 @@ export function BalanceView({ return ( + {pending.length > 0 ? ( + + ) : undefined}
\ No newline at end of file + + + + + + \ No newline at end of file diff --git a/packages/taler-wallet-webextension/static/img/wifi.svg b/packages/taler-wallet-webextension/static/img/wifi.svg new file mode 100644 index 000000000..ad712435d --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/wifi.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file