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

Refactor so that chevron and menu can be positioned independantly

Browse source
This commit is contained in:
wmwragg 2016-07-27 16:09:07 +01:00
parent 0660b9feff
commit 6e7e091117
3 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/structures/ContextualMenu.js
View file

@ -17,6 +17,7 @@ limitations under the License.
'use strict'; 'use strict';
var classNames = require('classnames');
var React = require('react'); var React = require('react');
var ReactDOM = require('react-dom'); var ReactDOM = require('react-dom');
@ -51,25 +52,31 @@ module.exports = {
}; };
var position = { var position = {
top: props.top - 20, top: props.top,
}; };
var chevron = null; var chevron = null;
if (props.left) { if (props.left) {
chevron = <div className="mx_ContextualMenu_chevron_left"></div> chevron = <div style={ {top: props.chevronOffset} } className="mx_ContextualMenu_chevron_left"></div>
position.left = props.left + 8; position.left = props.left;
} else { } else {
chevron = <div className="mx_ContextualMenu_chevron_right"></div> chevron = <div className="mx_ContextualMenu_chevron_right"></div>
position.right = props.right + 8; position.right = props.right;
} }
var className = 'mx_ContextualMenu_wrapper'; var className = 'mx_ContextualMenu_wrapper';
var menuClasses = classNames({
'mx_ContextualMenu': true,
'mx_ContextualMenu_left': props.left,
'mx_ContextualMenu_right': !props.left,
});
// 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={className}> <div className={className} style={position}>
<div className="mx_ContextualMenu" style={position}> <div className={menuClasses}>
{chevron} {chevron}
<Element {...props} onFinished={closeMenu}/> <Element {...props} onFinished={closeMenu}/>
</div> </div>

3
src/components/views/rooms/EventTile.js
View file

@ -254,9 +254,10 @@ module.exports = React.createClass({
// The window X and Y offsets are to adjust position when zoomed in to page // The window X and Y offsets are to adjust position when zoomed in to page
var x = buttonRect.right + window.pageXOffset; var x = buttonRect.right + window.pageXOffset;
var y = buttonRect.top + (e.target.height / 2) + window.pageYOffset; var y = (buttonRect.top + (e.target.height / 2) + window.pageYOffset) - 19;
var self = this; var self = this;
ContextualMenu.createMenu(MessageContextMenu, { ContextualMenu.createMenu(MessageContextMenu, {
chevronOffset: 10,
mxEvent: this.props.mxEvent, mxEvent: this.props.mxEvent,
left: x, left: x,
top: y, top: y,

3
src/components/views/rooms/RoomTile.js
View file

@ -84,9 +84,10 @@ module.exports = React.createClass({
var elementRect = e.target.getBoundingClientRect(); var elementRect = e.target.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page // The window X and Y offsets are to adjust position when zoomed in to page
var x = elementRect.right + window.pageXOffset; var x = elementRect.right + window.pageXOffset;
var y = elementRect.top + (elementRect.height / 2) + window.pageYOffset; var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 43;
var self = this; var self = this;
ContextualMenu.createMenu(Menu, { ContextualMenu.createMenu(Menu, {
chevronOffset: 35,
left: x, left: x,
top: y, top: y,
room: this.props.room, room: this.props.room,