imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial RoomTagContextMenu wired in

Browse source
This commit is contained in:
wmwragg 2016-08-05 15:48:28 +01:00
parent 80e4a99477
commit 5b812fead9
1 changed files with 18 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -58,7 +58,8 @@ module.exports = React.createClass({
return({ return({
hover : false, hover : false,
badgeHover : false, badgeHover : false,
menu: false, notificationTagMenu: false,
roomTagMenu: false,
areNotifsMuted: areNotifsMuted, areNotifsMuted: areNotifsMuted,
}); });
}, },
@ -118,13 +119,13 @@ module.exports = React.createClass({
this.setState({ hover: false }); this.setState({ hover: false });
} }
var Menu = sdk.getComponent('context_menus.NotificationStateContextMenu'); var NotificationStateMenu = sdk.getComponent('context_menus.NotificationStateContextMenu');
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 + 3; var x = elementRect.right + window.pageXOffset + 3;
var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53; var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53;
var self = this; var self = this;
ContextualMenu.createMenu(Menu, { ContextualMenu.createMenu(NotificationStateMenu, {
menuWidth: 188, menuWidth: 188,
menuHeight: 126, menuHeight: 126,
chevronOffset: 45, chevronOffset: 45,
@ -132,10 +133,10 @@ module.exports = React.createClass({
top: y, top: y,
room: this.props.room, room: this.props.room,
onFinished: function() { onFinished: function() {
self.setState({ menu: false }); self.setState({ notificationTagMenu: false });
} }
}); });
this.setState({ menu: true }); this.setState({ notificationTagMenu: true });
} }
// Prevent the RoomTile onClick event firing as well // Prevent the RoomTile onClick event firing as well
e.stopPropagation(); e.stopPropagation();
@ -150,23 +151,25 @@ module.exports = React.createClass({
this.setState({ hover: false }); this.setState({ hover: false });
} }
var Menu = sdk.getComponent('context_menus.RoomTagContextMenu'); var RoomTagMenu = sdk.getComponent('context_menus.RoomTagContextMenu');
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 + 3; var x = elementRect.right + window.pageXOffset + 3;
var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53; var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 19;
var self = this; var self = this;
ContextualMenu.createMenu(Menu, {wmwragg ContextualMenu.createMenu(RoomTagMenu, {
chevronOffset: 10, chevronOffset: 10,
left: x, left: x,
top: y, top: y,
room: this.props.room, room: this.props.room,
onFinished: function() { onFinished: function() {
self.setState({ menu: false }); self.setState({ roomTagMenu: false });
} }
}); });
this.setState({ menu: true }); this.setState({ roomTagMenu: true });
} }
// Prevent the RoomTile onClick event firing as well
e.stopPropagation();
}, },
render: function() { render: function() {
@ -183,7 +186,7 @@ module.exports = React.createClass({
'mx_RoomTile_unreadNotify': notificationCount > 0 && !this.state.areNotifsMuted, 'mx_RoomTile_unreadNotify': notificationCount > 0 && !this.state.areNotifsMuted,
'mx_RoomTile_highlight': this.props.highlight, 'mx_RoomTile_highlight': this.props.highlight,
'mx_RoomTile_invited': (me && me.membership == 'invite'), 'mx_RoomTile_invited': (me && me.membership == 'invite'),
'mx_RoomTile_menu': this.state.menu, 'mx_RoomTile_notificationTagMenu': this.state.notificationTagMenu,
'mx_RoomTile_noBadges': !(this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) 'mx_RoomTile_noBadges': !(this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted))
}); });
@ -193,7 +196,7 @@ module.exports = React.createClass({
var badgeClasses = classNames({ var badgeClasses = classNames({
'mx_RoomTile_badge': true, 'mx_RoomTile_badge': true,
'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.menu, 'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.notificationTagMenu,
}); });
// XXX: We should never display raw room IDs, but sometimes the // XXX: We should never display raw room IDs, but sometimes the
@ -204,7 +207,7 @@ module.exports = React.createClass({
var badge; var badge;
var badgeContent; var badgeContent;
if (this.state.badgeHover || this.state.menu) { if (this.state.badgeHover || this.state.notificationTagMenu) {
badgeContent = "\u00B7\u00B7\u00B7"; badgeContent = "\u00B7\u00B7\u00B7";
} else if (this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) { } else if (this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) {
var limitedCount = (notificationCount > 99) ? '99+' : notificationCount; var limitedCount = (notificationCount > 99) ? '99+' : notificationCount;
@ -221,7 +224,7 @@ module.exports = React.createClass({
var nameClasses = classNames({ var nameClasses = classNames({
'mx_RoomTile_name': true, 'mx_RoomTile_name': true,
'mx_RoomTile_invite': this.props.isInvite, 'mx_RoomTile_invite': this.props.isInvite,
'mx_RoomTile_badgeShown': this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted) || this.state.badgeHover || this.state.menu, 'mx_RoomTile_badgeShown': this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted) || this.state.badgeHover || this.state.notificationTagMenu,
}); });
let nameHTML = emojifyText(name); let nameHTML = emojifyText(name);
@ -255,7 +258,7 @@ module.exports = React.createClass({
return connectDragSource(connectDropTarget( return connectDragSource(connectDropTarget(
<div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<div className={avatarClasses}> <div className={avatarClasses}>
<RoomAvatar room={this.props.room} width={24} height={24} /> <RoomAvatar room={this.props.room} onClick={this.onAvatarClicked} width={24} height={24} />
</div> </div>
<div className="mx_RoomTile_nameContainer"> <div className="mx_RoomTile_nameContainer">
{ label } { label }