From 4d66f774c3ad4040f522d2ec52b5b4c2edd2b478 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 11 Mar 2022 02:17:40 -0300 Subject: pending operations --- .../taler-wallet-webextension/src/mui/Avatar.tsx | 4 +- .../taler-wallet-webextension/src/mui/Button.tsx | 2 + .../src/mui/Grid.stories.tsx | 20 ++++ .../taler-wallet-webextension/src/mui/Grid.tsx | 110 +++++++++++++++++++-- .../taler-wallet-webextension/src/mui/Paper.tsx | 18 ++-- .../src/mui/Typography.tsx | 3 + .../taler-wallet-webextension/src/mui/style.tsx | 23 ++++- 7 files changed, 159 insertions(+), 21 deletions(-) (limited to 'packages/taler-wallet-webextension/src/mui') 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 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(toResponsive(12)); +const GridContext = createContext>(toResponsive(12)); -function toResponsive(v: number | Partial): ResponsiveSize { +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-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 (
{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), -- cgit v1.2.3