PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Make context menus point the right way

Browse source
This commit is contained in:
David Baker 2015-10-21 19:02:02 +01:00
parent 1f3a6e408c
commit 4b645bcd66
3 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/ContextualMenu.js
View file

@ -49,15 +49,25 @@ module.exports = {
var position = { var position = {
top: props.top - 20, 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 // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
// property set here so you can't close the menu from a button click! // property set here so you can't close the menu from a button click!
var menu = ( var menu = (
<div className="mx_ContextualMenu_wrapper"> <div className={className}>
<div className="mx_ContextualMenu" style={position}> <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}/> <Element {...props} onFinished={closeMenu}/>
</div> </div>
<div className="mx_ContextualMenu_background" onClick={closeMenu}></div> <div className="mx_ContextualMenu_background" onClick={closeMenu}></div>

9
src/skins/vector/css/common.css
View file

@ -67,13 +67,20 @@ a:visited {
padding: 6px; padding: 6px;
} }
.mx_ContextualMenu_chevron { .mx_ContextualMenu_chevron_right {
padding: 12px; padding: 12px;
position: absolute; position: absolute;
right: -21px; right: -21px;
top: 0px; top: 0px;
} }
.mx_ContextualMenu_chevron_left {
padding: 12px;
position: absolute;
left: -21px;
top: 0px;
}
.mx_ContextualMenu_field { .mx_ContextualMenu_field {
padding: 3px 6px 3px 6px; padding: 3px 6px 3px 6px;
cursor: pointer; cursor: pointer;

4
src/skins/vector/views/molecules/EventTile.js
View file

@ -50,12 +50,12 @@ module.exports = React.createClass({
onEditClicked: function(e) { onEditClicked: function(e) {
var MessageContextMenu = sdk.getComponent('molecules.MessageContextMenu'); var MessageContextMenu = sdk.getComponent('molecules.MessageContextMenu');
var buttonRect = e.target.getBoundingClientRect() var buttonRect = e.target.getBoundingClientRect()
var x = window.innerWidth - buttonRect.left; var x = buttonRect.right;
var y = buttonRect.top + (e.target.height / 2); var y = buttonRect.top + (e.target.height / 2);
var self = this; var self = this;
ContextualMenu.createMenu(MessageContextMenu, { ContextualMenu.createMenu(MessageContextMenu, {
mxEvent: this.props.mxEvent, mxEvent: this.props.mxEvent,
right: x, left: x,
top: y, top: y,
onFinished: function() { onFinished: function() {
self.setState({menu: false}); self.setState({menu: false});