From 8348add67fb647e54d2dfb1218f2367176076f66 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 24 Sep 2021 14:19:11 +0100 Subject: [PATCH 1/3] Add MessageActionBar to ThreadView --- src/components/structures/ThreadView.tsx | 2 +- .../views/messages/MessageActionBar.tsx | 7 +++- src/components/views/rooms/EventTile.tsx | 37 +++++++++++++++++++ 3 files changed, 44 insertions(+), 2 deletions(-) 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, From 160bf8e21f1737a369e5a91f46dbc31ea358c4e3 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 28 Sep 2021 11:06:06 +0100 Subject: [PATCH 2/3] Fix missing prop --- res/img/element-icons/message/view-in-timeline.svg | 1 + src/components/views/messages/MessageActionBar.tsx | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 res/img/element-icons/message/view-in-timeline.svg diff --git a/res/img/element-icons/message/view-in-timeline.svg b/res/img/element-icons/message/view-in-timeline.svg new file mode 100644 index 0000000000..9f05950ce0 --- /dev/null +++ b/res/img/element-icons/message/view-in-timeline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 3be24d47ab..d3d4d5a693 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -135,11 +135,10 @@ interface IMessageActionBarProps { getTile: () => any | null; getReplyThread: () => ReplyThread | undefined; permalinkCreator?: RoomPermalinkCreator; - getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here - getReplyThread?: () => ReplyThread; onFocusChange?: (menuDisplayed: boolean) => void; toggleThreadExpanded: () => void; isInThreadTimeline?: boolean; + isQuoteExpanded?: boolean; } @replaceableComponent("views.messages.MessageActionBar") From c1165830edff18015caf808c28f020c36eaf7d73 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 28 Sep 2021 14:55:00 +0100 Subject: [PATCH 3/3] Create rendering context enum for MessageActionBar --- src/components/views/messages/MessageActionBar.tsx | 11 ++++++++--- src/components/views/rooms/EventTile.tsx | 9 ++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index d3d4d5a693..06817b910a 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -128,6 +128,11 @@ const ReactButton: React.FC = ({ mxEvent, reactions, onFocusC ; }; +export enum ActionBarRenderingContext { + Room, + Thread +} + interface IMessageActionBarProps { mxEvent: MatrixEvent; reactions?: Relations; @@ -137,7 +142,7 @@ interface IMessageActionBarProps { permalinkCreator?: RoomPermalinkCreator; onFocusChange?: (menuDisplayed: boolean) => void; toggleThreadExpanded: () => void; - isInThreadTimeline?: boolean; + renderingContext?: ActionBarRenderingContext; isQuoteExpanded?: boolean; } @@ -146,7 +151,7 @@ export default class MessageActionBar extends React.PureComponent { } } - const isInThreadTimeline = this.props.tileShape === TileShape.Thread; + const renderingContext = this.props.tileShape === TileShape.Thread + ? ActionBarRenderingContext.Thread + : ActionBarRenderingContext.Room; const actionBar = !isEditing ? { getTile={this.getTile} getReplyThread={this.getReplyThread} onFocusChange={this.onActionBarFocusChange} - isInThreadTimeline={isInThreadTimeline} + renderingContext={renderingContext} + isQuoteExpanded={isQuoteExpanded} toggleThreadExpanded={() => this.setQuoteExpanded(!isQuoteExpanded)} /> : undefined;