Cleanup

Fix lint error breaking gulp build

Add presentational options menus

ui/classic/app/components/editable-label.js

@@ -13,6 +13,7 @@ function EditableLabel () {
 EditableLabel.prototype.render = function () {
   const props = this.props
   const state = this.state
+  console.log("editing:", state.isEditingLabel);
 
   if (state && state.isEditingLabel) {
     return h('div.editable-label', [
@@ -30,6 +31,8 @@ EditableLabel.prototype.render = function () {
   } else {
     return h('div.name-label', {
       onClick: (event) => {
+        debugger;
+        console.log("event", event.target);
         this.setState({ isEditingLabel: true })
       },
     }, this.props.children)

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

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'),
   ])
 }
 

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,
+};

ui/responsive/app/components/editable-label.js

@@ -30,12 +30,15 @@ EditableLabel.prototype.render = function () {
   } else {
     return h('div.name-label', {
       onClick: (event) => {
+        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()