OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

allow rightclicking for exposing room tile context menus 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2018-06-16 09:07:16 +01:00
parent a25cdb6ce5
commit 8fa96e19d5
No known key found for this signature in database
GPG Key ID: 3F879DA5AD802A5E
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/views/groups/GroupInviteTile.js
View File

@ -66,6 +66,11 @@ export default React.createClass({
}); });
}, },
onContextMenu: function(e) {
this.onBadgeClicked(e);
e.preventDefault();
},
onBadgeClicked: function(e) { onBadgeClicked: function(e) {
// Prevent the RoomTile onClick event firing as well // Prevent the RoomTile onClick event firing as well
e.stopPropagation(); e.stopPropagation();
@ -79,7 +84,7 @@ export default React.createClass({
} }
const RoomTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu'); const RoomTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
const elementRect = e.target.getBoundingClientRect(); const elementRect = this.refs.badge.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
const x = elementRect.right + window.pageXOffset + 3; const x = elementRect.right + window.pageXOffset + 3;
@ -125,7 +130,7 @@ export default React.createClass({
}); });
const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!'; const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>; const badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
let tooltip; let tooltip;
if (this.props.collapsed && this.state.hover) { if (this.props.collapsed && this.state.hover) {
@ -139,7 +144,12 @@ export default React.createClass({
}); });
return ( return (
<AccessibleButton className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <AccessibleButton className={classes}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onContextMenu={this.onContextMenu}
>
<div className="mx_RoomTile_avatar"> <div className="mx_RoomTile_avatar">
{ av } { av }
</div> </div>

17
src/components/views/rooms/RoomTile.js
View File

@ -187,6 +187,11 @@ module.exports = React.createClass({
this.badgeOnMouseLeave(); this.badgeOnMouseLeave();
}, },
onContextMenu: function(e) {
this.onBadgeClicked(e);
e.preventDefault();
},
badgeOnMouseEnter: function() { badgeOnMouseEnter: function() {
// Only allow non-guests to access the context menu // Only allow non-guests to access the context menu
// and only change it if it needs to change // and only change it if it needs to change
@ -208,7 +213,7 @@ module.exports = React.createClass({
} }
const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu'); const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
const elementRect = e.target.getBoundingClientRect(); const elementRect = this.refs.badge.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
const x = elementRect.right + window.pageXOffset + 3; const x = elementRect.right + window.pageXOffset + 3;
@ -280,7 +285,7 @@ module.exports = React.createClass({
badgeContent = '\u200B'; badgeContent = '\u200B';
} }
badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>; badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
const EmojiText = sdk.getComponent('elements.EmojiText'); const EmojiText = sdk.getComponent('elements.EmojiText');
let label; let label;
@ -317,7 +322,13 @@ module.exports = React.createClass({
directMessageIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />; directMessageIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
} }
return <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> return <AccessibleButton tabIndex="0"
className={classes}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onContextMenu={this.onContextMenu}
>
<div className={avatarClasses}> <div className={avatarClasses}>
<div className="mx_RoomTile_avatar_container"> <div className="mx_RoomTile_avatar_container">
<RoomAvatar room={this.props.room} width={24} height={24} /> <RoomAvatar room={this.props.room} width={24} height={24} />