From 03800b747608873f242446a330ba2387db2f871d Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Sat, 14 Oct 2017 21:43:47 -0600
Subject: [PATCH] Support more positioning options on context menus

Signed-off-by: Travis Ralston <travpc@gmail.com>
---
 src/components/structures/ContextualMenu.js | 50 ++++++++++++++-------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index c3ad7f9cd1..3c2308e6a7 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -33,6 +33,7 @@ module.exports = {
         menuHeight: React.PropTypes.number,
         chevronOffset: React.PropTypes.number,
         menuColour: React.PropTypes.string,
+        chevronFace: React.PropTypes.string, // top, bottom, left, right
     },
 
     getOrCreateContainer: function() {
@@ -58,12 +59,30 @@ module.exports = {
             }
         };
 
-        const position = {
-            top: props.top,
-        };
+        const position = {};
+        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 = {};
-        if (props.chevronOffset) {
+        if (props.chevronFace) {
+            chevronFace = props.chevronFace;
+        }
+        if (chevronFace === 'top' || chevronFace === 'bottom') {
+            chevronOffset.left = props.chevronOffset;
+        } else {
             chevronOffset.top = props.chevronOffset;
         }
 
@@ -74,28 +93,27 @@ module.exports = {
                 .mx_ContextualMenu_chevron_left:after {
                     border-right-color: ${props.menuColour};
                 }
-
                 .mx_ContextualMenu_chevron_right:after {
                     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;
-        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 chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace}></div>;
         const className = 'mx_ContextualMenu_wrapper';
 
         const menuClasses = classNames({
             'mx_ContextualMenu': true,
-            'mx_ContextualMenu_left': props.left,
-            'mx_ContextualMenu_right': !props.left,
+            'mx_ContextualMenu_left': chevronFace === 'left',
+            'mx_ContextualMenu_right': chevronFace === 'right',
+            'mx_ContextualMenu_top': chevronFace === 'top',
+            'mx_ContextualMenu_bottom': chevronFace === 'bottom',
         });
 
         const menuStyle = {};