From e74e5c7eb903d6e9aa88629e975a81574fe49159 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Tue, 10 Apr 2018 20:04:55 +0200
Subject: Place composer dropdown menus top if they are closer to the bottom of
 the viewport

---
 .../glitch/features/composer/options/dropdown/index.js        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'app/javascript/flavours/glitch/features/composer/options/dropdown/index.js')

diff --git a/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js
index d63d90a9f..b3462e25a 100644
--- a/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js
+++ b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js
@@ -29,7 +29,7 @@ const handlers = {
     } = this.handlers;
     switch (key) {
     case 'Enter':
-      handleToggle();
+      handleToggle(key);
       break;
     case 'Escape':
       handleClose();
@@ -79,7 +79,7 @@ const handlers = {
   },
 
   //  Toggles opening and closing the dropdown.
-  handleToggle () {
+  handleToggle ({ target }) {
     const { handleMakeModal } = this.handlers;
     const { onModalOpen } = this.props;
     const { open } = this.state;
@@ -98,6 +98,8 @@ const handlers = {
       }
     }
 
+    const { top } = target.getBoundingClientRect();
+    this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
     //  Otherwise, we just set our state to open.
     this.setState({ open: !open });
   },
@@ -129,6 +131,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
     this.state = {
       needsModalUpdate: false,
       open: false,
+      placement: null,
     };
   }
 
@@ -161,7 +164,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
       onChange,
       value,
     } = this.props;
-    const { open } = this.state;
+    const { open, placement } = this.state;
     const computedClass = classNames('composer--options--dropdown', {
       active,
       open,
@@ -188,7 +191,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
         />
         <Overlay
           containerPadding={20}
-          placement='bottom'
+          placement={placement}
           show={open}
           target={this}
         >
-- 
cgit