From 60872c9f67d6f95c80d1d733856e36f9029920f9 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 9 Jul 2021 13:51:41 -0500 Subject: [PATCH 1/4] Display large emojis when it's the only thing in the status --- app/soapbox/components/status_content.js | 26 ++++++++++++++++++---- app/styles/components/detailed-status.scss | 7 ++++++ app/styles/components/status.scss | 10 +++++++++ 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js index b0db603e2..5aa79645e 100644 --- a/app/soapbox/components/status_content.js +++ b/app/soapbox/components/status_content.js @@ -12,6 +12,16 @@ import { addGreentext } from 'soapbox/utils/greentext'; const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) +const justEmojis = (node, limit = 10) => { + if (!node) return false; + if (node.textContent.replaceAll(' ', '') !== '') return false; + const emojis = [...node.querySelectorAll('img.emojione')]; + if (emojis.length > limit) return false; + const images = [...node.querySelectorAll('img')]; + if (images.length > emojis.length) return false; + return true; +}; + const mapStateToProps = state => ({ greentext: getSoapboxConfig(state).get('greentext'), }); @@ -88,14 +98,18 @@ class StatusContent extends React.PureComponent { } } - componentDidMount() { + refresh = () => { this.setCollapse(); this._updateStatusLinks(); + this.setState({ justEmojis: justEmojis(this.node) }); + } + + componentDidMount() { + this.refresh(); } componentDidUpdate() { - this.setCollapse(); - this._updateStatusLinks(); + this.refresh(); } onMentionClick = (mention, e) => { @@ -171,6 +185,7 @@ class StatusContent extends React.PureComponent { render() { const { status } = this.props; + const { justEmojis } = this.state; if (status.get('content').length === 0) { return null; @@ -185,6 +200,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, }); if (isRtl(status.get('search_index'))) { @@ -250,7 +266,9 @@ class StatusContent extends React.PureComponent {
ul, From c856e9df55e5fef38e507b02f4a37559f921c3ab Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 9 Jul 2021 14:22:01 -0500 Subject: [PATCH 2/4] Big emojis in chats, too --- app/soapbox/components/status_content.js | 20 +++++++++---------- .../chats/components/chat_message_list.js | 7 +++++++ app/soapbox/utils/rich_content.js | 10 ++++++++++ app/styles/chats.scss | 9 +++++++++ 4 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 app/soapbox/utils/rich_content.js diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js index 5aa79645e..468f158f0 100644 --- a/app/soapbox/components/status_content.js +++ b/app/soapbox/components/status_content.js @@ -9,18 +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 { justEmojis } from 'soapbox/utils/rich_content'; const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) - -const justEmojis = (node, limit = 10) => { - if (!node) return false; - if (node.textContent.replaceAll(' ', '') !== '') return false; - const emojis = [...node.querySelectorAll('img.emojione')]; - if (emojis.length > limit) return false; - const images = [...node.querySelectorAll('img')]; - if (images.length > emojis.length) return false; - return true; -}; +const BIG_EMOJI_LIMIT = 10; const mapStateToProps = state => ({ greentext: getSoapboxConfig(state).get('greentext'), @@ -98,10 +90,16 @@ class StatusContent extends React.PureComponent { } } + setJustEmojis = () => { + if (this.node && this.state.justEmojis === undefined) { + this.setState({ justEmojis: justEmojis(this.node, BIG_EMOJI_LIMIT) }); + } + } + refresh = () => { this.setCollapse(); this._updateStatusLinks(); - this.setState({ justEmojis: justEmojis(this.node) }); + this.setJustEmojis(); } componentDidMount() { diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js index 426075504..ec15dd7f6 100644 --- a/app/soapbox/features/chats/components/chat_message_list.js +++ b/app/soapbox/features/chats/components/chat_message_list.js @@ -15,6 +15,9 @@ 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'; + +const BIG_EMOJI_LIMIT = 1; const messages = defineMessages({ today: { id: 'chats.dividers.today', defaultMessage: 'Today' }, @@ -120,6 +123,10 @@ class ChatMessageList extends ImmutablePureComponent { link.setAttribute('rel', 'ugc nofollow noopener'); link.setAttribute('target', '_blank'); }); + + if (justEmojis(c, BIG_EMOJI_LIMIT)) { + c.classList.add('chat-message__bubble--onlyEmoji'); + } } isNearBottom = () => { diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js new file mode 100644 index 000000000..bbafbac78 --- /dev/null +++ b/app/soapbox/utils/rich_content.js @@ -0,0 +1,10 @@ +// Returns `true` if the node contains only emojis, up to a limit +export const justEmojis = (node, limit = 1) => { + if (!node) return false; + if (node.textContent.replaceAll(' ', '') !== '') return false; + const emojis = [...node.querySelectorAll('img.emojione')]; + if (emojis.length > limit) return false; + const images = [...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..61f9a1169 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -163,6 +163,15 @@ pointer-events: all; } } + + &--onlyEmoji { + background: transparent; + + img.emojione { + width: 36px !important; + height: 36px !important; + } + } } &--me .chat-message__bubble { From 2082c19c53900ea96003476245873836e29adfbd Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 9 Jul 2021 16:51:47 -0500 Subject: [PATCH 3/4] Rename justEmojis to onlyEmoji --- app/soapbox/components/status_content.js | 16 ++++++++-------- .../chats/components/chat_message_list.js | 6 ++++-- app/soapbox/utils/rich_content.js | 3 ++- app/styles/chats.scss | 2 +- 4 files changed, 15 insertions(+), 12 deletions(-) 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; From 60bdccc0b5ea00ffe8a2c0250c43a8dce5319667 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 9 Jul 2021 17:02:04 -0500 Subject: [PATCH 4/4] Big emojis: fix nodeList count --- app/soapbox/utils/rich_content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js index fc36733a5..dae13fb0c 100644 --- a/app/soapbox/utils/rich_content.js +++ b/app/soapbox/utils/rich_content.js @@ -2,10 +2,10 @@ export const onlyEmoji = (node, limit = 1) => { if (!node) return false; if (node.textContent.replaceAll(' ', '') !== '') return false; - const emojis = [...node.querySelectorAll('img.emojione')]; + const emojis = Array.from(node.querySelectorAll('img.emojione')); if (emojis.length === 0) return false; if (emojis.length > limit) return false; - const images = [...node.querySelectorAll('img')]; + const images = Array.from(node.querySelectorAll('img')); if (images.length > emojis.length) return false; return true; };