diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 132f02a1e2..6938cda14e 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -58,7 +58,8 @@ module.exports = React.createClass({ return({ hover : false, badgeHover : false, - menu: false, + notificationTagMenu: false, + roomTagMenu: false, areNotifsMuted: areNotifsMuted, }); }, @@ -118,13 +119,13 @@ module.exports = React.createClass({ this.setState({ hover: false }); } - var Menu = sdk.getComponent('context_menus.NotificationStateContextMenu'); + var NotificationStateMenu = sdk.getComponent('context_menus.NotificationStateContextMenu'); 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; var self = this; - ContextualMenu.createMenu(Menu, { + ContextualMenu.createMenu(NotificationStateMenu, { menuWidth: 188, menuHeight: 126, chevronOffset: 45, @@ -132,10 +133,10 @@ module.exports = React.createClass({ top: y, room: this.props.room, onFinished: function() { - self.setState({ menu: false }); + self.setState({ notificationTagMenu: false }); } }); - this.setState({ menu: true }); + this.setState({ notificationTagMenu: true }); } // Prevent the RoomTile onClick event firing as well e.stopPropagation(); @@ -150,23 +151,25 @@ module.exports = React.createClass({ this.setState({ hover: false }); } - var Menu = sdk.getComponent('context_menus.RoomTagContextMenu'); + 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) - 53; + var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 19; var self = this; - ContextualMenu.createMenu(Menu, {wmwragg + ContextualMenu.createMenu(RoomTagMenu, { chevronOffset: 10, left: x, top: y, room: this.props.room, onFinished: function() { - self.setState({ menu: false }); + self.setState({ roomTagMenu: false }); } }); - this.setState({ menu: true }); + this.setState({ roomTagMenu: true }); } + // Prevent the RoomTile onClick event firing as well + e.stopPropagation(); }, render: function() { @@ -183,7 +186,7 @@ module.exports = React.createClass({ 'mx_RoomTile_unreadNotify': notificationCount > 0 && !this.state.areNotifsMuted, 'mx_RoomTile_highlight': this.props.highlight, 'mx_RoomTile_invited': (me && me.membership == 'invite'), - 'mx_RoomTile_menu': this.state.menu, + 'mx_RoomTile_notificationTagMenu': this.state.notificationTagMenu, 'mx_RoomTile_noBadges': !(this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) }); @@ -193,7 +196,7 @@ module.exports = React.createClass({ var badgeClasses = classNames({ 'mx_RoomTile_badge': true, - 'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.menu, + 'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.notificationTagMenu, }); // XXX: We should never display raw room IDs, but sometimes the @@ -204,7 +207,7 @@ module.exports = React.createClass({ var badge; var badgeContent; - if (this.state.badgeHover || this.state.menu) { + if (this.state.badgeHover || this.state.notificationTagMenu) { badgeContent = "\u00B7\u00B7\u00B7"; } else if (this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) { var limitedCount = (notificationCount > 99) ? '99+' : notificationCount; @@ -221,7 +224,7 @@ module.exports = React.createClass({ var nameClasses = classNames({ 'mx_RoomTile_name': true, 'mx_RoomTile_invite': this.props.isInvite, - 'mx_RoomTile_badgeShown': this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted) || this.state.badgeHover || this.state.menu, + 'mx_RoomTile_badgeShown': this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted) || this.state.badgeHover || this.state.notificationTagMenu, }); let nameHTML = emojifyText(name); @@ -255,7 +258,7 @@ module.exports = React.createClass({ return connectDragSource(connectDropTarget(
- +
{ label }