diff options
author | Dan Finlay <dan@danfinlay.com> | 2017-07-26 09:22:31 +0800 |
---|---|---|
committer | Dan Finlay <dan@danfinlay.com> | 2017-07-26 09:25:56 +0800 |
commit | 0ea6749dbc923a6e796b1de4bbd301d931739b9d (patch) | |
tree | 451348ed8b04fae821140db73dacc8ddb4e65ee8 /ui/app/components/token-list.js | |
parent | 4d218ac57a5db8c4d3d446fbfaa5ef8488c2a6d5 (diff) | |
download | tangerine-wallet-browser-0ea6749dbc923a6e796b1de4bbd301d931739b9d.tar.gz tangerine-wallet-browser-0ea6749dbc923a6e796b1de4bbd301d931739b9d.tar.zst tangerine-wallet-browser-0ea6749dbc923a6e796b1de4bbd301d931739b9d.zip |
Lots of flex rearrangement on account detail view
Includes removal of ReactCssTransitionGroup for a simpler UI refactor.
Diffstat (limited to 'ui/app/components/token-list.js')
-rw-r--r-- | ui/app/components/token-list.js | 40 |
1 files changed, 30 insertions, 10 deletions
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 20cfa897e..79ec3f351 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -47,10 +47,11 @@ TokenList.prototype.render = function () { return h(TokenCell, tokenData) }) - return h('div', [ - h('ol', { + return h('.full-flex-height', [ + this.renderTokenStatusBar(), + + h('ol.full-flex-height.flex-column', { style: { - height: '260px', overflowY: 'auto', display: 'flex', flexDirection: 'column', @@ -63,6 +64,7 @@ TokenList.prototype.render = function () { flex-direction: row; align-items: center; padding: 10px; + min-height: 50px; } li.token-cell > h3 { @@ -76,17 +78,35 @@ TokenList.prototype.render = function () { `), ...tokenViews, - tokenViews.length ? null : this.message('No Tokens Found.'), + h('.flex-grow'), ]), - this.addTokenButtonElement(), ]) } -TokenList.prototype.addTokenButtonElement = function () { - return h('div', [ - h('div.footer.hover-white.pointer', { +TokenList.prototype.renderTokenStatusBar = function () { + const { tokens } = this.state + + let msg + if (tokens.length > 0) { + msg = `You own ${tokens.length} tokens` + } else { + msg = `No tokens found` + } + + return h('div', { + style: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + minHeight: '70px', + padding: '10px', + }, + }, [ + h('span', msg), + h('button', { key: 'reveal-account-bar', - onClick: () => { + onClick: (event) => { + event.preventDefault() this.props.addToken() }, style: { @@ -97,7 +117,7 @@ TokenList.prototype.addTokenButtonElement = function () { alignItems: 'center', }, }, [ - h('i.fa.fa-plus.fa-lg'), + 'ADD TOKEN', ]), ]) } |