Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 7170ec1

Browse files
committed
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 matrix-org/matrix-js-sdk#2004
1 parent 27e1636 commit 7170ec1

File tree

2 files changed

+24
-1
lines changed

2 files changed

+24
-1
lines changed

res/css/views/rooms/_EventBubbleTile.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,27 @@ limitations under the License.
2222
--maxWidth: 70%;
2323
}
2424

25+
.mx_RoomView_searchResultsPanel {
26+
.mx_EventTile[data-layout=bubble] {
27+
.mx_SenderProfile {
28+
// Group layout adds a 64px left margin, which we really don't want on search results
29+
margin-left: 0;
30+
}
31+
32+
&[data-self=true] {
33+
// The avatars end up overlapping, so just hide them
34+
.mx_EventTile_avatar {
35+
display: none;
36+
}
37+
}
38+
39+
// Mirror rough designs for "greyed out" text
40+
&.mx_EventTile_contextual {
41+
opacity: 0.7;
42+
}
43+
}
44+
}
45+
2546
.mx_EventTile[data-layout=bubble] {
2647
position: relative;
2748
margin-top: var(--gutterSize);

src/components/views/rooms/EventTile.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1320,7 +1320,9 @@ export default class EventTile extends React.Component<IProps, IState> {
13201320
isQuoteExpanded={isQuoteExpanded}
13211321
setQuoteExpanded={this.setQuoteExpanded}
13221322
/>) : null;
1323-
const isOwnEvent = this.props.mxEvent?.sender?.userId === MatrixClientPeg.get().getUserId();
1323+
1324+
// Use `getSender()` because searched events might not have a proper `sender`.
1325+
const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.get().getUserId();
13241326

13251327
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
13261328
return (

0 commit comments

Comments
 (0)