diff options
author | Sebastian <sebasjm@gmail.com> | 2022-08-15 21:18:39 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-08-15 21:18:39 -0300 |
commit | cdc8e9afdfb93bd8a90d1e6cf0ea9aa20159e43a (patch) | |
tree | e41339241843847f5f4573f08c138149f8dca995 /packages/taler-wallet-webextension/src/mui | |
parent | 004b1544f394ee9dbbd0687d98933932b017f979 (diff) | |
download | wallet-core-cdc8e9afdfb93bd8a90d1e6cf0ea9aa20159e43a.tar.xz |
destination ui
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui')
4 files changed, 34 insertions, 17 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx index f953b4a36..8f6b47afb 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx @@ -33,6 +33,10 @@ export default { const Stack = styled.div` display: flex; flex-direction: column; + & > button { + margin: 14px; + } + background-color: white; `; export const BasicExample = (): VNode => ( diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx index 82fc155ef..c59bb28b6 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx @@ -43,6 +43,9 @@ export interface Props { placeholder?: string; required?: boolean; + startAdornment?: VNode; + endAdornment?: VNode; + //FIXME: change to "grabFocus" // focused?: boolean; rows?: number; @@ -75,7 +78,6 @@ export function TextField({ }: Props): VNode { // htmlFor={id} id={inputLabelId} const Input = select ? selectVariant[variant] : inputVariant[variant]; - // console.log("variant", Input); return ( <FormControl {...props}> {label && <InputLabel>{label}</InputLabel>} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx index fc16b7ce4..fce82f9d2 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -53,6 +53,8 @@ export function InputBaseRoot({ multiline, focused, fullWidth, + startAdornment, + endAdornment, children, }: any): VNode { const fcs = useFormControl({}); @@ -61,6 +63,8 @@ export function InputBaseRoot({ data-disabled={disabled} data-focused={focused} data-multiline={multiline} + data-hasStart={!!startAdornment} + data-hasEnd={!!endAdornment} data-error={error} class={[ _class, @@ -156,22 +160,28 @@ export function InputBaseComponent({ multiline, type, class: _class, + startAdornment, + endAdornment, ...props }: any): VNode { return ( - <input - disabled={disabled} - type={type} - class={[ - componentStyle, - _class, - disabled && componentDisabledStyle, - size === "small" && componentSmallStyle, - // multiline && componentMultilineStyle, - type === "search" && searchStyle, - ].join(" ")} - {...props} - /> + <Fragment> + {startAdornment} + <input + disabled={disabled} + type={type} + class={[ + componentStyle, + _class, + disabled && componentDisabledStyle, + size === "small" && componentSmallStyle, + // multiline && componentMultilineStyle, + type === "search" && searchStyle, + ].join(" ")} + {...props} + /> + {endAdornment} + </Fragment> ); } @@ -388,7 +398,6 @@ export function TextareaAutoSize({ getStyleValue(computedStyle, "border-bottom-width") + getStyleValue(computedStyle, "border-top-width"); - // console.log(boxSizing, padding, border); // The height of the inner content const innerHeight = inputShallow.scrollHeight; @@ -412,7 +421,6 @@ export function TextareaAutoSize({ outerHeight + (boxSizing === "border-box" ? padding + border : 0); const overflow = Math.abs(outerHeight - innerHeight) <= 1; - console.log("height", outerHeight, minRows, maxRows); setState((prevState) => { // Need a large enough difference to update the height. // This prevents infinite rendering loop. diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx index 53c6da295..fa5144ca3 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx @@ -27,7 +27,6 @@ export interface Props { defaultValue?: string; disabled?: boolean; disableUnderline?: boolean; - endAdornment?: VNode; error?: boolean; fullWidth?: boolean; id?: string; @@ -42,6 +41,7 @@ export interface Props { required?: boolean; rows?: number; startAdornment?: VNode; + endAdornment?: VNode; type?: string; value?: string; } @@ -108,6 +108,9 @@ const filledRootStyle = css` &[data-multiline] { padding: 25px 12px 8px; } + /* &[data-hasStart] { + padding-left: 25px; + } */ `; const underlineStyle = css` |