Merge branch 'kb_development' into kb_migration
This commit is contained in:
commit
3fdf9e570a
2 changed files with 23 additions and 3 deletions
|
@ -28,6 +28,7 @@ const messages = defineMessages({
|
|||
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
|
||||
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
|
||||
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
||||
emojiReaction: { id: 'status.emoji_reaction', defaultMessage: 'Emoji Reaction' },
|
||||
bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
|
||||
removeBookmark: { id: 'status.remove_bookmark', defaultMessage: 'Remove bookmark' },
|
||||
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
||||
|
@ -370,7 +371,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
);
|
||||
|
||||
const emojiPickerButton = (
|
||||
<IconButton className='status__action-bar__button' icon='smile-o' />
|
||||
<IconButton className='status__action-bar__button' title={intl.formatMessage(messages.emojiReaction)} icon='smile-o' />
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
@ -321,6 +321,7 @@ class EmojiPickerDropdown extends React.PureComponent {
|
|||
state = {
|
||||
active: false,
|
||||
loading: false,
|
||||
bottom: true,
|
||||
};
|
||||
|
||||
setRef = (c) => {
|
||||
|
@ -328,6 +329,7 @@ class EmojiPickerDropdown extends React.PureComponent {
|
|||
};
|
||||
|
||||
onShowDropdown = () => {
|
||||
this.updateDropdownPosition();
|
||||
this.setState({ active: true });
|
||||
|
||||
if (!EmojiPicker) {
|
||||
|
@ -348,6 +350,23 @@ class EmojiPickerDropdown extends React.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) {
|
||||
|
@ -375,7 +394,7 @@ class EmojiPickerDropdown extends React.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}>
|
||||
|
@ -387,7 +406,7 @@ class EmojiPickerDropdown extends React.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}`}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue