From bfa5bdde2c3fef9fbc08ebb10112047274607f28 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 16:58:20 +0200 Subject: [Glitch] Place emoji picker top if it is closer to the bottom of the viewport Port ad5d3134e406c2bcfceca6a1b7dd3dceb6ec1061 to glitch-soc --- .../flavours/glitch/features/emoji_picker/index.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/features/emoji_picker/index.js') 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 (
@@ -438,7 +441,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { />
- +