From 1f6f4977deb19543e4a4bd22d3f5126db931c4a2 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 18 Jun 2018 21:00:44 -0230 Subject: [PATCH 1/4] Handle large token balances in tx list hero --- ui/app/components/identicon.js | 1 + ui/app/components/token-balance.js | 2 +- ui/app/css/itcss/components/hero-balance.scss | 15 ++++++++++++++- ui/app/css/itcss/components/newui-sections.scss | 8 +++++--- 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index dce9b0449..424048745 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -36,6 +36,7 @@ IdenticonComponent.prototype.render = function () { key: 'identicon-' + address, style: { display: 'flex', + flexShrink: 0, alignItems: 'center', justifyContent: 'center', height: diameter, diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 1900ccec7..df3bd59bb 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -34,7 +34,7 @@ TokenBalance.prototype.render = function () { return isLoading ? h('span', '') : h('span.token-balance', [ - h('span.token-balance__amount', string), + h('span.hide-text-overflow.token-balance__amount', string), !balanceOnly && h('span.token-balance__symbol', symbol), ]) } diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 09d66aedd..eba93ecb4 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -27,25 +27,37 @@ @media screen and (max-width: $break-small) { flex-direction: column; flex: 0 0 auto; + max-width: 100%; } @media screen and (min-width: $break-large) { flex-direction: row; flex-grow: 3; + min-width: 0; } } .balance-display { .token-amount { color: $black; + max-width: 100%; + + .token-balance { + display: flex; + } } @media screen and (max-width: $break-small) { + max-width: 100%; text-align: center; .token-amount { font-size: 1.75rem; margin-top: 1rem; + + .token-balance { + flex-direction: column; + } } .fiat-amount { @@ -56,9 +68,10 @@ } @media screen and (min-width: $break-large) { - margin-left: .8em; + margin: 0 .8em; justify-content: flex-start; align-items: flex-start; + min-width: 0; .token-amount { font-size: 1.5rem; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index bbe0ee661..667e45ba2 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -26,14 +26,16 @@ $wallet-view-bg: $alabaster; //Account and transaction details .account-and-transaction-details { display: flex; - flex: 1 0 auto; + flex: 1 1 auto; + min-width: 0; } // tx view .tx-view { - flex: 63.5 0 66.5%; + flex: 1 1 66.5%; background: $tx-view-bg; + min-width: 0; // No title on mobile @media screen and (max-width: 575px) { @@ -286,7 +288,7 @@ $wallet-view-bg: $alabaster; } .token-balance__amount { - padding-right: 6px; + padding: 0 6px; } // first time From 312307365981d032091e909b3194c4e20cd55e17 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 18 Jun 2018 22:08:17 -0230 Subject: [PATCH 2/4] Scroll large amounts in the send component --- ui/app/components/send/currency-display.js | 2 +- ui/app/css/itcss/components/currency-display.scss | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index e410bc070..9c8ce0044 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -149,7 +149,7 @@ CurrencyDisplay.prototype.render = function () { } : {}), ref: input => { this.currencyInput = input }, style: { - width: this.getInputWidth(valueToRender, readOnly), + minWidth: this.getInputWidth(valueToRender, readOnly), }, min: 0, }), diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 3560b0b0c..3614aa868 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -1,6 +1,5 @@ .currency-display { height: 54px; - width: 100%ß; border: 1px solid $alto; border-radius: 4px; background-color: $white; @@ -21,7 +20,7 @@ line-height: 22px; border: none; outline: 0 !important; - max-width: 100%; + max-width: 22ch; } &__primary-currency { @@ -47,6 +46,9 @@ &__input-wrapper { position: relative; display: flex; + flex: 1; + max-width: 100%; + overflow-x: scroll; input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; @@ -75,4 +77,4 @@ display: none; } } -} \ No newline at end of file +} From 4cd4d99e70902fe14c3c91938df8f1557f2524e8 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 20 Jun 2018 15:03:32 -0230 Subject: [PATCH 3/4] Add explicit timeout for add token test --- test/e2e/beta/metamask-beta-ui.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index d911b91ed..bc8fd2919 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -430,7 +430,7 @@ describe('MetaMask', function () { it('renders the balance for the chosen token', async () => { const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) - await driver.wait(until.elementTextIs(balance, '0BAT')) + await driver.wait(until.elementTextIs(balance, '0BAT'), 10000) const tokenAmount = await balance.getText() assert.equal(tokenAmount, '0BAT') await delay(regularDelayMs) From 1509a4393a241eb18be6702a913f2041818b2972 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 20 Jun 2018 15:47:11 -0230 Subject: [PATCH 4/4] Accept whitespace when matching token balances in e2e tests --- test/e2e/beta/from-import-beta-ui.spec.js | 7 ++++--- test/e2e/beta/metamask-beta-ui.spec.js | 8 ++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js index 823c72a3a..8af654319 100644 --- a/test/e2e/beta/from-import-beta-ui.spec.js +++ b/test/e2e/beta/from-import-beta-ui.spec.js @@ -348,8 +348,9 @@ describe('Using MetaMask with an existing account', function () { it('renders the balance for the new token', async () => { const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) + await driver.wait(until.elementTextMatches(balance, /^0\s*BAT\s*$/), 10000) const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '0BAT') + assert.ok(/^0\s*BAT\s*$/.test(tokenAmount)) await delay(regularDelayMs) }) }) @@ -421,9 +422,9 @@ describe('Using MetaMask with an existing account', function () { it('renders the balance for the new token', async () => { const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) - await driver.wait(until.elementTextIs(balance, '100TST')) + await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/), 10000) const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '100TST') + assert.ok(/^100\s*TST\s*$/.test(tokenAmount)) await delay(regularDelayMs) }) }) diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index bc8fd2919..71329bff7 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -430,9 +430,9 @@ describe('MetaMask', function () { it('renders the balance for the chosen token', async () => { const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) - await driver.wait(until.elementTextIs(balance, '0BAT'), 10000) + await driver.wait(until.elementTextMatches(balance, /^0\s*BAT\s*$/), 10000) const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '0BAT') + assert.ok(/^0\s*BAT\s*$/.test(tokenAmount)) await delay(regularDelayMs) }) }) @@ -504,9 +504,9 @@ describe('MetaMask', function () { it('renders the balance for the new token', async () => { const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount')) - await driver.wait(until.elementTextIs(balance, '100TST')) + await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/)) const tokenAmount = await balance.getText() - assert.equal(tokenAmount, '100TST') + assert.ok(/^100\s*TST\s*$/.test(tokenAmount)) await delay(regularDelayMs) }) })