hamptonmoore
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Place emoji picker top if it is closer to the bottom of the viewport 

Port ad5d3134e4 to glitch-soc
signup-info-prompt
Thibaut Girka 2018-05-05 16:58:20 +02:00
parent cb62935c0b
commit bfa5bdde2c
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/flavours/glitch/features/emoji_picker/index.js
View File

@ -241,12 +241,12 @@ class EmojiPickerMenu extends React.PureComponent {
static defaultProps = { static defaultProps = {
style: {}, style: {},
loading: true, loading: true,
placement: 'bottom',
frequentlyUsedEmojis: [], frequentlyUsedEmojis: [],
}; };
state = { state = {
modifierOpen: false, modifierOpen: false,
placement: null,
}; };
handleDocumentClick = e => { handleDocumentClick = e => {
@ -378,7 +378,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
this.dropdown = c; this.dropdown = c;
} }
onShowDropdown = () => { onShowDropdown = ({ target }) => {
this.setState({ active: true }); this.setState({ active: true });
if (!EmojiPicker) { if (!EmojiPicker) {
@ -393,6 +393,9 @@ export default class EmojiPickerDropdown extends React.PureComponent {
this.setState({ loading: false }); this.setState({ loading: false });
}); });
} }
const { top } = target.getBoundingClientRect();
this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
} }
onHideDropdown = () => { onHideDropdown = () => {
@ -404,7 +407,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
if (this.state.active) { if (this.state.active) {
this.onHideDropdown(); this.onHideDropdown();
} else { } else {
this.onShowDropdown(); this.onShowDropdown(e);
} }
} }
} }
@ -426,7 +429,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
render () { render () {
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props; const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
const title = intl.formatMessage(messages.emoji); const title = intl.formatMessage(messages.emoji);
const { active, loading } = this.state; const { active, loading, placement } = this.state;
return ( return (
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}> <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
@ -438,7 +441,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
/> />
</div> </div>
<Overlay show={active} placement='bottom' target={this.findTarget}> <Overlay show={active} placement={placement} target={this.findTarget}>
<EmojiPickerMenu <EmojiPickerMenu
custom_emojis={this.props.custom_emojis} custom_emojis={this.props.custom_emojis}
loading={loading} loading={loading}