about summary refs log tree commit diff
path: root/app/javascript/flavours
diff options
context:
space:
mode:
authorbeatrix <beatrix.bitrot@gmail.com>2018-05-06 11:33:09 -0400
committerGitHub <noreply@github.com>2018-05-06 11:33:09 -0400
commit92f192e9b19019a7650678120053e7de3085616b (patch)
tree9595cd4513884bf8d4b780e45b17781a91892934 /app/javascript/flavours
parent4480cd745ffb4759d08bf83cad86ef42b9906a1f (diff)
parentbfa5bdde2c3fef9fbc08ebb10112047274607f28 (diff)
Merge pull request #461 from ThibG/glitch-soc/fixes/emoji-picker-placement
[Glitch] Place emoji picker top if it is closer to the bottom of the viewport
Diffstat (limited to 'app/javascript/flavours')
-rw-r--r--app/javascript/flavours/glitch/features/emoji_picker/index.js13
1 files changed, 8 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js
index 4b1ef6c97..4cf833a3e 100644
--- a/app/javascript/flavours/glitch/features/emoji_picker/index.js
+++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js
@@ -241,12 +241,12 @@ class EmojiPickerMenu extends React.PureComponent {
   static defaultProps = {
     style: {},
     loading: true,
-    placement: 'bottom',
     frequentlyUsedEmojis: [],
   };
 
   state = {
     modifierOpen: false,
+    placement: null,
   };
 
   handleDocumentClick = e => {
@@ -378,7 +378,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
     this.dropdown = c;
   }
 
-  onShowDropdown = () => {
+  onShowDropdown = ({ target }) => {
     this.setState({ active: true });
 
     if (!EmojiPicker) {
@@ -393,6 +393,9 @@ export default class EmojiPickerDropdown extends React.PureComponent {
         this.setState({ loading: false });
       });
     }
+
+    const { top } = target.getBoundingClientRect();
+    this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
   }
 
   onHideDropdown = () => {
@@ -404,7 +407,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
       if (this.state.active) {
         this.onHideDropdown();
       } else {
-        this.onShowDropdown();
+        this.onShowDropdown(e);
       }
     }
   }
@@ -426,7 +429,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
   render () {
     const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
     const title = intl.formatMessage(messages.emoji);
-    const { active, loading } = this.state;
+    const { active, loading, placement } = this.state;
 
     return (
       <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
@@ -438,7 +441,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
           />
         </div>
 
-        <Overlay show={active} placement='bottom' target={this.findTarget}>
+        <Overlay show={active} placement={placement} target={this.findTarget}>
           <EmojiPickerMenu
             custom_emojis={this.props.custom_emojis}
             loading={loading}