From 7170ec1a3c21125c85e15a7a37d5f15a2468626f Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 27 Oct 2021 22:28:49 -0600 Subject: [PATCH 1/2] PSFD-455: Iterate on search results for message bubbles Though not perfect, this is a bit better than it was before. Specifically, we ensure our matching for `isOwnEvent` correctly identifies the user and that the results don't look *awful*. There's still room for improvement, but this should be a measurable improvement itself. Most notably, this doesn't fix a couple obvious bugs due to complexity: * Message bubbles have the wrong corners for the display format (pre-existing). * The sender's own messages are missing avatars/names. This is just way too complex to fix. **Requires https://github.com/matrix-org/matrix-js-sdk/pull/2004** --- res/css/views/rooms/_EventBubbleTile.scss | 21 +++++++++++++++++++++ src/components/views/rooms/EventTile.tsx | 4 +++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 1c8f4230b67..e7ee599a7c5 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -22,6 +22,27 @@ limitations under the License. --maxWidth: 70%; } +.mx_RoomView_searchResultsPanel { + .mx_EventTile[data-layout=bubble] { + .mx_SenderProfile { + // Group layout adds a 64px left margin, which we really don't want on search results + margin-left: 0; + } + + &[data-self=true] { + // The avatars end up overlapping, so just hide them + .mx_EventTile_avatar { + display: none; + } + } + + // Mirror rough designs for "greyed out" text + &.mx_EventTile_contextual { + opacity: 0.7; + } + } +} + .mx_EventTile[data-layout=bubble] { position: relative; margin-top: var(--gutterSize); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 8f9915132e8..7712054247e 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1320,7 +1320,9 @@ export default class EventTile extends React.Component { isQuoteExpanded={isQuoteExpanded} setQuoteExpanded={this.setQuoteExpanded} />) : null; - const isOwnEvent = this.props.mxEvent?.sender?.userId === MatrixClientPeg.get().getUserId(); + + // Use `getSender()` because searched events might not have a proper `sender`. + const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.get().getUserId(); // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers return ( From ad2fe087da84071dafcedb5b7647337d5602b8be Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 13 May 2022 16:03:26 +0100 Subject: [PATCH 2/2] Tweak opacity --- res/css/views/rooms/_EventBubbleTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 6ddd4f15a22..36488c74485 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -46,8 +46,8 @@ limitations under the License. } // Mirror rough designs for "greyed out" text - &.mx_EventTile_contextual { - opacity: 0.7; + &.mx_EventTile_contextual .mx_EventTile_line { + opacity: 0.4; } } }