From 4b645bcd666de5f46dacdad3826d33c098833be4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 21 Oct 2015 19:02:02 +0100
Subject: [PATCH] Make context menus point the right way

---
 src/ContextualMenu.js                         | 16 +++++++++++++---
 src/skins/vector/css/common.css               |  9 ++++++++-
 src/skins/vector/views/molecules/EventTile.js |  4 ++--
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/ContextualMenu.js b/src/ContextualMenu.js
index cdfff952bb..7865e45a75 100644
--- a/src/ContextualMenu.js
+++ b/src/ContextualMenu.js
@@ -49,15 +49,25 @@ module.exports = {
 
         var position = {
             top: props.top - 20,
-            right: props.right + 8,
         };
 
+        var chevron = null;
+        if (props.left) {
+            chevron = <img className="mx_ContextualMenu_chevron_left" src="img/chevron-left.png" width="9" height="16" />
+            position.left = props.left + 8;
+        } else {
+            chevron = <img className="mx_ContextualMenu_chevron_right" src="img/chevron-right.png" width="9" height="16" />
+            position.right = props.right + 8;
+        }
+
+        var className = 'mx_ContextualMenu_wrapper';
+
         // 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="mx_ContextualMenu_wrapper">
+            <div className={className}>
                 <div className="mx_ContextualMenu" style={position}>
-                    <img className="mx_ContextualMenu_chevron" src="img/chevron-right.png" width="9" height="16" />
+                    {chevron}
                     <Element {...props} onFinished={closeMenu}/>
                 </div>
                 <div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
index 879561f912..aff9666e91 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -67,13 +67,20 @@ a:visited {
     padding: 6px;
 }
 
-.mx_ContextualMenu_chevron {
+.mx_ContextualMenu_chevron_right {
     padding: 12px;
     position: absolute;
     right: -21px;
     top: 0px;
 }
 
+.mx_ContextualMenu_chevron_left {
+    padding: 12px;
+    position: absolute;
+    left: -21px;
+    top: 0px;
+}
+
 .mx_ContextualMenu_field {
     padding: 3px 6px 3px 6px;
     cursor: pointer;
diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js
index b686ef15b6..534af3c7c8 100644
--- a/src/skins/vector/views/molecules/EventTile.js
+++ b/src/skins/vector/views/molecules/EventTile.js
@@ -50,12 +50,12 @@ module.exports = React.createClass({
     onEditClicked: function(e) {
         var MessageContextMenu = sdk.getComponent('molecules.MessageContextMenu');
         var buttonRect = e.target.getBoundingClientRect()
-        var x = window.innerWidth - buttonRect.left;
+        var x = buttonRect.right;
         var y = buttonRect.top + (e.target.height / 2);
         var self = this;
         ContextualMenu.createMenu(MessageContextMenu, {
             mxEvent: this.props.mxEvent,
-            right: x,
+            left: x,
             top: y,
             onFinished: function() {
                 self.setState({menu: false});