m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

remove old tooltip component and styles (#9250)

Browse Source 
The old tooltip component was only used in two places. Removing those usages
was simple and straight forward. So, instead of colocating the old tooltip
styles with the deprecated tooltip component, I removed all old styles and
made tooltip-v2 now simply 'tooltip' and removed the deprecated component.
This commit is contained in:
Brad Decker 2020-08-18 11:13:55 -05:00 committed by GitHub
parent 27e1189c91
commit d5a539e0e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 21 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js
View File

@ -19,7 +19,7 @@ import { isExtensionUrl } from '../../../../helpers/utils/util'
import Popover from '../../../ui/popover'
import Button from '../../../ui/button'
import Checkbox from '../../../ui/check-box'
import Tooltip from '../../../ui/tooltip-v2'
import Tooltip from '../../../ui/tooltip'
import ConnectedAccountsList from '../../connected-accounts-list'
import { useI18nContext } from '../../../../hooks/useI18nContext'

2
ui/app/components/app/asset-list-item/asset-list-item.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import classnames from 'classnames'
import Identicon from '../../ui/identicon'
import ListItem from '../../ui/list-item'
import Tooltip from '../../ui/tooltip-v2'
import Tooltip from '../../ui/tooltip'
import InfoIcon from '../../ui/icon/info-icon.component'
import Button from '../../ui/button'
import { useI18nContext } from '../../../hooks/useI18nContext'

2
ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
import PermissionsConnectHeader from '../../permissions-connect-header'
import Tooltip from '../../../ui/tooltip-v2'
import Tooltip from '../../../ui/tooltip'
import CheckBox from '../../../ui/check-box'
export default class PermissionPageContainerContent extends PureComponent {

2
ui/app/components/app/selected-account/selected-account.component.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import copyToClipboard from 'copy-to-clipboard'
import { shortenAddress, checksumAddress } from '../../../helpers/utils/util'
import Tooltip from '../../ui/tooltip-v2'
import Tooltip from '../../ui/tooltip'
class SelectedAccount extends Component {
state = {

2
ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
View File

@ -114,7 +114,7 @@ export default class TransactionListItemDetails extends PureComponent {
return cancelDisabled
? (
<Tooltip title={t('notEnoughGas')}>
<Tooltip title={t('notEnoughGas')} position="bottom">
<div>
<Button
type="raised"

2
ui/app/components/app/transaction-list-item/transaction-list-item.component.js
View File

@ -89,7 +89,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
return cancelEnabled
? cancelButton
: (
<Tooltip title={t('notEnoughGas')}>
<Tooltip title={t('notEnoughGas')} position="bottom">
<div>
{cancelButton}
</div>

2
ui/app/components/app/transaction-status/tests/transaction-status.component.test.js
View File

@ -4,7 +4,7 @@ import { mount } from 'enzyme'
import sinon from 'sinon'
import * as i18nHook from '../../../../hooks/useI18nContext'
import TransactionStatus from '../transaction-status.component'
import Tooltip from '../../../ui/tooltip-v2'
import Tooltip from '../../../ui/tooltip'
describe('TransactionStatus Component', function () {
before(function () {

2
ui/app/components/app/transaction-status/transaction-status.component.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import Tooltip from '../../ui/tooltip-v2'
import Tooltip from '../../ui/tooltip'
import {
UNAPPROVED_STATUS,

2
ui/app/components/app/wallet-overview/eth-overview.js
View File

@ -10,7 +10,7 @@ import { I18nContext } from '../../../contexts/i18n'
import WalletOverview from './wallet-overview'
import { SEND_ROUTE } from '../../../helpers/constants/routes'
import { useMetricEvent } from '../../../hooks/useMetricEvent'
import Tooltip from '../../ui/tooltip-v2'
import Tooltip from '../../ui/tooltip'
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
import { showModal } from '../../../store/actions'

2
ui/app/components/ui/account-mismatch-warning/account-mismatch-warning.component.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import Tooltip from '../tooltip-v2'
import Tooltip from '../tooltip'
import { useSelector } from 'react-redux'
import PropTypes from 'prop-types'
import { getSelectedAccount } from '../../../selectors'

2
ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import Identicon from '../identicon'
import Tooltip from '../tooltip-v2'
import Tooltip from '../tooltip'
import copyToClipboard from 'copy-to-clipboard'
import { DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT } from './sender-to-recipient.constants'
import { checksumAddress, shortenAddress } from '../../../helpers/utils/util'

189
ui/app/components/ui/tooltip.js
View File

@ -1,189 +0,0 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class ReactTooltip extends Component {
static propTypes = {
container: PropTypes.any,
children: PropTypes.node.isRequired,
title: PropTypes.string.isRequired,
position: PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
fixed: PropTypes.bool,
space: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
static defaultProps = {
container: document.body,
position: 'top',
fixed: true,
space: 5,
}
componentDidMount = () => {
this.container = this.props.container || document.body
/* eslint-disable react/no-find-dom-node */
this.componentEl = ReactDOM.findDOMNode(this)
this.tooltipEl = document.createElement('div')
const tooltipArrowEl = document.createElement('div')
tooltipArrowEl.className = 'tooltip-arrow'
const tooltipContentEl = document.createElement('div')
tooltipContentEl.className = 'tooltip-inner'
tooltipContentEl.textContent = this.props.title
this.tooltipEl.appendChild(tooltipArrowEl)
this.tooltipEl.appendChild(tooltipContentEl)
this.tooltipEl.className = 'tooltip ' + this.props.position
this.container.appendChild(this.tooltipEl)
this.resetTooltip()
this.componentEl.addEventListener(this.props.fixed ? 'mouseenter' : 'mousemove', this.handleMouseMove)
this.componentEl.addEventListener('mouseleave', this.handleMouseOut)
}
componentDidUpdate = () => {
this.tooltipEl.className = 'tooltip ' + this.props.position
this.tooltipEl.childNodes[1].textContent = this.props.title
}
componentWillUnmount = () => {
this.componentEl.removeEventListener(this.props.fixed ? 'mouseenter' : 'mousemove', this.handleMouseMove)
this.componentEl.removeEventListener('mouseleave', this.handleMouseOut)
this.container.removeChild(this.tooltipEl)
}
resetTooltip = () => {
this.tooltipEl.style.transition = 'opacity 0.4s'
this.tooltipEl.style.left = '-500px'
this.tooltipEl.style.top = '-500px'
this.tooltipEl.style.opacity = 0
}
handleMouseMove = (e) => {
if (this.props.title === '') {
return
}
const tooltipPosition = this.getTooltipPosition(e)
const tooltipOffset = this.getTooltipOffset()
this.tooltipEl.style.left = tooltipPosition.x + tooltipOffset.x + 'px'
this.tooltipEl.style.top = tooltipPosition.y + tooltipOffset.y + 'px'
this.tooltipEl.style.opacity = 1
}
handleMouseOut = () => {
this.resetTooltip()
}
getTooltipPosition = (e) => {
let pointX
let pointY
const bodyRect = document.body.getBoundingClientRect()
const containerRect = this.container.getBoundingClientRect()
const containerOffsetX = containerRect.left - bodyRect.left
const containerOffsetY = containerRect.top - bodyRect.top
if (this.props.fixed) {
const componentRect = this.componentEl.getBoundingClientRect()
const componentOffsetX = componentRect.left - containerOffsetX
const componentOffsetY = componentRect.top - containerOffsetY
const componentWidth = this.componentEl.offsetWidth
const componentHeight = this.componentEl.offsetHeight
let cOffsetX = 0
let cOffsetY = 0
switch (this.props.position) {
case 'top':
cOffsetX = componentWidth / 2
cOffsetY = 0
break
case 'right':
cOffsetX = componentWidth
cOffsetY = componentHeight / 2
break
case 'bottom':
cOffsetX = componentWidth / 2
cOffsetY = componentHeight
break
case 'left':
cOffsetX = 0
cOffsetY = componentHeight / 2
break
default:
cOffsetX = componentWidth / 2
cOffsetY = 0
break
}
pointX = componentOffsetX + cOffsetX + (window.scrollX || window.pageXOffset)
pointY = componentOffsetY + cOffsetY + (window.scrollY || window.pageYOffset)
} else {
const clientX = e.clientX
const clientY = e.clientY
pointX = clientX - containerOffsetX + (window.scrollX || window.pageXOffset)
pointY = clientY - containerOffsetY + (window.scrollY || window.pageYOffset)
}
return {
x: pointX,
y: pointY,
}
}
getTooltipOffset = () => {
const tooltipW = this.tooltipEl.offsetWidth
const tooltipH = this.tooltipEl.offsetHeight
let offsetX = 0
let offsetY = 0
switch (this.props.position) {
case 'top':
offsetX = -(tooltipW / 2)
offsetY = -(tooltipH + Number(this.props.space))
break
case 'right':
offsetX = Number(this.props.space)
offsetY = -(tooltipH / 2)
break
case 'bottom':
offsetX = -(tooltipW / 2)
offsetY = Number(this.props.space)
break
case 'left':
offsetX = -(tooltipW + Number(this.props.space))
offsetY = -(tooltipH / 2)
break
default:
offsetX = -(tooltipW + Number(this.props.space))
offsetY = -(tooltipH / 2)
break
}
return {
x: offsetX,
y: offsetY,
}
}
render () {
return this.props.children
}
}
function Tooltip ({ position, title, children }) {
return (
<ReactTooltip position={position} title={title} fixed>
{children}
</ReactTooltip>
)
}
Tooltip.defaultProps = {
position: 'left',
children: null,
}
Tooltip.propTypes = {
position: PropTypes.string,
title: PropTypes.string.isRequired,
children: PropTypes.node,
}
export default Tooltip

1
ui/app/components/ui/tooltip/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './tooltip'

0
ui/app/components/ui/tooltip-v2.js → ui/app/components/ui/tooltip/tooltip.js
View File

6
ui/app/css/index.scss
View File

@ -22,5 +22,9 @@
@import './itcss/objects/index';
@import './itcss/components/index';
@import './itcss/trumps/index';
// Other imports
/*
Third Party Library Styles
*/
@import '../../../node_modules/react-tippy/dist/tippy';
@import '../../../node_modules/react-select/dist/react-select';

1
ui/app/css/itcss/components/index.scss
View File

@ -15,5 +15,4 @@
@import './simple-dropdown';
@import './request-decrypt-message';
@import './pages/index';
@import './tooltip';
@import '../../../components/app/index';

126
ui/app/css/itcss/components/tooltip.scss
View File

@ -1,126 +0,0 @@
@import '../../../../../node_modules/react-tippy/dist/tippy';
.metamask-tooltip {
padding: 5px !important;
}
.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: 1.42857143;
text-align: left;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
font-size: 12px;
}
.tooltip.top {
margin-top: -3px;
padding: 5px 0;
}
.tooltip.right {
margin-left: 3px;
padding: 0 5px;
}
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}
.tooltip.left {
margin-left: -3px;
padding: 0 5px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
bottom: 0;
right: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}

2
ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
View File

@ -6,7 +6,7 @@ import classnames from 'classnames'
import AccountListItem from '../../components/app/account-list-item'
import Button from '../../components/ui/button'
import Identicon from '../../components/ui/identicon'
import Tooltip from '../../components/ui/tooltip-v2'
import Tooltip from '../../components/ui/tooltip'
import Copy from '../../components/ui/icon/copy-icon.component'
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums'

2
ui/app/pages/permissions-connect/choose-account/choose-account.component.js
View File

@ -4,7 +4,7 @@ import classnames from 'classnames'
import Identicon from '../../../components/ui/identicon'
import Button from '../../../components/ui/button'
import CheckBox, { CHECKED, INDETERMINATE, UNCHECKED } from '../../../components/ui/check-box'
import Tooltip from '../../../components/ui/tooltip-v2'
import Tooltip from '../../../components/ui/tooltip'
import { PRIMARY } from '../../../helpers/constants/common'
import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display'
import PermissionsConnectHeader from '../../../components/app/permissions-connect-header'

2
ui/app/pages/settings/alerts-tab/alerts-tab.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { useDispatch, useSelector } from 'react-redux'
import { ALERT_TYPES } from '../../../../../app/scripts/controllers/alert'
import Tooltip from '../../../components/ui/tooltip-v2'
import Tooltip from '../../../components/ui/tooltip'
import ToggleButton from '../../../components/ui/toggle-button'
import { setAlertEnabledness } from '../../../store/actions'
import { getAlertEnabledness } from '../../../ducks/metamask/metamask'

2
ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
View File

@ -6,7 +6,7 @@ import Identicon from '../../../../components/ui/identicon'
import Copy from '../../../../components/ui/icon/copy-icon.component'
import Button from '../../../../components/ui/button/button.component'
import Tooltip from '../../../../components/ui/tooltip-v2'
import Tooltip from '../../../../components/ui/tooltip'
import { useI18nContext } from '../../../../hooks/useI18nContext'
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'