From ffcba9498ec4281c4d308476764f5fdde64ea51e Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Tue, 12 Jun 2018 16:14:24 +0100
Subject: [PATCH] Keep context menus that extend downwards vertically on screen

This fixes https://github.com/vector-im/riot-web/issues/3429 in the case
of RoomList context menus *and* EventTile context menus.

This was mostly stolen from #1903 and it would be good to factor things
out at a later date such that #1903 is replaced with similar logic
within ContextualMenu.
---
 src/components/structures/ContextualMenu.js | 37 +++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index daac294d12..3e867ad384 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -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>