imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make RoomTile context menu appear where you right clicked instead

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2018-06-18 12:05:57 +01:00
parent 1a236499b1
commit e0d36b18c9
No known key found for this signature in database
GPG key ID: 3F879DA5AD802A5E
1 changed files with 40 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/views/rooms/RoomTile.js
View file

@ -182,9 +182,30 @@ module.exports = React.createClass({
this.badgeOnMouseLeave(); this.badgeOnMouseLeave();
}, },
_showContextMenu: function(x, y, chevronOffset) {
const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
createMenu(RoomTileContextMenu, {
chevronOffset,
left: x,
top: y,
room: this.props.room,
onFinished: () => {
this.setState({ menuDisplayed: false });
this.props.refreshSubList();
},
});
this.setState({ menuDisplayed: true });
},
onContextMenu: function(e) { onContextMenu: function(e) {
this.onBadgeClicked(e); // Prevent the RoomTile onClick event firing as well
e.preventDefault(); e.preventDefault();
// Only allow non-guests to access the context menu
if (MatrixClientPeg.get().isGuest()) return;
const chevronOffset = 12;
this._showContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
}, },
badgeOnMouseEnter: function() { badgeOnMouseEnter: function() {
@ -200,15 +221,17 @@ module.exports = React.createClass({
}, },
onBadgeClicked: function(e) { onBadgeClicked: function(e) {
// Only allow none guests to access the context menu // Prevent the RoomTile onClick event firing as well
if (!MatrixClientPeg.get().isGuest()) { e.stopPropagation();
// Only allow non-guests to access the context menu
if (MatrixClientPeg.get().isGuest()) return;
// If the badge is clicked, then no longer show tooltip // If the badge is clicked, then no longer show tooltip
if (this.props.collapsed) { if (this.props.collapsed) {
this.setState({ hover: false }); this.setState({ hover: false });
} }
const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu'); const elementRect = e.target.getBoundingClientRect();
const elementRect = this.refs.badge.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
const x = elementRect.right + window.pageXOffset + 3; const x = elementRect.right + window.pageXOffset + 3;
@ -216,21 +239,7 @@ module.exports = 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._showContextMenu(x, y, chevronOffset);
createMenu(RoomTileContextMenu, {
chevronOffset: chevronOffset,
left: x,
top: y,
room: this.props.room,
onFinished: function() {
self.setState({ menuDisplayed: false });
self.props.refreshSubList();
},
});
this.setState({ menuDisplayed: true });
}
// Prevent the RoomTile onClick event firing as well
e.stopPropagation();
}, },
render: function() { render: function() {
@ -279,7 +288,7 @@ module.exports = React.createClass({
badgeContent = '\u200B'; badgeContent = '\u200B';
} }
const badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>; const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
const EmojiText = sdk.getComponent('elements.EmojiText'); const EmojiText = sdk.getComponent('elements.EmojiText');
let label; let label;