imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support contextual menus without chevron

Browse source
This commit is contained in:
Bruno Windels 2018-10-23 15:21:30 +02:00
parent 5f1cf07543
commit 7b8e96723e
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/structures/ContextualMenu.js
View file

@ -49,7 +49,7 @@ export default class ContextualMenu extends React.Component {
menuHeight: PropTypes.number, menuHeight: PropTypes.number,
chevronOffset: PropTypes.number, chevronOffset: PropTypes.number,
menuColour: PropTypes.string, menuColour: PropTypes.string,
chevronFace: PropTypes.string, // top, bottom, left, right chevronFace: PropTypes.string, // top, bottom, left, right or none
// Function to be called on menu close // Function to be called on menu close
onFinished: PropTypes.func, onFinished: PropTypes.func,
menuPaddingTop: PropTypes.number, menuPaddingTop: PropTypes.number,
@ -113,7 +113,6 @@ export default class ContextualMenu extends React.Component {
render() { render() {
const position = {}; const position = {};
let chevronFace = null; let chevronFace = null;
const props = this.props; const props = this.props;
if (props.top) { if (props.top) {
@ -137,6 +136,8 @@ export default class ContextualMenu extends React.Component {
if (props.chevronFace) { if (props.chevronFace) {
chevronFace = props.chevronFace; chevronFace = props.chevronFace;
} }
const hasChevron = chevronFace && chevronFace !== "none";
if (chevronFace === 'top' || chevronFace === 'bottom') { if (chevronFace === 'top' || chevronFace === 'bottom') {
chevronOffset.left = props.chevronOffset; chevronOffset.left = props.chevronOffset;
} else { } else {
@ -174,11 +175,12 @@ export default class ContextualMenu extends React.Component {
`; `;
} }
const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} />; const chevron = hasChevron ? <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} /> : undefined;
const className = 'mx_ContextualMenu_wrapper'; const className = 'mx_ContextualMenu_wrapper';
const menuClasses = classNames({ const menuClasses = classNames({
'mx_ContextualMenu': true, 'mx_ContextualMenu': true,
'mx_ContextualMenu_noChevron': chevronFace === 'none',
'mx_ContextualMenu_left': chevronFace === 'left', 'mx_ContextualMenu_left': chevronFace === 'left',
'mx_ContextualMenu_right': chevronFace === 'right', 'mx_ContextualMenu_right': chevronFace === 'right',
'mx_ContextualMenu_top': chevronFace === 'top', 'mx_ContextualMenu_top': chevronFace === 'top',