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

js/src/modals/AddAddress/addAddress.js

@@ -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={

js/src/modals/AddContract/addContract.js

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

js/src/modals/CreateAccount/NewAccount/newAccount.js

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

js/src/modals/CreateAccount/NewImport/newImport.js

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

js/src/modals/CreateAccount/RawKey/rawKey.js

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

js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js

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

js/src/modals/CreateAccount/store.js

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

js/src/modals/CreateWallet/WalletDetails/walletDetails.js

@@ -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={

js/src/modals/DeleteAccount/deleteAccount.js

@@ -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 }
           />

js/src/modals/DeployContract/DetailsStep/detailsStep.js

@@ -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

js/src/modals/EditMeta/editMeta.js

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

js/src/modals/VaultUnlock/vaultUnlock.css

@@ -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;

js/src/modals/VaultUnlock/vaultUnlock.js

@@ -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,28 +64,31 @@ class VaultUnlock extends Component {
           withBorder
           vault={ vault }
         />
-        <Input
+        <Form className={ styles.form }>
-          hint={
+          <Input
-            <FormattedMessage
+            autoFocus
-              id='vaults.confirmOpen.password.hint'
+            hint={
-              defaultMessage='the password specified when creating the vault'
+              <FormattedMessage
-            />
+                id='vaults.confirmOpen.password.hint'
-          }
+                defaultMessage='the password specified when creating the vault'
-          label={
+              />
-            <FormattedMessage
+            }
-              id='vaults.confirmOpen.password.label'
+            label={
-              defaultMessage='vault password'
+              <FormattedMessage
-            />
+                id='vaults.confirmOpen.password.label'
-          }
+                defaultMessage='vault password'
-          onChange={ this.onEditPassword }
+              />
-          onSubmit={ this.onExecute }
+            }
-          type='password'
+            onChange={ this.onEditPassword }
-          value={ vaultPassword }
+            onDefaultAction={ this.onExecute }
-        />
+            type='password'
-        <div className={ styles.passwordHint }>
+            value={ vaultPassword }
-          { vault.meta.passwordHint }
+          />
-        </div>
+          <div className={ styles.passwordHint }>
-        <br />
+            { vault.meta.passwordHint }
+          </div>
+          <br />
+        </Form>
       </ConfirmDialog>
     );
   }

js/src/modals/Verification/GatherData/gatherData.js

@@ -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 }

js/src/modals/Verification/QueryCode/queryCode.js

@@ -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'

js/src/modals/WalletSettings/walletSettings.js

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

js/src/ui/Form/Input/input.js

@@ -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();
+      }
     });
   }
 

js/src/ui/Form/InputAddress/inputAddress.js

@@ -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 }

js/src/views/Account/account.js

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

js/src/views/Accounts/accounts.js

@@ -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 }

js/src/views/Address/address.js

@@ -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 }
       />
     );

js/src/views/Addresses/addresses.js

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

js/src/views/Contract/contract.js

@@ -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 }
       />
     ];

js/src/views/Contracts/contracts.js

@@ -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>,