mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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({
hover : false,
badgeHover : false,
menu: false,
notificationTagMenu: false,
roomTagMenu: false,
areNotifsMuted: areNotifsMuted,
});
},
@ -118,13 +119,13 @@ module.exports = React.createClass({
this.setState({ hover: false });
}
var Menu = sdk.getComponent('context_menus.NotificationStateContextMenu');
var NotificationStateMenu = sdk.getComponent('context_menus.NotificationStateContextMenu');
var elementRect = e.target.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
var x = elementRect.right + window.pageXOffset + 3;
var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53;
var self = this;
ContextualMenu.createMenu(Menu, {
ContextualMenu.createMenu(NotificationStateMenu, {
menuWidth: 188,
menuHeight: 126,
chevronOffset: 45,
@ -132,10 +133,10 @@ module.exports = React.createClass({
top: y,
room: this.props.room,
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
e.stopPropagation();
@ -150,23 +151,25 @@ module.exports = React.createClass({
this.setState({ hover: false });
}
var Menu = sdk.getComponent('context_menus.RoomTagContextMenu');
var RoomTagMenu = sdk.getComponent('context_menus.RoomTagContextMenu');
var elementRect = e.target.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
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;
ContextualMenu.createMenu(Menu, {wmwragg
ContextualMenu.createMenu(RoomTagMenu, {
chevronOffset: 10,
left: x,
top: y,
room: this.props.room,
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() {
@ -183,7 +186,7 @@ module.exports = React.createClass({
'mx_RoomTile_unreadNotify': notificationCount > 0 && !this.state.areNotifsMuted,
'mx_RoomTile_highlight': this.props.highlight,
'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))
});
@ -193,7 +196,7 @@ module.exports = React.createClass({
var badgeClasses = classNames({
'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
@ -204,7 +207,7 @@ module.exports = React.createClass({
var badge;
var badgeContent;
if (this.state.badgeHover || this.state.menu) {
if (this.state.badgeHover || this.state.notificationTagMenu) {
badgeContent = "\u00B7\u00B7\u00B7";
} else if (this.props.highlight || (notificationCount > 0 && !this.state.areNotifsMuted)) {
var limitedCount = (notificationCount > 99) ? '99+' : notificationCount;
@ -221,7 +224,7 @@ module.exports = React.createClass({
var nameClasses = classNames({
'mx_RoomTile_name': true,
'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);
@ -255,7 +258,7 @@ module.exports = React.createClass({
return connectDragSource(connectDropTarget(
<div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<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 className="mx_RoomTile_nameContainer">
{ label }