From 9ebdc343aa32c36bdff9debcecc3c75485939e2a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 14:17:58 -0700 Subject: Implement custom sidebar, with close button --- ui/app/components/tx-view.js | 13 +++---------- ui/app/components/wallet-view.js | 14 ++++++++++++-- 2 files changed, 15 insertions(+), 12 deletions(-) (limited to 'ui/app/components') 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: { -- cgit