Merge pull request #1903 from matrix-org/luke/fix-sticker-picker-position

Quick fix for sticker picker position

Author: dbkr

src/components/views/rooms/Stickerpicker.js

@@ -127,10 +127,19 @@ export default class Stickerpicker extends React.Component {
     }
 
     _onWidgetAction(payload) {
-        if (payload.action === "user_widget_updated") {
-            this.forceUpdate();
-        } else if (payload.action === "stickerpicker_close") {
-            this.setState({showStickers: false});
+        switch (payload.action) {
+            case "user_widget_updated":
+                this.forceUpdate();
+                break;
+            case "stickerpicker_close":
+                this.setState({showStickers: false});
+                break;
+            case "show_right_panel":
+            case "hide_right_panel":
+            case "show_left_panel":
+            case "hide_left_panel":
+                this.setState({showStickers: false});
+                break;
         }
     }
 
@@ -243,16 +252,33 @@ export default class Stickerpicker extends React.Component {
      * @param  {Event} e Event that triggered the function
      */
     _onShowStickersClick(e) {
+        // XXX: Simplify by using a context menu that is positioned relative to the sticker picker button
+
         const buttonRect = e.target.getBoundingClientRect();
 
         // The window X and Y offsets are to adjust position when zoomed in to page
-        const x = buttonRect.right + window.pageXOffset - 42;
+        let x = buttonRect.right + window.pageXOffset - 41;
+
+        // Amount of horizontal space between the right of menu and the right of the viewport
+        //  (10 = amount needed to make chevron centrally aligned)
+        const rightPad = 10;
+
+        // When the sticker picker would be displayed off of the viewport, adjust x
+        //  (302 = width of context menu, including borders)
+        x = Math.min(x, document.body.clientWidth - (302 + rightPad));
+
+        // Offset the chevron location, which is relative to the left of the context menu
+        //  (10 = offset when context menu would not be displayed off viewport)
+        //  (8 = value required in practice (possibly 10 - 2 where the 2 = context menu borders)
+        const stickerPickerChevronOffset = Math.max(10, 8 + window.pageXOffset + buttonRect.left - x);
+
         const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
 
         this.setState({
             showStickers: true,
             stickerPickerX: x,
             stickerPickerY: y,
+            stickerPickerChevronOffset,
         });
     }
 
@@ -305,7 +331,7 @@ export default class Stickerpicker extends React.Component {
 
         const stickerPicker = <ContextualMenu
             elementClass={GenericElementContextMenu}
-            chevronOffset={10}
+            chevronOffset={this.state.stickerPickerChevronOffset}
             chevronFace={'bottom'}
             left={this.state.stickerPickerX}
             top={this.state.stickerPickerY}