Merge pull request #746 from matrix-org/luke/merge-RoomTile-context-menus

Merge the two RoomTile context menus into one

src/components/structures/MatrixChat.js

@@ -325,6 +325,8 @@ module.exports = React.createClass({
     },
 
     onAction: function(payload) {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         var roomIndexDelta = 1;
 
         var self = this;
@@ -391,25 +393,23 @@ module.exports = React.createClass({
                 this.notifyNewScreen('forgot_password');
                 break;
             case 'leave_room':
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
-                var roomId = payload.room_id;
                 Modal.createDialog(QuestionDialog, {
                     title: "Leave room",
                     description: "Are you sure you want to leave the room?",
-                    onFinished: function(should_leave) {
+                    onFinished: (should_leave) => {
                         if (should_leave) {
-                            var d = MatrixClientPeg.get().leave(roomId);
+                            const d = MatrixClientPeg.get().leave(payload.room_id);
 
                             // FIXME: controller shouldn't be loading a view :(
-                            var Loader = sdk.getComponent("elements.Spinner");
+                            const Loader = sdk.getComponent("elements.Spinner");
-                            var modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
+                            const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
 
-                            d.then(function() {
+                            d.then(() => {
                                 modal.close();
+                                if (this.currentRoomId === payload.room_id) {
                                     dis.dispatch({action: 'view_next_room'});
-                            }, function(err) {
+                                }
+                            }, (err) => {
                                 modal.close();
                                 console.error("Failed to leave room " + payload.room_id + " " + err);
                                 Modal.createDialog(ErrorDialog, {
@@ -421,6 +421,32 @@ module.exports = React.createClass({
                     }
                 });
                 break;
+            case 'reject_invite':
+                Modal.createDialog(QuestionDialog, {
+                    title: "Reject invitation",
+                    description: "Are you sure you want to reject the invitation?",
+                    onFinished: (confirm) => {
+                        if (confirm) {
+                            // FIXME: controller shouldn't be loading a view :(
+                            const Loader = sdk.getComponent("elements.Spinner");
+                            const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
+
+                            MatrixClientPeg.get().leave(payload.room_id).done(() => {
+                                modal.close();
+                                if (this.currentRoomId === payload.room_id) {
+                                    dis.dispatch({action: 'view_next_room'});
+                                }
+                            }, (err) => {
+                                modal.close();
+                                Modal.createDialog(ErrorDialog, {
+                                    title: "Failed to reject invitation",
+                                    description: err.toString()
+                                });
+                            });
+                        }
+                    }
+                });
+                break;
             case 'view_user':
                 // FIXME: ugly hack to expand the RightPanel and then re-dispatch.
                 if (this.state.collapse_rhs) {

src/components/views/rooms/RoomTile.js

@@ -56,8 +56,7 @@ module.exports = React.createClass({
         return({
             hover : false,
             badgeHover : false,
-            notificationTagMenu: false,
+            menuDisplayed: false,
-            roomTagMenu: false,
             notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
         });
     },
@@ -136,62 +135,32 @@ module.exports = React.createClass({
                 this.setState({ hover: false });
             }
 
-            var NotificationStateMenu = sdk.getComponent('context_menus.NotificationStateContextMenu');
+            var RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
             var elementRect = e.target.getBoundingClientRect();
+
             // The window X and Y offsets are to adjust position when zoomed in to page
-            var x = elementRect.right + window.pageXOffset + 3;
+            const x = elementRect.right + window.pageXOffset + 3;
-            var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53;
+            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
+
             var self = this;
-            ContextualMenu.createMenu(NotificationStateMenu, {
+            ContextualMenu.createMenu(RoomTileContextMenu, {
-                menuWidth: 188,
+                chevronOffset: chevronOffset,
-                menuHeight: 126,
-                chevronOffset: 45,
                 left: x,
                 top: y,
                 room: this.props.room,
                 onFinished: function() {
-                    self.setState({ notificationTagMenu: false });
+                    self.setState({ menuDisplayed: false });
                     self.props.refreshSubList();
                 }
             });
-            this.setState({ notificationTagMenu: true });
+            this.setState({ menuDisplayed: true });
         }
         // Prevent the RoomTile onClick event firing as well
         e.stopPropagation();
     },
 
-    onAvatarClicked: function(e) {
-        // Only allow none guests to access the context menu
-        if (!MatrixClientPeg.get().isGuest() && !this.props.collapsed) {
-
-            // If the badge is clicked, then no longer show tooltip
-            if (this.props.collapsed) {
-                this.setState({ hover: false });
-            }
-
-            var RoomTagMenu = sdk.getComponent('context_menus.RoomTagContextMenu');
-            var elementRect = e.target.getBoundingClientRect();
-            // The window X and Y offsets are to adjust position when zoomed in to page
-            var x = elementRect.right + window.pageXOffset + 3;
-            var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 19;
-            var self = this;
-            ContextualMenu.createMenu(RoomTagMenu, {
-                chevronOffset: 10,
-                // XXX: fix horrid hardcoding
-                menuColour: UserSettingsStore.getSyncedSettings().theme === 'dark' ? "#2d2d2d" : "#FFFFFF",
-                left: x,
-                top: y,
-                room: this.props.room,
-                onFinished: function() {
-                    self.setState({ roomTagMenu: false });
-                }
-            });
-            this.setState({ roomTagMenu: true });
-            // Prevent the RoomTile onClick event firing as well
-            e.stopPropagation();
-        }
-    },
-
     render: function() {
         var myUserId = MatrixClientPeg.get().credentials.userId;
         var me = this.props.room.currentState.members[myUserId];
@@ -210,7 +179,7 @@ module.exports = React.createClass({
             'mx_RoomTile_unreadNotify': notifBadges,
             'mx_RoomTile_highlight': mentionBadges,
             'mx_RoomTile_invited': (me && me.membership == 'invite'),
-            'mx_RoomTile_notificationTagMenu': this.state.notificationTagMenu,
+            'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_noBadges': !badges,
         });
 
@@ -218,14 +187,9 @@ module.exports = React.createClass({
             'mx_RoomTile_avatar': true,
         });
 
-        var avatarContainerClasses = classNames({
-            'mx_RoomTile_avatar_container': true,
-            'mx_RoomTile_avatar_roomTagMenu': this.state.roomTagMenu,
-        });
-
         var badgeClasses = classNames({
             'mx_RoomTile_badge': true,
-            'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.notificationTagMenu,
+            'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.menuDisplayed,
         });
 
         // XXX: We should never display raw room IDs, but sometimes the
@@ -236,7 +200,7 @@ module.exports = React.createClass({
         var badge;
         var badgeContent;
 
-        if (this.state.badgeHover || this.state.notificationTagMenu) {
+        if (this.state.badgeHover || this.state.menuDisplayed) {
             badgeContent = "\u00B7\u00B7\u00B7";
         } else if (badges) {
             var limitedCount = FormattingUtils.formatCount(notificationCount);
@@ -254,7 +218,7 @@ module.exports = React.createClass({
             var nameClasses = classNames({
                 'mx_RoomTile_name': true,
                 'mx_RoomTile_invite': this.props.isInvite,
-                'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.notificationTagMenu,
+                'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
             });
 
             if (this.props.selected) {
@@ -293,13 +257,11 @@ module.exports = React.createClass({
             <div> { /* Only native elements can be wrapped in a DnD object. */}
             <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className={avatarClasses}>
-                    <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
+                    <div className="mx_RoomTile_avatar_container">
-                        <div className={avatarContainerClasses}>
                         <RoomAvatar room={this.props.room} width={24} height={24} />
                         {directMessageIndicator}
                     </div>
                 </div>
-                </div>
                 <div className="mx_RoomTile_nameContainer">
                     { label }
                     { badge }