diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js index 468f158f0..b08acc805 100644 --- a/app/soapbox/components/status_content.js +++ b/app/soapbox/components/status_content.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import Icon from 'soapbox/components/icon'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { addGreentext } from 'soapbox/utils/greentext'; -import { justEmojis } from 'soapbox/utils/rich_content'; +import { onlyEmoji } from 'soapbox/utils/rich_content'; const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) const BIG_EMOJI_LIMIT = 10; @@ -90,16 +90,16 @@ class StatusContent extends React.PureComponent { } } - setJustEmojis = () => { - if (this.node && this.state.justEmojis === undefined) { - this.setState({ justEmojis: justEmojis(this.node, BIG_EMOJI_LIMIT) }); + setOnlyEmoji = () => { + if (this.node && this.state.onlyEmoji === undefined) { + this.setState({ onlyEmoji: onlyEmoji(this.node, BIG_EMOJI_LIMIT) }); } } refresh = () => { this.setCollapse(); this._updateStatusLinks(); - this.setJustEmojis(); + this.setOnlyEmoji(); } componentDidMount() { @@ -183,7 +183,7 @@ class StatusContent extends React.PureComponent { render() { const { status } = this.props; - const { justEmojis } = this.state; + const { onlyEmoji } = this.state; if (status.get('content').length === 0) { return null; @@ -198,7 +198,7 @@ class StatusContent extends React.PureComponent { 'status__content--with-action': this.props.onClick && this.context.router, 'status__content--with-spoiler': status.get('spoiler_text').length > 0, 'status__content--collapsed': this.state.collapsed === true, - 'status__content--big': justEmojis, + 'status__content--big': onlyEmoji, }); if (isRtl(status.get('search_index'))) { @@ -265,7 +265,7 @@ class StatusContent extends React.PureComponent { tabIndex='0' ref={this.setRef} className={classnames('status__content', { - 'status__content--big': justEmojis, + 'status__content--big': onlyEmoji, })} style={directionStyle} dangerouslySetInnerHTML={content} diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js index ec15dd7f6..a72e49421 100644 --- a/app/soapbox/features/chats/components/chat_message_list.js +++ b/app/soapbox/features/chats/components/chat_message_list.js @@ -15,7 +15,7 @@ import Bundle from 'soapbox/features/ui/components/bundle'; import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container'; import { initReportById } from 'soapbox/actions/reports'; import { createSelector } from 'reselect'; -import { justEmojis } from 'soapbox/utils/rich_content'; +import { onlyEmoji } from 'soapbox/utils/rich_content'; const BIG_EMOJI_LIMIT = 1; @@ -124,8 +124,10 @@ class ChatMessageList extends ImmutablePureComponent { link.setAttribute('target', '_blank'); }); - if (justEmojis(c, BIG_EMOJI_LIMIT)) { + if (onlyEmoji(c, BIG_EMOJI_LIMIT)) { c.classList.add('chat-message__bubble--onlyEmoji'); + } else { + c.classList.remove('chat-message__bubble--onlyEmoji'); } } diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js index bbafbac78..fc36733a5 100644 --- a/app/soapbox/utils/rich_content.js +++ b/app/soapbox/utils/rich_content.js @@ -1,8 +1,9 @@ // Returns `true` if the node contains only emojis, up to a limit -export const justEmojis = (node, limit = 1) => { +export const onlyEmoji = (node, limit = 1) => { if (!node) return false; if (node.textContent.replaceAll(' ', '') !== '') return false; const emojis = [...node.querySelectorAll('img.emojione')]; + if (emojis.length === 0) return false; if (emojis.length > limit) return false; const images = [...node.querySelectorAll('img')]; if (images.length > emojis.length) return false; diff --git a/app/styles/chats.scss b/app/styles/chats.scss index 61f9a1169..70ae5ef5c 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -165,7 +165,7 @@ } &--onlyEmoji { - background: transparent; + background: transparent !important; img.emojione { width: 36px !important;