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/modals/CreateAccount/AccountDetails/accountDetails.js

@@ -31,7 +31,8 @@ export default class AccountDetails extends Component {
     return (
       <Form>
         <Input
-          disabled
+          readOnly
+          allowCopy
           hint='a descriptive name for the account'
           label='account name'
           value={ name } />
@@ -54,7 +55,8 @@ export default class AccountDetails extends Component {
 
     return (
       <Input
-        disabled
+        readOnly
+        allowCopy
         hint='the account recovery phrase'
         label='account recovery phrase (keep safe)'
         value={ phrase } />

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

@@ -84,7 +84,6 @@ export default class CreateAccount extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='a strong, unique password'
               type='password'
@@ -94,7 +93,6 @@ export default class CreateAccount extends Component {
           </div>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password (repeat)'
               hint='verify your password'
               type='password'

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

@@ -72,7 +72,6 @@ export default class NewImport extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='the password to unlock the wallet'
               type='password'

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

@@ -75,7 +75,6 @@ export default class RawKey extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='a strong, unique password'
               type='password'
@@ -85,7 +84,6 @@ export default class RawKey extends Component {
           </div>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password (repeat)'
               hint='verify your password'
               type='password'

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

@@ -72,7 +72,6 @@ export default class RecoveryPhrase extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='a strong, unique password'
               type='password'
@@ -82,7 +81,6 @@ export default class RecoveryPhrase extends Component {
           </div>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password (repeat)'
               hint='verify your password'
               type='password'

js/src/modals/CreateAccount/createAccount.css

@@ -21,6 +21,15 @@
 .password {
   flex: 0 1 50%;
   width: 50%;
+  box-sizing: border-box;
+
+  &:nth-child(odd) {
+    padding-right: 0.25rem;
+  }
+
+  &:nth-child(even) {
+    padding-left: 0.25rem;
+  }
 }
 
 .passwords {

js/src/ui/Container/Title/title.css

@@ -15,7 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .byline {
-  color: #aaa;
   overflow: hidden;
   position: relative;
   line-height: 1.2em;
@@ -24,6 +23,12 @@
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+
+  color: #aaa;
+
+  * {
+    color: #aaa !important;
+  }
 }
 
 .title {

js/src/ui/Container/Title/title.js

@@ -24,7 +24,9 @@ export default class Title extends Component {
     title: PropTypes.oneOfType([
       PropTypes.string, PropTypes.node
     ]),
-    byline: PropTypes.string
+    byline: PropTypes.oneOfType([
+      PropTypes.string, PropTypes.node
+    ])
   }
 
   state = {
@@ -34,15 +36,21 @@ export default class Title extends Component {
   render () {
     const { className, title, byline } = this.props;
 
+    const byLine = typeof byline === 'string'
+      ? (
+      <span title={ byline }>
+        { byline }
+      </span>
+      )
+      : byline;
+
     return (
       <div className={ className }>
         <h3 className={ styles.title }>
           { title }
         </h3>
         <div className={ styles.byline }>
-          <span title={ byline }>
-            { byline }
-          </span>
+          { byLine }
         </div>
       </div>
     );

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

@@ -0,0 +1,31 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  position: relative;
+}
+
+.copy {
+  margin-right: 0.5em;
+
+  svg {
+    transition: all .5s ease-in-out;
+  }
+}

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

@@ -16,11 +16,22 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { TextField } from 'material-ui';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import CopyIcon from 'material-ui/svg-icons/content/content-copy';
+import { TextField, IconButton } from 'material-ui';
+import { lightWhite, fullWhite } from 'material-ui/styles/colors';
+
+import styles from './input.css';
 
 // TODO: duplicated in Select
 const UNDERLINE_DISABLED = {
-  borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
+  borderBottom: 'dotted 2px',
+  borderColor: 'rgba(255, 255, 255, 0.125)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
+};
+
+const UNDERLINE_READONLY = {
+  ...UNDERLINE_DISABLED,
+  cursor: 'text'
 };
 
 const UNDERLINE_NORMAL = {
@@ -34,6 +45,12 @@ export default class Input extends Component {
     children: PropTypes.node,
     className: PropTypes.string,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
+    allowCopy: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.bool
+    ]),
+    floatCopy: PropTypes.bool,
     error: PropTypes.string,
     hint: PropTypes.string,
     label: PropTypes.string,
@@ -45,17 +62,24 @@ export default class Input extends Component {
     rows: PropTypes.number,
     type: PropTypes.string,
     submitOnBlur: PropTypes.bool,
+    hideUnderline: PropTypes.bool,
     value: PropTypes.oneOfType([
       PropTypes.number, PropTypes.string
     ])
-  }
+  };
 
   static defaultProps = {
-    submitOnBlur: true
+    submitOnBlur: true,
+    readOnly: false,
+    allowCopy: false,
+    hideUnderline: false,
+    floatCopy: false
   }
 
   state = {
-    value: this.props.value || ''
+    value: this.props.value || '',
+    timeoutId: null,
+    copied: false
   }
 
   componentWillReceiveProps (newProps) {
@@ -64,36 +88,145 @@ export default class Input extends Component {
     }
   }
 
+  componentWillUnmount () {
+    const { timeoutId } = this.state;
+
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+  }
+
   render () {
     const { value } = this.state;
-    const { children, className, disabled, error, label, hint, multiLine, rows, type } = this.props;
+    const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type } = this.props;
+
+    const readOnly = this.props.readOnly || disabled;
+
+    const inputStyle = { overflow: 'hidden' };
+    const textFieldStyle = {};
+
+    if (readOnly) {
+      inputStyle.cursor = 'text';
+    }
+
+    if (hideUnderline && !hint) {
+      textFieldStyle.height = 'initial';
+    }
 
     return (
-      <TextField
-        autoComplete='off'
-        className={ className }
-        disabled={ disabled }
-        errorText={ error }
-        floatingLabelFixed
-        floatingLabelText={ label }
-        fullWidth
-        hintText={ hint }
-        multiLine={ multiLine }
-        name={ NAME_ID }
-        id={ NAME_ID }
-        rows={ rows }
-        type={ type || 'text' }
-        underlineDisabledStyle={ UNDERLINE_DISABLED }
-        underlineStyle={ UNDERLINE_NORMAL }
-        value={ value }
-        onBlur={ this.onBlur }
-        onChange={ this.onChange }
-        onKeyDown={ this.onKeyDown }>
-        { children }
-      </TextField>
+      <div className={ styles.container }>
+        { this.renderCopyButton() }
+        <TextField
+          autoComplete='off'
+          className={ className }
+          style={ textFieldStyle }
+
+          readOnly={ readOnly }
+
+          errorText={ error }
+          floatingLabelFixed
+          floatingLabelText={ label }
+          fullWidth
+          hintText={ hint }
+          multiLine={ multiLine }
+          name={ NAME_ID }
+          id={ NAME_ID }
+          rows={ rows }
+          type={ type || 'text' }
+          underlineDisabledStyle={ UNDERLINE_DISABLED }
+          underlineStyle={ readOnly ? UNDERLINE_READONLY : UNDERLINE_NORMAL }
+          underlineFocusStyle={ readOnly ? { display: 'none' } : null }
+          underlineShow={ !hideUnderline }
+          value={ value }
+          onBlur={ this.onBlur }
+          onChange={ this.onChange }
+          onKeyDown={ this.onKeyDown }
+          inputStyle={ inputStyle }
+        >
+          { children }
+        </TextField>
+      </div>
     );
   }
 
+  renderCopyButton () {
+    const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
+    const { copied, value } = this.state;
+
+    if (!allowCopy) {
+      return null;
+    }
+
+    const style = {
+      marginBottom: 13
+    };
+
+    const text = typeof allowCopy === 'string'
+      ? allowCopy
+      : value;
+
+    const scale = copied ? 'scale(1.15)' : 'scale(1)';
+
+    if (hideUnderline && !label) {
+      style.marginBottom = 2;
+    } else if (label && !hint) {
+      style.marginBottom = 4;
+    } else if (label && hint) {
+      style.marginBottom = 10;
+    }
+
+    if (floatCopy) {
+      style.position = 'absolute';
+      style.left = -24;
+      style.bottom = style.marginBottom;
+      style.marginBottom = 0;
+    }
+
+    return (
+      <div className={ styles.copy } style={ style }>
+        <CopyToClipboard
+          onCopy={ this.handleCopy }
+          text={ text } >
+          <IconButton
+            tooltip={ `${copied ? 'Copied' : 'Copy'} to clipboard` }
+            tooltipPosition='bottom-right'
+            style={ {
+              width: 16,
+              height: 16,
+              padding: 0
+            } }
+            iconStyle={ {
+              width: 16,
+              height: 16,
+              transform: scale
+            } }
+            tooltipStyles={ {
+              top: 16
+            } }
+          >
+            <CopyIcon
+              color={ copied ? lightWhite : fullWhite }
+            />
+          </IconButton>
+        </CopyToClipboard>
+      </div>
+    );
+  }
+
+  handleCopy = () => {
+    if (this.state.timeoutId) {
+      window.clearTimeout(this.state.timeoutId);
+    }
+
+    this.setState({ copied: true }, () => {
+      const timeoutId = window.setTimeout(() => {
+        this.setState({ copied: false });
+      }, 500);
+
+      this.setState({ timeoutId });
+    });
+  }
+
   onChange = (event, value) => {
     this.setValue(value);
 
@@ -130,8 +263,6 @@ export default class Input extends Component {
   }
 
   setValue (value) {
-    this.setState({
-      value
-    });
+    this.setState({ value });
   }
 }

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

@@ -29,4 +29,5 @@
 .icon {
   position: absolute;
   top: 35px;
+  left: 24px;
 }

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

@@ -60,7 +60,9 @@ class InputAddress extends Component {
           error={ error }
           value={ text && hasAccount ? account.name : value }
           onChange={ this.handleInputChange }
-          onSubmit={ onSubmit } />
+          onSubmit={ onSubmit }
+          allowCopy={ disabled ? value : false }
+        />
         { icon }
       </div>
     );

js/src/ui/MethodDecoding/methodDecoding.js

@@ -268,7 +268,8 @@ class MethodDecoding extends Component {
         default:
           return (
             <Input
-              disabled
+              readOnly
+              allowCopy
               key={ index }
               className={ styles.input }
               value={ this.renderValue(input.value) }

js/src/ui/Tooltips/tooltips.js

@@ -49,7 +49,6 @@ class Tooltips extends Component {
   redirect (props = this.props) {
     const { currentId } = props;
 
-    console.log('c', { currentId });
     if (currentId !== undefined && currentId !== -1) {
       const viewLink = '/accounts/';
       this.context.router.push(viewLink);

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') } />