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

Consolidate Home UI (#8141)

Browse Source 
The "Transaction View" component has been merged with the Home
component. The division between these two components seemed wrong
because the "Transaction View" contained the menu bar (distinctly a
"home" thing, not a "transaction" thing), and we will be adding more
non-transaction-related components shortly.

This also let us use a single `Media` component instead of two.
This commit is contained in:
Mark Stacey 2020-02-28 17:46:01 -04:00 committed by GitHub
parent fa3497e39b
commit 2b1a22b8b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/integration/lib/currency-localization.js
View File

@ -36,7 +36,7 @@ async function runCurrencyLocalizationTest (assert) {
await timeout(1000)
reactTriggerChange(selectState[0])
await timeout(1000)
const txView = await queryAsync($, '.transaction-view')
const txView = await queryAsync($, '.home__main-view')
const heroBalance = await findAsync($(txView), '.transaction-view-balance__balance')
const fiatAmount = await findAsync($(heroBalance), '.transaction-view-balance__secondary-balance')
assert.equal(fiatAmount[0].textContent, '₱102,707.97PHP')

2
ui/app/components/app/index.scss
View File

@ -52,8 +52,6 @@
@import 'transaction-breakdown/index';
@import 'transaction-view/index';
@import 'transaction-view-balance/index';
@import 'transaction-list/index';

1
ui/app/components/app/transaction-view/index.js
View File

@ -1 +0,0 @@
export { default } from './transaction-view.component'

28
ui/app/components/app/transaction-view/index.scss
View File

@ -1,28 +0,0 @@
.transaction-view {
flex: 1 1 66.5%;
background: $white;
min-width: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
&__balance-wrapper {
@media screen and (max-width: $break-small) {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex: 0 0 auto;
padding-top: 16px;
}
@media screen and (min-width: $break-large) {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 2.3em 2.37em .8em;
flex: 0 0 auto;
}
}
}

27
ui/app/components/app/transaction-view/transaction-view.component.js
View File

@ -1,27 +0,0 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Media from 'react-media'
import MenuBar from '../menu-bar'
import TransactionViewBalance from '../transaction-view-balance'
import TransactionList from '../transaction-list'
export default class TransactionView extends PureComponent {
static contextTypes = {
t: PropTypes.func,
}
render () {
return (
<div className="transaction-view">
<Media
query="(max-width: 575px)"
render={() => <MenuBar />}
/>
<div className="transaction-view__balance-wrapper">
<TransactionViewBalance />
</div>
<TransactionList />
</div>
)
}
}

35
ui/app/pages/home/home.component.js
View File

@ -7,7 +7,9 @@ import HomeNotification from '../../components/app/home-notification'
import DaiMigrationNotification from '../../components/app/dai-migration-component'
import MultipleNotifications from '../../components/app/multiple-notifications'
import WalletView from '../../components/app/wallet-view'
import TransactionView from '../../components/app/transaction-view'
import TransactionList from '../../components/app/transaction-list'
import TransactionViewBalance from '../../components/app/transaction-view-balance'
import MenuBar from '../../components/app/menu-bar'
import {
RESTORE_VAULT_ROUTE,
@ -167,13 +169,30 @@ export default class Home extends PureComponent {
<div className="home__container">
<Media
query="(min-width: 576px)"
render={() => <WalletView />}
/>
{ !history.location.pathname.match(/^\/confirm-transaction/)
? (
<TransactionView />
)
: null }
>
{
(isWideViewport) => (
<>
{ isWideViewport ? <WalletView /> : null }
{
!history.location.pathname.match(/^\/confirm-transaction/)
? (
<div className="home__main-view">
{
!isWideViewport ? <MenuBar /> : null
}
<div className="home__balance-wrapper">
<TransactionViewBalance />
</div>
<TransactionList />
</div>
)
: null
}
</>
)
}
</Media>
{ this.renderNotifications() }
</div>
</div>

37
ui/app/pages/home/index.scss
View File

@ -1,4 +1,35 @@
.home__container {
display: flex;
flex: 1 1 auto;
.home {
&__container {
display: flex;
flex: 1 1 auto;
}
&__main-view {
flex: 1 1 66.5%;
background: $white;
min-width: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
&__balance-wrapper {
@media screen and (max-width: $break-small) {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex: 0 0 auto;
padding-top: 16px;
}
@media screen and (min-width: $break-large) {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 2.3em 2.37em .8em;
flex: 0 0 auto;
}
}
}