diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js index fb3ddee093..5bea68e814 100644 --- a/src/components/views/elements/TagTile.js +++ b/src/components/views/elements/TagTile.js @@ -1,5 +1,6 @@ /* Copyright 2017 New Vector Ltd. +Copyright 2018 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -103,14 +104,27 @@ export default React.createClass({ } }, - onContextButtonClick: function(e) { - e.preventDefault(); - e.stopPropagation(); - + _openContextMenu: function(x, y, chevronOffset) { // Hide the (...) immediately this.setState({ hover: false }); const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu'); + ContextualMenu.createMenu(TagTileContextMenu, { + chevronOffset: chevronOffset, + left: x, + top: y, + tag: this.props.tag, + onFinished: () => { + this.setState({ menuDisplayed: false }); + }, + }); + this.setState({ menuDisplayed: true }); + }, + + onContextButtonClick: function(e) { + e.preventDefault(); + e.stopPropagation(); + const elementRect = e.target.getBoundingClientRect(); // The window X and Y offsets are to adjust position when zoomed in to page @@ -119,17 +133,14 @@ export default React.createClass({ let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset); y = y - (chevronOffset + 8); // where 8 is half the height of the chevron - const self = this; - ContextualMenu.createMenu(TagTileContextMenu, { - chevronOffset: chevronOffset, - left: x, - top: y, - tag: this.props.tag, - onFinished: function() { - self.setState({ menuDisplayed: false }); - }, - }); - this.setState({ menuDisplayed: true }); + this._openContextMenu(x, y, chevronOffset); + }, + + onContextMenu: function(e) { + e.preventDefault(); + + const chevronOffset = 12; + this._openContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset); }, onMouseOver: function() { @@ -164,7 +175,7 @@ export default React.createClass({