aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/app.js68
-rw-r--r--ui/app/components/tx-view.js13
-rw-r--r--ui/app/components/wallet-view.js14
3 files changed, 82 insertions, 13 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index 2a07b57d3..7cf000d76 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -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
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index b72abb084..2aaa32395 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -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: {
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 63335dd93..2a626a930 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -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: {