Merge pull request #402 from matrix-org/wmwragg/room-tag-menu

Wmwragg/room tag menu

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 = {
+        var chevronOffset = {};
-            top: props.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 = (
             <div className={className} style={position}>
-                <div className={menuClasses} style={menuSize}>
+                <div className={menuClasses} style={menuStyle}>
                     {chevron}
                     <Element {...props} onFinished={closeMenu}/>
                 </div>
                 <div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
+                <style>{chevronCSS}</style>
             </div>
         );
 

src/components/views/rooms/RoomHeader.js

@@ -270,13 +270,13 @@ module.exports = React.createClass({
                 </div>;
         }
 
-        var leave_button;
+//        var leave_button;
-        if (this.props.onLeaveClick) {
+//        if (this.props.onLeaveClick) {
-            leave_button =
+//            leave_button =
-                <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
+//                <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
-                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
+//                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </div>;
+//                </div>;
-        }
+//        }
 
         var forget_button;
         if (this.props.onForgetClick) {
@@ -297,7 +297,6 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settings_button }
                     { forget_button }
-                    { leave_button }
                     <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
                     </div>

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(
             <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className={avatarClasses}>
-                    <RoomAvatar room={this.props.room} width={24} height={24} />
+                    <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
+                        <div className={avatarContainerClasses}>
+                            <RoomAvatar room={this.props.room} width={24} height={24} />
+                        </div>
+                    </div>
                 </div>
                 <div className="mx_RoomTile_nameContainer">
                     { label }