diff --git a/playwright/e2e/crypto/crypto.spec.ts b/playwright/e2e/crypto/crypto.spec.ts index 427df8098a..f3a4820ebe 100644 --- a/playwright/e2e/crypto/crypto.spec.ts +++ b/playwright/e2e/crypto/crypto.spec.ts @@ -220,7 +220,7 @@ test.describe("Cryptography", function () { // Assert that verified icon is rendered await page.getByTestId("base-card-back-button").click(); - await page.locator(".mx_RightPanelTabs").getByText("Info").click(); + await page.getByLabel("Room info").nth(1).click(); await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted"); // Take a snapshot of RoomSummaryCard with a verified E2EE icon diff --git a/playwright/e2e/crypto/dehydration.spec.ts b/playwright/e2e/crypto/dehydration.spec.ts index 1161902d05..590ab774b5 100644 --- a/playwright/e2e/crypto/dehydration.spec.ts +++ b/playwright/e2e/crypto/dehydration.spec.ts @@ -94,7 +94,7 @@ test.describe("Dehydration", () => { await viewRoomSummaryByName(page, app, ROOM_NAME); - await page.locator(".mx_RightPanelTabs").getByText("People").click(); + await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click(); await expect(page.locator(".mx_MemberList")).toBeVisible(); await getMemberTileByName(page, NAME).click(); diff --git a/playwright/e2e/crypto/utils.ts b/playwright/e2e/crypto/utils.ts index c198633733..31cf69b0df 100644 --- a/playwright/e2e/crypto/utils.ts +++ b/playwright/e2e/crypto/utils.ts @@ -345,7 +345,7 @@ export const verify = async (app: ElementAppPage, bob: Bot) => { const bobsVerificationRequestPromise = waitForVerificationRequest(bob); const roomInfo = await app.toggleRoomInfoPanel(); - await page.locator(".mx_RightPanelTabs").getByText("People").click(); + await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click(); await roomInfo.getByText("Bob").click(); await roomInfo.getByRole("button", { name: "Verify" }).click(); await roomInfo.getByRole("button", { name: "Start Verification" }).click(); diff --git a/playwright/e2e/integration-manager/utils.ts b/playwright/e2e/integration-manager/utils.ts index 289085f113..a6a11473e3 100644 --- a/playwright/e2e/integration-manager/utils.ts +++ b/playwright/e2e/integration-manager/utils.ts @@ -11,6 +11,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage"; export async function openIntegrationManager(app: ElementAppPage) { const { page } = app; await app.toggleRoomInfoPanel(); - await page.getByRole("tab", { name: "Extensions" }).click(); + await page.getByRole("menuitem", { name: "Extensions" }).click(); await page.getByRole("button", { name: "Add extensions" }).click(); } diff --git a/playwright/e2e/lazy-loading/lazy-loading.spec.ts b/playwright/e2e/lazy-loading/lazy-loading.spec.ts index 0d15e03e9f..c931bcfb1f 100644 --- a/playwright/e2e/lazy-loading/lazy-loading.spec.ts +++ b/playwright/e2e/lazy-loading/lazy-loading.spec.ts @@ -73,7 +73,7 @@ test.describe("Lazy Loading", () => { async function openMemberlist(app: ElementAppPage): Promise { await app.toggleRoomInfoPanel(); const { page } = app; - await page.locator(".mx_RightPanelTabs").getByText("People").click(); + await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click(); } function getMemberInMemberlist(page: Page, name: string): Locator { diff --git a/playwright/e2e/read-receipts/index.ts b/playwright/e2e/read-receipts/index.ts index f097ec839d..2db4bcbecf 100644 --- a/playwright/e2e/read-receipts/index.ts +++ b/playwright/e2e/read-receipts/index.ts @@ -394,10 +394,7 @@ class Helpers { * Close the threads panel. */ async closeThreadsPanel() { - await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click(); - if (await this.page.locator("#thread-panel").isVisible()) { - await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click(); - } + await this.page.locator(".mx_RightPanel").getByTestId("base-card-close-button").click(); await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible(); } diff --git a/playwright/e2e/right-panel/right-panel.spec.ts b/playwright/e2e/right-panel/right-panel.spec.ts index ba610532cb..110f24a501 100644 --- a/playwright/e2e/right-panel/right-panel.spec.ts +++ b/playwright/e2e/right-panel/right-panel.spec.ts @@ -65,7 +65,7 @@ test.describe("RightPanel", () => { test("should handle clicking add widgets", async ({ page, app }) => { await viewRoomSummaryByName(page, app, ROOM_NAME); - await page.getByRole("tab", { name: "Extensions" }).click(); + await page.getByRole("menuitem", { name: "Extensions" }).click(); await page.getByRole("button", { name: "Add extensions" }).click(); await expect(page.locator(".mx_IntegrationManager")).toBeVisible(); }); @@ -106,7 +106,7 @@ test.describe("RightPanel", () => { test("should handle viewing room member", async ({ page, app }) => { await viewRoomSummaryByName(page, app, ROOM_NAME); - await page.locator(".mx_RightPanelTabs").getByText("People").click(); + await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click(); await expect(page.locator(".mx_MemberList")).toBeVisible(); await getMemberTileByName(page, NAME).click(); @@ -116,7 +116,7 @@ test.describe("RightPanel", () => { await page.getByTestId("base-card-back-button").click(); await expect(page.locator(".mx_MemberList")).toBeVisible(); - await page.locator(".mx_RightPanelTabs").getByText("Info").click(); + await page.getByLabel("Room info").nth(1).click(); await checkRoomSummaryCard(page, ROOM_NAME); }); }); diff --git a/playwright/e2e/spaces/threads-activity-centre/index.ts b/playwright/e2e/spaces/threads-activity-centre/index.ts index 9c965faf19..bf05fc34c1 100644 --- a/playwright/e2e/spaces/threads-activity-centre/index.ts +++ b/playwright/e2e/spaces/threads-activity-centre/index.ts @@ -328,13 +328,6 @@ export class Helpers { return expect(this.page.locator(".mx_ThreadPanel")).toBeVisible(); } - /** - * Assert that the thread tab is focused - */ - assertThreadTabFocused() { - return expect(this.page.locator("#thread-panel-tab")).toBeFocused(); - } - /** * Populate the rooms with messages and threads * @param room1 diff --git a/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts b/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts index 20e4db8071..fc66c13520 100644 --- a/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts +++ b/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts @@ -157,6 +157,6 @@ test.describe("Threads Activity Centre", () => { await util.openTac(); await util.clickRoomInTac(room1.name); - await util.assertThreadTabFocused(); + await util.assertThreadPanelIsOpened(); }); }); diff --git a/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png index d6b7951868..a8813b601d 100644 Binary files a/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png and b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-empty-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-empty-linux.png index 28099d338c..38285305f6 100644 Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-empty-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-empty-linux.png differ diff --git a/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png index fdbec37b70..178acd1828 100644 Binary files a/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png and b/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png differ diff --git a/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png b/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png index cc1ea27dfc..b80b57fe4b 100644 Binary files a/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png and b/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png differ diff --git a/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png b/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png index cd44d98fa1..68f31135c5 100644 Binary files a/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png and b/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png differ diff --git a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png index 2cedb4d1f5..6e4df5c776 100644 Binary files a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ diff --git a/res/css/_components.pcss b/res/css/_components.pcss index a0241fb8b5..78e0524da6 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -265,7 +265,6 @@ @import "./views/right_panel/_EncryptionInfo.pcss"; @import "./views/right_panel/_ExtensionsCard.pcss"; @import "./views/right_panel/_PinnedMessagesCard.pcss"; -@import "./views/right_panel/_RightPanelTabs.pcss"; @import "./views/right_panel/_RoomSummaryCard.pcss"; @import "./views/right_panel/_ThreadPanel.pcss"; @import "./views/right_panel/_TimelineCard.pcss"; diff --git a/res/css/views/right_panel/_ExtensionsCard.pcss b/res/css/views/right_panel/_ExtensionsCard.pcss index f731ab4b2d..e559027366 100644 --- a/res/css/views/right_panel/_ExtensionsCard.pcss +++ b/res/css/views/right_panel/_ExtensionsCard.pcss @@ -10,19 +10,15 @@ Please see LICENSE files in the repository root for full details. --cpd-separator-inset: var(--cpd-space-4x); --cpd-separator-spacing: var(--cpd-space-4x); - .mx_BaseCard_header { - /* Hide the line between the header and the body of the card */ - border-block-end: none; - - /* Styling for the "Add extensions" button */ - button { - width: 100%; - } - } - .mx_AutoHideScrollbar { padding: 0 var(--cpd-space-4x); + margin-top: var(--cpd-space-3x); box-sizing: border-box; + + /* Styling for the "Add extensions" button */ + & > button { + width: 100%; + } } .mx_ExtensionsCard_container { diff --git a/res/css/views/right_panel/_RightPanelTabs.pcss b/res/css/views/right_panel/_RightPanelTabs.pcss deleted file mode 100644 index 24824d3fe0..0000000000 --- a/res/css/views/right_panel/_RightPanelTabs.pcss +++ /dev/null @@ -1,17 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2024 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only -Please see LICENSE files in the repository root for full details. -*/ - -.mx_RightPanelTabs { - margin: 0; - height: 64px; - box-sizing: border-box; - - ul { - margin-left: 16px; - } -} diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index 6648adc857..8dcbfe2e0a 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -88,10 +88,6 @@ Please see LICENSE files in the repository root for full details. margin: var(--cpd-space-4x) 0; } -.mx_RoomSummaryCard_header { - padding: 24px 12px 15px; -} - .mx_RoomSummaryCard_search { flex-grow: 1; min-width: 0; diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss index dd3d385bd0..e3fe819ab6 100644 --- a/res/css/views/rooms/_MemberList.pcss +++ b/res/css/views/rooms/_MemberList.pcss @@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: column; min-height: 0; - margin-top: 24px; .mx_Spinner { flex: 1 0 auto; @@ -34,6 +33,7 @@ Please see LICENSE files in the repository root for full details. .mx_AutoHideScrollbar { flex: 1 1 0; + margin-top: var(--cpd-space-3x); } } diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index bf596b17b1..74a91d8cbc 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -223,7 +223,11 @@ class FilePanel extends React.Component { public render(): React.ReactNode { if (MatrixClientPeg.safeGet().isGuest()) { return ( - +
{_t( "file_panel|guest_note", @@ -241,7 +245,11 @@ class FilePanel extends React.Component { ); } else if (this.noRoom) { return ( - +
{_t("file_panel|peek_note")}
 ); @@ -273,6 +281,7 @@ class FilePanel extends React.Component { onClose={this.props.onClose} withoutScrollContainer ref={this.card} + header={_t("right_panel|files_button")} > {this.card.current && ( @@ -299,7 +308,11 @@ class FilePanel extends React.Component { timelineRenderingType: TimelineRenderingType.File, }} > - + diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx index a569a06385..edec675b14 100644 --- a/src/components/structures/NotificationPanel.tsx +++ b/src/components/structures/NotificationPanel.tsx @@ -18,7 +18,6 @@ import Spinner from "../views/elements/Spinner"; import { Layout } from "../../settings/enums/Layout"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import Measured from "../views/elements/Measured"; -import Heading from "../views/typography/Heading"; import EmptyState from "../views/right_panel/EmptyState"; interface IProps { @@ -88,13 +87,7 @@ export default class NotificationPanel extends React.PureComponent - - {_t("notifications|enable_prompt_toast_title")} - -
- } + header={_t("notifications|enable_prompt_toast_title")} /** * Need to rename this CSS class to something more generic * Will be done once all the panels are using a similar layout diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index d4014f6aa0..9a9f29f82e 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -33,7 +33,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore"; import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState"; import { Action } from "../../dispatcher/actions"; import { XOR } from "../../@types/common"; -import { RightPanelTabs } from "../views/right_panel/RightPanelTabs"; import ExtensionsCard from "../views/right_panel/ExtensionsCard"; interface BaseProps { @@ -164,7 +163,6 @@ export default class RightPanel extends React.Component { { return ( ); diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 4206b4f7f7..b45401dd4c 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -193,7 +193,6 @@ const ThreadPanel: React.FC = ({ roomId, onClose, permalinkCreator }) => }} > } diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index cfc49a8236..99cf5cdbf3 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -38,6 +38,12 @@ interface IProps { children: ReactNode; } +function closeRightPanel(ev: MouseEvent): void { + ev.preventDefault(); + ev.stopPropagation(); + RightPanelStore.instance.popCard(); +} + const BaseCard: React.FC = forwardRef( ( { @@ -81,12 +87,12 @@ const BaseCard: React.FC = forwardRef( } let closeButton; - if (onClose && !hideHeaderButtons) { + if (!hideHeaderButtons) { closeButton = ( = forwardRef(
{backButton} {typeof header === "string" ? ( - - {header} - +
+ + {header} + +
) : ( (header ??
) )} diff --git a/src/components/views/right_panel/ExtensionsCard.tsx b/src/components/views/right_panel/ExtensionsCard.tsx index a3dc8bef44..83c44b0c2d 100644 --- a/src/components/views/right_panel/ExtensionsCard.tsx +++ b/src/components/views/right_panel/ExtensionsCard.tsx @@ -157,13 +157,6 @@ const ExtensionsCard: React.FC = ({ room, onClose }) => { } }; - // The button is in the header to keep it outside the scrollable region - const header = ( - - ); - let body: JSX.Element; if (realApps.length < 1) { body = ( @@ -197,7 +190,10 @@ const ExtensionsCard: React.FC = ({ room, onClose }) => { } return ( - + + {body} ); diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index e559793ced..af7106f9c5 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -20,7 +20,6 @@ import { PinnedEventTile } from "../rooms/PinnedEventTile"; import { useRoomState } from "../../../hooks/useRoomState"; import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext"; import { ReadPinsEventId } from "./types"; -import Heading from "../typography/Heading"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { filterBoolean } from "../../../utils/arrays"; import Modal from "../../../Modal"; @@ -86,13 +85,7 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe return ( - - {_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })} - -
- } + header={_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })} className="mx_PinnedMessagesCard" onClose={onClose} > diff --git a/src/components/views/right_panel/RightPanelTabs.tsx b/src/components/views/right_panel/RightPanelTabs.tsx deleted file mode 100644 index 4873f707b2..0000000000 --- a/src/components/views/right_panel/RightPanelTabs.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2024 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only -Please see LICENSE files in the repository root for full details. -*/ - -import React, { useRef } from "react"; -import { NavBar, NavItem } from "@vector-im/compound-web"; -import { Room } from "matrix-js-sdk/src/matrix"; - -import { _t } from "../../../languageHandler"; -import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; -import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; -import PosthogTrackers from "../../../PosthogTrackers"; -import { useDispatcher } from "../../../hooks/useDispatcher"; -import dispatcher from "../../../dispatcher/dispatcher"; -import { Action } from "../../../dispatcher/actions"; -import SettingsStore from "../../../settings/SettingsStore"; -import { UIComponent, UIFeature } from "../../../settings/UIFeature"; -import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; -import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms"; - -function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean { - const tabs = [ - RightPanelPhases.RoomSummary, - RightPanelPhases.RoomMemberList, - RightPanelPhases.ThreadPanel, - RightPanelPhases.Extensions, - ]; - return !!phase && tabs.includes(phase); -} - -type Props = { - room?: Room; - phase: RightPanelPhases; -}; - -export const RightPanelTabs: React.FC = ({ phase, room }): JSX.Element | null => { - const threadsTabRef = useRef(null); - - useDispatcher(dispatcher, (payload) => { - // This actually focuses the threads tab, as its the only interactive element, - // but at least it puts the user in the right area of the app. - if (payload.action === Action.FocusThreadsPanel) { - threadsTabRef.current?.focus(); - } - }); - - const isVideoRoom = room !== undefined && calcIsVideoRoom(room); - - if (!shouldShowTabsForPhase(phase)) return null; - - return ( - - { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomSummary }, true); - }} - active={phase === RightPanelPhases.RoomSummary} - > - {_t("right_panel|info")} - - ) => { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true); - PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev); - }} - active={phase === RightPanelPhases.RoomMemberList} - > - {_t("common|people")} - - { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true); - }} - active={phase === RightPanelPhases.ThreadPanel} - ref={threadsTabRef} - > - {_t("common|threads")} - - {SettingsStore.getValue(UIFeature.Widgets) && - !isVideoRoom && - shouldShowComponent(UIComponent.AddIntegrations) && ( - { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true); - }} - active={phase === RightPanelPhases.Extensions} - > - {_t("common|extensions")} - - )} - - ); -}; diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index e67d38a2ed..d1c3d2df72 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -27,6 +27,9 @@ import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/set import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg"; import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave"; import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files"; +import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions"; +import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile"; +import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads"; import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls"; import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg"; @@ -82,10 +85,22 @@ interface IProps { focusRoomSearch?: boolean; } +const onRoomMembersClick = (): void => { + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true); +}; + +const onRoomThreadsClick = (): void => { + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true); +}; + const onRoomFilesClick = (): void => { RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, true); }; +const onRoomExtensionsClick = (): void => { + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true); +}; + const onRoomPinsClick = (): void => { PosthogTrackers.trackInteraction("PinnedMessageRoomInfoButton"); RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true); @@ -254,7 +269,7 @@ const RoomSummaryCard: React.FC = ({ ); const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || ""; - const header = ( + const roomInfo = (
@@ -322,42 +337,34 @@ const RoomSummaryCard: React.FC = ({ const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room)); const isFavorite = roomTags.includes(DefaultTagID.Favourite); + const header = onSearchChange && ( + e.preventDefault()}> + { + if (searchInputRef.current && e.key === Key.ESCAPE) { + searchInputRef.current.value = ""; + onSearchCancel?.(); + } + }} + /> + + ); + return ( - - {onSearchChange && ( - e.preventDefault()}> - { - if (searchInputRef.current && e.key === Key.ESCAPE) { - searchInputRef.current.value = ""; - onSearchCancel?.(); - } - }} - /> - - )} - - - {header} + {roomInfo} @@ -379,6 +386,8 @@ const RoomSummaryCard: React.FC = ({ + + {!isVideoRoom && ( <> = ({
+ )} diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index 77778ffdde..4f9d1dd917 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -36,7 +36,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"; @@ -185,16 +184,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; @@ -226,7 +215,7 @@ export default class TimelineCard extends React.Component { className={this.props.classNames} onClose={this.props.onClose} withoutScrollContainer={true} - header={this.renderTimelineCardHeader()} + header={_t("right_panel|video_room_chat|title")} ref={this.card} > {this.card.current && } diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 4dfe812619..64028ee77c 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -55,7 +55,6 @@ const SHOW_MORE_INCREMENT = 100; interface IProps { roomId: string; searchQuery: string; - hideHeaderButtons?: boolean; onClose(): void; onSearchQueryChanged: (query: string) => void; } @@ -355,7 +354,7 @@ export default class MemberList extends React.Component { className="mx_MemberList" ariaLabelledBy="memberlist-panel-tab" role="tabpanel" - hideHeaderButtons={this.props.hideHeaderButtons} + header={_t("common|people")} onClose={this.props.onClose} > @@ -420,7 +419,7 @@ export default class MemberList extends React.Component { className="mx_MemberList" ariaLabelledBy="memberlist-panel-tab" role="tabpanel" - hideHeaderButtons={this.props.hideHeaderButtons} + header={_t("common|people")} footer={footer} onClose={this.props.onClose} > diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx index f39fa723ba..df008199cd 100644 --- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx +++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx @@ -125,7 +125,7 @@ export default class ThirdPartyMemberInfo extends React.Component + {/* same as userinfo name style */} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index dc7bf30bbd..8653b0ec4e 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -477,7 +477,6 @@ "encrypted": "Encrypted", "encryption_enabled": "Encryption enabled", "error": "Error", - "extensions": "Extensions", "faq": "FAQ", "favourites": "Favourites", "feedback": "Feedback", @@ -1832,17 +1831,17 @@ "right_panel": { "add_integrations": "Add extensions", "add_topic": "Add topic", + "extensions_button": "Extensions", "extensions_empty_description": "Select “%(addIntegrations)s” to browse and add extensions to this room", "extensions_empty_title": "Boost productivity with more tools, widgets and bots", "files_button": "Files", - "info": "Info", "pinned_messages": { "empty_description": "Select a message and choose “%(pinAction)s” to it include here.", "empty_title": "Pin important messages so that they can be easily discovered", "header": { "one": "1 Pinned message", "other": "%(count)s Pinned messages", - "zero": "Pinned message" + "zero": "Pinned messages" }, "limits": { "other": "You can only pin up to %(count)s widgets" diff --git a/test/components/structures/__snapshots__/FilePanel-test.tsx.snap b/test/components/structures/__snapshots__/FilePanel-test.tsx.snap index 746cf477a3..d848b24074 100644 --- a/test/components/structures/__snapshots__/FilePanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/FilePanel-test.tsx.snap @@ -9,8 +9,15 @@ exports[`FilePanel renders empty state 1`] = ` class="mx_BaseCard_header" >
+ class="mx_BaseCard_header_title" + > +

+ Files +

+
+ +
+
+ Content +
+
+ + +`; diff --git a/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap index 2cff7803ac..0cbda3ab64 100644 --- a/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap @@ -7,6 +7,45 @@ exports[` should render empty state 1`] = ` >
+
+

+ Extensions +

+
+ +
+
-
-
should render widgets 1`] = ` >
+
+

+ Extensions +

+
+ +
+
-
-
should show the empty state when there are no pi
-

- Pinned message -

+ Pinned messages +

- - - - - - -
-`; - -exports[` Correct tab is active 1`] = ` -
- -
-`; diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 8300f4920d..7c9a73fe15 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -8,14 +8,41 @@ exports[` has button to edit topic 1`] = ` id="room-summary-panel" role="tabpanel" > +
+
+ +
-
@@ -186,6 +213,89 @@ exports[` has button to edit topic 1`] = ` data-orientation="horizontal" role="separator" /> + +