From 0b214450e370d7388892c2a7eedfb88c65ff8bc1 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 24 Feb 2017 12:26:30 +0100
Subject: [PATCH] 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        |  7 ++-
 js/src/modals/AddContract/addContract.js      |  1 +
 .../CreateAccount/NewAccount/newAccount.js    |  1 +
 .../CreateAccount/NewImport/newImport.js      |  1 +
 js/src/modals/CreateAccount/RawKey/rawKey.js  |  1 +
 .../RecoveryPhrase/recoveryPhrase.js          |  1 +
 js/src/modals/CreateAccount/store.js          |  1 +
 .../WalletDetails/walletDetails.js            | 40 ++++++++-------
 js/src/modals/DeleteAccount/deleteAccount.js  |  2 +
 .../DeployContract/DetailsStep/detailsStep.js | 41 ++++++++--------
 js/src/modals/EditMeta/editMeta.js            |  1 +
 js/src/modals/VaultUnlock/vaultUnlock.css     |  4 ++
 js/src/modals/VaultUnlock/vaultUnlock.js      | 49 ++++++++++---------
 .../Verification/GatherData/gatherData.js     |  3 +-
 .../Verification/QueryCode/queryCode.js       |  1 +
 .../modals/WalletSettings/walletSettings.js   |  1 +
 js/src/ui/Form/Input/input.js                 | 15 ++++--
 js/src/ui/Form/InputAddress/inputAddress.js   |  4 +-
 js/src/views/Account/account.js               |  2 +-
 js/src/views/Accounts/accounts.js             |  4 +-
 js/src/views/Address/address.js               |  4 +-
 js/src/views/Addresses/addresses.js           |  2 +-
 js/src/views/Contract/contract.js             |  4 +-
 js/src/views/Contracts/contracts.js           |  6 +--
 24 files changed, 116 insertions(+), 80 deletions(-)

diff --git a/js/src/modals/AddAddress/addAddress.js b/js/src/modals/AddAddress/addAddress.js
index 78633c52c..984210154 100644
--- a/js/src/modals/AddAddress/addAddress.js
+++ b/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={
diff --git a/js/src/modals/AddContract/addContract.js b/js/src/modals/AddContract/addContract.js
index 1ad3eb70d..f10515d1b 100644
--- a/js/src/modals/AddContract/addContract.js
+++ b/js/src/modals/AddContract/addContract.js
@@ -160,6 +160,7 @@ class AddContract extends Component {
     return (
       <Form>
         <InputAddress
+          autoFocus
           error={ addressError }
           hint={
             <FormattedMessage
diff --git a/js/src/modals/CreateAccount/NewAccount/newAccount.js b/js/src/modals/CreateAccount/NewAccount/newAccount.js
index 2eeb10801..3bf34b27e 100644
--- a/js/src/modals/CreateAccount/NewAccount/newAccount.js
+++ b/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
diff --git a/js/src/modals/CreateAccount/NewImport/newImport.js b/js/src/modals/CreateAccount/NewImport/newImport.js
index b53d0178f..7f4a6bd1a 100644
--- a/js/src/modals/CreateAccount/NewImport/newImport.js
+++ b/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
diff --git a/js/src/modals/CreateAccount/RawKey/rawKey.js b/js/src/modals/CreateAccount/RawKey/rawKey.js
index 87cce86d8..ad96064bd 100644
--- a/js/src/modals/CreateAccount/RawKey/rawKey.js
+++ b/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
diff --git a/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js b/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
index 4e27ce4db..894daa767 100644
--- a/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
+++ b/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'
diff --git a/js/src/modals/CreateAccount/store.js b/js/src/modals/CreateAccount/store.js
index 37e28ae4f..2b55532f7 100644
--- a/js/src/modals/CreateAccount/store.js
+++ b/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;
diff --git a/js/src/modals/CreateWallet/WalletDetails/walletDetails.js b/js/src/modals/CreateWallet/WalletDetails/walletDetails.js
index 48a2fc3ec..6b0ed7e1a 100644
--- a/js/src/modals/CreateWallet/WalletDetails/walletDetails.js
+++ b/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={
diff --git a/js/src/modals/DeleteAccount/deleteAccount.js b/js/src/modals/DeleteAccount/deleteAccount.js
index d6ea3f2de..8f47777c5 100644
--- a/js/src/modals/DeleteAccount/deleteAccount.js
+++ b/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 }
           />
diff --git a/js/src/modals/DeployContract/DetailsStep/detailsStep.js b/js/src/modals/DeployContract/DetailsStep/detailsStep.js
index 9c21608f0..3600c13dd 100644
--- a/js/src/modals/DeployContract/DetailsStep/detailsStep.js
+++ b/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
diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js
index 04b1320a4..182560c16 100644
--- a/js/src/modals/EditMeta/editMeta.js
+++ b/js/src/modals/EditMeta/editMeta.js
@@ -57,6 +57,7 @@ class EditMeta extends Component {
       >
         <Form>
           <Input
+            autoFocus
             error={ nameError }
             label={
               <FormattedMessage
diff --git a/js/src/modals/VaultUnlock/vaultUnlock.css b/js/src/modals/VaultUnlock/vaultUnlock.css
index 44032193c..6c1613312 100644
--- a/js/src/modals/VaultUnlock/vaultUnlock.css
+++ b/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;
diff --git a/js/src/modals/VaultUnlock/vaultUnlock.js b/js/src/modals/VaultUnlock/vaultUnlock.js
index 147777b23..3c1eaddc0 100644
--- a/js/src/modals/VaultUnlock/vaultUnlock.js
+++ b/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
-          hint={
-            <FormattedMessage
-              id='vaults.confirmOpen.password.hint'
-              defaultMessage='the password specified when creating the vault'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='vaults.confirmOpen.password.label'
-              defaultMessage='vault password'
-            />
-          }
-          onChange={ this.onEditPassword }
-          onSubmit={ this.onExecute }
-          type='password'
-          value={ vaultPassword }
-        />
-        <div className={ styles.passwordHint }>
-          { vault.meta.passwordHint }
-        </div>
-        <br />
+        <Form className={ styles.form }>
+          <Input
+            autoFocus
+            hint={
+              <FormattedMessage
+                id='vaults.confirmOpen.password.hint'
+                defaultMessage='the password specified when creating the vault'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='vaults.confirmOpen.password.label'
+                defaultMessage='vault password'
+              />
+            }
+            onChange={ this.onEditPassword }
+            onDefaultAction={ this.onExecute }
+            type='password'
+            value={ vaultPassword }
+          />
+          <div className={ styles.passwordHint }>
+            { vault.meta.passwordHint }
+          </div>
+          <br />
+        </Form>
       </ConfirmDialog>
     );
   }
diff --git a/js/src/modals/Verification/GatherData/gatherData.js b/js/src/modals/Verification/GatherData/gatherData.js
index ecd096be6..fd5dc7008 100644
--- a/js/src/modals/Verification/GatherData/gatherData.js
+++ b/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 }
diff --git a/js/src/modals/Verification/QueryCode/queryCode.js b/js/src/modals/Verification/QueryCode/queryCode.js
index ded2cd224..0faf2fc2b 100644
--- a/js/src/modals/Verification/QueryCode/queryCode.js
+++ b/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'
diff --git a/js/src/modals/WalletSettings/walletSettings.js b/js/src/modals/WalletSettings/walletSettings.js
index b4ef7c548..9f787b0e3 100644
--- a/js/src/modals/WalletSettings/walletSettings.js
+++ b/js/src/modals/WalletSettings/walletSettings.js
@@ -166,6 +166,7 @@ class WalletSettings extends Component {
             </p>
 
             <Input
+              autoFocus
               hint='[ ... ]'
               label={
                 <FormattedMessage
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
index 14f6f47cf..9491bb2d3 100644
--- a/js/src/ui/Form/Input/input.js
+++ b/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();
+      }
     });
   }
 
diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js
index 92fc494f2..6a4f6c990 100644
--- a/js/src/ui/Form/InputAddress/inputAddress.js
+++ b/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 }
diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js
index 230ee788a..b6cc45cdd 100644
--- a/js/src/views/Account/account.js
+++ b/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 }
diff --git a/js/src/views/Accounts/accounts.js b/js/src/views/Accounts/accounts.js
index 8483c645f..9dd6bb156 100644
--- a/js/src/views/Accounts/accounts.js
+++ b/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 }
diff --git a/js/src/views/Address/address.js b/js/src/views/Address/address.js
index 2f0ebe651..6550f8cbd 100644
--- a/js/src/views/Address/address.js
+++ b/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 }
       />
     );
diff --git a/js/src/views/Addresses/addresses.js b/js/src/views/Addresses/addresses.js
index 2e615e841..4e40a7309 100644
--- a/js/src/views/Addresses/addresses.js
+++ b/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
diff --git a/js/src/views/Contract/contract.js b/js/src/views/Contract/contract.js
index 16521a2f5..d850e727c 100644
--- a/js/src/views/Contract/contract.js
+++ b/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 }
       />
     ];
diff --git a/js/src/views/Contracts/contracts.js b/js/src/views/Contracts/contracts.js
index 7c976e8f5..c168d641c 100644
--- a/js/src/views/Contracts/contracts.js
+++ b/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>,