Add read-only inputs to UI plus Copy to Clipboard buttons (#3095)

* Adds readOnly prop to Input, convert disabled props to it (#3066)

* WIP

* Adds copy icon to readOnly Input (#3009)

* Added Copy to Clipboard buttons on the UI (#3009)

* copiable to allowCopy props #3095

* Padded copy icons (#3095)

* Fixed password width in account creation

* Copyable value in MethodDecoding

js/src/views/Accounts/Summary/summary.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
 
-import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
+import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags, Input } from '../../../ui';
 
 export default class Summary extends Component {
   static contextTypes = {
@@ -47,6 +47,15 @@ export default class Summary extends Component {
     const { address } = account;
     const viewLink = `/${link || 'account'}/${address}`;
 
+    const addressComponent = (
+      <Input
+        readOnly
+        hideUnderline
+        value={ address }
+        allowCopy={ address }
+      />
+    );
+
     return (
       <Container>
         <Tags tags={ tags } handleAddSearchToken={ handleAddSearchToken } />
@@ -54,7 +63,7 @@ export default class Summary extends Component {
           address={ address } />
         <ContainerTitle
           title={ <Link to={ viewLink }>{ <IdentityName address={ address } unknown /> }</Link> }
-          byline={ address } />
+          byline={ addressComponent } />
         <Balance
           balance={ balance } />
         { children }

js/src/views/Application/application.js

@@ -42,7 +42,8 @@ class Application extends Component {
     children: PropTypes.node,
     netChain: PropTypes.string,
     isTest: PropTypes.bool,
-    pending: PropTypes.array
+    pending: PropTypes.array,
+    blockNumber: PropTypes.object
   }
 
   state = {
@@ -73,7 +74,7 @@ class Application extends Component {
   }
 
   renderApp () {
-    const { children, pending, netChain, isTest } = this.props;
+    const { children, pending, netChain, isTest, blockNumber } = this.props;
     const { showFirstRun } = this.state;
 
     return (
@@ -85,7 +86,7 @@ class Application extends Component {
           isTest={ isTest }
           pending={ pending } />
         { children }
-        <Status />
+        { blockNumber ? (<Status />) : null }
       </Container>
     );
   }
@@ -124,7 +125,7 @@ class Application extends Component {
 }
 
 function mapStateToProps (state) {
-  const { netChain, isTest } = state.nodeStatus;
+  const { netChain, isTest, blockNumber } = state.nodeStatus;
   const { hasAccounts } = state.personal;
   const { pending } = state.signer;
 
@@ -132,7 +133,8 @@ function mapStateToProps (state) {
     hasAccounts,
     netChain,
     isTest,
-    pending
+    pending,
+    blockNumber
   };
 }
 

js/src/views/Contract/Events/Event/event.js

@@ -129,10 +129,12 @@ class Event extends Component {
 
         return (
           <Input
-            disabled
+            readOnly
+            allowCopy
             className={ styles.input }
             value={ value }
-            label={ name } />
+            label={ name }
+          />
         );
     }
   }

js/src/views/Contract/Queries/inputQuery.js

@@ -16,7 +16,6 @@
 
 import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
-import Chip from 'material-ui/Chip';
 import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 
@@ -104,13 +103,21 @@ export default class InputQuery extends Component {
         display: this.renderValue(results[index])
       }))
       .sort((outA, outB) => outA.display.length - outB.display.length)
-      .map((out, index) => (<div key={ index }>
-        <div className={ styles.queryResultName }>{ out.name }</div>
-        <Chip className={ styles.queryValue }>
-          { out.display }
-        </Chip>
-        <br />
-      </div>));
+      .map((out, index) => (
+        <div key={ index }>
+          <div className={ styles.queryResultName }>
+            { out.name }
+          </div>
+
+          <Input
+            className={ styles.queryValue }
+            readOnly
+            allowCopy
+            value={ out.display }
+          />
+          <br />
+        </div>
+      ));
   }
 
   renderInput (input) {

js/src/views/Contract/Queries/queries.css

@@ -63,25 +63,25 @@
 }
 
 .methodResults > div {
-  margin: 0.5rem;
+  padding: 0.25rem 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 100%;
+  flex: 1 1 50%;
+  box-sizing: border-box;
+
+  & > div {
+    width: 100%;
+  }
+}
+
+.queryValue {
+  width: 100%;
 }
 
 .queryValue, .queryValue * {
-  user-select: text !important;
-  max-width: 100%;
-  box-sizing: border-box;
   white-space: normal !important;
   overflow-wrap: break-word !important;
-}
-
-.queryValue:hover {
-  cursor: text !important;
-}
-
-.queryResultName {
-  margin-bottom: 0.25rem;
+  max-width: 100%;
+  box-sizing: border-box;
 }

js/src/views/Contract/Queries/queries.js

@@ -16,11 +16,10 @@
 
 import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
-import Chip from 'material-ui/Chip';
 import { Card, CardTitle, CardText } from 'material-ui/Card';
 
 import InputQuery from './inputQuery';
-import { Container, ContainerTitle } from '../../../ui';
+import { Container, ContainerTitle, Input } from '../../../ui';
 
 import styles from './queries.css';
 
@@ -126,9 +125,12 @@ export default class Queries extends Component {
     }
 
     return (
-      <Chip className={ styles.queryValue }>
-        { valueToDisplay }
-      </Chip>
+      <Input
+        className={ styles.queryValue }
+        value={ valueToDisplay }
+        readOnly
+        allowCopy
+      />
     );
   }
 

js/src/views/Settings/Background/background.js

@@ -82,9 +82,9 @@ class Background extends Component {
     const { settings } = this.props;
     const { seeds } = this.state;
 
-    return seeds.map((seed) => {
+    return seeds.map((seed, index) => {
       return (
-        <div className={ styles.bgflex } key={ seed }>
+        <div className={ styles.bgflex } key={ index }>
           <div className={ styles.bgseed }>
             <ParityBackground
               className={ settings.backgroundSeed === seed ? styles.seedactive : styles.seed }

js/src/views/Status/components/MiningSettings/MiningSettings.js

@@ -45,26 +45,41 @@ export default class MiningSettings extends Component {
           hint='the mining author'
           value={ coinbase }
           onSubmit={ this.onAuthorChange }
-          { ...this._test('author') } />
+          allowCopy
+          floatCopy
+          { ...this._test('author') }
+        />
+
         <Input
           label='extradata'
           hint='extra data for mined blocks'
           value={ decodeExtraData(extraData) }
           onSubmit={ this.onExtraDataChange }
           defaultValue={ decodeExtraData(defaultExtraData) }
-          { ...this._test('extra-data') } />
+          allowCopy
+          floatCopy
+          { ...this._test('extra-data') }
+        />
+
         <Input
           label='minimal gas price'
           hint='the minimum gas price for mining'
           value={ toNiceNumber(minGasPrice) }
           onSubmit={ this.onMinGasPriceChange }
-          { ...this._test('min-gas-price') } />
+          allowCopy={ minGasPrice.toString() }
+          floatCopy
+          { ...this._test('min-gas-price') }
+        />
+
         <Input
           label='gas floor target'
           hint='the gas floor target for mining'
           value={ toNiceNumber(gasFloorTarget) }
           onSubmit={ this.onGasFloorTargetChange }
-          { ...this._test('gas-floor-target') } />
+          allowCopy={ gasFloorTarget.toString() }
+          floatCopy
+          { ...this._test('gas-floor-target') }
+        />
       </div>
     );
   }

js/src/views/Status/components/Status/Status.js

@@ -97,21 +97,21 @@ export default class Status extends Component {
       <div { ...this._test('settings') }>
         <ContainerTitle title='network settings' />
         <Input
-          disabled
+          readOnly
           label='chain'
           value={ nodeStatus.netChain }
           { ...this._test('chain') } />
         <div className={ styles.row }>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='peers'
               value={ peers }
               { ...this._test('peers') } />
           </div>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='network port'
               value={ nodeStatus.netPort.toString() }
               { ...this._test('network-port') } />
@@ -119,21 +119,21 @@ export default class Status extends Component {
         </div>
 
         <Input
-          disabled
+          readOnly
           label='rpc enabled'
           value={ rpcSettings.enabled ? 'yes' : 'no' }
           { ...this._test('rpc-enabled') } />
         <div className={ styles.row }>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='rpc interface'
               value={ rpcSettings.interface }
               { ...this._test('rpc-interface') } />
           </div>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='rpc port'
               value={ rpcSettings.port.toString() }
               { ...this._test('rpc-port') } />