Menu colour now changeable, and leave room item hooked up

This commit is contained in:
wmwragg 2016-08-10 16:34:49 +01:00
parent 667264420c
commit e2d3631e7c
3 changed files with 37 additions and 16 deletions

View file

@ -32,6 +32,7 @@ module.exports = {
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>
);

View file

@ -271,13 +271,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) {
@ -298,7 +298,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>

View file

@ -159,6 +159,7 @@ module.exports = React.createClass({
var self = this;
ContextualMenu.createMenu(RoomTagMenu, {
chevronOffset: 10,
menuColour: "#FFFFFF",
left: x,
top: y,
room: this.props.room,
@ -265,7 +266,7 @@ module.exports = React.createClass({
<div className={avatarClasses}>
<div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
<div className={avatarContainerClasses}>
<RoomAvatar room={this.props.room} width={24} height={24} />
<RoomAvatar room={this.props.room} width={25} height={25} />
</div>
</div>
</div>