Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Iterate on search results for message bubbles #7047

Merged
merged 3 commits into from
May 13, 2022
Merged

Iterate on search results for message bubbles #7047

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7170ec1
PSFD-455: Iterate on search results for message bubbles
turt2live Oct 28, 2021
bd608a2
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy May 13, 2022
ad2fe08
Tweak opacity
t3chguy May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 3 additions & 1 deletion src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1320,7 +1320,9 @@ export default class EventTile extends React.Component<IProps, IState> {
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 (
Expand Down