Make context menus point the right way

dbkr · dbkr · commit 4b645bcd666d · 2015-10-21T19:02:02.000+01:00
diff --git 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
@@ -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
@@ -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});
