diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 9c6ffb857f9..70ee16b542a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -161,7 +161,7 @@ interface IRoomProps { // This defines the content of the mainSplit. // If the mainSplit does not contain the Timeline, the chat is shown in the right panel. -enum MainSplitContentType { +export enum MainSplitContentType { Timeline, MaximisedWidget, Call, diff --git a/src/components/views/right_panel/ExtensionsCard.tsx b/src/components/views/right_panel/ExtensionsCard.tsx index 22ea8bad99f..3fa0fe960db 100644 --- a/src/components/views/right_panel/ExtensionsCard.tsx +++ b/src/components/views/right_panel/ExtensionsCard.tsx @@ -205,7 +205,14 @@ const ExtensionsCard: React.FC = ({ room, onClose }) => { } return ( - + {body} ); diff --git a/src/components/views/right_panel/RightPanelTabs.tsx b/src/components/views/right_panel/RightPanelTabs.tsx index 300856e28fd..2df2bcb8d17 100644 --- a/src/components/views/right_panel/RightPanelTabs.tsx +++ b/src/components/views/right_panel/RightPanelTabs.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useRef } from "react"; +import React, { useContext, useRef } from "react"; import { NavBar, NavItem } from "@vector-im/compound-web"; import { Room } from "matrix-js-sdk/src/matrix"; @@ -29,6 +29,8 @@ import SettingsStore from "../../../settings/SettingsStore"; import { UIComponent, UIFeature } from "../../../settings/UIFeature"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { useIsVideoRoom } from "../../../utils/video-rooms"; +import RoomContext from "../../../contexts/RoomContext"; +import { MainSplitContentType } from "../../structures/RoomView"; function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean { const tabs = [ @@ -36,6 +38,7 @@ function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean { RightPanelPhases.RoomMemberList, RightPanelPhases.ThreadPanel, RightPanelPhases.Extensions, + RightPanelPhases.Timeline, ]; return !!phase && tabs.includes(phase); } @@ -47,6 +50,7 @@ type Props = { export const RightPanelTabs: React.FC = ({ phase, room }): JSX.Element | null => { const threadsTabRef = useRef(null); + const roomContext = useContext(RoomContext); useDispatcher(dispatcher, (payload) => { // This actually focuses the threads tab, as its the only interactive element, @@ -57,6 +61,10 @@ export const RightPanelTabs: React.FC = ({ phase, room }): JSX.Element | }); const isVideoRoom = useIsVideoRoom(room); + const showChatTab = + isVideoRoom || + roomContext.mainSplitContentType === MainSplitContentType.MaximisedWidget || + roomContext.mainSplitContentType === MainSplitContentType.Call; if (!shouldShowTabsForPhase(phase)) return null; @@ -72,6 +80,18 @@ export const RightPanelTabs: React.FC = ({ phase, room }): JSX.Element | > {_t("right_panel|info")} + {showChatTab && ( + { + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Timeline }, true); + }} + active={phase === RightPanelPhases.Timeline} + > + {_t("right_panel|video_room_chat|title")} + + )} = ({ phase, room }): JSX.Element | !isVideoRoom && shouldShowComponent(UIComponent.AddIntegrations) && ( { RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true); diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index 97f5aabc320..22926a1e8a7 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -35,7 +35,6 @@ import { E2EStatus } from "../../../utils/ShieldUtils"; import EditorStateTransfer from "../../../utils/EditorStateTransfer"; import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext"; import dis from "../../../dispatcher/dispatcher"; -import { _t } from "../../../languageHandler"; import { ActionPayload } from "../../../dispatcher/payloads"; import { Action } from "../../../dispatcher/actions"; import ContentMessages from "../../../ContentMessages"; @@ -44,7 +43,6 @@ import SettingsStore from "../../../settings/SettingsStore"; import JumpToBottomButton from "../rooms/JumpToBottomButton"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import Measured from "../elements/Measured"; -import Heading from "../typography/Heading"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { SdkContextClass } from "../../../contexts/SDKContext"; @@ -193,16 +191,6 @@ export default class TimelineCard extends React.Component { } }; - private renderTimelineCardHeader = (): JSX.Element => { - return ( -
- - {_t("right_panel|video_room_chat|title")} - -
- ); - }; - public render(): React.ReactNode { const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : undefined; @@ -232,10 +220,11 @@ export default class TimelineCard extends React.Component { > {this.card.current && }