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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -47,6 +47,7 @@ export default class WalletDetails extends Component {
return (
<Form>
<InputAddress
autoFocus
hint={
<FormattedMessage
id='createWallet.details.address.hint'
@ -110,26 +111,8 @@ export default class WalletDetails extends Component {
return (
<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
autoFocus
error={ errors.name }
hint={
<FormattedMessage
@ -164,6 +147,25 @@ export default class WalletDetails extends Component {
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
accounts={ accounts }
label={

View File

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

View File

@ -92,27 +92,8 @@ export default class DetailsStep extends Component {
return (
<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
autoFocus
error={ nameError }
hint={
<FormattedMessage
@ -148,6 +129,26 @@ export default class DetailsStep extends Component {
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() }
<Input

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -68,6 +68,7 @@ export default class Input extends Component {
onBlur: PropTypes.func,
onChange: PropTypes.func,
onClick: PropTypes.func,
onDefaultAction: PropTypes.func,
onFocus: PropTypes.func,
onKeyDown: PropTypes.func,
onSubmit: PropTypes.func,
@ -230,7 +231,7 @@ export default class Input extends Component {
const { value } = event.target;
if (event.which === 13) {
this.onSubmit(value);
this.onSubmit(value, true);
} else if (event.which === 27) {
// TODO ESC, revert to original
}
@ -238,9 +239,17 @@ export default class Input extends Component {
this.props.onKeyDown && this.props.onKeyDown(event);
}
onSubmit = (value) => {
onSubmit = (value, performDefault) => {
const { onDefaultAction, onSubmit } = this.props;
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 = {
accountsInfo: PropTypes.object,
allowCopy: PropTypes.bool,
autoFocus: PropTypes.bool,
className: PropTypes.string,
disabled: PropTypes.bool,
error: PropTypes.string,
@ -56,7 +57,7 @@ class InputAddress extends Component {
};
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 { tabIndex, text, tokens, value } = this.props;
const account = value && (accountsInfo[value] || tokens[value]);
@ -85,6 +86,7 @@ class InputAddress extends Component {
<div className={ containerClasses.join(' ') }>
<Input
allowCopy={ allowCopy && ((disabled || readOnly) ? value : false) }
autoFocus={ autoFocus }
className={ classes.join(' ') }
disabled={ disabled }
error={ error }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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