From 59b4a3398d60469dfaddf5e3fd3ac2dabb538676 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 27 Jun 2019 13:05:04 +0100 Subject: [PATCH 1/3] Limit reactions row on initial display This limits the reactions row below messages to initially show at most 8 keys. For those messages with more than that, a "Show all" option appears to reveal all the keys. Fixes https://github.com/vector-im/riot-web/issues/9570 --- res/css/views/messages/_ReactionsRow.scss | 14 +++++++++ src/components/views/messages/ReactionsRow.js | 30 +++++++++++++++++-- src/i18n/strings/en_EN.json | 1 + 3 files changed, 42 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss index 3b764e97b4f..57c02ed3e53 100644 --- a/res/css/views/messages/_ReactionsRow.scss +++ b/res/css/views/messages/_ReactionsRow.scss @@ -18,3 +18,17 @@ limitations under the License. margin: 6px 0; color: $primary-fg-color; } + +.mx_ReactionsRow_showAll { + text-decoration: none; + font-size: 10px; + font-weight: 600; + margin-left: 6px; + vertical-align: top; + + &:hover, + &:link, + &:visited { + color: $accent-color; + } +} diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js index 51f62807a5e..f210266c664 100644 --- a/src/components/views/messages/ReactionsRow.js +++ b/src/components/views/messages/ReactionsRow.js @@ -18,10 +18,14 @@ import React from 'react'; 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. +const MAX_ITEMS_WHEN_LIMITED = 8; + export default class ReactionsRow extends React.PureComponent { static propTypes = { // The event we're displaying reactions for @@ -41,6 +45,7 @@ export default class ReactionsRow extends React.PureComponent { this.state = { myReactions: this.getMyReactions(), + showAll: false, }; } @@ -94,16 +99,22 @@ export default class ReactionsRow extends React.PureComponent { return [...myReactions.values()]; } + onShowAllClick = () => { + this.setState({ + showAll: true, + }); + } + render() { const { mxEvent, reactions } = this.props; - const { myReactions } = this.state; + const { myReactions, showAll } = this.state; if (!reactions || !isContentActionable(mxEvent)) { return null; } const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton'); - const items = reactions.getSortedAnnotationsByKey().map(([content, events]) => { + let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => { if (!isSingleEmoji(content)) { return null; } @@ -125,10 +136,23 @@ export default class ReactionsRow extends React.PureComponent { reactionEvents={events} myReactionEvent={myReactionEvent} />; - }); + }).filter(item => !!item); + + let showAllLink; + if (items.length > MAX_ITEMS_WHEN_LIMITED && !showAll) { + items = items.slice(0, MAX_ITEMS_WHEN_LIMITED); + showAllLink = + {_t("Show all")} + ; + } return
{items} + {showAllLink}
; } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index de6a06e9e4b..2e9f746054a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -944,6 +944,7 @@ "Party Popper": "Party Popper", "Confused": "Confused", "Eyes": "Eyes", + "Show all": "Show all", "reacted with %(shortName)s": "reacted with %(shortName)s", "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s", "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.", From 04398b7853d9fcf3ad38376bac61d533943231e7 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 28 Jun 2019 14:46:57 +0100 Subject: [PATCH 2/3] Tweak limits so show all reveals more space than itself --- src/components/views/messages/ReactionsRow.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js index f210266c664..4bae8c0ca16 100644 --- a/src/components/views/messages/ReactionsRow.js +++ b/src/components/views/messages/ReactionsRow.js @@ -138,8 +138,11 @@ export default class ReactionsRow extends React.PureComponent { />; }).filter(item => !!item); + // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items. + // The "+ 1" ensure that the "show all" reveals something that takes up + // more space than the button itself. let showAllLink; - if (items.length > MAX_ITEMS_WHEN_LIMITED && !showAll) { + if ((items.length > MAX_ITEMS_WHEN_LIMITED + 1) && !showAll) { items = items.slice(0, MAX_ITEMS_WHEN_LIMITED); showAllLink = Date: Fri, 28 Jun 2019 14:47:41 +0100 Subject: [PATCH 3/3] Rename link to button --- src/components/views/messages/ReactionsRow.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js index 4bae8c0ca16..57d2afc4293 100644 --- a/src/components/views/messages/ReactionsRow.js +++ b/src/components/views/messages/ReactionsRow.js @@ -141,10 +141,10 @@ export default class ReactionsRow extends React.PureComponent { // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items. // The "+ 1" ensure that the "show all" reveals something that takes up // more space than the button itself. - let showAllLink; + let showAllButton; if ((items.length > MAX_ITEMS_WHEN_LIMITED + 1) && !showAll) { items = items.slice(0, MAX_ITEMS_WHEN_LIMITED); - showAllLink = {items} - {showAllLink} + {showAllButton} ; } }