aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
authorDan J Miller <danjm.com@gmail.com>2018-02-01 08:27:35 +0800
committerAlexander Tseung <alextsg@users.noreply.github.com>2018-02-01 08:27:35 +0800
commit78bce55858916ba9d3189f76db440768e6ae95b1 (patch)
tree90188eb367a8f0099405067d0a5f06cf1bf754ef /ui/app/components
parent971112d413fd30ee1607a0516c1b030976067db8 (diff)
downloadtangerine-wallet-browser-78bce55858916ba9d3189f76db440768e6ae95b1.tar
tangerine-wallet-browser-78bce55858916ba9d3189f76db440768e6ae95b1.tar.gz
tangerine-wallet-browser-78bce55858916ba9d3189f76db440768e6ae95b1.tar.bz2
tangerine-wallet-browser-78bce55858916ba9d3189f76db440768e6ae95b1.tar.lz
tangerine-wallet-browser-78bce55858916ba9d3189f76db440768e6ae95b1.tar.xz
tangerine-wallet-browser-78bce55858916ba9d3189f76db440768e6ae95b1.tar.zst
tangerine-wallet-browser-78bce55858916ba9d3189f76db440768e6ae95b1.zip
[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.
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/tooltip-v2.js31
-rw-r--r--ui/app/components/wallet-view.js36
2 files changed, 57 insertions, 10 deletions
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
new file mode 100644
index 000000000..133a0f16a
--- /dev/null
+++ b/ui/app/components/tooltip-v2.js
@@ -0,0 +1,31 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTippy = require('react-tippy').Tooltip
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+ Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+ const props = this.props
+ const { position, title, children, wrapperClassName } = props
+
+ return h('div', {
+ className: wrapperClassName,
+ }, [
+
+ h(ReactTippy, {
+ title,
+ position: position || 'left',
+ trigger: 'mouseenter',
+ hideOnClick: false,
+ size: 'small',
+ arrow: true,
+ }, children),
+
+ ])
+}
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(),