diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index fcfc5d5e50..ab557e77d7 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -28,10 +28,11 @@ var ReactDOM = require('react-dom');
module.exports = {
ContextualMenuContainerId: "mx_ContextualMenu_Container",
- propTypes: {
+ propTypes: {
menuWidth: React.PropTypes.number,
menuHeight: React.PropTypes.number,
chevronOffset: React.PropTypes.number,
+ menuColour: React.PropTypes.string,
},
getOrCreateContainer: function() {
@@ -61,8 +62,23 @@ module.exports = {
top: props.top,
};
- var chevronOffset = {
- top: props.chevronOffset,
+ var chevronOffset = {};
+ if (props.chevronOffset) {
+ chevronOffset.top = props.chevronOffset;
+ }
+
+ // To overide the deafult chevron colour, if it's been set
+ var chevronCSS = "";
+ if (props.menuColour) {
+ chevronCSS = `
+ .mx_ContextualMenu_chevron_left:after {
+ border-right-color: ${props.menuColour};
+ }
+
+ .mx_ContextualMenu_chevron_right:after {
+ border-left-color: ${props.menuColour};
+ }
+ `
}
var chevron = null;
@@ -82,24 +98,29 @@ module.exports = {
'mx_ContextualMenu_right': !props.left,
});
- var menuSize = {};
+ var menuStyle = {};
if (props.menuWidth) {
- menuSize.width = props.menuWidth;
+ menuStyle.width = props.menuWidth;
}
if (props.menuHeight) {
- menuSize.height = props.menuHeight;
+ menuStyle.height = props.menuHeight;
+ }
+
+ if (props.menuColour) {
+ menuStyle["background-color"] = props.menuColour;
}
// FIXME: If a menu uses getDefaultProps it clobbers the onFinished
// property set here so you can't close the menu from a button click!
var menu = (
{ settings_button }
{ forget_button }
- { leave_button }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 07b4f2618b..ae0ffafae5 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -57,7 +57,8 @@ module.exports = React.createClass({
return({
hover : false,
badgeHover : false,
- menu: false,
+ notificationTagMenu: false,
+ roomTagMenu: false,
areNotifsMuted: areNotifsMuted,
});
},
@@ -117,13 +118,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,
@@ -131,15 +132,46 @@ 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();
},
+ 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,
+ menuColour: "#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];
@@ -154,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))
});
@@ -162,9 +194,14 @@ 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.menu,
+ 'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.notificationTagMenu,
});
// XXX: We should never display raw room IDs, but sometimes the
@@ -175,7 +212,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;
@@ -193,7 +230,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,
});
if (this.props.selected) {
@@ -226,7 +263,11 @@ module.exports = React.createClass({
return connectDragSource(connectDropTarget(