diff --git a/js/components/contextMenu.js b/js/components/contextMenu.js index cb14b711681..c3baaf7a1cb 100644 --- a/js/components/contextMenu.js +++ b/js/components/contextMenu.js @@ -94,7 +94,7 @@ class ContextMenuItem extends ImmutableComponent { const parentBoundingRect = parentNode.getBoundingClientRect() const boundingRect = node.getBoundingClientRect() openedSubmenuDetails = openedSubmenuDetails.push(Immutable.fromJS({ - y: boundingRect.top - parentBoundingRect.top - 1, + y: boundingRect.top - parentBoundingRect.top - 1 + parentNode.scrollTop, template: this.submenu })) } @@ -218,7 +218,7 @@ class ContextMenuSingle extends ImmutableComponent { render () { const styles = {} if (this.props.y) { - styles.top = this.props.y + styles.marginTop = this.props.y } const visibleMenuItems = this.props.template.filter((element) => { return element.has('visible') @@ -265,6 +265,10 @@ class ContextMenu extends ImmutableComponent { componentDidMount () { window.addEventListener('keydown', this.onKeyDown) window.addEventListener('keyup', this.onKeyUp) + + if (this.node) { + this.node.addEventListener('auxclick', this.onAuxClick.bind(this)) + } } componentWillUnmount () { @@ -381,6 +385,10 @@ class ContextMenu extends ImmutableComponent { setImmediate(() => windowActions.resetMenuState()) } + onAuxClick () { + setImmediate(() => windowActions.resetMenuState()) + } + getTemplateItemsOnly (template) { return template.filter((element) => { if (element.get('type') === separatorMenuItem.type) return false @@ -443,7 +451,7 @@ class ContextMenu extends ImmutableComponent { styles.right = this.props.contextMenuDetail.get('right') } if (this.props.contextMenuDetail.get('top') !== undefined) { - styles.top = this.props.contextMenuDetail.get('top') + styles.marginTop = this.props.contextMenuDetail.get('top') } if (this.props.contextMenuDetail.get('bottom') !== undefined) { styles.bottom = this.props.contextMenuDetail.get('bottom') @@ -455,6 +463,7 @@ class ContextMenu extends ImmutableComponent { styles.maxHeight = this.props.contextMenuDetail.get('maxHeight') } return
{ this.node = node }} className={cx({ contextMenu: true, reverseExpand: this.props.contextMenuDetail.get('right') !== undefined, diff --git a/less/contextMenu.less b/less/contextMenu.less index 6da9dc8f09e..47e69dd01f2 100644 --- a/less/contextMenu.less +++ b/less/contextMenu.less @@ -20,16 +20,19 @@ } // This is a reasonable max height and also solves problems for bookmarks menu // and bookmarks overflow menu reaching down too low. - height: 100%; - width: 100%; + min-width: 225px; @usedUpChrome: @navbarHeight + @bookmarksToolbarWithFaviconsHeight; max-height: calc(~'100% - @{usedUpChrome}'); overflow: auto; position: absolute; z-index: @zindexContextMenu; + padding-right: 10px; + padding-bottom: 10px; -webkit-user-select: none; &.reverseExpand { flex-direction: row-reverse; + padding-right: 0; + padding-left: 10px; } .contextMenuSingle {