1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Implement custom sidebar, with close button

This commit is contained in:
sdtsui 2017-08-02 14:17:58 -07:00
parent dfa10763e3
commit 9ebdc343aa
3 changed files with 82 additions and 13 deletions

View File

@ -15,6 +15,11 @@ const ConfirmTxScreen = require('./conf-tx')
// notice
const NoticeScreen = require('./components/notice')
const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
// slideout menu
const WalletView = require('./components/wallet-view')
const SlideoutMenu = require('react-burger-menu').slide
// other views
const ConfigScreen = require('./config')
const AddTokenScreen = require('./add-token')
@ -63,7 +68,7 @@ function mapStateToProps (state) {
App.prototype.render = function () {
var props = this.props
const { isLoading, loadingMessage, transForward, network } = props
const { isLoading, loadingMessage, transForward, network, sidebarOpen } = props
const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
const loadMessage = loadingMessage || isLoadingNetwork ?
`Connecting to ${this.getNetworkName()}` : null
@ -82,8 +87,23 @@ App.prototype.render = function () {
},
}, [
// app bar
this.renderAppBar(),
// slideout - move to separate render func
this.renderSidebar(),
// h('div.phone-visible', {} ,[
// h(SlideoutMenu, {
// isOpen: false,
// }, [
// h(WalletView, {
// responsiveDisplayClassname: '.phone-visible',
// }),
// ]),
// ])
// network dropdown
this.renderNetworkDropdown(),
// this.renderDropdown(),
@ -98,6 +118,52 @@ App.prototype.render = function () {
)
}
App.prototype.renderSidebar = function() {
if (!this.props.sidebarOpen) {
return null;
}
return h('div.phone-visible', {}, [
// content
h(WalletView, {
responsiveDisplayClassname: '.phone-visible',
style: {
zIndex: 26,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
transition: 'transform 0.3s ease-out',
willChange: 'transform',
transform: 'translateX(0%)',
overflowY: 'auto',
boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px',
width: '85%',
height: '100%',
},
}),
// overlay
h('div', {
style: {
zIndex: 25,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}
}, [])
])
}
App.prototype.renderAppBar = function () {
if (window.METAMASK_UI_TYPE === 'notification') {
return null

View File

@ -52,20 +52,13 @@ TxView.prototype.render = function () {
background: '#FFFFFF',
}
}, [
// slideout - move to separate render func
h(SlideoutMenu, {
isOpen: this.props.sidebarOpen,
}, [
h(WalletView, {
responsiveDisplayClassname: '.phone-visible'
}),
]),
h('div.phone-visible.fa.fa-bars', {
onClick: () => {
console.log("click received")
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
}
}, []),
}, [
]),
h('div.flex-row', {
style: {

View File

@ -12,16 +12,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
function mapStateToProps (state) {
return {
network: state.metamask.network,
sidebarOpen: state.appState.sidebarOpen,
}
}
function mapDispatchToProps (dispatch) {
return {
showSendPage: () => {dispatch(actions.showSendPage())},
hideSidebar: () => {dispatch(actions.hideSidebar())},
}
}
inherits(WalletView, Component)
function WalletView () {
Component.call(this)
@ -31,7 +32,7 @@ const noop = () => {}
WalletView.prototype.render = function () {
const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684'
const { network, responsiveDisplayClassname } = this.props
const { network, responsiveDisplayClassname, style } = this.props
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {
@ -41,9 +42,18 @@ WalletView.prototype.render = function () {
flexBasis: '230px', // .333*345
height: '82vh',
background: '#FAFAFA', // TODO: add to reusable colors
...style,
}
}, [
h('div.phone-visible.fa.fa-bars', {
onClick: () => {
console.log("click received-inwalletview")
this.props.hideSidebar()
}
}, [
]),
// TODO: Separate component: wallet account details
h('div.flex-row.flex-center', {
style: {