From 3f9d0886676806d3760706641eaf91f9c5f8c22a Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 1 Apr 2019 20:34:33 -0600
Subject: [PATCH] Put the stickerpicker below dialogs

Fixes https://github.com/vector-im/riot-web/issues/9353

The ContextualMenu now accepts a zIndex parameter which can be used to control its level. Dialogs are at around 4000 in the z-index, and the context menu defaults to 5000 for the things that need tooltips and such in a dialog.
---
 src/components/structures/ContextualMenu.js | 11 +++++++++--
 src/components/views/rooms/Stickerpicker.js |  7 ++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index d551a6fe27..345eae2b18 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -56,6 +56,7 @@ export default class ContextualMenu extends React.Component {
         menuPaddingRight: PropTypes.number,
         menuPaddingBottom: PropTypes.number,
         menuPaddingLeft: PropTypes.number,
+        zIndex: PropTypes.number,
 
         // If true, insert an invisible screen-sized element behind the
         // menu that when clicked will close it.
@@ -215,16 +216,22 @@ export default class ContextualMenu extends React.Component {
             menuStyle["paddingRight"] = props.menuPaddingRight;
         }
 
+        const wrapperStyle = {};
+        if (!isNaN(Number(props.zIndex))) {
+            menuStyle["zIndex"] = props.zIndex + 1;
+            wrapperStyle["zIndex"] = props.zIndex;
+        }
+
         const ElementClass = props.elementClass;
 
         // 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}>
+        return <div className={className} style={{...position, ...wrapperStyle}}>
             <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}>
                 { chevron }
                 <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
             </div>
-            { props.hasBackground && <div className="mx_ContextualMenu_background"
+            { props.hasBackground && <div className="mx_ContextualMenu_background" style={wrapperStyle}
                                           onClick={props.closeMenu} onContextMenu={this.onContextMenu} /> }
             <style>{ chevronCSS }</style>
         </div>;
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 9d8912954c..b487c90ae2 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -29,9 +29,9 @@ import PersistedElement from "../elements/PersistedElement";
 
 const widgetType = 'm.stickerpicker';
 
-// We sit in a context menu, so the persisted element container needs to float
-// above it, so it needs a greater z-index than the ContextMenu
-const STICKERPICKER_Z_INDEX = 5000;
+// This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
+// We sit in a context menu, so this should be given to the context menu.
+const STICKERPICKER_Z_INDEX = 3500;
 
 // Key to store the widget's AppTile under in PersistedElement
 const PERSISTED_ELEMENT_KEY = "stickerPicker";
@@ -367,6 +367,7 @@ export default class Stickerpicker extends React.Component {
             menuPaddingTop={0}
             menuPaddingLeft={0}
             menuPaddingRight={0}
+            zIndex={STICKERPICKER_Z_INDEX}
         />;
 
         if (this.state.showStickers) {