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,