New Sidebar uplift

feature/default_network_editable
Chi Kei Chan 7 years ago
parent 6d3f261b2f
commit a63373401b
  1. 1
      ui/app/components/account-menu/index.js
  2. 92
      ui/app/components/wallet-view.js
  3. 66
      ui/app/css/itcss/components/newui-sections.scss

@ -103,7 +103,6 @@ AccountMenu.prototype.renderAccounts = function () {
showAccountDetail,
} = this.props
console.log({ accounts })
return Object.keys(identities).map((key, index) => {
const identity = identities[key]
const isSelected = identity.address === selected

@ -3,7 +3,8 @@ const connect = require('react-redux').connect
const h = require('react-hyperscript')
const inherits = require('util').inherits
const Identicon = require('./identicon')
const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions')
const BalanceComponent = require('./balance-component')
const TokenList = require('./token-list')
@ -19,6 +20,7 @@ function mapStateToProps (state) {
identities: state.metamask.identities,
accounts: state.metamask.accounts,
tokens: state.metamask.tokens,
keyrings: state.metamask.keyrings,
selectedAddress: selectors.getSelectedAddress(state),
selectedIdentity: selectors.getSelectedIdentity(state),
selectedAccount: selectors.getSelectedAccount(state),
@ -28,9 +30,12 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch) {
return {
showSendPage: () => { dispatch(actions.showSendPage()) },
hideSidebar: () => { dispatch(actions.hideSidebar()) },
showSendPage: () => dispatch(actions.showSendPage()),
hideSidebar: () => dispatch(actions.hideSidebar()),
unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
}
}
@ -47,7 +52,7 @@ WalletView.prototype.renderWalletBalance = function () {
hideSidebar,
sidebarOpen,
} = this.props
console.log({ selectedAccount })
const selectedClass = selectedTokenAddress
? ''
: 'wallet-balance-wrapper--active'
@ -73,13 +78,24 @@ WalletView.prototype.renderWalletBalance = function () {
WalletView.prototype.render = function () {
const {
network, responsiveDisplayClassname, identities,
selectedAddress, accounts,
responsiveDisplayClassname,
selectedAddress,
selectedIdentity,
keyrings,
showAccountDetailModal,
hideSidebar,
} = this.props
// temporary logs + fake extra wallets
// console.log('walletview, selectedAccount:', selectedAccount)
const keyring = keyrings.find((kr) => {
return kr.accounts.includes(selectedAddress) ||
kr.accounts.includes(selectedIdentity.address)
})
const type = keyring.type
const isLoose = type !== 'HD Key Tree'
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {},
}, [
@ -88,57 +104,15 @@ WalletView.prototype.render = function () {
h('div.flex-column.wallet-view-account-details', {
style: {},
}, [
h('div.wallet-view__sidebar-close', {
onClick: hideSidebar,
}),
h('div.flex-row.account-options-menu', {
style: {
position: 'relative',
},
}, [
h(AccountDropdowns, {
selected: selectedAddress,
network,
identities,
useCssTransition: true,
enableAccountOptions: true,
dropdownWrapperStyle: {
padding: '1px 15px',
marginLeft: '-25px',
position: 'absolute',
width: '122%', // TODO, refactor all of this component out into media queries
},
menuItemStyles: {
padding: '0px 0px',
margin: '22px 0px',
},
}, []),
]),
h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''),
h('div.flex-column.flex-center', {
style: { margin: '0 auto' },
}, [
h('div', {
style: {
position: 'relative',
},
}, [
h(AccountDropdowns, {
accounts,
style: {
position: 'absolute',
left: 'calc(50% + 28px + 5.5px)',
top: '14px',
},
innerStyle: {
padding: '10px 16px',
},
useCssTransition: true,
selected: selectedAddress,
network,
identities,
}, []),
]),
h(Identicon, {
diameter: 54,
address: selectedAddress,
@ -149,14 +123,20 @@ WalletView.prototype.render = function () {
}, [
selectedIdentity.name,
]),
]),
]),
h('button.wallet-view__details-button', { onClick: showAccountDetailModal }, 'DETAILS'),
h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [
`${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
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', {}, [
h('div.flex-column.wallet-view-title-wrapper', [
h('span.wallet-view-title', [
'Wallet',
]),
]),

@ -46,6 +46,7 @@ $wallet-view-bg: $wild-sand;
flex: 33.5 0 33.5%;
background: $wallet-view-bg;
z-index: 200;
position: relative;
@media screen and (min-width: 576px) {
overflow-y: scroll;
@ -55,6 +56,57 @@ $wallet-view-bg: $wild-sand;
.wallet-view-account-details {
flex: 0 0 150px;
}
&__keyring-label {
height: 40px;
color: $dusty-gray;
font-family: Roboto;
font-size: 10px;
line-height: 40px;
text-align: right;
padding: 0 20px;
}
&__details-button {
color: $curious-blue;
font-size: 10px;
line-height: 13px;
text-align: center;
border: 1px solid $curious-blue;
border-radius: 10.5px;
background-color: transparent;
margin: 0 auto;
padding: 4px 12px;
flex: 0 0 auto;
}
&__address {
border-radius: 3px;
background-color: $alto;
color: $scorpion;
font-size: 14px;
line-height: 12px;
padding: 4px 12px;
margin: 24px auto;
font-weight: 300;
cursor: pointer;
flex: 0 0 auto;
}
&__sidebar-close {
@media screen and (max-width: 575px) {
&::after {
content: '\00D7';
font-size: 40px;
color: $tundora;
position: absolute;
top: 15px;
left: 15px;
cursor: pointer;
}
}
}
}
@media screen and (min-width: 576px) {
@ -174,15 +226,11 @@ $wallet-view-bg: $wild-sand;
// wallet view
.account-name {
@media screen and (max-width: 575px) {
font-size: 102%;
margin-left: 3%;
}
@media screen and (max-width: 575px) {
text-align: center;
}
font-size: 24px;
font-weight: 200;
line-height: 20px;
color: $scorpion;
margin-top: 8px;
}
// account options dropdown

Loading…
Cancel
Save