cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Place emoji picker top if it is closer to the bottom of the viewport (fixes #7277) (#7314)

This commit is contained in:
ThibG 2018-05-03 10:42:18 +02:00 committed by Eugen Rochko
parent a5293fdf61
commit ad5d3134e4
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
View File

@ -162,12 +162,12 @@ class EmojiPickerMenu extends React.PureComponent {
static defaultProps = {
style: {},
loading: true,
placement: 'bottom',
frequentlyUsedEmojis: [],
};
state = {
modifierOpen: false,
placement: null,
};
handleDocumentClick = e => {
@ -298,7 +298,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
this.dropdown = c;
}
onShowDropdown = () => {
onShowDropdown = ({ target }) => {
this.setState({ active: true });
if (!EmojiPicker) {
@ -313,6 +313,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 = () => {
@ -324,7 +327,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
if (this.state.active) {
this.onHideDropdown();
} else {
this.onShowDropdown();
this.onShowDropdown(e);
}
}
}
@ -346,7 +349,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}>
@ -358,7 +361,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}