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 1/5] 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} />

From 4fdb64a04957309d691d8f80aeaf6971ab5a17f3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 16 Jun 2018 09:10:13 +0100
Subject: [PATCH 2/5] delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomTile.js | 38 +++++++++++---------------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 1a9e404012..bb9e0a8d3b 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 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.
@@ -15,19 +16,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
 
-const React = require('react');
-const ReactDOM = require("react-dom");
+import React from 'react';
 import PropTypes from 'prop-types';
-const classNames = require('classnames');
+import classNames from 'classnames';
 import dis from '../../../dispatcher';
-const MatrixClientPeg = require('../../../MatrixClientPeg');
+import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
-const sdk = require('../../../index');
-const ContextualMenu = require('../../structures/ContextualMenu');
-const RoomNotifs = require('../../../RoomNotifs');
-const FormattingUtils = require('../../../utils/FormattingUtils');
+import sdk from '../../../index';
+import ContextualMenu from '../../structures/ContextualMenu';
+import * as RoomNotifs from '../../../RoomNotifs';
+import * as FormattingUtils from '../../../utils/FormattingUtils';
 import AccessibleButton from '../elements/AccessibleButton';
 import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
@@ -72,16 +71,12 @@ module.exports = React.createClass({
     },
 
     _shouldShowMentionBadge: function() {
-        return this.state.notifState != RoomNotifs.MUTE;
+        return this.state.notifState !== RoomNotifs.MUTE;
     },
 
     _isDirectMessageRoom: function(roomId) {
         const dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId);
-        if (dmRooms) {
-            return true;
-        } else {
-            return false;
-        }
+        return Boolean(dmRooms);
     },
 
     onRoomTimeline: function(ev, room) {
@@ -99,7 +94,7 @@ module.exports = React.createClass({
     },
 
     onAccountData: function(accountDataEvent) {
-        if (accountDataEvent.getType() == 'm.push_rules') {
+        if (accountDataEvent.getType() === 'm.push_rules') {
             this.setState({
                 notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
             });
@@ -255,7 +250,7 @@ module.exports = React.createClass({
             'mx_RoomTile_unread': this.props.unread,
             'mx_RoomTile_unreadNotify': notifBadges,
             'mx_RoomTile_highlight': mentionBadges,
-            'mx_RoomTile_invited': (me && me.membership == 'invite'),
+            'mx_RoomTile_invited': (me && me.membership === 'invite'),
             'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_noBadges': !badges,
             'mx_RoomTile_transparent': this.props.transparent,
@@ -273,7 +268,6 @@ module.exports = React.createClass({
         let name = this.state.roomName;
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
-        let badge;
         let badgeContent;
 
         if (this.state.badgeHover || this.state.menuDisplayed) {
@@ -285,7 +279,7 @@ module.exports = React.createClass({
             badgeContent = '\u200B';
         }
 
-        badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+        const badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
@@ -317,9 +311,9 @@ module.exports = React.createClass({
 
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
-        let directMessageIndicator;
+        let dmIndicator;
         if (this._isDirectMessageRoom(this.props.room.roomId)) {
-            directMessageIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
+            dmIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
         }
 
         return <AccessibleButton tabIndex="0"
@@ -332,7 +326,7 @@ module.exports = React.createClass({
             <div className={avatarClasses}>
                 <div className="mx_RoomTile_avatar_container">
                     <RoomAvatar room={this.props.room} width={24} height={24} />
-                    { directMessageIndicator }
+                    { dmIndicator }
                 </div>
             </div>
             <div className="mx_RoomTile_nameContainer">

From 1a236499b1f33df966635b3bb6f4bfd8ee41f5a7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Jun 2018 11:54:06 +0100
Subject: [PATCH 3/5] fix import

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomTile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index bb9e0a8d3b..776bd5cd70 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -24,7 +24,7 @@ import dis from '../../../dispatcher';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import sdk from '../../../index';
-import ContextualMenu from '../../structures/ContextualMenu';
+import {createMenu} from '../../structures/ContextualMenu';
 import * as RoomNotifs from '../../../RoomNotifs';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -217,7 +217,7 @@ module.exports = React.createClass({
             y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
 
             const self = this;
-            ContextualMenu.createMenu(RoomTileContextMenu, {
+            createMenu(RoomTileContextMenu, {
                 chevronOffset: chevronOffset,
                 left: x,
                 top: y,

From e0d36b18c92ec42f8827dbae88bbdc5baf0c144d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Jun 2018 12:05:57 +0100
Subject: [PATCH 4/5] make RoomTile context menu appear where you right clicked
 instead

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomTile.js | 71 +++++++++++++++-----------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 776bd5cd70..ee7f8a76c7 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -182,9 +182,30 @@ module.exports = React.createClass({
         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) {
-        this.onBadgeClicked(e);
+        // Prevent the RoomTile onClick event firing as well
         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() {
@@ -200,37 +221,25 @@ module.exports = React.createClass({
     },
 
     onBadgeClicked: function(e) {
-        // Only allow none guests to access the context menu
-        if (!MatrixClientPeg.get().isGuest()) {
-            // If the badge is clicked, then no longer show tooltip
-            if (this.props.collapsed) {
-                this.setState({ hover: false });
-            }
-
-            const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
-            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;
-            const chevronOffset = 12;
-            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;
-            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();
+        // 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 (this.props.collapsed) {
+            this.setState({ hover: false });
+        }
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        this._showContextMenu(x, y, chevronOffset);
     },
 
     render: function() {
@@ -279,7 +288,7 @@ module.exports = React.createClass({
             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');
         let label;

From f88a2fd8fcffbe6bf2d8fdf954591c97113dd4b4 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Jun 2018 12:16:33 +0100
Subject: [PATCH 5/5] make GroupInviteTile context menu appear where you right
 clicked instead

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/groups/GroupInviteTile.js           | 69 +++++++++++--------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index fff9aafac1..25dba130f9 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2017, 2018 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.
@@ -20,8 +21,9 @@ import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
-import * as ContextualMenu from "../../structures/ContextualMenu";
 import classNames from 'classnames';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import {createMenu} from "../../structures/ContextualMenu";
 
 export default React.createClass({
     displayName: 'GroupInviteTile',
@@ -66,34 +68,11 @@ export default React.createClass({
         });
     },
 
-    onContextMenu: function(e) {
-        this.onBadgeClicked(e);
-        e.preventDefault();
-    },
+    _showContextMenu: function(x, y, chevronOffset) {
+        const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
 
-    onBadgeClicked: function(e) {
-        // Prevent the RoomTile onClick event firing as well
-        e.stopPropagation();
-
-        // Only allow none guests to access the context menu
-        if (this.context.matrixClient.isGuest()) return;
-
-        // If the badge is clicked, then no longer show tooltip
-        if (this.props.collapsed) {
-            this.setState({ hover: false });
-        }
-
-        const RoomTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
-        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;
-        const chevronOffset = 12;
-        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
-        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
-
-        ContextualMenu.createMenu(RoomTileContextMenu, {
-            chevronOffset: chevronOffset,
+        createMenu(GroupInviteTileContextMenu, {
+            chevronOffset,
             left: x,
             top: y,
             group: this.props.group,
@@ -104,6 +83,38 @@ export default React.createClass({
         this.setState({ menuDisplayed: true });
     },
 
+    onContextMenu: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        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);
+    },
+
+    onBadgeClicked: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        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 (this.props.collapsed) {
+            this.setState({ hover: false });
+        }
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        this._showContextMenu(x, y, chevronOffset);
+    },
+
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
@@ -130,7 +141,7 @@ export default React.createClass({
         });
 
         const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
-        const badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 
         let tooltip;
         if (this.props.collapsed && this.state.hover) {