diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js index b0db603e2..b08acc805 100644 --- a/app/soapbox/components/status_content.js +++ b/app/soapbox/components/status_content.js @@ -9,8 +9,10 @@ import classnames from 'classnames'; import Icon from 'soapbox/components/icon'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { addGreentext } from 'soapbox/utils/greentext'; +import { onlyEmoji } from 'soapbox/utils/rich_content'; const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) +const BIG_EMOJI_LIMIT = 10; const mapStateToProps = state => ({ greentext: getSoapboxConfig(state).get('greentext'), @@ -88,14 +90,24 @@ class StatusContent extends React.PureComponent { } } - componentDidMount() { + setOnlyEmoji = () => { + if (this.node && this.state.onlyEmoji === undefined) { + this.setState({ onlyEmoji: onlyEmoji(this.node, BIG_EMOJI_LIMIT) }); + } + } + + refresh = () => { this.setCollapse(); this._updateStatusLinks(); + this.setOnlyEmoji(); + } + + componentDidMount() { + this.refresh(); } componentDidUpdate() { - this.setCollapse(); - this._updateStatusLinks(); + this.refresh(); } onMentionClick = (mention, e) => { @@ -171,6 +183,7 @@ class StatusContent extends React.PureComponent { render() { const { status } = this.props; + const { onlyEmoji } = this.state; if (status.get('content').length === 0) { return null; @@ -185,6 +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': onlyEmoji, }); if (isRtl(status.get('search_index'))) { @@ -250,7 +264,9 @@ class StatusContent extends React.PureComponent {
{ diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js new file mode 100644 index 000000000..dae13fb0c --- /dev/null +++ b/app/soapbox/utils/rich_content.js @@ -0,0 +1,11 @@ +// Returns `true` if the node contains only emojis, up to a limit +export const onlyEmoji = (node, limit = 1) => { + if (!node) return false; + if (node.textContent.replaceAll(' ', '') !== '') return false; + const emojis = Array.from(node.querySelectorAll('img.emojione')); + if (emojis.length === 0) return false; + if (emojis.length > limit) return false; + const images = Array.from(node.querySelectorAll('img')); + if (images.length > emojis.length) return false; + return true; +}; diff --git a/app/styles/chats.scss b/app/styles/chats.scss index bd5d25318..70ae5ef5c 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -163,6 +163,15 @@ pointer-events: all; } } + + &--onlyEmoji { + background: transparent !important; + + img.emojione { + width: 36px !important; + height: 36px !important; + } + } } &--me .chat-message__bubble { diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index 4cbaad0ed..9aff62e34 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -36,6 +36,13 @@ line-height: 24px; margin: -1px 0 0; } + + &--big { + img.emojione { + width: 56px; + height: 56px; + } + } } .video-player, diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index f65a700fc..9d4ba404a 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -66,6 +66,16 @@ margin: 20px 0; display: block; } + + &--big { + font-size: 32px !important; + line-height: normal !important; + + img.emojione { + width: 36px; + height: 36px; + } + } } .status__content > ul,