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

Account menu white check mark

Browse Source
This commit is contained in:
Chi Kei Chan 2017-10-24 00:13:49 -07:00
parent a63373401b
commit 4401800a42
5 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/images/check-white.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="13px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
<title>check-white</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="MetaMascara-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="account-dropdown-top-bar-IXD" transform="translate(-17.000000, -80.000000)" fill-rule="nonzero" fill="#FFFFFF">
<g id="Group-11" transform="translate(18.000000, 74.000000)">
<polygon id="check-white" points="4.2 15.5712828 0.714212839 12.0143571 -0.714212839 13.4142143 4.2 18.4287172 14.7142128 7.69992858 13.2857872 6.30007142"></polygon>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 872 B

6
ui/app/components/account-menu/index.js
View File

@ -98,14 +98,14 @@ AccountMenu.prototype.renderAccounts = function () {
const { const {
identities, identities,
accounts, accounts,
selected, selectedAddress,
keyrings, keyrings,
showAccountDetail, showAccountDetail,
} = this.props } = this.props
return Object.keys(identities).map((key, index) => { return Object.keys(identities).map((key, index) => {
const identity = identities[key] const identity = identities[key]
const isSelected = identity.address === selected const isSelected = identity.address === selectedAddress
const balanceValue = accounts[key] ? accounts[key].balance : '' const balanceValue = accounts[key] ? accounts[key].balance : ''
const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...' const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
@ -121,7 +121,7 @@ AccountMenu.prototype.renderAccounts = function () {
{ onClick: () => showAccountDetail(identity.address) }, { onClick: () => showAccountDetail(identity.address) },
[ [
h('div.account-menu__check-mark', [ h('div.account-menu__check-mark', [
isSelected ? h('i.fa.fa-check') : null, isSelected ? h('div.account-menu__check-mark-icon') : null,
]), ]),
h( h(

7
ui/app/components/tx-view.js
View File

@ -109,14 +109,15 @@ TxView.prototype.render = function () {
margin: '1em 0.9em', margin: '1em 0.9em',
alignItems: 'center', alignItems: 'center',
}, },
onClick: () => {
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
},
}, [ }, [
h('div.fa.fa-bars', { h('div.fa.fa-bars', {
style: { style: {
fontSize: '1.3em', fontSize: '1.3em',
cursor: 'pointer',
},
onClick: () => {
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
}, },
}, []), }, []),

11
ui/app/css/itcss/components/account-menu.scss
View File

@ -90,9 +90,20 @@
&__check-mark { &__check-mark {
width: 14px; width: 14px;
margin-right: 12px;
flex: 0 0 auto; flex: 0 0 auto;
} }
&__check-mark-icon {
background-image: url("images/check-white.svg");
height: 18px;
width: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 3px 0;
}
.identicon { .identicon {
margin: 0 12px 0 0; margin: 0 12px 0 0;
flex: 0 0 auto; flex: 0 0 auto;

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

@ -101,8 +101,8 @@ $wallet-view-bg: $wild-sand;
font-size: 40px; font-size: 40px;
color: $tundora; color: $tundora;
position: absolute; position: absolute;
top: 15px; top: 12px;
left: 15px; left: 12px;
cursor: pointer; cursor: pointer;
} }
} }