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 () { WalletView.prototype.render = function () {
const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props
// temporary logs + fake extra wallets
console.log(selectedAccount) 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 || ''), { return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {}, style: {},
}, [ }, [
// TODO: Separate component: wallet account details // TODO: Separate component: wallet account details
h('div.flex-column', { h('div.flex-column.wallet-view-account-details', {
style: {} style: {}
}, [ }, [
@ -123,9 +133,7 @@ WalletView.prototype.render = function () {
]), ]),
//Wallet Balances //Wallet Balances
h('div.flex-column.wallet-balance-wrapper-active', {}, [ h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [ h('div.wallet-balance', {}, [
@ -136,13 +144,9 @@ WalletView.prototype.render = function () {
]), ]),
])
]), ]),
h('div.flex-column', {}, [ h('div.flex-column.wallet-balance-wrapper', {}, [
h('div', {}, [
h('div.wallet-balance', {}, [ 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; background: $tx-view-bg;
} }
// wallet view // wallet view and sidebar
.wallet-view { .wallet-view {
display: flex;
flex-direction: column;
flex: 33.5 0 33.5%; flex: 33.5 0 33.5%;
background: $wallet-view-bg; background: $wallet-view-bg;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
overflow-y: scroll; overflow-y: scroll;
} }
.wallet-view-account-details {
flex: 0 0 150px;
}
} }
.wallet-view-title-wrapper { .wallet-view-title-wrapper {
height: 25px; flex: 0 0 25px;
} }
.wallet-view-title { .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 { .wallet-view.sidebar {
flex: 1 0 230px; flex: 1 0 230px;
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
@ -85,6 +85,8 @@ $wallet-view-bg: $wild-sand;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
// main-container media queries
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
.lap-visible { .lap-visible {
display: flex; display: flex;
@ -154,3 +156,10 @@ $wallet-view-bg: $wild-sand;
text-align: center; 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: $wallet-balance-breakpoint-range:
"screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
.wallet-balance-wrapper {
flex: 0 0 80px
}
.wallet-balance { .wallet-balance {
background: inherit; background: inherit;
display: flex; display: flex;