From 1f788feacd89811315fd8cb2262ad94e30906ec7 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 9 Mar 2017 17:03:57 +0000 Subject: [PATCH] Merge the two RoomTile context menus into one This will require riot-web changes https://github.com/vector-im/riot-web/pull/3395 --- src/components/structures/MatrixChat.js | 48 ++++++++++++---- src/components/views/rooms/RoomTile.js | 76 +++++++------------------ 2 files changed, 56 insertions(+), 68 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 44fdfcf23e..fd0c69c662 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -317,6 +317,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; @@ -382,25 +384,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"); - var modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner'); + const Loader = sdk.getComponent("elements.Spinner"); + const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner'); - d.then(function() { + d.then(() => { modal.close(); - dis.dispatch({action: 'view_next_room'}); - }, function(err) { + if (this.currentRoomId === payload.room_id) { + dis.dispatch({action: 'view_next_room'}); + } + }, (err) => { modal.close(); Modal.createDialog(ErrorDialog, { title: "Failed to leave room", @@ -411,6 +411,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) { diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 7d9034edd2..06b05e9299 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -56,8 +56,7 @@ module.exports = React.createClass({ return({ hover : false, badgeHover : false, - notificationTagMenu: false, - roomTagMenu: false, + menuDisplayed: 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; - var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53; + 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 + var self = this; - ContextualMenu.createMenu(NotificationStateMenu, { - menuWidth: 188, - menuHeight: 126, - chevronOffset: 45, + ContextualMenu.createMenu(RoomTileContextMenu, { + chevronOffset: chevronOffset, 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,11 +257,9 @@ module.exports = React.createClass({
{ /* Only native elements can be wrapped in a DnD object. */}
-
-
- - {directMessageIndicator} -
+
+ + {directMessageIndicator}