From e2d3631e7c13cf4f7ca9e1f75c92c7a7aa8bd03b Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 10 Aug 2016 16:34:49 +0100
Subject: [PATCH] Menu colour now changeable, and leave room item hooked up

---
 src/components/structures/ContextualMenu.js | 35 ++++++++++++++++-----
 src/components/views/rooms/RoomHeader.js    | 15 +++++----
 src/components/views/rooms/RoomTile.js      |  3 +-
 3 files changed, 37 insertions(+), 16 deletions(-)

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 = (
             <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>
         );
 
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 8c1b2aaff8..d5090d0659 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -271,13 +271,13 @@ module.exports = React.createClass({
                 </div>;
         }
 
-        var leave_button;
-        if (this.props.onLeaveClick) {
-            leave_button =
-                <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
-                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </div>;
-        }
+//        var leave_button;
+//        if (this.props.onLeaveClick) {
+//            leave_button =
+//                <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
+//                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
+//                </div>;
+//        }
 
         var forget_button;
         if (this.props.onForgetClick) {
@@ -298,7 +298,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>
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 60e4bd10b1..b2efa1a966 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -159,6 +159,7 @@ module.exports = React.createClass({
             var self = this;
             ContextualMenu.createMenu(RoomTagMenu, {
                 chevronOffset: 10,
+                menuColour: "#FFFFFF",
                 left: x,
                 top: y,
                 room: this.props.room,
@@ -265,7 +266,7 @@ module.exports = React.createClass({
                 <div className={avatarClasses}>
                     <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
                         <div className={avatarContainerClasses}>
-                            <RoomAvatar room={this.props.room} width={24} height={24} />
+                            <RoomAvatar room={this.props.room} width={25} height={25} />
                         </div>
                     </div>
                 </div>