diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui')
7 files changed, 159 insertions, 21 deletions
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<HTMLDivElement> { 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 = () => ( </Fragment> ); +export const ResponsiveAuthWidth = () => ( + <Fragment> + <Wrapper> + <Grid container columns={12}> + <Grid item> + <Item>item 1</Item> + </Grid> + <Grid item xs={1}> + <Item>item 2 short</Item> + </Grid> + <Grid item> + <Item>item 3 with long text </Item> + </Grid> + <Grid item xs={"true"}> + <Item>item 4</Item> + </Grid> + </Grid> + </Wrapper> + </Fragment> +); export const Example = () => ( <Wrapper> <p>Item row space is responsive: xs=6 sm=4 md=1</p> 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 sizeVariantExpand = css` + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +`; + +const sizeVariantAuto = css` + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + max-width: none; + width: auto; +`; -const GridContext = createContext<ResponsiveSize>(toResponsive(12)); +const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12)); -function toResponsive(v: number | Partial<ResponsiveSize>): ResponsiveSize { +function toResponsive( + v: number | Partial<ResponsiveSize>, +): Partial<ResponsiveSize> { 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-xs": relation(columns, ssize, "xs"), "--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-xs": relation(columns, ssize, "xs"), "--relation-col-vs-xl": relation(columns, ssize, "xl"), - "--relation-col-vs-md": relation(columns, ssize, "md"), }; return ( <GridContext.Provider value={columns}> <div - id={container ? "container" : "item"} class={[ root, container && containerStyle, item && itemStyle, zeroMinWidth && zeroMinWidthStyle, - sizeVariant, + xs && + (xs === "auto" + ? sizeVariantAuto + : xs === "true" + ? sizeVariantExpand + : sizeVariantXS), + sm && + (sm === "auto" + ? sizeVariantAuto + : sm === "true" + ? sizeVariantExpand + : sizeVariantSM), + md && + (md === "auto" + ? sizeVariantAuto + : md === "true" + ? sizeVariantExpand + : sizeVariantMD), + lg && + (lg === "auto" + ? sizeVariantAuto + : lg === "true" + ? sizeVariantExpand + : sizeVariantLG), + xl && + (xl === "auto" + ? sizeVariantAuto + : xl === "true" + ? sizeVariantExpand + : sizeVariantXL), container && columnGapVariant, container && rowGapVariant, ].join(" ")} @@ -222,6 +311,7 @@ export function Grid({ ...spacingStyles, justifyContent, alignItems, + flexWrap: wrap, }} > {children} @@ -230,8 +320,8 @@ export function Grid({ ); } function relation( - cols: ResponsiveSize, - values: ResponsiveSize, + cols: Partial<ResponsiveSize>, + values: Partial<ResponsiveSize>, 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<HTMLDivElement> { + 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 ( <div class={[ @@ -45,6 +48,7 @@ export function Paper({ getOverlayAlpha(elevation), )}, ${alpha("#fff", getOverlayAlpha(elevation))})`, }} + {...rest} > {children} </div> 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<number | string>): string => { + const spacing = ( + ...argsInput: ReadonlyArray<number | string | undefined> + ): 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), |