From 4fc69e11d66ef24aaec39034d0763e1702842259 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 8 Mar 2017 18:35:00 +0100 Subject: [PATCH] Show token icons on list summary pages (#4826) (#4827) * Adjust balance overlay margins (no jumps) * Img only balances, small verifications * Invalid tests removed * Always wrap display (Thanks @ngotchac) * Update tests to reflect reality --- js/src/ui/AccountCard/accountCard.js | 1 - js/src/ui/AccountCard/accountCard.spec.js | 3 +- js/src/ui/Balance/balance.css | 50 +++++++++++++--------- js/src/ui/Balance/balance.js | 51 ++++++++++++++++++----- js/src/ui/Balance/balance.spec.js | 21 +--------- js/src/views/Accounts/Summary/summary.js | 3 +- js/src/views/Accounts/accounts.css | 23 +++++----- 7 files changed, 87 insertions(+), 65 deletions(-) diff --git a/js/src/ui/AccountCard/accountCard.js b/js/src/ui/AccountCard/accountCard.js index b5746bf82..107fc39d2 100644 --- a/js/src/ui/AccountCard/accountCard.js +++ b/js/src/ui/AccountCard/accountCard.js @@ -87,7 +87,6 @@ export default class AccountCard extends Component { balance={ balance } className={ styles.balance } showOnlyEth - showZeroValues /> diff --git a/js/src/ui/AccountCard/accountCard.spec.js b/js/src/ui/AccountCard/accountCard.spec.js index cecce7a89..6d7e921fd 100644 --- a/js/src/ui/AccountCard/accountCard.spec.js +++ b/js/src/ui/AccountCard/accountCard.spec.js @@ -74,9 +74,8 @@ describe('ui/AccountCard', () => { expect(balance.length).to.equal(1); }); - it('sets showOnlyEth & showZeroValues', () => { + it('sets showOnlyEth', () => { expect(balance.props().showOnlyEth).to.be.true; - expect(balance.props().showZeroValues).to.be.true; }); }); diff --git a/js/src/ui/Balance/balance.css b/js/src/ui/Balance/balance.css index 1d0c9fbf3..1176cafea 100644 --- a/js/src/ui/Balance/balance.css +++ b/js/src/ui/Balance/balance.css @@ -20,11 +20,16 @@ flex-wrap: wrap; margin: 0.75em 0 0 0; vertical-align: top; + + &:not(.full) { + height: 2.5em; + overflow: hidden; + } } .balance, .empty { - margin: 0.75em 0.5em 0 0; + margin: 0.75em 0.5em 4px 0; } .empty { @@ -37,28 +42,35 @@ } .balance { - background: rgba(255, 255, 255, 0.07); + align-items: center; border-radius: 16px; + display: flex; max-height: 24px; max-width: 100%; - display: flex; - align-items: center; -} -.balance img { - height: 32px; - margin: -4px 1em 0 0; - width: 32px; -} + &.full { + background: rgba(255, 255, 255, 0.07); -.balanceValue { - margin: 0 0.5em 0 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} + img { + margin-right: 1em; + } + } -.balanceTag { - font-size: 0.85em; - padding-right: 0.75rem; + img { + height: 32px; + margin-top: -4px; + width: 32px; + } + + .tag { + padding-right: 0.75rem; + font-size: 0.85em; + } + + .value { + margin: 0 0.5em 0 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } diff --git a/js/src/ui/Balance/balance.js b/js/src/ui/Balance/balance.js index 18652fa85..d00e1f01c 100644 --- a/js/src/ui/Balance/balance.js +++ b/js/src/ui/Balance/balance.js @@ -41,7 +41,7 @@ export default class Balance extends Component { render () { const { api } = this.context; - const { balance, className, showZeroValues, showOnlyEth } = this.props; + const { balance, className, showOnlyEth } = this.props; if (!balance || !balance.tokens) { return null; @@ -49,12 +49,13 @@ export default class Balance extends Component { let body = balance.tokens .filter((balance) => { - const hasBalance = showZeroValues || new BigNumber(balance.value).gt(0); - const isValidToken = !showOnlyEth || (balance.token.tag || '').toLowerCase() === 'eth'; + const isEthToken = (balance.token.tag || '').toLowerCase() === 'eth'; + const hasBalance = new BigNumber(balance.value).gt(0); - return hasBalance && isValidToken; + return hasBalance || isEthToken; }) .map((balance, index) => { + const isFullToken = !showOnlyEth || (balance.token.tag || '').toLowerCase() === 'eth'; const token = balance.token; let value; @@ -77,16 +78,36 @@ export default class Balance extends Component { value = api.util.fromWei(balance.value).toFormat(3); } + const classNames = [styles.balance]; + let details = null; + + if (isFullToken) { + classNames.push(styles.full); + details = [ +
+ + { value } + +
, +
+ { token.tag } +
+ ]; + } + return (
-
- { value } -
-
{ token.tag }
+ { details }
); }); @@ -103,7 +124,17 @@ export default class Balance extends Component { } return ( -
+
{ body }
); diff --git a/js/src/ui/Balance/balance.spec.js b/js/src/ui/Balance/balance.spec.js index 8a886b39b..ffc25243a 100644 --- a/js/src/ui/Balance/balance.spec.js +++ b/js/src/ui/Balance/balance.spec.js @@ -79,28 +79,9 @@ describe('ui/Balance', () => { }); describe('render specifiers', () => { - it('renders only the single token with showOnlyEth', () => { - render({ showOnlyEth: true }); - expect(component.find('Connect(TokenImage)')).to.have.length(1); - }); - it('renders all the tokens with showZeroValues', () => { render({ showZeroValues: true }); - expect(component.find('Connect(TokenImage)')).to.have.length(3); - }); - - it('shows ETH with zero value with showOnlyEth & showZeroValues', () => { - render({ - showOnlyEth: true, - showZeroValues: true, - balance: { - tokens: [ - { value: '0', token: { tag: 'ETH' } }, - { value: '345', token: { tag: 'GAV', format: 1 } } - ] - } - }); - expect(component.find('Connect(TokenImage)')).to.have.length(1); + expect(component.find('Connect(TokenImage)')).to.have.length(2); }); }); }); diff --git a/js/src/views/Accounts/Summary/summary.js b/js/src/views/Accounts/Summary/summary.js index 78f4dd5c4..601f9d8c2 100644 --- a/js/src/views/Accounts/Summary/summary.js +++ b/js/src/views/Accounts/Summary/summary.js @@ -116,7 +116,6 @@ class Summary extends Component { { this.renderBalance(false) } { this.renderDescription(account.meta) } { this.renderOwners() } - { this.renderCertifications() } { this.renderVault(account.meta) }
} @@ -155,8 +154,8 @@ class Summary extends Component {
{ this.renderBalance(true) } - { this.renderCertifications(true) }
+ { this.renderCertifications(true) } ); } diff --git a/js/src/views/Accounts/accounts.css b/js/src/views/Accounts/accounts.css index 296ae6714..de7240cb9 100644 --- a/js/src/views/Accounts/accounts.css +++ b/js/src/views/Accounts/accounts.css @@ -41,19 +41,24 @@ margin-top: 1.5em; } + .iconCertifications { + top: 72px; + opacity: 1; + position: absolute; + left: 88px; + + img { + height: 1em !important; + width: 1em !important; + } + } + .summary { position: relative; .ethBalances { opacity: 1; } - - .iconCertifications { - bottom: -0.25em; - opacity: 1; - position: absolute; - right: 0; - } } .overlay { @@ -82,10 +87,6 @@ .ethBalances { opacity: 0; } - - .iconCertifications { - opacity: 0; - } } }