mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix emoji reaction popup position

Browse Source
This commit is contained in:
KMY 2023-03-12 20:33:23 +09:00 committed by YoheiZuho
parent 5c786b4868
commit bcb6f80ac3
1 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
View File

@ -327,6 +327,7 @@ class EmojiPickerDropdown extends PureComponent {
state = {
active: false,
loading: false,
bottom: true,
};
setRef = (c) => {
@ -334,6 +335,7 @@ class EmojiPickerDropdown extends PureComponent {
};
onShowDropdown = () => {
this.updateDropdownPosition();
this.setState({ active: true });
if (!EmojiPicker) {
@ -354,6 +356,23 @@ class EmojiPickerDropdown extends PureComponent {
this.setState({ active: false });
};
updateDropdownPosition = () => {
let bottom = true;
if (this.target) {
const height = window.innerHeight;
const rect = this.target.getBoundingClientRect();
if (height && rect) {
bottom = height / 2 > rect.top;
}
}
if (this.state.bottom !== bottom) {
this.setState({ bottom });
}
};
onToggle = (e) => {
if (!this.state.loading && (!e.key || e.key === 'Enter')) {
if (this.state.active) {
@ -381,7 +400,7 @@ class EmojiPickerDropdown extends PureComponent {
render () {
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, button } = this.props;
const title = intl.formatMessage(messages.emoji);
const { active, loading } = this.state;
const { active, loading, bottom } = this.state;
return (
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
@ -393,7 +412,7 @@ class EmojiPickerDropdown extends PureComponent {
/>}
</div>
<Overlay show={active} placement={'bottom'} target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
<Overlay show={active} placement={ bottom ? 'bottom' : 'top' } target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
{({ props, placement })=> (
<div {...props} style={{ ...props.style, width: 299 }}>
<div className={`dropdown-animation ${placement}`}>