From 8fa96e19d562666410786ee7cfa506463693ea88 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 16 Jun 2018 09:07:16 +0100
Subject: [PATCH] allow rightclicking for exposing room tile context menus

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/groups/GroupInviteTile.js | 16 +++++++++++++---
 src/components/views/rooms/RoomTile.js         | 17 ++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index 4d5f3c6f3a..fff9aafac1 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -66,6 +66,11 @@ export default React.createClass({
         });
     },
 
+    onContextMenu: function(e) {
+        this.onBadgeClicked(e);
+        e.preventDefault();
+    },
+
     onBadgeClicked: function(e) {
         // Prevent the RoomTile onClick event firing as well
         e.stopPropagation();
@@ -79,7 +84,7 @@ export default React.createClass({
         }
 
         const RoomTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
-        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
         const x = elementRect.right + window.pageXOffset + 3;
@@ -125,7 +130,7 @@ export default React.createClass({
         });
 
         const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
-        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+        const badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 
         let tooltip;
         if (this.props.collapsed && this.state.hover) {
@@ -139,7 +144,12 @@ export default React.createClass({
         });
 
         return (
-            <AccessibleButton className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <AccessibleButton className={classes}
+                              onClick={this.onClick}
+                              onMouseEnter={this.onMouseEnter}
+                              onMouseLeave={this.onMouseLeave}
+                              onContextMenu={this.onContextMenu}
+            >
                 <div className="mx_RoomTile_avatar">
                     { av }
                 </div>
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 11eb2090f2..1a9e404012 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -187,6 +187,11 @@ module.exports = React.createClass({
         this.badgeOnMouseLeave();
     },
 
+    onContextMenu: function(e) {
+        this.onBadgeClicked(e);
+        e.preventDefault();
+    },
+
     badgeOnMouseEnter: function() {
         // Only allow non-guests to access the context menu
         // and only change it if it needs to change
@@ -208,7 +213,7 @@ module.exports = React.createClass({
             }
 
             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
             const x = elementRect.right + window.pageXOffset + 3;
@@ -280,7 +285,7 @@ module.exports = React.createClass({
             badgeContent = '\u200B';
         }
 
-        badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+        badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
@@ -317,7 +322,13 @@ module.exports = React.createClass({
             directMessageIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
         }
 
-        return <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        return <AccessibleButton tabIndex="0"
+                                 className={classes}
+                                 onClick={this.onClick}
+                                 onMouseEnter={this.onMouseEnter}
+                                 onMouseLeave={this.onMouseLeave}
+                                 onContextMenu={this.onContextMenu}
+        >
             <div className={avatarClasses}>
                 <div className="mx_RoomTile_avatar_container">
                     <RoomAvatar room={this.props.room} width={24} height={24} />