Skip to content

Commit

Permalink
warning inline on large displays
Browse files Browse the repository at this point in the history
  • Loading branch information
brad-decker committed Jun 4, 2020
1 parent 591d84d commit 8ff4e00
Show file tree
Hide file tree
Showing 7 changed files with 154 additions and 47 deletions.
16 changes: 16 additions & 0 deletions test/helper.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import nock from 'nock'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import log from 'loglevel'
import sinon from 'sinon'

nock.disableNetConnect()
nock.enableNetConnect('localhost')
Expand Down Expand Up @@ -82,6 +83,21 @@ window.localStorage = {}
// override metamask-logo
window.requestAnimationFrame = () => {}

// mock window.matchMedia which is not provided by jsDom
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: sinon.fake((query) => ({
matches: false,
media: query,
onchange: null,
addListener: sinon.fake(),
removeListener: sinon.fake(),
addEventListener: sinon.fake(),
removeEventListener: sinon.fake(),
dispatchEvent: sinon.fake(),
})),
})

// crypto.getRandomValues
if (!window.crypto) {
window.crypto = {}
Expand Down
36 changes: 34 additions & 2 deletions ui/app/components/app/asset-list-item/asset-list-item.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from 'react'
import React, { useMemo } from 'react'
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 InfoIcon from '../../ui/icon/info-icon.component'


const AssetListItem = ({
className,
Expand All @@ -15,12 +18,40 @@ const AssetListItem = ({
primary,
secondary,
}) => {
const titleIcon = useMemo(() => {
if (!warning) {
return null
}

return (
<Tooltip
wrapperClassName="asset-list-item__warning-tooltip"
interactive
position="bottom"
html={warning}
><InfoIcon severity="warning" />
</Tooltip>
)
}, [warning])

const midContent = useMemo(() => {
if (!warning) {
return null
}
return (
<>
<InfoIcon severity="warning" />
<div className="asset-list-item__warning">{warning}</div>
</>
)

}, [warning])
return (
<ListItem
className={classnames('asset-list-item', className)}
data-testid={dataTestId}
title={primary}
titleIcon={warning}
titleIcon={titleIcon}
subtitle={secondary}
onClick={onClick}
icon={(
Expand All @@ -31,6 +62,7 @@ const AssetListItem = ({
image={tokenImage}
/>
)}
midContent={midContent}
rightContent={<i className="fas fa-chevron-right asset-list-item__chevron-right" />}
/>
)
Expand Down
20 changes: 20 additions & 0 deletions ui/app/components/app/asset-list-item/asset-list-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,24 @@
margin-top: 6px;
font-size: 14px;
}

&__warning {
flex: 1;
margin-left: 8px;
color: $Grey-500;
}

.list-item__mid-content {
display: none;
}

@media (min-width: 576px) {
&__warning-tooltip {
display: none;
}

.list-item__mid-content {
display: flex;
}
}
}
32 changes: 11 additions & 21 deletions ui/app/components/app/token-cell/token-cell.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import classnames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
import { conversionUtil, multiplyCurrencies } from '../../../helpers/utils/conversion-util'
import Tooltip from '../../ui/tooltip-v2'
import AssetListItem from '../asset-list-item'
import { useSelector } from 'react-redux'
import { getTokenExchangeRates, getConversionRate, getCurrentCurrency, getSelectedAddress } from '../../../selectors'
import { useI18nContext } from '../../../hooks/useI18nContext'
import InfoIcon from '../../ui/icon/info-icon.component'
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'

export default function TokenCell ({ address, outdatedBalance, symbol, string, image, onClick }) {
Expand Down Expand Up @@ -47,25 +45,17 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i

const warning = outdatedBalance
? (
<Tooltip
interactive
position="bottom"
html={(
<div className="token-cell__outdated-tooltip">
{ t('troubleTokenBalances') }
<a
href={`https://ethplorer.io/address/${userAddress}`}
rel="noopener noreferrer"
target="_blank"
style={{ color: '#F7861C' }}
>
{ t('here') }
</a>
</div>
)}
>
<InfoIcon severity="warning" />
</Tooltip>
<span>
{ t('troubleTokenBalances') }
<a
href={`https://ethplorer.io/address/${userAddress}`}
rel="noopener noreferrer"
target="_blank"
style={{ color: '#F7861C' }}
>
{ t('here') }
</a>
</span>
)
: null

Expand Down
5 changes: 5 additions & 0 deletions ui/app/components/app/transaction-list-item/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
}

&__secondary-currency {
font-size: 12px;
margin-top: 4px;
color: $Grey-500;
}

Expand Down Expand Up @@ -46,5 +48,8 @@
white-space: nowrap;
line-height: 1rem;
}
&:empty {
padding-top: 0;
}
}
}
47 changes: 41 additions & 6 deletions ui/app/components/ui/list-item/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,28 @@

display: flex;
justify-content: flex-start;
align-items: stretch;
align-items: center;

&__icon > * {
margin: 8px 14px 0 0;
&__icon {
display: flex;
align-items: center;
> * {
margin: 0 16px 0 0;
}
}

&__col {
align-self: center;
align-items: center;
&-main {
flex-grow: 1;
flex: 1;
display: flex;
}
}

&__main-content {
align-self: center;
}

&__heading {
font-size: 16px;
line-height: 160%;
Expand All @@ -42,10 +51,36 @@
font-size: 12px;
line-height: 14px;
color: $Grey-500;
margin-top: 4px;
&:empty {
display: none;
}
}

&__mid-content {
display: none;
}

&__right-content {
margin: 0 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: right;
align-items: flex-end;
}

@media (min-width: 576px) {
&__col-main {
flex: 1.5;
}
&__mid-content {
display: flex;
align-items: center;
font-size: 12px;
flex: 2;
}
&__right-content {
flex: 1;
}
}
}
45 changes: 27 additions & 18 deletions ui/app/components/ui/list-item/list-item.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,43 @@ export default function ListItem ({
titleIcon,
icon,
rightContent,
midContent,
className,
'data-testid': dataTestId,
}) {
const primaryClassName = classnames('list-item', className)

return (
<div className={primaryClassName} onClick={onClick} data-testid={dataTestId}>
{icon && (
<div className="list-item__col list-item__icon">
{icon}
</div>
)}
<div className="list-item__col list-item__col-main">
<h2 className="list-item__heading">
{ title } {titleIcon && (
<span className="list-item__heading-wrap">
{titleIcon}
</span>
)}
</h2>
<h3 className="list-item__subheading">
{subtitleStatus}{subtitle}
</h3>
{children && (
<div className="list-item__more">
{ children }
{icon && (
<div className="list-item__icon">
{icon}
</div>
)}
<div className="list-item__main-content">
<h2 className="list-item__heading">
{ title } {titleIcon && (
<span className="list-item__heading-wrap">
{titleIcon}
</span>
)}
</h2>
<h3 className="list-item__subheading">
{subtitleStatus}{subtitle}
</h3>
{children && (
<div className="list-item__more">
{ children }
</div>
)}
</div>
</div>
{midContent && (
<div className="list-item__col list-item__mid-content">
{midContent}
</div>
)}
{rightContent && (
<div className="list-item__col list-item__right-content">
{rightContent}
Expand All @@ -57,6 +65,7 @@ ListItem.propTypes = {
children: PropTypes.node,
icon: PropTypes.node,
rightContent: PropTypes.node,
midContent: PropTypes.node,
className: PropTypes.string,
onClick: PropTypes.func,
'data-testid': PropTypes.string,
Expand Down

0 comments on commit 8ff4e00

Please sign in to comment.