mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 04:21:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1989 from matrix-org/t3chguy/right_click_tagpanel_contextmenu

Browse source 
trigger TagTile context menu on right click
This commit is contained in:
Luke Barnard 2018-06-22 10:23:58 +01:00 committed by GitHub
commit 8b257f2f50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/views/elements/TagTile.js
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2017 New Vector Ltd. Copyright 2017 New Vector Ltd.
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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) { _openContextMenu: function(x, y, chevronOffset) {
e.preventDefault();
e.stopPropagation();
// Hide the (...) immediately // Hide the (...) immediately
this.setState({ hover: false }); this.setState({ hover: false });
const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu'); 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(); const elementRect = e.target.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page // 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); let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
y = y - (chevronOffset + 8); // where 8 is half the height of the chevron y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
const self = this; this._openContextMenu(x, y, chevronOffset);
ContextualMenu.createMenu(TagTileContextMenu, { },
chevronOffset: chevronOffset,
left: x, onContextMenu: function(e) {
top: y, e.preventDefault();
tag: this.props.tag,
onFinished: function() { const chevronOffset = 12;
self.setState({ menuDisplayed: false }); this._openContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
},
});
this.setState({ menuDisplayed: true });
}, },
onMouseOver: function() { onMouseOver: function() {
@ -164,7 +175,7 @@ export default React.createClass({
<div className="mx_TagTile_context_button" onClick={this.onContextButtonClick}> <div className="mx_TagTile_context_button" onClick={this.onContextButtonClick}>
{ "\u00B7\u00B7\u00B7" } { "\u00B7\u00B7\u00B7" }
</div> : <div />; </div> : <div />;
return <AccessibleButton className={className} onClick={this.onClick}> return <AccessibleButton className={className} onClick={this.onClick} onContextMenu={this.onContextMenu}>
<div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<BaseAvatar <BaseAvatar
name={name} name={name}