mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 04:21:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1952 from matrix-org/luke/context-menus-downwards-keep-vertically-on-screen

Browse source 
Keep context menus that extend downwards vertically on screen
This commit is contained in:
Luke Barnard 2018-06-12 16:27:57 +01:00 committed by GitHub
commit b18a8c483e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,6 +63,24 @@ export default class ContextualMenu extends React.Component {
hasBackground: PropTypes.bool,
}
constructor() {
super();
this.state = {
contextMenuRect: null,
};
this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
}
collectContextMenuRect(element) {
// We don't need to clean up when unmounting, so ignore
if (!element) return;
this.setState({
contextMenuRect: element.getBoundingClientRect(),
});
}
render() {
const position = {};
let chevronFace = null;
@ -83,6 +101,9 @@ export default class ContextualMenu extends React.Component {
chevronFace = 'right';
}
const contextMenuRect = this.state.contextMenuRect || null;
const padding = 10;
const chevronOffset = {};
if (props.chevronFace) {
chevronFace = props.chevronFace;
@ -90,7 +111,19 @@ export default class ContextualMenu extends React.Component {
if (chevronFace === 'top' || chevronFace === 'bottom') {
chevronOffset.left = props.chevronOffset;
} else {
chevronOffset.top = props.chevronOffset;
const target = position.top;
// By default, no adjustment is made
let adjusted = target;
// If we know the dimensions of the context menu, adjust its position
// such that it does not leave the (padded) window.
if (contextMenuRect) {
adjusted = Math.min(position.top, document.body.clientHeight - contextMenuRect.height - padding);
}
position.top = adjusted;
chevronOffset.top = Math.max(props.chevronOffset, props.chevronOffset + target - adjusted);
}
// To override the default chevron colour, if it's been set
@ -154,7 +187,7 @@ export default class ContextualMenu extends React.Component {
// FIXME: If a menu uses getDefaultProps it clobbers the onFinished
// property set here so you can't close the menu from a button click!
return <div className={className} style={position}>
<div className={menuClasses} style={menuStyle}>
<div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}>
{ chevron }
<ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
</div>