imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix search results view for layouts other than Group/Modern (#7648)

Browse source
This commit is contained in:
Michael Telatynski 2022-01-26 20:15:44 +00:00 • committed by GitHub
parent 31e6b942f2
commit 50f8c61fa8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/views/rooms/EventTile.tsx
View file

@ -55,7 +55,7 @@ import MemberAvatar from '../avatars/MemberAvatar';
import SenderProfile from '../messages/SenderProfile';
import MessageTimestamp from '../messages/MessageTimestamp';
import TooltipButton from '../elements/TooltipButton';
import ReadReceiptMarker from "./ReadReceiptMarker";
import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
import MessageActionBar from "../messages/MessageActionBar";
import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
@ -262,8 +262,7 @@ interface IProps {
// opaque readreceipt info for each userId; used by ReadReceiptMarker
// to manage its animations. Should be an empty object when the room
// first loads
// TODO: Proper typing for RR info
readReceiptMap?: any;
readReceiptMap?: { [userId: string]: IReadReceiptInfo };
// A function which is used to check if the parent panel is being
// unmounted, to avoid unnecessary work. Should return true if we
@ -929,7 +928,7 @@ export default class EventTile extends React.Component<IProps, IState> {
left = (hidden ? MAX_READ_AVATARS - 1 : i) * -receiptOffset;
const userId = receipt.userId;
let readReceiptInfo;
let readReceiptInfo: IReadReceiptInfo;
if (this.props.readReceiptMap) {
readReceiptInfo = this.props.readReceiptMap[userId];

12
src/components/views/rooms/ReadReceiptMarker.tsx
View file

@ -26,6 +26,12 @@ import { toPx } from "../../../utils/units";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import MemberAvatar from '../avatars/MemberAvatar';
export interface IReadReceiptInfo {
top?: number;
left?: number;
parent?: Element;
}
interface IProps {
// the RoomMember to show the RR for
member?: RoomMember;
@ -43,10 +49,8 @@ interface IProps {
// don't animate this RR into position
suppressAnimation?: boolean;
// an opaque object for storing information about this user's RR in
// this room
// TODO: proper typing for RR info
readReceiptInfo: any;
// an opaque object for storing information about this user's RR in this room
readReceiptInfo: IReadReceiptInfo;
// A function which is used to check if the parent panel is being
// unmounted, to avoid unnecessary work. Should return true if we

49
src/components/views/rooms/SearchResultTile.tsx
View file

@ -25,6 +25,8 @@ import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import DateSeparator from "../messages/DateSeparator";
import EventTile, { haveTileForEvent } from "./EventTile";
import { shouldFormContinuation } from "../../structures/MessagePanel";
import { wantsDateSeparator } from "../../../DateUtils";
interface IProps {
// a matrix-js-sdk SearchResult containing the details of this result
@ -43,10 +45,10 @@ export default class SearchResultTile extends React.Component<IProps> {
public render() {
const result = this.props.searchResult;
const mxEv = result.context.getEvent();
const eventId = mxEv.getId();
const resultEvent = result.context.getEvent();
const eventId = resultEvent.getId();
const ts1 = mxEv.getTs();
const ts1 = resultEvent.getTs();
const ret = [<DateSeparator key={ts1 + "-search"} ts={ts1} />];
const layout = SettingsStore.getValue("layout");
const isTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
@ -55,17 +57,46 @@ export default class SearchResultTile extends React.Component<IProps> {
const timeline = result.context.getTimeline();
for (let j = 0; j < timeline.length; j++) {
const ev = timeline[j];
const mxEv = timeline[j];
let highlights;
const contextual = (j != result.context.getOurEventIndex());
if (!contextual) {
highlights = this.props.searchHighlights;
}
if (haveTileForEvent(ev, this.context?.showHiddenEventsInTimeline)) {
if (haveTileForEvent(mxEv, this.context?.showHiddenEventsInTimeline)) {
// do we need a date separator since the last event?
const prevEv = timeline[j - 1];
// is this a continuation of the previous message?
const continuation = prevEv &&
!wantsDateSeparator(prevEv.getDate(), mxEv.getDate()) &&
shouldFormContinuation(
prevEv,
mxEv,
this.context?.showHiddenEventsInTimeline,
TimelineRenderingType.Search,
);
let lastInSection = true;
const nextEv = timeline[j + 1];
if (nextEv) {
const willWantDateSeparator = wantsDateSeparator(mxEv.getDate(), nextEv.getDate());
lastInSection = (
willWantDateSeparator ||
mxEv.getSender() !== nextEv.getSender() ||
!shouldFormContinuation(
mxEv,
nextEv,
this.context?.showHiddenEventsInTimeline,
TimelineRenderingType.Search,
)
);
}
ret.push(
<EventTile
key={`${eventId}+${j}`}
mxEvent={ev}
mxEvent={mxEv}
layout={layout}
contextual={contextual}
highlights={highlights}
@ -76,11 +107,15 @@ export default class SearchResultTile extends React.Component<IProps> {
alwaysShowTimestamps={alwaysShowTimestamps}
enableFlair={enableFlair}
timelineRenderingType={TimelineRenderingType.Search}
lastInSection={lastInSection}
continuation={continuation}
/>,
);
}
}
return <li data-scroll-tokens={eventId}>{ ret }</li>;
return <li data-scroll-tokens={eventId}>
<ol>{ ret }</ol>
</li>;
}
}