From 920c27f9e4aaf116f683976cebe9150b53f7c3fc Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Mon, 12 Sep 2016 01:01:35 -0700
Subject: [PATCH] Menubar items now auto-popup context menu when moused over
 (if one was initially clicked). This selection is not cleared yet but
 otherwise works great

---
 app/renderer/components/menubar.js | 49 +++++++++++++++++++++++++++---
 js/stores/appStore.js              |  1 +
 js/stores/windowStore.js           |  5 ++-
 less/navigationBar.less            |  6 ++++
 4 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/app/renderer/components/menubar.js b/app/renderer/components/menubar.js
index 3ef73fcfaab..8ecf7302c71 100644
--- a/app/renderer/components/menubar.js
+++ b/app/renderer/components/menubar.js
@@ -12,13 +12,21 @@ class MenubarItem extends ImmutableComponent {
   constructor () {
     super()
     this.onClick = this.onClick.bind(this)
+    this.onMouseOver = this.onMouseOver.bind(this)
   }
 
   onClick (e) {
     if (e && e.stopPropagation) {
       e.stopPropagation()
     }
-
+    // If clicking on an already selected item, deselect it
+    const selected = this.props.menubar.state.selectedLabel
+    if (selected && selected === this.props.label) {
+      this.props.menubar.setState({selectedLabel: null})
+      return
+    }
+    // Otherwise, mark item as selected and show its context menu
+    this.props.menubar.setState({selectedLabel: this.props.label})
     const rect = e.target.getBoundingClientRect()
     windowActions.setContextMenuDetail(Immutable.fromJS({
       left: rect.left,
@@ -35,10 +43,18 @@ class MenubarItem extends ImmutableComponent {
     }))
   }
 
+  onMouseOver (e) {
+    const selected = this.props.menubar.state.selectedLabel
+    if (selected && selected !== this.props.label) {
+      this.onClick(e)
+    }
+  }
+
   render () {
     return <span
-      className='menubarItem'
-      onClick={this.onClick}>
+      className={'menubarItem' + (this.props.selected ? ' selected' : '')}
+      onClick={this.onClick}
+      onMouseOver={this.onMouseOver}>
       { this.props.label }
     </span>
   }
@@ -50,11 +66,34 @@ class MenubarItem extends ImmutableComponent {
  * NOTE: the system menu is still created and used in order to keep the accelerators working.
  */
 class Menubar extends ImmutableComponent {
+  constructor () {
+    super()
+    this.state = {
+      selectedLabel: null
+    }
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    return this.state.selectedLabel !== nextState.selectedLabel
+  }
+
+  // TODO: this needs to clear its state every time a context menu is closed
+  // selected label would need to be in windowState for this to work
+
   render () {
     return <div className='menubar'>
     {
-      this.props.template.map((menubarItem) =>
-        <MenubarItem label={menubarItem.get('label')} submenu={menubarItem.get('submenu').toJS()} />)
+      this.props.template.map((menubarItem) => {
+        let props = {
+          label: menubarItem.get('label'),
+          submenu: menubarItem.get('submenu').toJS(),
+          menubar: this
+        }
+        if (props.label === this.state.selectedLabel) {
+          props.selected = true
+        }
+        return <MenubarItem {...props} />
+      })
     }
     </div>
   }
diff --git a/js/stores/appStore.js b/js/stores/appStore.js
index 13d1cb43823..9a7bf025e12 100644
--- a/js/stores/appStore.js
+++ b/js/stores/appStore.js
@@ -674,6 +674,7 @@ const handleAppAction = (action) => {
       break
     case ExtensionConstants.EXTENSION_DISABLED:
       appState = extensionState.extensionDisabled(appState, action)
+      break
     case AppConstants.APP_SET_MENUBAR_TEMPLATE:
       appState = appState.setIn(['menu', 'template'], action.menubarTemplate)
       break
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index e7d7b134c68..157a2bdb5d7 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -774,8 +774,11 @@ const doAction = (action) => {
       }
       break
     case WindowConstants.WINDOW_TOGGLE_MENUBAR_VISIBLE:
+      // Close existing context menus
+      windowState = windowState.delete('contextMenuDetail')
+      // Use value if provided; if not, toggle to opposite.
       if (getSetting(settings.AUTO_HIDE_MENU)) {
-        if (typeof action.isVisible === 'boolean'){
+        if (typeof action.isVisible === 'boolean') {
           windowState = windowState.setIn(['ui', 'menubar', 'isVisible'], action.isVisible)
         } else {
           const currentStatus = windowState.getIn(['ui', 'menubar', 'isVisible'])
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 4331f0abf1a..4c51b18e7f2 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -405,6 +405,7 @@
   -webkit-user-select: none;
   -webkit-app-region: drag;
   height: 29px;
+  display: inline-block;
 
   .menubar {
     display: inline-block;
@@ -425,6 +426,11 @@
         border: 1px solid #cce8ff;
       }
     }
+
+    .selected {
+      background-color: #cce8ff !important;
+      border: 1px solid #99d1ff !important;
+    }
   }
 }