From 433fb4d24201d30eb84350bb1bd649f5bb22ad92 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 14 Jul 2017 00:53:54 -0700 Subject: Cleanup Fix lint error breaking gulp build Add presentational options menus --- ui/responsive/app/account-detail.js | 9 ++- ui/responsive/app/app.js | 45 +++++-------- .../app/components/account-options-menus.js | 77 ++++++++++++++++++++++ ui/responsive/app/components/editable-label.js | 7 +- 4 files changed, 105 insertions(+), 33 deletions(-) create mode 100644 ui/responsive/app/components/account-options-menus.js (limited to 'ui/responsive/app') diff --git a/ui/responsive/app/account-detail.js b/ui/responsive/app/account-detail.js index ff5c2aadb..9a837a121 100644 --- a/ui/responsive/app/account-detail.js +++ b/ui/responsive/app/account-detail.js @@ -18,6 +18,8 @@ const EditableLabel = require('./components/editable-label') const Tooltip = require('./components/tooltip') const TabBar = require('./components/tab-bar') const TokenList = require('./components/token-list') +const AccountOptionsMenus = require('./components/account-options-menus').AccountOptionsMenus; +console.log("AOM",AccountOptionsMenus); module.exports = connect(mapStateToProps)(AccountDetailScreen) @@ -51,6 +53,8 @@ AccountDetailScreen.prototype.render = function () { var identity = props.identities[selected] var account = props.accounts[selected] const { network, conversionRate, currentCurrency } = props + console.log("identity:", identity); + console.log("result:", identity && identity.name); return ( @@ -99,7 +103,10 @@ AccountDetailScreen.prototype.render = function () { // What is shown when not editing + edit text: h('label.editing-label', [h('.edit-text', 'edit')]), - h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name), + h('h2.font-medium.color-forest', {name: 'edit'}, [ + identity && identity.name, + h(AccountOptionsMenus, { style: { marginLeft: '35%' }}, []), + ]), ]), h('.flex-row', { style: { diff --git a/ui/responsive/app/app.js b/ui/responsive/app/app.js index e7bde9605..f829dc8fa 100644 --- a/ui/responsive/app/app.js +++ b/ui/responsive/app/app.js @@ -26,6 +26,7 @@ const Loading = require('./components/loading') const SandwichExpando = require('sandwich-expando') const MenuDroppo = require('menu-droppo') const DropMenuItem = require('./components/drop-menu-item') +import { Dropdown, DropdownMenuItem } from './components/dropdown'; const NetworkIndicator = require('./components/network') const Tooltip = require('./components/tooltip') const BuyView = require('./components/buy-button-subview') @@ -295,7 +296,7 @@ App.prototype.renderDropdown = function () { const state = this.state || {} const isOpen = state.isMainMenuOpen - return h(MenuDroppo, { + return h(Dropdown, { isOpen: isOpen, zIndex: 11, onClickOutside: (event) => { @@ -306,43 +307,27 @@ App.prototype.renderDropdown = function () { right: 0, top: '36px', }, - innerStyle: { - background: 'white', - boxShadow: '1px 1px 2px rgba(0,0,0,0.1)', - }, + innerStyle: {}, }, [ // DROP MENU ITEMS - h('style', ` - .drop-menu-item:hover { background:rgb(235, 235, 235); } - .drop-menu-item i { margin: 11px; } - `), - - h(DropMenuItem, { - label: 'Settings', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.showConfigPage()), - icon: h('i.fa.fa-gear.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.showConfigPage()), + }, 'Settings'), - h(DropMenuItem, { - label: 'Import Account', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.showImportPage()), - icon: h('i.fa.fa-arrow-circle-o-up.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.showImportPage()), + }, 'Import Account'), - h(DropMenuItem, { - label: 'Lock', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.lockMetamask()), - icon: h('i.fa.fa-lock.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.lockMetamask()), + }, 'Lock'), - h(DropMenuItem, { - label: 'Info/Help', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.showInfoPage()), - icon: h('i.fa.fa-question.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.showInfoPage()), + }, 'Info/Help'), ]) } diff --git a/ui/responsive/app/components/account-options-menus.js b/ui/responsive/app/components/account-options-menus.js new file mode 100644 index 000000000..acaf53c9e --- /dev/null +++ b/ui/responsive/app/components/account-options-menus.js @@ -0,0 +1,77 @@ +const Component = require('react').Component; +const PropTypes = require('react').PropTypes; +const h = require('react-hyperscript'); +const Dropdown = require('./dropdown').Dropdown; +const DropdownMenuItem = require('./dropdown').DropdownMenuItem; + +class AccountOptionsMenus extends Component { + constructor(props) { + super(props); + this.state = { + overflowMenuActive: false, + switchingMenuActive: false, + }; + console.log("state:", this.state); + } + + render() { + console.log("RENDERING AcountOptionsMenus"); + return h( + 'span', + { + style: this.props.style, + }, + [ + h( + 'i.fa.fa-angle-down', + { + onClick: (event) => { + event.stopPropagation(); + this.setState({ switchingMenuActive: !this.state.switchingMenuActive }) + } + }, + [ + h( + Dropdown, + { + isOpen: this.state.switchingMenuActive, + onClickOutside: () => { this.setState({ switchingMenuActive: false})} + }, + [ + h(DropdownMenuItem, { + }, 'Settings'), + ] + ) + ], + ), + h( + 'i.fa.fa-ellipsis-h', + { + style: { 'marginLeft': '10px'}, + onClick: () => { this.setState({ switchingMenuActive: !this.state.switchingMenuActive }) } + }, + [ + h( + Dropdown, + { + isOpen: this.state.overflowMenuActive, + onClickOutside: (event) => { + event.stopPropagation(); + this.setState({ overflowMenuActive: false}) + } + }, + [ + h(DropdownMenuItem, { + }, 'Settings'), + ] + ) + ] + ) + ] + ) + } +} + +module.exports = { + AccountOptionsMenus, +}; \ No newline at end of file diff --git a/ui/responsive/app/components/editable-label.js b/ui/responsive/app/components/editable-label.js index 41936f5e0..43841bdd8 100644 --- a/ui/responsive/app/components/editable-label.js +++ b/ui/responsive/app/components/editable-label.js @@ -30,12 +30,15 @@ EditableLabel.prototype.render = function () { } else { return h('div.name-label', { onClick: (event) => { - this.setState({ isEditingLabel: true }) + if (event.target.getAttribute('name') === 'edit') { + this.setState({ isEditingLabel: true }) + } }, }, this.props.children) } } - +// class = edit-text +// name = edit EditableLabel.prototype.saveIfEnter = function (event) { if (event.key === 'Enter') { this.saveText() -- cgit