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 cdfff952..7865e45a 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 879561f9..aff9666e 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 b686ef15..534af3c7 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});