diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index 3c6d019b30..e54201d963 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_ReactionsRowButton { - display: inline-block; + display: inline-flex; height: 20px; line-height: 21px; margin-right: 6px; @@ -35,3 +35,11 @@ limitations under the License. border-color: $reaction-row-button-selected-border-color; } } + +.mx_ReactionsRowButton_content { + max-width: 100px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-right: 4px; +} diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js index 73ab28e65c..fb7a14d6fb 100644 --- a/src/HtmlUtils.js +++ b/src/HtmlUtils.js @@ -66,19 +66,10 @@ const VARIATION_SELECTOR = String.fromCharCode(0xFE0F); * need emojification. * unicodeToImage uses this function. */ -export function mightContainEmoji(str) { +function mightContainEmoji(str) { return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str); } -/** - * Returns true if the string definitely contains a single emoji. - * @param {String} str String to test - * @return {Boolean} - */ -export function isSingleEmoji(str) { - return mightContainEmoji(str) && SINGLE_EMOJI_REGEX.test(str); -} - /** * Returns the shortcode for an emoji character. * diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js index 57d2afc429..0abb1015b9 100644 --- a/src/components/views/messages/ReactionsRow.js +++ b/src/components/views/messages/ReactionsRow.js @@ -20,7 +20,6 @@ import PropTypes from 'prop-types'; import sdk from '../../../index'; import { _t } from '../../../languageHandler'; import { isContentActionable } from '../../../utils/EventUtils'; -import { isSingleEmoji } from '../../../HtmlUtils'; import MatrixClientPeg from '../../../MatrixClientPeg'; // The maximum number of reactions to initially show on a message. @@ -115,9 +114,6 @@ export default class ReactionsRow extends React.PureComponent { const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton'); let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => { - if (!isSingleEmoji(content)) { - return null; - } const count = events.size; if (!count) { return null; diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js index 33325b5592..ac44ec5d56 100644 --- a/src/components/views/messages/ReactionsRowButton.js +++ b/src/components/views/messages/ReactionsRowButton.js @@ -101,7 +101,12 @@ export default class ReactionsRowButton extends React.PureComponent { onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} > - {content} {count} + + {content} + + + {count} + {tooltip} ; }