mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
[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.
This commit is contained in:
Dan J Miller
Alexander Tseung
parent
971112d413
commit
78bce55858
@ -148,6 +148,7 @@
|
||||
"react-redux": "^5.0.5",
|
||||
"react-select": "^1.0.0",
|
||||
"react-simple-file-input": "^2.0.0",
|
||||
"react-tippy": "^1.2.2",
|
||||
"react-toggle-button": "^2.2.0",
|
||||
"react-tooltip-component": "^0.3.0",
|
||||
"react-transition-group": "^2.2.1",
|
||||
|
||||
31
ui/app/components/tooltip-v2.js
Normal file
31
ui/app/components/tooltip-v2.js
Normal file
@ -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),
|
||||
|
||||
])
|
||||
}
|
||||
@ -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(),
|
||||
|
||||
@ -53,3 +53,5 @@
|
||||
@import './editable-label.scss';
|
||||
|
||||
@import './new-account.scss';
|
||||
|
||||
@import './tooltip.scss';
|
||||
|
||||
@ -89,6 +89,12 @@ $wallet-view-bg: $alabaster;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__tooltip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
&__address {
|
||||
border-radius: 3px;
|
||||
background-color: $alto;
|
||||
@ -96,10 +102,13 @@ $wallet-view-bg: $alabaster;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
padding: 4px 12px;
|
||||
margin: 24px auto;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&__pressed {
|
||||
background-color: $manatee,
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar-close {
|
||||
|
||||
7
ui/app/css/itcss/components/tooltip.scss
Normal file
7
ui/app/css/itcss/components/tooltip.scss
Normal file
File diff suppressed because one or more lines are too long
65
yarn.lock
65
yarn.lock
@ -531,7 +531,7 @@ async-eventemitter@^0.2.2:
|
||||
dependencies:
|
||||
async "^2.4.0"
|
||||
|
||||
async-eventemitter@ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c, "async-eventemitter@github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c":
|
||||
async-eventemitter@ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c:
|
||||
version "0.2.3"
|
||||
resolved "https://codeload.github.com/ahultgren/async-eventemitter/tar.gz/fa06e39e56786ba541c180061dbf2c0a5bbf951c"
|
||||
dependencies:
|
||||
@ -2428,6 +2428,24 @@ component-inherit@0.0.3:
|
||||
version "0.0.3"
|
||||
resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
|
||||
|
||||
compressible@~2.0.11:
|
||||
version "2.0.12"
|
||||
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
|
||||
dependencies:
|
||||
mime-db ">= 1.30.0 < 2"
|
||||
|
||||
compression@^1.7.1:
|
||||
version "1.7.1"
|
||||
resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.1.tgz#eff2603efc2e22cf86f35d2eb93589f9875373db"
|
||||
dependencies:
|
||||
accepts "~1.3.4"
|
||||
bytes "3.0.0"
|
||||
compressible "~2.0.11"
|
||||
debug "2.6.9"
|
||||
on-headers "~1.0.1"
|
||||
safe-buffer "5.1.1"
|
||||
vary "~1.1.2"
|
||||
|
||||
concat-map@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
|
||||
@ -3783,7 +3801,7 @@ eth-json-rpc-filters@^1.2.5:
|
||||
json-rpc-engine "^3.4.0"
|
||||
lodash.flatmap "^4.5.0"
|
||||
|
||||
eth-json-rpc-infura@^2.0.7:
|
||||
eth-json-rpc-infura@^2.0.11:
|
||||
version "2.0.11"
|
||||
resolved "https://registry.yarnpkg.com/eth-json-rpc-infura/-/eth-json-rpc-infura-2.0.11.tgz#134bf54ff15e96a9116424c0db9b66aa079bfbbe"
|
||||
dependencies:
|
||||
@ -6335,7 +6353,7 @@ json-rpc-engine@^3.0.1, json-rpc-engine@^3.1.0, json-rpc-engine@^3.4.0:
|
||||
json-rpc-error "^2.0.0"
|
||||
promise-to-callback "^1.0.0"
|
||||
|
||||
json-rpc-engine@^3.5.0, json-rpc-engine@^3.6.0:
|
||||
json-rpc-engine@^3.6.0:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-3.6.0.tgz#0cc673dcb4b71103523fec81d1bba195a457f993"
|
||||
dependencies:
|
||||
@ -6345,6 +6363,16 @@ json-rpc-engine@^3.5.0, json-rpc-engine@^3.6.0:
|
||||
json-rpc-error "^2.0.0"
|
||||
promise-to-callback "^1.0.0"
|
||||
|
||||
json-rpc-engine@^3.6.1:
|
||||
version "3.6.1"
|
||||
resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-3.6.1.tgz#f53084726dc6dedeead0e2c457eeb997135f1e25"
|
||||
dependencies:
|
||||
async "^2.0.1"
|
||||
babel-preset-env "^1.3.2"
|
||||
babelify "^7.3.0"
|
||||
json-rpc-error "^2.0.0"
|
||||
promise-to-callback "^1.0.0"
|
||||
|
||||
json-rpc-error@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/json-rpc-error/-/json-rpc-error-2.0.0.tgz#a7af9c202838b5e905c7250e547f1aff77258a02"
|
||||
@ -7292,6 +7320,10 @@ miller-rabin@^4.0.0:
|
||||
bn.js "^4.0.0"
|
||||
brorand "^1.0.1"
|
||||
|
||||
"mime-db@>= 1.30.0 < 2":
|
||||
version "1.32.0"
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.32.0.tgz#485b3848b01a3cda5f968b4882c0771e58e09414"
|
||||
|
||||
mime-db@~1.30.0:
|
||||
version "1.30.0"
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
|
||||
@ -7971,6 +8003,10 @@ on-finished@~2.3.0:
|
||||
dependencies:
|
||||
ee-first "1.1.1"
|
||||
|
||||
on-headers@~1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
|
||||
|
||||
once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.3.3, once@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
|
||||
@ -8391,6 +8427,10 @@ polyfill-crypto.getrandomvalues@^1.0.0:
|
||||
dependencies:
|
||||
mersenne-twister "^1.0.1"
|
||||
|
||||
popper.js@^1.11.1:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.13.0.tgz#e1e7ff65cc43f7cf9cf16f1510a75e81f84f4565"
|
||||
|
||||
portfinder@~0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-0.2.1.tgz#b2b9b0164f9e17fa3a9c7db2304d0a75140c71ad"
|
||||
@ -8915,6 +8955,12 @@ react-testutils-additions@^15.2.0:
|
||||
object-assign "3.0.0"
|
||||
sizzle "2.3.3"
|
||||
|
||||
react-tippy@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.2.2.tgz#061467d34d29e7a5a9421822d125c451d6bb5153"
|
||||
dependencies:
|
||||
popper.js "^1.11.1"
|
||||
|
||||
react-toggle-button@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-toggle-button/-/react-toggle-button-2.2.0.tgz#a1b92143aa0df414642fcb141f0879f545bc5a89"
|
||||
@ -8933,6 +8979,13 @@ react-tooltip-component@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-tooltip-component/-/react-tooltip-component-0.3.0.tgz#fb3ec78c3270fe919692bc31f1404108bcf4785e"
|
||||
|
||||
react-tooltip@^3.4.0:
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d"
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react-transition-group@^1.2.0:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
|
||||
@ -11423,9 +11476,9 @@ web3-provider-engine@^13.3.2:
|
||||
xhr "^2.2.0"
|
||||
xtend "^4.0.1"
|
||||
|
||||
web3-provider-engine@^13.5.0:
|
||||
version "13.5.6"
|
||||
resolved "https://registry.yarnpkg.com/web3-provider-engine/-/web3-provider-engine-13.5.6.tgz#a321a2cf40db78fb478c2c20244c3195c48ef048"
|
||||
web3-provider-engine@^13.5.6:
|
||||
version "13.6.0"
|
||||
resolved "https://registry.yarnpkg.com/web3-provider-engine/-/web3-provider-engine-13.6.0.tgz#836f51c4ee48bd7583acf3696033779c704c2214"
|
||||
dependencies:
|
||||
async "^2.5.0"
|
||||
clone "^2.0.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user