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

Position account icon, name, and caret

Browse Source
This commit is contained in:
sdtsui 2017-08-06 21:54:42 -07:00
parent 29662ff7b4
commit ba50411bb2
3 changed files with 85 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/app/components/account-dropdowns.js
View File

@ -218,16 +218,16 @@ class AccountDropdowns extends Component {
},
[
enableAccountsSelector && h(
// 'i.fa.fa-angle-down',
'div.cursor-pointer.color-orange.accounts-selector',
'i.fa.fa-angle-down',
// 'div.cursor-pointer.color-orange.accounts-selector',
{
style: {
// fontSize: '1.8em',
background: 'url(images/switch_acc.svg) white center center no-repeat',
height: '25px',
width: '25px',
transform: 'scale(0.75)',
marginRight: '3px',
// fontSize: '135%',
// background: 'url(images/switch_acc.svg) white center center no-repeat',
// height: '25px',
// width: '25px',
// transform: 'scale(0.75)',
// marginRight: '3px',
},
onClick: (event) => {
event.stopPropagation()
@ -243,8 +243,7 @@ class AccountDropdowns extends Component {
'i.fa.fa-ellipsis-h',
{
style: {
marginRight: '0.5em',
fontSize: '1.8em',
fontSize: '135%',
},
onClick: (event) => {
event.stopPropagation()

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

@ -13,6 +13,7 @@ function mapStateToProps (state) {
return {
network: state.metamask.network,
sidebarOpen: state.appState.sidebarOpen,
identities: state.metamask.identities,
}
}
@ -32,7 +33,7 @@ const noop = () => {}
WalletView.prototype.render = function () {
const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address
const { network, responsiveDisplayClassname, style } = this.props
const { network, responsiveDisplayClassname, style, identities } = this.props
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {},
@ -43,19 +44,64 @@ WalletView.prototype.render = function () {
style: {}
}, [
h('.identicon-wrapper.select-none', [
h(Identicon, {
diameter: 24,
address: selected,
}),
h('div.flex-row.account-options-menu', {
}, [
h(AccountDropdowns, {
// selected,
// network,
// identities: props.identities,
enableAccountOptions: true,
}, []),
]),
h('span.account-name', {
style: {}
h('div.flex-column.flex-center', {
}, [
'Account 1'
h('.identicon-wrapper.select-none', {
style: {
marginBottom: '1%',
},
}, [
h(Identicon, {
diameter: 54,
address: selected,
}),
]),
h('span.account-name', {
style: {}
}, [
'Account 1'
]),
// h(AccountDropdowns, {
// style: {
// // position: 'absolute',
// // left: '58.5%',
// // top: '10.25%',
// },
// selected,
// network,
// identities,
// enableAccountsSelector: true,
// }, []),
h('div.flex-column.flex-center,', {
style: {
position: 'absolute',
marginLeft: '42px',
marginTop: '-10px',
},
}, h('i.fa.fa-angle-down', {}, [])),
]),
// position: absolute;
// left: 58.5%;
// top: 10.25%;
h(
AccountDropdowns,
{

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

@ -15,17 +15,27 @@
// tx view
.tx-view {
flex: 63.5 0 66.5%;
background: '#FFFFFF'; // TODO: add to resuable colors
background: #FFFFFF; // TODO: add to resuable colors
}
// wallet view
.wallet-view {
flex: 33.5 0 33.5%;
background: #FAFAFA, // TODO: add to reusable colors
}
// wallet view
.account-options-menu {
align-items: center;
justify-content: flex-start;
margin: 5% 7%;
}
.wallet-view.sidebar {
flex: 1 0 230px;
@ -118,6 +128,13 @@
// wallet view
.account-name {
font-size: 102%;
margin-left: 3%;
@media screen and (max-width: 575px) {
font-size: 102%;
margin-left: 3%;
}
@media screen and (max-width: 575px) {
text-align: center;
}
}