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

Implement infinite scrolls (no lazy loading) for wallet view

Browse Source
This commit is contained in:
sdtsui 2017-08-11 09:17:14 -07:00
parent 9954c95b4a
commit 9b48e0aa53
3 changed files with 44 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
ui/app/components/wallet-view.js
View File

@ -41,14 +41,24 @@ const noop = () => {}
WalletView.prototype.render = function () {
const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props
// temporary logs + fake extra wallets
console.log(selectedAccount)
const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {},
}, [
// TODO: Separate component: wallet account details
h('div.flex-column', {
h('div.flex-column.wallet-view-account-details', {
style: {}
}, [
@ -123,9 +133,7 @@ WalletView.prototype.render = function () {
]),
//Wallet Balances
h('div.flex-column.wallet-balance-wrapper-active', {}, [
h('div', {}, [
h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [
h('div.wallet-balance', {}, [
@ -136,13 +144,9 @@ WalletView.prototype.render = function () {
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.flex-column.wallet-balance-wrapper', {}, [
h('div.wallet-balance', {}, [
@ -153,145 +157,17 @@ WalletView.prototype.render = function () {
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
h('div.flex-column', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [
h(BalanceComponent, {
balanceValue: selectedAccount.balance,
style: {},
}),
]),
])
]),
extraWallet,
extraWallet,
extraWallet,
extraWallet,
extraWallet,
extraWallet,
extraWallet,
extraWallet,
extraWallet,
extraWallet,
])
}

25
ui/app/css/itcss/components/newui-sections.scss
View File

@ -24,19 +24,25 @@ $wallet-view-bg: $wild-sand;
background: $tx-view-bg;
}
// wallet view
// wallet view and sidebar
.wallet-view {
display: flex;
flex-direction: column;
flex: 33.5 0 33.5%;
background: $wallet-view-bg;
@media screen and (min-width: 576px) {
overflow-y: scroll;
}
.wallet-view-account-details {
flex: 0 0 150px;
}
}
.wallet-view-title-wrapper {
height: 25px;
flex: 0 0 25px;
}
.wallet-view-title {
@ -49,12 +55,6 @@ $wallet-view-bg: $wild-sand;
}
}
.account-options-menu {
align-items: center;
justify-content: flex-start;
margin: 5% 7%;
}
.wallet-view.sidebar {
flex: 1 0 230px;
background: rgb(250, 250, 250);
@ -85,6 +85,8 @@ $wallet-view-bg: $wild-sand;
background-color: rgba(0, 0, 0, 0.3);
}
// main-container media queries
@media screen and (min-width: 576px) {
.lap-visible {
display: flex;
@ -154,3 +156,10 @@ $wallet-view-bg: $wild-sand;
text-align: center;
}
}
// account options dropdown
.account-options-menu {
align-items: center;
justify-content: flex-start;
margin: 5% 7%;
}

4
ui/app/css/itcss/components/wallet-balance.scss
View File

@ -3,6 +3,10 @@ $wallet-balance-breakpoint: 890px;
$wallet-balance-breakpoint-range:
"screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
.wallet-balance-wrapper {
flex: 0 0 80px
}
.wallet-balance {
background: inherit;
display: flex;