Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Menubar items now auto-popup context menu when moused over (if one was
Browse files Browse the repository at this point in the history
initially clicked). This selection is not cleared yet but otherwise works
great
  • Loading branch information
bsclifton committed Sep 12, 2016
1 parent 23cc9c6 commit 920c27f
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 6 deletions.
49 changes: 44 additions & 5 deletions app/renderer/components/menubar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
}
Expand All @@ -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>
}
Expand Down
1 change: 1 addition & 0 deletions js/stores/appStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion js/stores/windowStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'])
Expand Down
6 changes: 6 additions & 0 deletions less/navigationBar.less
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,7 @@
-webkit-user-select: none;
-webkit-app-region: drag;
height: 29px;
display: inline-block;

.menubar {
display: inline-block;
Expand All @@ -425,6 +426,11 @@
border: 1px solid #cce8ff;
}
}

.selected {
background-color: #cce8ff !important;
border: 1px solid #99d1ff !important;
}
}
}

Expand Down

0 comments on commit 920c27f

Please sign in to comment.