Testing out the context menu

pull/21833/head
wmwragg 2016-07-21 17:44:31 +01:00
parent 8d2ac5dd5b
commit 4013ea75d0
1 changed files with 21 additions and 3 deletions

View File

@ -21,6 +21,7 @@ var classNames = require('classnames');
var dis = require("../../../dispatcher");
var MatrixClientPeg = require('../../../MatrixClientPeg');
var sdk = require('../../../index');
var ContextualMenu = require('../../../ContextualMenu');
import {emojifyText} from '../../../HtmlUtils';
module.exports = React.createClass({
@ -46,6 +47,7 @@ module.exports = React.createClass({
return({
hover : false,
badgeHover : false,
menu: false,
});
},
@ -72,6 +74,22 @@ module.exports = React.createClass({
this.setState( { badgeHover : false } );
},
onBadgeClicked: function(e) {
var Label = sdk.getComponent('elements.Label');
var elementRect = e.target.getBoundingClientRect();
var x = elementRect.right;
var y = elementRect.height + (elementRect.height / 2);
var self = this;
ContextualMenu.createMenu(Label, {
left: x,
top: y,
onFinished: function() {
self.setState({menu: false});
}
});
this.setState({menu: true});
},
render: function() {
var myUserId = MatrixClientPeg.get().credentials.userId;
var me = this.props.room.currentState.members[myUserId];
@ -111,7 +129,7 @@ module.exports = React.createClass({
badgeClasses = "mx_RoomTile_badge mx_RoomTile_badge_no_unread";
}
badge = <div className={ badgeClasses } onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
badge = <div className={ badgeClasses } onClick={this.onBadgeClicked} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
/*
if (this.props.highlight) {
@ -160,9 +178,9 @@ module.exports = React.createClass({
var connectDropTarget = this.props.connectDropTarget;
return connectDragSource(connectDropTarget(
<div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<div className={classes} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<div className="mx_RoomTile_avatar">
<RoomAvatar room={this.props.room} width={24} height={24} />
<RoomAvatar onClick={this.onClick} room={this.props.room} width={24} height={24} />
</div>
{ label }
{ badge }