diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index bb31c32877..180a870cd5 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -139,7 +139,7 @@ export default class ThreadView extends React.Component { sendReadReceiptOnLoad={false} // No RR support in thread's MVP timelineSet={this.state?.thread?.timelineSet} showUrlPreview={true} - tileShape={TileShape.Notif} + tileShape={TileShape.Thread} empty={
empty
} alwaysShowTimestamps={true} layout={Layout.Group} diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index f76fa32ddc..f7c58e27dc 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -133,12 +133,17 @@ interface IMessageActionBarProps { getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here getReplyThread?: () => ReplyThread; onFocusChange?: (menuDisplayed: boolean) => void; + isInThreadTimeline?: boolean; } @replaceableComponent("views.messages.MessageActionBar") export default class MessageActionBar extends React.PureComponent { public static contextType = RoomContext; + public static defaultProps = { + isInThreadTimeline: false, + }; + public componentDidMount(): void { if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) { this.props.mxEvent.on("Event.status", this.onSent); @@ -283,7 +288,7 @@ export default class MessageActionBar extends React.PureComponent { } } + const isInThreadTimeline = this.props.tileShape === TileShape.Thread; const actionBar = !isEditing ? { getTile={this.getTile} getReplyThread={this.getReplyThread} onFocusChange={this.onActionBarFocusChange} + isInThreadTimeline={isInThreadTimeline} /> : undefined; const showTimestamp = this.props.mxEvent.getTs() @@ -1160,6 +1163,40 @@ export default class EventTile extends React.Component { , ]); } + case TileShape.Thread: { + const room = this.context.getRoom(this.props.mxEvent.getRoomId()); + return React.createElement(this.props.as || "li", { + "className": classes, + "aria-live": ariaLive, + "aria-atomic": true, + "data-scroll-tokens": scrollToken, + }, [ + , + , +
+ + { actionBar } +
, + ]); + } case TileShape.FileGrid: { return React.createElement(this.props.as || "li", { "className": classes,