Menu colour now changeable, and leave room item hooked up
This commit is contained in:
parent
667264420c
commit
e2d3631e7c
3 changed files with 37 additions and 16 deletions
|
@ -28,10 +28,11 @@ var ReactDOM = require('react-dom');
|
||||||
module.exports = {
|
module.exports = {
|
||||||
ContextualMenuContainerId: "mx_ContextualMenu_Container",
|
ContextualMenuContainerId: "mx_ContextualMenu_Container",
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
menuWidth: React.PropTypes.number,
|
menuWidth: React.PropTypes.number,
|
||||||
menuHeight: React.PropTypes.number,
|
menuHeight: React.PropTypes.number,
|
||||||
chevronOffset: React.PropTypes.number,
|
chevronOffset: React.PropTypes.number,
|
||||||
|
menuColour: React.PropTypes.string,
|
||||||
},
|
},
|
||||||
|
|
||||||
getOrCreateContainer: function() {
|
getOrCreateContainer: function() {
|
||||||
|
@ -61,8 +62,23 @@ module.exports = {
|
||||||
top: props.top,
|
top: props.top,
|
||||||
};
|
};
|
||||||
|
|
||||||
var chevronOffset = {
|
var chevronOffset = {};
|
||||||
top: props.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;
|
var chevron = null;
|
||||||
|
@ -82,24 +98,29 @@ module.exports = {
|
||||||
'mx_ContextualMenu_right': !props.left,
|
'mx_ContextualMenu_right': !props.left,
|
||||||
});
|
});
|
||||||
|
|
||||||
var menuSize = {};
|
var menuStyle = {};
|
||||||
if (props.menuWidth) {
|
if (props.menuWidth) {
|
||||||
menuSize.width = props.menuWidth;
|
menuStyle.width = props.menuWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.menuHeight) {
|
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
|
// FIXME: If a menu uses getDefaultProps it clobbers the onFinished
|
||||||
// property set here so you can't close the menu from a button click!
|
// property set here so you can't close the menu from a button click!
|
||||||
var menu = (
|
var menu = (
|
||||||
<div className={className} style={position}>
|
<div className={className} style={position}>
|
||||||
<div className={menuClasses} style={menuSize}>
|
<div className={menuClasses} style={menuStyle}>
|
||||||
{chevron}
|
{chevron}
|
||||||
<Element {...props} onFinished={closeMenu}/>
|
<Element {...props} onFinished={closeMenu}/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
|
<div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
|
||||||
|
<style>{chevronCSS}</style>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -271,13 +271,13 @@ module.exports = React.createClass({
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
var leave_button;
|
// var leave_button;
|
||||||
if (this.props.onLeaveClick) {
|
// if (this.props.onLeaveClick) {
|
||||||
leave_button =
|
// leave_button =
|
||||||
<div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
|
// <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
|
||||||
<TintableSvg src="img/leave.svg" width="26" height="20"/>
|
// <TintableSvg src="img/leave.svg" width="26" height="20"/>
|
||||||
</div>;
|
// </div>;
|
||||||
}
|
// }
|
||||||
|
|
||||||
var forget_button;
|
var forget_button;
|
||||||
if (this.props.onForgetClick) {
|
if (this.props.onForgetClick) {
|
||||||
|
@ -298,7 +298,6 @@ module.exports = React.createClass({
|
||||||
<div className="mx_RoomHeader_rightRow">
|
<div className="mx_RoomHeader_rightRow">
|
||||||
{ settings_button }
|
{ settings_button }
|
||||||
{ forget_button }
|
{ forget_button }
|
||||||
{ leave_button }
|
|
||||||
<div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
|
<div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
|
||||||
<TintableSvg src="img/icons-search.svg" width="35" height="35"/>
|
<TintableSvg src="img/icons-search.svg" width="35" height="35"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -159,6 +159,7 @@ module.exports = React.createClass({
|
||||||
var self = this;
|
var self = this;
|
||||||
ContextualMenu.createMenu(RoomTagMenu, {
|
ContextualMenu.createMenu(RoomTagMenu, {
|
||||||
chevronOffset: 10,
|
chevronOffset: 10,
|
||||||
|
menuColour: "#FFFFFF",
|
||||||
left: x,
|
left: x,
|
||||||
top: y,
|
top: y,
|
||||||
room: this.props.room,
|
room: this.props.room,
|
||||||
|
@ -265,7 +266,7 @@ module.exports = React.createClass({
|
||||||
<div className={avatarClasses}>
|
<div className={avatarClasses}>
|
||||||
<div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
|
<div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
|
||||||
<div className={avatarContainerClasses}>
|
<div className={avatarContainerClasses}>
|
||||||
<RoomAvatar room={this.props.room} width={24} height={24} />
|
<RoomAvatar room={this.props.room} width={25} height={25} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue