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

Merge pull request #402 from matrix-org/wmwragg/room-tag-menu 

Wmwragg/room tag menu
pull/21833/head
Matthew Hodgson 2016-08-11 08:59:32 -05:00 committed by GitHub
parent 4f76398b29 6d1eebe6f2
commit 3704e2c648
3 changed files with 86 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/structures/ContextualMenu.js
View File

@ -28,10 +28,11 @@ var ReactDOM = require('react-dom');
module.exports = {
ContextualMenuContainerId: "mx_ContextualMenu_Container",
propTypes: {
propTypes: {
menuWidth: React.PropTypes.number,
menuHeight: React.PropTypes.number,
chevronOffset: React.PropTypes.number,
menuColour: React.PropTypes.string,
},
getOrCreateContainer: function() {
@ -61,8 +62,23 @@ module.exports = {
top: props.top,
};
var chevronOffset = {
top: props.chevronOffset,
var chevronOffset = {};
if (props.chevronOffset) {
chevronOffset.top = props.chevronOffset;
}
// To overide the deafult chevron colour, if it's been set
var chevronCSS = "";
if (props.menuColour) {
chevronCSS = `
.mx_ContextualMenu_chevron_left:after {
border-right-color: ${props.menuColour};
}
.mx_ContextualMenu_chevron_right:after {
border-left-color: ${props.menuColour};
}
`
}
var chevron = null;
@ -82,24 +98,29 @@ module.exports = {
'mx_ContextualMenu_right': !props.left,
});
var menuSize = {};
var menuStyle = {};
if (props.menuWidth) {
menuSize.width = props.menuWidth;
menuStyle.width = props.menuWidth;
}
if (props.menuHeight) {
menuSize.height = props.menuHeight;
menuStyle.height = props.menuHeight;
}
if (props.menuColour) {
menuStyle["background-color"] = props.menuColour;
}
// FIXME: If a menu uses getDefaultProps it clobbers the onFinished
// property set here so you can't close the menu from a button click!
var menu = (
<div className={className} style={position}>
<div className={menuClasses} style={menuSize}>
<div className={menuClasses} style={menuStyle}>
{chevron}
<Element {...props} onFinished={closeMenu}/>
</div>
<div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
<style>{chevronCSS}</style>
</div>
);

15
src/components/views/rooms/RoomHeader.js
View File

@ -270,13 +270,13 @@ module.exports = React.createClass({
</div>;
}
var leave_button;
if (this.props.onLeaveClick) {
leave_button =
<div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
<TintableSvg src="img/leave.svg" width="26" height="20"/>
</div>;
}
// var leave_button;
// if (this.props.onLeaveClick) {
// leave_button =
// <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
// <TintableSvg src="img/leave.svg" width="26" height="20"/>
// </div>;
// }
var forget_button;
if (this.props.onForgetClick) {
@ -297,7 +297,6 @@ module.exports = React.createClass({
<div className="mx_RoomHeader_rightRow">
{ settings_button }
{ forget_button }
{ leave_button }
<div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
<TintableSvg src="img/icons-search.svg" width="35" height="35"/>
</div>

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

@ -57,7 +57,8 @@ module.exports = React.createClass({
return({
hover : false,
badgeHover : false,
menu: false,
notificationTagMenu: false,
roomTagMenu: false,
areNotifsMuted: areNotifsMuted,
});
},
@ -117,13 +118,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,
@ -131,15 +132,46 @@ 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();
},
onAvatarClicked: function(e) {
// Only allow none guests to access the context menu
if (!MatrixClientPeg.get().isGuest() && !this.props.collapsed) {
// If the badge is clicked, then no longer show tooltip
if (this.props.collapsed) {
this.setState({ hover: false });
}
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) - 19;
var self = this;
ContextualMenu.createMenu(RoomTagMenu, {
chevronOffset: 10,
menuColour: "#FFFFFF",
left: x,
top: y,
room: this.props.room,
onFinished: function() {
self.setState({ roomTagMenu: false });
}
});
this.setState({ roomTagMenu: true });
// Prevent the RoomTile onClick event firing as well
e.stopPropagation();
}
},
render: function() {
var myUserId = MatrixClientPeg.get().credentials.userId;
var me = this.props.room.currentState.members[myUserId];
@ -154,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))
});
@ -162,9 +194,14 @@ module.exports = React.createClass({
'mx_RoomTile_avatar': true,
});
var avatarContainerClasses = classNames({
'mx_RoomTile_avatar_container': true,
'mx_RoomTile_avatar_roomTagMenu': this.state.roomTagMenu,
})
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
@ -175,7 +212,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;
@ -193,7 +230,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,
});
if (this.props.selected) {
@ -226,7 +263,11 @@ 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} />
<div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
<div className={avatarContainerClasses}>
<RoomAvatar room={this.props.room} width={24} height={24} />
</div>
</div>
</div>
<div className="mx_RoomTile_nameContainer">
{ label }