From 78bce55858916ba9d3189f76db440768e6ae95b1 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Wed, 31 Jan 2018 20:57:35 -0330
Subject: [NewUI] Use tooltip for copy to clipboard helper text on main screen.
 (#3120)

* Use tooltip for display of helper text in wallet views copy to clipboard feature.

* Use react-tippy in wallet-view.js; center arrow tooltip throughout tooltip text change.

* Remove unnecessary tabIndex attribute from wallet view address element.
---
 ui/app/components/wallet-view.js | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

(limited to 'ui/app/components/wallet-view.js')

diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index b1ef83cee..34f27ca2a 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -2,8 +2,10 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const classnames = require('classnames')
 const Identicon = require('./identicon')
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const Tooltip = require('./tooltip-v2.js')
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
@@ -45,6 +47,7 @@ function WalletView () {
   Component.call(this)
   this.state = {
     hasCopied: false,
+    copyToClipboardPressed: false,
   }
 }
 
@@ -134,17 +137,30 @@ WalletView.prototype.render = function () {
       ]),
     ]),
 
-
-    h('div.wallet-view__address', {
-      onClick: () => {
-        copyToClipboard(selectedAddress)
-        this.setState({ hasCopied: true })
-        setTimeout(() => this.setState({ hasCopied: false }), 3000)
-      },
+    h(Tooltip, {
+      position: 'bottom',
+      title: this.state.hasCopied ? 'Copied!' : 'Copy to clipboard',
+      wrapperClassName: 'wallet-view__tooltip',
     }, [
-      this.state.hasCopied && 'Copied to Clipboard',
-      !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
-      h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      h('button.wallet-view__address', {
+        className: classnames({
+          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
+        }),
+        onClick: () => {
+          copyToClipboard(selectedAddress)
+          this.setState({ hasCopied: true })
+          setTimeout(() => this.setState({ hasCopied: false }), 3000)
+        },
+        onMouseDown: () => {
+          this.setState({ copyToClipboardPressed: true })
+        },
+        onMouseUp: () => {
+          this.setState({ copyToClipboardPressed: false })
+        },
+      }, [
+        `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      ]),
     ]),
 
     this.renderWalletBalance(),
-- 
cgit