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
2017-02-24 12:26:30 +01:00 · 2017-02-24 12:26:30 +01:00 · 0b214450e3
parent f97e775498
commit 0b214450e3
24 changed files with 116 additions and 80 deletions
--- 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={
--- 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
--- 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
--- 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
--- 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
--- 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'
--- 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;
--- 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={
--- 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 }
          />
--- 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
--- 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
--- 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;
--- 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>
    );
  }
--- 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 }
--- 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'
--- 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
--- 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();
+      }
    });
  }

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