diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-05-05 16:58:20 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2018-05-05 16:58:20 +0200 |
commit | bfa5bdde2c3fef9fbc08ebb10112047274607f28 (patch) | |
tree | 75950ecbe29d7fcaff83e4ca2e20f372b9ee8162 /app/javascript | |
parent | cb62935c0b00f41ff5d4ab77a8cc38174b05d186 (diff) |
[Glitch] Place emoji picker top if it is closer to the bottom of the viewport
Port ad5d3134e406c2bcfceca6a1b7dd3dceb6ec1061 to glitch-soc
Diffstat (limited to 'app/javascript')
-rw-r--r-- | app/javascript/flavours/glitch/features/emoji_picker/index.js | 13 |
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} |