From 4b645bcd666de5f46dacdad3826d33c098833be4 Mon Sep 17 00:00:00 2001 From: David Baker 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 = + position.left = props.left + 8; + } else { + chevron = + 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 = ( -
+
- + {chevron}
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});