From acbaed59c0b7134b581f78ba235aab0a8091cb2b Mon Sep 17 00:00:00 2001
From: Jannis R <mail@jannisr.de>
Date: Thu, 10 Nov 2016 17:26:45 +0100
Subject: [PATCH 1/5] CopyToClipboard: clear timeout on unmount

---
 js/src/ui/CopyToClipboard/copyToClipboard.js | 21 ++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.js b/js/src/ui/CopyToClipboard/copyToClipboard.js
index 3351f2e40..a49da6adc 100644
--- a/js/src/ui/CopyToClipboard/copyToClipboard.js
+++ b/js/src/ui/CopyToClipboard/copyToClipboard.js
@@ -39,9 +39,17 @@ export default class CopyToClipboard extends Component {
   };
 
   state = {
-    copied: false
+    copied: false,
+    timeout: null
   };
 
+  componentWillUnmount () {
+    const { timeoutId } = this.state;
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+  }
+
   render () {
     const { data, label, size } = this.props;
     const { copied } = this.state;
@@ -65,11 +73,12 @@ export default class CopyToClipboard extends Component {
   onCopy = () => {
     const { cooldown, onCopy } = this.props;
 
-    this.setState({ copied: true });
-    setTimeout(() => {
-      this.setState({ copied: false });
-    }, cooldown);
-
+    this.setState({
+      copied: true,
+      timeout: setTimeout(() => {
+        this.setState({ copied: false, timeout: null });
+      }, cooldown)
+    });
     onCopy();
   }
 }

From 87c39f066c373c747e848d1499551994eea35831 Mon Sep 17 00:00:00 2001
From: Jannis R <mail@jannisr.de>
Date: Thu, 10 Nov 2016 17:27:04 +0100
Subject: [PATCH 2/5] Form/Input: use CopyToClipboard

---
 js/src/ui/Form/Input/input.css |  4 ---
 js/src/ui/Form/Input/input.js  | 62 +++-------------------------------
 2 files changed, 5 insertions(+), 61 deletions(-)

diff --git a/js/src/ui/Form/Input/input.css b/js/src/ui/Form/Input/input.css
index 62c2e39b2..bc7cfb840 100644
--- a/js/src/ui/Form/Input/input.css
+++ b/js/src/ui/Form/Input/input.css
@@ -24,8 +24,4 @@
 
 .copy {
   margin-right: 0.5em;
-
-  svg {
-    transition: all .5s ease-in-out;
-  }
 }
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
index 24a0a8089..27c270834 100644
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@@ -15,11 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 CopyToClipboard from '../../CopyToClipboard';
 
 import styles from './input.css';
 
@@ -77,9 +75,7 @@ export default class Input extends Component {
   }
 
   state = {
-    value: this.props.value || '',
-    timeoutId: null,
-    copied: false
+    value: this.props.value || ''
   }
 
   componentWillReceiveProps (newProps) {
@@ -88,14 +84,6 @@ export default class Input extends Component {
     }
   }
 
-  componentWillUnmount () {
-    const { timeoutId } = this.state;
-
-    if (timeoutId) {
-      window.clearTimeout(timeoutId);
-    }
-  }
-
   render () {
     const { value } = this.state;
     const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type } = this.props;
@@ -151,7 +139,7 @@ export default class Input extends Component {
 
   renderCopyButton () {
     const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
-    const { copied, value } = this.state;
+    const { value } = this.state;
 
     if (!allowCopy) {
       return null;
@@ -165,8 +153,6 @@ export default class Input extends Component {
       ? allowCopy
       : value;
 
-    const scale = copied ? 'scale(1.15)' : 'scale(1)';
-
     if (hideUnderline && !label) {
       style.marginBottom = 2;
     } else if (label && !hint) {
@@ -184,49 +170,11 @@ export default class Input extends Component {
 
     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>
+        <CopyToClipboard data={ text } />
       </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);
 

From e9b69bceab88355d459ab7d0c396ceb20848f795 Mon Sep 17 00:00:00 2001
From: Jannis R <mail@jannisr.de>
Date: Thu, 10 Nov 2016 18:09:54 +0100
Subject: [PATCH 3/5] Account Header: use CopyToClipboard

---
 js/src/views/Account/Header/header.css |  4 +-
 js/src/views/Account/Header/header.js  | 58 ++------------------------
 2 files changed, 6 insertions(+), 56 deletions(-)

diff --git a/js/src/views/Account/Header/header.css b/js/src/views/Account/Header/header.css
index ff3f985c3..74390face 100644
--- a/js/src/views/Account/Header/header.css
+++ b/js/src/views/Account/Header/header.css
@@ -43,6 +43,6 @@
 }
 
 .address {
-  white-space: nowrap;
-  font-family: monospace;
+  display: inline-block;
+  margin-left: .5em;
 }
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index d4b01cf56..66f0a36b9 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -15,13 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import IconButton from 'material-ui/IconButton';
-import Snackbar from 'material-ui/Snackbar';
-import CopyIcon from 'material-ui/svg-icons/content/content-copy';
-import { lightWhite, fullWhite, darkBlack } from 'material-ui/styles/colors';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
+import CopyToClipboard from '../../../ui/CopyToClipboard';
 
 import styles from './header.css';
 
@@ -37,8 +33,7 @@ export default class Header extends Component {
   }
 
   state = {
-    name: null,
-    addressCopied: false
+    name: null
   }
 
   componentWillMount () {
@@ -51,7 +46,6 @@ export default class Header extends Component {
 
   render () {
     const { account, balance } = this.props;
-    const { addressCopied } = this.state;
     const { address, meta, uuid } = account;
 
     if (!account) {
@@ -64,50 +58,14 @@ export default class Header extends Component {
 
     return (
       <div>
-
-        <Snackbar
-          open={ addressCopied }
-          message={
-            <span>
-              Address
-              <span className={ styles.address }> { address } </span>
-              copied to clipboard
-            </span>
-          }
-          autoHideDuration={ 4000 }
-          onRequestClose={ this.handleCopyAddressClose }
-          bodyStyle={ {
-            backgroundColor: darkBlack
-          } }
-        />
-
         <Container>
           <IdentityIcon
             address={ address } />
           <div className={ styles.floatleft }>
             <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
             <div className={ styles.addressline }>
-              <CopyToClipboard
-                onCopy={ this.handleCopyAddress }
-                text={ address } >
-                <IconButton
-                  tooltip='Copy address to clipboard'
-                  tooltipPosition='top-center'
-                  style={ {
-                    width: 32,
-                    height: 16,
-                    padding: 0
-                  } }
-                  iconStyle={ {
-                    width: 16,
-                    height: 16
-                  } }>
-                  <CopyIcon
-                    color={ addressCopied ? lightWhite : fullWhite }
-                  />
-                </IconButton>
-              </CopyToClipboard>
-              <span>{ address } </span>
+              <CopyToClipboard data={ address } />
+              <div className={ styles.address }>{ address }</div>
             </div>
             { uuidText }
             <div className={ styles.infoline }>
@@ -157,14 +115,6 @@ export default class Header extends Component {
     });
   }
 
-  handleCopyAddress = () => {
-    this.setState({ addressCopied: true });
-  }
-
-  handleCopyAddressClose = () => {
-    this.setState({ addressCopied: false });
-  }
-
   setName () {
     const { account } = this.props;
 

From 522b7108f94b44e898c3869c1d035ffc57b1b287 Mon Sep 17 00:00:00 2001
From: Jannis R <mail@jannisr.de>
Date: Thu, 10 Nov 2016 18:47:17 +0100
Subject: [PATCH 4/5] CopyToClipboard: show SnackBar

---
 js/src/ui/CopyToClipboard/copyToClipboard.css | 20 +++++++++++
 js/src/ui/CopyToClipboard/copyToClipboard.js  | 34 +++++++++++++------
 2 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 js/src/ui/CopyToClipboard/copyToClipboard.css

diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.css b/js/src/ui/CopyToClipboard/copyToClipboard.css
new file mode 100644
index 000000000..acf2bb204
--- /dev/null
+++ b/js/src/ui/CopyToClipboard/copyToClipboard.css
@@ -0,0 +1,20 @@
+/* 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/>.
+*/
+
+.data {
+  font-family: monospace;
+}
diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.js b/js/src/ui/CopyToClipboard/copyToClipboard.js
index a49da6adc..c78038617 100644
--- a/js/src/ui/CopyToClipboard/copyToClipboard.js
+++ b/js/src/ui/CopyToClipboard/copyToClipboard.js
@@ -16,11 +16,15 @@
 
 import React, { Component, PropTypes } from 'react';
 import { IconButton } from 'material-ui';
+import Snackbar from 'material-ui/Snackbar';
 import Clipboard from 'react-copy-to-clipboard';
 import CopyIcon from 'material-ui/svg-icons/content/content-copy';
 import Theme from '../Theme';
+import { darkBlack } from 'material-ui/styles/colors';
 const { textColor, disabledTextColor } = Theme.flatButton;
 
+import styles from './copyToClipboard.css';
+
 export default class CopyToClipboard extends Component {
   static propTypes = {
     data: PropTypes.string.isRequired,
@@ -56,16 +60,26 @@ export default class CopyToClipboard extends Component {
 
     return (
       <Clipboard onCopy={ this.onCopy } text={ data }>
-        <IconButton
-          tooltip={ copied ? 'done!' : label }
-          disableTouchRipple
-          tooltipPosition={ 'top-right' }
-          tooltipStyles={ { marginTop: `-${size / 4}px` } }
-          style={ { width: size, height: size, padding: '0' } }
-          iconStyle={ { width: size, height: size } }
-        >
-          <CopyIcon color={ copied ? disabledTextColor : textColor } />
-        </IconButton>
+        <div>
+          <Snackbar
+            open={ copied }
+            message={
+              <div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>
+            }
+            autoHideDuration={ 2000 }
+            bodyStyle={ { backgroundColor: darkBlack } }
+          />
+          <IconButton
+            tooltip={ copied ? 'done!' : label }
+            disableTouchRipple
+            tooltipPosition={ 'top-right' }
+            tooltipStyles={ { marginTop: `-${size / 4}px` } }
+            style={ { width: size, height: size, padding: '0' } }
+            iconStyle={ { width: size, height: size } }
+          >
+            <CopyIcon color={ copied ? disabledTextColor : textColor } />
+          </IconButton>
+        </div>
       </Clipboard>
     );
   }

From e9e947583091f0fd64b747ec25fc7fa71d2d9572 Mon Sep 17 00:00:00 2001
From: Jannis R <mail@jannisr.de>
Date: Mon, 14 Nov 2016 11:39:36 +0100
Subject: [PATCH 5/5] CopyToClipboard: remove tooltip

---
 js/src/ui/CopyToClipboard/copyToClipboard.css | 4 ++++
 js/src/ui/CopyToClipboard/copyToClipboard.js  | 9 ++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.css b/js/src/ui/CopyToClipboard/copyToClipboard.css
index acf2bb204..0c511ba45 100644
--- a/js/src/ui/CopyToClipboard/copyToClipboard.css
+++ b/js/src/ui/CopyToClipboard/copyToClipboard.css
@@ -15,6 +15,10 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+.wrapper {
+  display: inline-block;
+}
+
 .data {
   font-family: monospace;
 }
diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.js b/js/src/ui/CopyToClipboard/copyToClipboard.js
index c78038617..568520b09 100644
--- a/js/src/ui/CopyToClipboard/copyToClipboard.js
+++ b/js/src/ui/CopyToClipboard/copyToClipboard.js
@@ -28,7 +28,6 @@ import styles from './copyToClipboard.css';
 export default class CopyToClipboard extends Component {
   static propTypes = {
     data: PropTypes.string.isRequired,
-    label: PropTypes.string,
     onCopy: PropTypes.func,
     size: PropTypes.number, // in px
     cooldown: PropTypes.number // in ms
@@ -36,7 +35,6 @@ export default class CopyToClipboard extends Component {
 
   static defaultProps = {
     className: '',
-    label: 'copy to clipboard',
     onCopy: () => {},
     size: 16,
     cooldown: 1000
@@ -55,12 +53,12 @@ export default class CopyToClipboard extends Component {
   }
 
   render () {
-    const { data, label, size } = this.props;
+    const { data, size } = this.props;
     const { copied } = this.state;
 
     return (
       <Clipboard onCopy={ this.onCopy } text={ data }>
-        <div>
+        <div className={ styles.wrapper }>
           <Snackbar
             open={ copied }
             message={
@@ -70,10 +68,7 @@ export default class CopyToClipboard extends Component {
             bodyStyle={ { backgroundColor: darkBlack } }
           />
           <IconButton
-            tooltip={ copied ? 'done!' : label }
             disableTouchRipple
-            tooltipPosition={ 'top-right' }
-            tooltipStyles={ { marginTop: `-${size / 4}px` } }
             style={ { width: size, height: size, padding: '0' } }
             iconStyle={ { width: size, height: size } }
           >