Implement custom sidebar, with close button

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: {