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:
parent
dfa10763e3
commit
9ebdc343aa
@ -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
|
||||
|
@ -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: {
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user