From a025f5e752dba99bd834e361f0a1fe40e0865655 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 24 May 2019 07:52:25 +0200 Subject: [PATCH] Rework inputs (#26) --- .../src/Popup/Accounts/Account.tsx | 35 +++++++------ packages/extension-ui/src/Popup/Create.tsx | 6 +-- packages/extension-ui/src/Popup/Import.tsx | 6 +-- packages/extension-ui/src/Popup/index.tsx | 6 +-- .../extension-ui/src/components/Address.tsx | 14 ++---- .../extension-ui/src/components/Input.tsx | 32 ++++++------ .../extension-ui/src/components/Label.tsx | 11 +++-- .../extension-ui/src/components/TextArea.tsx | 6 ++- .../extension-ui/src/components/contexts.tsx | 8 +-- .../extension-ui/src/components/defaults.ts | 5 +- packages/extension-ui/src/partials/Back.tsx | 2 +- packages/extension-ui/src/partials/Name.tsx | 49 +++++++++---------- 12 files changed, 90 insertions(+), 90 deletions(-) diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx index 292c1341..7810a97d 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx @@ -5,6 +5,7 @@ import { OnActionFromCtx } from '../../components/types'; import React, { useState } from 'react'; +import styled from 'styled-components'; import { ActionBar, Address, Link, withOnAction } from '../../components'; import { editAccount } from '../../messaging'; @@ -18,7 +19,7 @@ type Props = { function Account ({ address, className, onAction }: Props) { const [isEditing, setEditing] = useState(false); - const [editedname, setName] = useState(null as string | null); + const [editedname, setName] = useState(null); const toggleEdit = (): void => { setEditing(!isEditing); @@ -37,20 +38,17 @@ function Account ({ address, className, onAction }: Props) {
- ) - : undefined - } > + {isEditing && ( + + )} Edit Forget @@ -59,4 +57,11 @@ function Account ({ address, className, onAction }: Props) { ); } -export default withOnAction(Account); +export default withOnAction(styled(Account)` + .edit-name { + left: 4.75rem; + position: absolute; + right: 0.75rem; + top: -0.5rem; + } +`); diff --git a/packages/extension-ui/src/Popup/Create.tsx b/packages/extension-ui/src/Popup/Create.tsx index 29ae8c6d..31847ab7 100644 --- a/packages/extension-ui/src/Popup/Create.tsx +++ b/packages/extension-ui/src/Popup/Create.tsx @@ -15,9 +15,9 @@ type Props = { }; function Create ({ onAction }: Props) { - const [account, setAccount] = useState(null as null | { address: string, seed: string }); - const [name, setName] = useState(null as string | null); - const [password, setPassword] = useState(null as string | null); + const [account, setAccount] = useState(null); + const [name, setName] = useState(null); + const [password, setPassword] = useState(null); useEffect(() => { createSeed() diff --git a/packages/extension-ui/src/Popup/Import.tsx b/packages/extension-ui/src/Popup/Import.tsx index 61682429..9544ad6d 100644 --- a/packages/extension-ui/src/Popup/Import.tsx +++ b/packages/extension-ui/src/Popup/Import.tsx @@ -15,9 +15,9 @@ type Props = { }; function Import ({ onAction }: Props) { - const [account, setAccount] = useState(null as null | { address: string, seed: string }); - const [name, setName] = useState(null as string | null); - const [password, setPassword] = useState(null as string | null); + const [account, setAccount] = useState(null); + const [name, setName] = useState(null); + const [password, setPassword] = useState(null); const onChangeSeed = (seed: string): void => { validateSeed(seed) diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index 80f4d696..5ece9002 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -21,9 +21,9 @@ import Signing from './Signing'; type Props = {}; export default function Popup (props: Props) { - const [accounts, setAccounts] = useState(null as null | Array); - const [authRequests, setAuthRequests] = useState(null as null | Array); - const [signRequests, setSignRequests] = useState(null as null | Array); + const [accounts, setAccounts] = useState>(null); + const [authRequests, setAuthRequests] = useState>(null); + const [signRequests, setSignRequests] = useState>(null); const onAction = (to?: string): void => { // loads all accounts & requests (this is passed through to children to trigger changes) diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index 1af1649a..10ff3673 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -32,9 +32,7 @@ function Address ({ accounts, address, children, className, isHidden, name, them return (
-
-
{name || (account && account.meta.name) || ''}
-
+
{name || (account && account.meta.name) || ''}
{address || ''}
{children}
 @@ -49,11 +47,11 @@ function Address ({ accounts, address, children, className, isHidden, name, them } export default withAccounts(styled(Address)` - position: relative; box-sizing: border-box; margin: ${defaults.boxMargin}; padding: ${defaults.boxPadding}; padding-left: 1rem; + position: relative; .details { margin: 0; @@ -70,13 +68,7 @@ export default withAccounts(styled(Address)` } .name { - .content { - padding: 0 0 0.5rem 0; - - input { - margin: -0.5rem 0; - } - } + padding-bottom: 0.5rem; } } diff --git a/packages/extension-ui/src/components/Input.tsx b/packages/extension-ui/src/components/Input.tsx index 0b0a7495..dd122495 100644 --- a/packages/extension-ui/src/components/Input.tsx +++ b/packages/extension-ui/src/components/Input.tsx @@ -26,28 +26,20 @@ function Input ({ className, defaultValue, label, isFocussed, isReadOnly, onBlur onChange && onChange(value.trim()); }; - const element = ( - - ); - - if (!label) { - return
{element}
; - } - return ( ); } @@ -78,7 +70,11 @@ export default styled(Input)` display: block; font-family: ${defaults.fontFamily}; font-size: ${defaults.fontSize}; - padding: ${defaults.inputPadding}; + padding: ${({ label }) => + label + ? defaults.inputPaddingLabel + : defaults.inputPadding + }; width: 100%; &:read-only { diff --git a/packages/extension-ui/src/components/Label.tsx b/packages/extension-ui/src/components/Label.tsx index bad1e5ee..325516f4 100644 --- a/packages/extension-ui/src/components/Label.tsx +++ b/packages/extension-ui/src/components/Label.tsx @@ -10,13 +10,13 @@ import defaults from './defaults'; type Props = { children: React.ReactNode, className?: string, - label: string + label?: string | null }; function Label ({ children, className, label }: Props) { return (
- + {label && } {children}
); @@ -30,10 +30,13 @@ export default styled(Label)` font-size: ${defaults.fontSize}; margin: ${defaults.boxMargin}; padding: ${defaults.boxPadding}; + position: relative; label { display: block; - font-size: 0.9rem; - margin-bottom: 0.25rem; + font-size: 0.75rem; + left: 1rem; + position: absolute; + top: 0.25rem; } `; diff --git a/packages/extension-ui/src/components/TextArea.tsx b/packages/extension-ui/src/components/TextArea.tsx index 37c218f8..de0949c7 100644 --- a/packages/extension-ui/src/components/TextArea.tsx +++ b/packages/extension-ui/src/components/TextArea.tsx @@ -64,7 +64,11 @@ export default styled(TextArea)` display: block; font-family: ${defaults.fontFamily}; font-size: ${defaults.fontSize}; - padding: ${defaults.inputPadding}; + padding: ${({ label }) => + label + ? defaults.inputPaddingLabel + : defaults.inputPadding + }; resize: none; width: 100%; diff --git a/packages/extension-ui/src/components/contexts.tsx b/packages/extension-ui/src/components/contexts.tsx index 1ef96403..7d03c981 100644 --- a/packages/extension-ui/src/components/contexts.tsx +++ b/packages/extension-ui/src/components/contexts.tsx @@ -10,10 +10,10 @@ const noop = (to?: string) => { // do nothing }; -const AccountContext = React.createContext([] as AccountsFromCtx); -const ActionContext = React.createContext(noop as OnActionFromCtx); -const AuthorizeContext = React.createContext([] as AuthRequestsFromCtx); -const SigningContext = React.createContext([] as SignRequestsFromCtx); +const AccountContext = React.createContext([]); +const ActionContext = React.createContext(noop); +const AuthorizeContext = React.createContext([]); +const SigningContext = React.createContext([]); export { AccountContext, diff --git a/packages/extension-ui/src/components/defaults.ts b/packages/extension-ui/src/components/defaults.ts index be7c7627..a099cb41 100644 --- a/packages/extension-ui/src/components/defaults.ts +++ b/packages/extension-ui/src/components/defaults.ts @@ -12,8 +12,8 @@ const defaults: { [index: string]: any } = { btnBg: TEXT_COLOR, // LINK_COLOR, btnBgDanger: DANGER_COLOR, btnBorder: `0 solid `, - btnColor: '#fff', - btnColorDanger: '#fff', + btnColor: '#f5f6f7', + btnColorDanger: '#f5f6f7', btnPadding: '0.75rem 1rem', boxBorder: 'none', // '0.25rem solid #e2e1e0', boxMargin: '0.75rem 0', @@ -26,6 +26,7 @@ const defaults: { [index: string]: any } = { hdrColor: LABEL_COLOR, inputBorder: '#ccc', inputPadding: '0.5rem 0.75rem', + inputPaddingLabel: '1.25rem 0.75rem 0.5rem', labelColor: LABEL_COLOR, lineHeight: '1.25', linkColor: LINK_COLOR, diff --git a/packages/extension-ui/src/partials/Back.tsx b/packages/extension-ui/src/partials/Back.tsx index a91ba4e2..9563b76d 100644 --- a/packages/extension-ui/src/partials/Back.tsx +++ b/packages/extension-ui/src/partials/Back.tsx @@ -21,5 +21,5 @@ function Back ({ className, to = '/' }: Props) { } export default styled(Back)` - padding: 0.5rem; + padding: 0 0.5rem; `; diff --git a/packages/extension-ui/src/partials/Name.tsx b/packages/extension-ui/src/partials/Name.tsx index 90dcb001..cf4f64ef 100644 --- a/packages/extension-ui/src/partials/Name.tsx +++ b/packages/extension-ui/src/partials/Name.tsx @@ -2,13 +2,16 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. +import { AccountsFromCtx } from '../components/types'; + import React, { useEffect, useState } from 'react'; -import { Input } from '../components'; -import { AccountContext } from '../components/contexts'; +import { Input, withAccounts } from '../components'; type Props = { + accounts: AccountsFromCtx, address?: string, + className?: string, defaultValue?: string | null, isFocussed?: boolean, label?: string | null, @@ -18,38 +21,34 @@ type Props = { const MIN_LENGTH = 3; -export default function Name ({ address, defaultValue, isFocussed, label = 'a descriptive name for this account', onBlur, onChange }: Props) { +function Name ({ accounts, address, className, defaultValue, isFocussed, label = 'a descriptive name for this account', onBlur, onChange }: Props) { const [name, setName] = useState(''); + const account = accounts.find((account) => account.address === address); + const startValue = (account && account.meta.name) || defaultValue; + const isError = !name && startValue + ? false + : (name.length < MIN_LENGTH); useEffect(() => { onChange( - (name.length >= MIN_LENGTH) + name && (name.length >= MIN_LENGTH) ? name : null ); }, [name]); return ( - - {(accounts) => { - const account = accounts.find((account) => account.address === address); - const startValue = (account && account.meta.name) || defaultValue; - const isError = !name && startValue - ? false - : (name.length < MIN_LENGTH); - - return ( - - ); - }} - + ); } + +export default withAccounts(Name);