From 6e7e091117ba37f059fc8801e82020cd8eb1be09 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 27 Jul 2016 16:09:07 +0100
Subject: [PATCH] Refactor so that chevron and menu can be positioned
 independantly

---
 src/components/structures/ContextualMenu.js | 19 +++++++++++++------
 src/components/views/rooms/EventTile.js     |  3 ++-
 src/components/views/rooms/RoomTile.js      |  3 ++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index 695b8445ab..c6f8e32b11 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -17,6 +17,7 @@ limitations under the License.
 
 'use strict';
 
+var classNames = require('classnames');
 var React = require('react');
 var ReactDOM = require('react-dom');
 
@@ -51,25 +52,31 @@ module.exports = {
         };
 
         var position = {
-            top: props.top - 20,
+            top: props.top,
         };
 
         var chevron = null;
         if (props.left) {
-            chevron = <div className="mx_ContextualMenu_chevron_left"></div>
-            position.left = props.left + 8;
+            chevron = <div style={ {top: props.chevronOffset} } className="mx_ContextualMenu_chevron_left"></div>
+            position.left = props.left;
         } else {
             chevron = <div className="mx_ContextualMenu_chevron_right"></div>
-            position.right = props.right + 8;
+            position.right = props.right;
         }
 
         var className = 'mx_ContextualMenu_wrapper';
 
+        var menuClasses = classNames({
+            'mx_ContextualMenu': true,
+            'mx_ContextualMenu_left': props.left,
+            'mx_ContextualMenu_right': !props.left,
+        });
+
         // 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}>
-                <div className="mx_ContextualMenu" style={position}>
+            <div className={className} style={position}>
+                <div className={menuClasses}>
                     {chevron}
                     <Element {...props} onFinished={closeMenu}/>
                 </div>
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index a24c597ad4..7945debd1a 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -254,9 +254,10 @@ module.exports = React.createClass({
 
         // The window X and Y offsets are to adjust position when zoomed in to page
         var x = buttonRect.right + window.pageXOffset;
-        var y = buttonRect.top + (e.target.height / 2) + window.pageYOffset;
+        var y = (buttonRect.top + (e.target.height / 2) + window.pageYOffset) - 19;
         var self = this;
         ContextualMenu.createMenu(MessageContextMenu, {
+            chevronOffset: 10,
             mxEvent: this.props.mxEvent,
             left: x,
             top: y,
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index a3ebf3ed45..13b20118e3 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -84,9 +84,10 @@ module.exports = React.createClass({
             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;
-            var y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
+            var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 43;
             var self = this;
             ContextualMenu.createMenu(Menu, {
+                chevronOffset: 35,
                 left: x,
                 top: y,
                 room: this.props.room,