Misc. small UI fixes (#4657)

* Shorten menu items (accounts)

* Shorten menu items (addresses)

* Shorten menu items (contracts)

* Shorten menu items (account)

* Shorten menu items (address)

* Shorten menu items (contract)

* Auto-focus & perform default action

* Auto-focus & default action

* Auto focus for first fields (create account)

* Clear phrase & auto-focus field

* Auto-focus name fields

* Add autoFocus (Add Address)

* autoFocus address (Add Contract)

* Auto focus name field

* Auto-focus name field for EditMeta

* Auto-focus modifications (WalletSettings)

* Verification auto focus

* typo

* Double-up on keys
This commit is contained in:
Jaco Greeff 2017-02-24 12:26:30 +01:00 committed by GitHub
parent f97e775498
commit 0b214450e3
24 changed files with 116 additions and 80 deletions

View File

@ -65,9 +65,10 @@ export default class AddAddress extends Component {
renderDialogActions () { renderDialogActions () {
const { hasError } = this.store; const { hasError } = this.store;
return ([ return [
<Button <Button
icon={ <CancelIcon /> } icon={ <CancelIcon /> }
key='cancel'
label={ label={
<FormattedMessage <FormattedMessage
id='addAddress.button.close' id='addAddress.button.close'
@ -80,6 +81,7 @@ export default class AddAddress extends Component {
<Button <Button
disabled={ hasError } disabled={ hasError }
icon={ <AddIcon /> } icon={ <AddIcon /> }
key='save'
label={ label={
<FormattedMessage <FormattedMessage
id='addAddress.button.add' id='addAddress.button.add'
@ -89,7 +91,7 @@ export default class AddAddress extends Component {
onClick={ this.onAdd } onClick={ this.onAdd }
ref='addButton' ref='addButton'
/> />
]); ];
} }
renderFields () { renderFields () {
@ -99,6 +101,7 @@ export default class AddAddress extends Component {
<Form> <Form>
<InputAddress <InputAddress
allowCopy={ false } allowCopy={ false }
autoFocus
disabled={ !!this.props.address } disabled={ !!this.props.address }
error={ addressError } error={ addressError }
hint={ hint={

View File

@ -160,6 +160,7 @@ class AddContract extends Component {
return ( return (
<Form> <Form>
<InputAddress <InputAddress
autoFocus
error={ addressError } error={ addressError }
hint={ hint={
<FormattedMessage <FormattedMessage

View File

@ -48,6 +48,7 @@ export default class CreateAccount extends Component {
return ( return (
<Form> <Form>
<Input <Input
autoFocus
error={ nameError } error={ nameError }
hint={ hint={
<FormattedMessage <FormattedMessage

View File

@ -39,6 +39,7 @@ export default class NewImport extends Component {
return ( return (
<Form> <Form>
<Input <Input
autoFocus
error={ nameError } error={ nameError }
hint={ hint={
<FormattedMessage <FormattedMessage

View File

@ -39,6 +39,7 @@ export default class RawKey extends Component {
return ( return (
<Form> <Form>
<Input <Input
autoFocus
error={ rawKeyError } error={ rawKeyError }
hint={ hint={
<FormattedMessage <FormattedMessage

View File

@ -36,6 +36,7 @@ export default class RecoveryPhrase extends Component {
return ( return (
<Form> <Form>
<Input <Input
autoFocus
hint={ hint={
<FormattedMessage <FormattedMessage
id='createAccount.recoveryPhrase.phrase.hint' id='createAccount.recoveryPhrase.phrase.hint'

View File

@ -90,6 +90,7 @@ export default class Store {
transaction(() => { transaction(() => {
this.password = ''; this.password = '';
this.passwordRepeat = ''; this.passwordRepeat = '';
this.phrase = '';
this.nameError = null; this.nameError = null;
this.rawKeyError = null; this.rawKeyError = null;
this.walletFileError = null; this.walletFileError = null;

View File

@ -47,6 +47,7 @@ export default class WalletDetails extends Component {
return ( return (
<Form> <Form>
<InputAddress <InputAddress
autoFocus
hint={ hint={
<FormattedMessage <FormattedMessage
id='createWallet.details.address.hint' id='createWallet.details.address.hint'
@ -110,26 +111,8 @@ export default class WalletDetails extends Component {
return ( return (
<Form> <Form>
<AddressSelect
accounts={ _accounts }
error={ errors.account }
hint={
<FormattedMessage
id='createWallet.details.ownerMulti.hint'
defaultMessage='the owner account for this contract'
/>
}
label={
<FormattedMessage
id='createWallet.details.ownerMulti.label'
defaultMessage='from account (contract owner)'
/>
}
value={ wallet.account }
onChange={ this.onAccoutChange }
/>
<Input <Input
autoFocus
error={ errors.name } error={ errors.name }
hint={ hint={
<FormattedMessage <FormattedMessage
@ -164,6 +147,25 @@ export default class WalletDetails extends Component {
onChange={ this.onDescriptionChange } onChange={ this.onDescriptionChange }
/> />
<AddressSelect
accounts={ _accounts }
error={ errors.account }
hint={
<FormattedMessage
id='createWallet.details.ownerMulti.hint'
defaultMessage='the owner account for this contract'
/>
}
label={
<FormattedMessage
id='createWallet.details.ownerMulti.label'
defaultMessage='from account (contract owner)'
/>
}
value={ wallet.account }
onChange={ this.onAccoutChange }
/>
<TypedInput <TypedInput
accounts={ accounts } accounts={ accounts }
label={ label={

View File

@ -85,6 +85,7 @@ class DeleteAccount extends Component {
</div> </div>
<div className={ styles.password }> <div className={ styles.password }>
<Input <Input
autoFocus
hint={ hint={
<FormattedMessage <FormattedMessage
id='deleteAccount.password.hint' id='deleteAccount.password.hint'
@ -98,6 +99,7 @@ class DeleteAccount extends Component {
/> />
} }
onChange={ this.onChangePassword } onChange={ this.onChangePassword }
onDefaultAction={ this.onDeleteConfirmed }
type='password' type='password'
value={ password } value={ password }
/> />

View File

@ -92,27 +92,8 @@ export default class DetailsStep extends Component {
return ( return (
<Form> <Form>
<AddressSelect
accounts={ accounts }
balances={ balances }
error={ fromAddressError }
hint={
<FormattedMessage
id='deployContract.details.address.hint'
defaultMessage='the owner account for this contract'
/>
}
label={
<FormattedMessage
id='deployContract.details.address.label'
defaultMessage='from account (contract owner)'
/>
}
onChange={ this.onFromAddressChange }
value={ fromAddress }
/>
<Input <Input
autoFocus
error={ nameError } error={ nameError }
hint={ hint={
<FormattedMessage <FormattedMessage
@ -148,6 +129,26 @@ export default class DetailsStep extends Component {
value={ description } value={ description }
/> />
<AddressSelect
accounts={ accounts }
balances={ balances }
error={ fromAddressError }
hint={
<FormattedMessage
id='deployContract.details.address.hint'
defaultMessage='the owner account for this contract'
/>
}
label={
<FormattedMessage
id='deployContract.details.address.label'
defaultMessage='from account (contract owner)'
/>
}
onChange={ this.onFromAddressChange }
value={ fromAddress }
/>
{ this.renderContractSelect() } { this.renderContractSelect() }
<Input <Input

View File

@ -57,6 +57,7 @@ class EditMeta extends Component {
> >
<Form> <Form>
<Input <Input
autoFocus
error={ nameError } error={ nameError }
label={ label={
<FormattedMessage <FormattedMessage

View File

@ -15,6 +15,10 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.form {
margin-top: 0;
}
.passwordHint { .passwordHint {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 0.75em; font-size: 0.75em;

View File

@ -21,7 +21,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { newError } from '~/redux/actions'; import { newError } from '~/redux/actions';
import { ConfirmDialog, Input, VaultCard } from '~/ui'; import { ConfirmDialog, Form, Input, VaultCard } from '~/ui';
import styles from './vaultUnlock.css'; import styles from './vaultUnlock.css';
@ -64,7 +64,9 @@ class VaultUnlock extends Component {
withBorder withBorder
vault={ vault } vault={ vault }
/> />
<Form className={ styles.form }>
<Input <Input
autoFocus
hint={ hint={
<FormattedMessage <FormattedMessage
id='vaults.confirmOpen.password.hint' id='vaults.confirmOpen.password.hint'
@ -78,7 +80,7 @@ class VaultUnlock extends Component {
/> />
} }
onChange={ this.onEditPassword } onChange={ this.onEditPassword }
onSubmit={ this.onExecute } onDefaultAction={ this.onExecute }
type='password' type='password'
value={ vaultPassword } value={ vaultPassword }
/> />
@ -86,6 +88,7 @@ class VaultUnlock extends Component {
{ vault.meta.passwordHint } { vault.meta.passwordHint }
</div> </div>
<br /> <br />
</Form>
</ConfirmDialog> </ConfirmDialog>
); );
} }

View File

@ -232,7 +232,7 @@ export default class GatherData extends Component {
renderFields () { renderFields () {
const { accountIsVerified, fields } = this.props; const { accountIsVerified, fields } = this.props;
const rendered = fields.map((field) => { const rendered = fields.map((field, index) => {
const onChange = (_, v) => { const onChange = (_, v) => {
field.onChange(v); field.onChange(v);
}; };
@ -240,6 +240,7 @@ export default class GatherData extends Component {
return ( return (
<Input <Input
autoFocus={ index === 0 }
className={ styles.field } className={ styles.field }
key={ field.key } key={ field.key }
label={ field.label } label={ field.label }

View File

@ -44,6 +44,7 @@ export default class QueryCode extends Component {
<Form> <Form>
<p>The verification code has been sent to { receiver }.</p> <p>The verification code has been sent to { receiver }.</p>
<Input <Input
autoFocus
label={ label={
<FormattedMessage <FormattedMessage
id='verification.code.label' id='verification.code.label'

View File

@ -166,6 +166,7 @@ class WalletSettings extends Component {
</p> </p>
<Input <Input
autoFocus
hint='[ ... ]' hint='[ ... ]'
label={ label={
<FormattedMessage <FormattedMessage

View File

@ -68,6 +68,7 @@ export default class Input extends Component {
onBlur: PropTypes.func, onBlur: PropTypes.func,
onChange: PropTypes.func, onChange: PropTypes.func,
onClick: PropTypes.func, onClick: PropTypes.func,
onDefaultAction: PropTypes.func,
onFocus: PropTypes.func, onFocus: PropTypes.func,
onKeyDown: PropTypes.func, onKeyDown: PropTypes.func,
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
@ -230,7 +231,7 @@ export default class Input extends Component {
const { value } = event.target; const { value } = event.target;
if (event.which === 13) { if (event.which === 13) {
this.onSubmit(value); this.onSubmit(value, true);
} else if (event.which === 27) { } else if (event.which === 27) {
// TODO ESC, revert to original // TODO ESC, revert to original
} }
@ -238,9 +239,17 @@ export default class Input extends Component {
this.props.onKeyDown && this.props.onKeyDown(event); this.props.onKeyDown && this.props.onKeyDown(event);
} }
onSubmit = (value) => { onSubmit = (value, performDefault) => {
const { onDefaultAction, onSubmit } = this.props;
this.setValue(value, () => { this.setValue(value, () => {
this.props.onSubmit && this.props.onSubmit(value); if (onSubmit) {
onSubmit(value);
}
if (performDefault && onDefaultAction) {
onDefaultAction();
}
}); });
} }

View File

@ -30,6 +30,7 @@ class InputAddress extends Component {
static propTypes = { static propTypes = {
accountsInfo: PropTypes.object, accountsInfo: PropTypes.object,
allowCopy: PropTypes.bool, allowCopy: PropTypes.bool,
autoFocus: PropTypes.bool,
className: PropTypes.string, className: PropTypes.string,
disabled: PropTypes.bool, disabled: PropTypes.bool,
error: PropTypes.string, error: PropTypes.string,
@ -56,7 +57,7 @@ class InputAddress extends Component {
}; };
render () { render () {
const { accountsInfo, allowCopy, className, disabled, error, focused, hint } = this.props; const { accountsInfo, allowCopy, autoFocus, className, disabled, error, focused, hint } = this.props;
const { hideUnderline, label, onClick, onFocus, readOnly, small } = this.props; const { hideUnderline, label, onClick, onFocus, readOnly, small } = this.props;
const { tabIndex, text, tokens, value } = this.props; const { tabIndex, text, tokens, value } = this.props;
const account = value && (accountsInfo[value] || tokens[value]); const account = value && (accountsInfo[value] || tokens[value]);
@ -85,6 +86,7 @@ class InputAddress extends Component {
<div className={ containerClasses.join(' ') }> <div className={ containerClasses.join(' ') }>
<Input <Input
allowCopy={ allowCopy && ((disabled || readOnly) ? value : false) } allowCopy={ allowCopy && ((disabled || readOnly) ? value : false) }
autoFocus={ autoFocus }
className={ classes.join(' ') } className={ classes.join(' ') }
disabled={ disabled } disabled={ disabled }
error={ error } error={ error }

View File

@ -177,7 +177,7 @@ class Account extends Component {
label={ label={
<FormattedMessage <FormattedMessage
id='account.button.delete' id='account.button.delete'
defaultMessage='delete account' defaultMessage='delete'
/> />
} }
onClick={ this.store.toggleDeleteDialog } onClick={ this.store.toggleDeleteDialog }

View File

@ -226,7 +226,7 @@ class Accounts extends Component {
label={ label={
<FormattedMessage <FormattedMessage
id='accounts.button.newAccount' id='accounts.button.newAccount'
defaultMessage='new account' defaultMessage='account'
/> />
} }
onClick={ this.onNewAccountClick } onClick={ this.onNewAccountClick }
@ -237,7 +237,7 @@ class Accounts extends Component {
label={ label={
<FormattedMessage <FormattedMessage
id='accounts.button.newWallet' id='accounts.button.newWallet'
defaultMessage='new wallet' defaultMessage='wallet'
/> />
} }
onClick={ this.onNewWalletClick } onClick={ this.onNewWalletClick }

View File

@ -153,7 +153,7 @@ class Address extends Component {
<Button <Button
key='delete' key='delete'
icon={ <ActionDelete /> } icon={ <ActionDelete /> }
label='forget address' label='forget'
onClick={ this.showDeleteDialog } onClick={ this.showDeleteDialog }
/> />
]; ];
@ -162,7 +162,7 @@ class Address extends Component {
<Button <Button
key='newAddress' key='newAddress'
icon={ <ContentAdd /> } icon={ <ContentAdd /> }
label='save address' label='save'
onClick={ this.onOpenAdd } onClick={ this.onOpenAdd }
/> />
); );

View File

@ -143,7 +143,7 @@ class Addresses extends Component {
<Button <Button
key='newAddress' key='newAddress'
icon={ <ContentAdd /> } icon={ <ContentAdd /> }
label='new address' label='address'
onClick={ this.onOpenAdd } onClick={ this.onOpenAdd }
/>, />,
<ActionbarExport <ActionbarExport

View File

@ -256,13 +256,13 @@ class Contract extends Component {
<Button <Button
key='delete' key='delete'
icon={ <ActionDelete /> } icon={ <ActionDelete /> }
label='forget contract' label='forget'
onClick={ this.showDeleteDialog } onClick={ this.showDeleteDialog }
/>, />,
<Button <Button
key='viewDetails' key='viewDetails'
icon={ <EyeIcon /> } icon={ <EyeIcon /> }
label='view details' label='details'
onClick={ this.showDetailsDialog } onClick={ this.showDetailsDialog }
/> />
]; ];

View File

@ -139,13 +139,13 @@ class Contracts extends Component {
<Button <Button
key='addContract' key='addContract'
icon={ <ContentAdd /> } icon={ <ContentAdd /> }
label='watch contract' label='watch'
onClick={ this.onAddContract } onClick={ this.onAddContract }
/>, />,
<Button <Button
key='deployContract' key='deployContract'
icon={ <ContentAdd /> } icon={ <ContentAdd /> }
label='deploy contract' label='deploy'
onClick={ this.onDeployContract } onClick={ this.onDeployContract }
/>, />,
<Link <Link
@ -154,7 +154,7 @@ class Contracts extends Component {
> >
<Button <Button
icon={ <FileIcon /> } icon={ <FileIcon /> }
label='develop contract' label='develop'
/> />
</Link>, </Link>,