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

Styling and UX changes on sidebar

Browse Source
This commit is contained in:
Chi Kei Chan 2017-10-24 20:04:29 -07:00
parent ad91fcd662
commit 630ab79cc3
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,9 @@ function mapDispatchToProps (dispatch) {
inherits(WalletView, Component) inherits(WalletView, Component)
function WalletView () { function WalletView () {
Component.call(this) Component.call(this)
this.state = {
hasCopied: false,
}
} }
WalletView.prototype.renderWalletBalance = function () { WalletView.prototype.renderWalletBalance = function () {
@ -132,19 +135,18 @@ WalletView.prototype.render = function () {
]), ]),
h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [ h('div.wallet-view__address', {
`${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, onClick: () => {
copyToClipboard(selectedAddress)
this.setState({ hasCopied: true })
setTimeout(() => this.setState({ hasCopied: false }), 3000)
},
}, [
this.state.hasCopied && 'Copied to Clipboard',
!this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
]), ]),
// 'Wallet' - Title
// Not visible on mobile
h('div.flex-column.wallet-view-title-wrapper', [
h('span.wallet-view-title', [
'Wallet',
]),
]),
this.renderWalletBalance(), this.renderWalletBalance(),
h(TokenList), h(TokenList),

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

@ -1,4 +1,4 @@
$wallet-balance-bg: $gallery; $wallet-balance-bg: #e7e7e7;
$wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint: 890px;
$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
@ -20,6 +20,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
cursor: pointer; cursor: pointer;
border-top: 1px solid $wallet-balance-bg;
.balance-container { .balance-container {
display: flex; display: flex;