diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js index fcfc5d5e50..ab557e77d7 100644 --- a/src/components/structures/ContextualMenu.js +++ b/src/components/structures/ContextualMenu.js @@ -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 = (