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

@@ -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>
  }

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

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

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