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

Support more positioning options on context menus 

Signed-off-by: Travis Ralston <travpc@gmail.com>
pull/21833/head
Travis Ralston 2017-10-14 21:43:47 -06:00
parent 788e16a716
commit 03800b7476
1 changed files with 34 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,6 +33,7 @@ module.exports = {
menuHeight: React.PropTypes.number, menuHeight: React.PropTypes.number,
chevronOffset: React.PropTypes.number, chevronOffset: React.PropTypes.number,
menuColour: React.PropTypes.string, menuColour: React.PropTypes.string,
chevronFace: React.PropTypes.string, // top, bottom, left, right
}, },
getOrCreateContainer: function() { getOrCreateContainer: function() {
@ -58,12 +59,30 @@ module.exports = {
} }
}; };
const position = { const position = {};
top: props.top, let chevronFace = null;
};
if (props.top) {
position.top = props.top;
} else {
position.bottom = props.bottom;
}
if (props.left) {
position.left = props.left;
chevronFace = 'left';
} else {
position.right = props.right;
chevronFace = 'right';
}
const chevronOffset = {}; const chevronOffset = {};
if (props.chevronOffset) { if (props.chevronFace) {
chevronFace = props.chevronFace;
}
if (chevronFace === 'top' || chevronFace === 'bottom') {
chevronOffset.left = props.chevronOffset;
} else {
chevronOffset.top = props.chevronOffset; chevronOffset.top = props.chevronOffset;
} }
@ -74,28 +93,27 @@ module.exports = {
.mx_ContextualMenu_chevron_left:after { .mx_ContextualMenu_chevron_left:after {
border-right-color: ${props.menuColour}; border-right-color: ${props.menuColour};
} }
.mx_ContextualMenu_chevron_right:after { .mx_ContextualMenu_chevron_right:after {
border-left-color: ${props.menuColour}; border-left-color: ${props.menuColour};
} }
.mx_ContextualMenu_chevron_top:after {
border-left-color: ${props.menuColour};
}
.mx_ContextualMenu_chevron_bottom:after {
border-left-color: ${props.menuColour};
}
`; `;
} }
let chevron = null; const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace}></div>;
if (props.left) {
chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_left"></div>;
position.left = props.left;
} else {
chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_right"></div>;
position.right = props.right;
}
const className = 'mx_ContextualMenu_wrapper'; const className = 'mx_ContextualMenu_wrapper';
const menuClasses = classNames({ const menuClasses = classNames({
'mx_ContextualMenu': true, 'mx_ContextualMenu': true,
'mx_ContextualMenu_left': props.left, 'mx_ContextualMenu_left': chevronFace === 'left',
'mx_ContextualMenu_right': !props.left, 'mx_ContextualMenu_right': chevronFace === 'right',
'mx_ContextualMenu_top': chevronFace === 'top',
'mx_ContextualMenu_bottom': chevronFace === 'bottom',
}); });
const menuStyle = {}; const menuStyle = {};