Ditch right panel tabs and re-add close button (#99)

* Add extra buttons to room summary card

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove right panel tabs in favour of X button on each panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update room summary card header to align close button correctly

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix typo in pinned messages heading

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix base card title colours

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-03 09:59:41 +01:00 committed by GitHub
parent 67cb8b7590
commit 2dbaf00e71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
44 changed files with 865 additions and 500 deletions

View file

@ -220,7 +220,7 @@ test.describe("Cryptography", function () {
// Assert that verified icon is rendered // Assert that verified icon is rendered
await page.getByTestId("base-card-back-button").click(); 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"); await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
// Take a snapshot of RoomSummaryCard with a verified E2EE icon // Take a snapshot of RoomSummaryCard with a verified E2EE icon

View file

@ -94,7 +94,7 @@ test.describe("Dehydration", () => {
await viewRoomSummaryByName(page, app, ROOM_NAME); 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 expect(page.locator(".mx_MemberList")).toBeVisible();
await getMemberTileByName(page, NAME).click(); await getMemberTileByName(page, NAME).click();

View file

@ -345,7 +345,7 @@ export const verify = async (app: ElementAppPage, bob: Bot) => {
const bobsVerificationRequestPromise = waitForVerificationRequest(bob); const bobsVerificationRequestPromise = waitForVerificationRequest(bob);
const roomInfo = await app.toggleRoomInfoPanel(); 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.getByText("Bob").click();
await roomInfo.getByRole("button", { name: "Verify" }).click(); await roomInfo.getByRole("button", { name: "Verify" }).click();
await roomInfo.getByRole("button", { name: "Start Verification" }).click(); await roomInfo.getByRole("button", { name: "Start Verification" }).click();

View file

@ -11,6 +11,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage";
export async function openIntegrationManager(app: ElementAppPage) { export async function openIntegrationManager(app: ElementAppPage) {
const { page } = app; const { page } = app;
await app.toggleRoomInfoPanel(); 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(); await page.getByRole("button", { name: "Add extensions" }).click();
} }

View file

@ -73,7 +73,7 @@ test.describe("Lazy Loading", () => {
async function openMemberlist(app: ElementAppPage): Promise<void> { async function openMemberlist(app: ElementAppPage): Promise<void> {
await app.toggleRoomInfoPanel(); await app.toggleRoomInfoPanel();
const { page } = app; 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 { function getMemberInMemberlist(page: Page, name: string): Locator {

View file

@ -394,10 +394,7 @@ class Helpers {
* Close the threads panel. * Close the threads panel.
*/ */
async closeThreadsPanel() { async closeThreadsPanel() {
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click(); await this.page.locator(".mx_RightPanel").getByTestId("base-card-close-button").click();
if (await this.page.locator("#thread-panel").isVisible()) {
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
}
await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible(); await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
} }

View file

@ -65,7 +65,7 @@ test.describe("RightPanel", () => {
test("should handle clicking add widgets", async ({ page, app }) => { test("should handle clicking add widgets", async ({ page, app }) => {
await viewRoomSummaryByName(page, app, ROOM_NAME); 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 page.getByRole("button", { name: "Add extensions" }).click();
await expect(page.locator(".mx_IntegrationManager")).toBeVisible(); await expect(page.locator(".mx_IntegrationManager")).toBeVisible();
}); });
@ -106,7 +106,7 @@ test.describe("RightPanel", () => {
test("should handle viewing room member", async ({ page, app }) => { test("should handle viewing room member", async ({ page, app }) => {
await viewRoomSummaryByName(page, app, ROOM_NAME); 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 expect(page.locator(".mx_MemberList")).toBeVisible();
await getMemberTileByName(page, NAME).click(); await getMemberTileByName(page, NAME).click();
@ -116,7 +116,7 @@ test.describe("RightPanel", () => {
await page.getByTestId("base-card-back-button").click(); await page.getByTestId("base-card-back-button").click();
await expect(page.locator(".mx_MemberList")).toBeVisible(); 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); await checkRoomSummaryCard(page, ROOM_NAME);
}); });
}); });

View file

@ -328,13 +328,6 @@ export class Helpers {
return expect(this.page.locator(".mx_ThreadPanel")).toBeVisible(); 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 * Populate the rooms with messages and threads
* @param room1 * @param room1

View file

@ -157,6 +157,6 @@ test.describe("Threads Activity Centre", () => {
await util.openTac(); await util.openTac();
await util.clickRoomInTac(room1.name); await util.clickRoomInTac(room1.name);
await util.assertThreadTabFocused(); await util.assertThreadPanelIsOpened();
}); });
}); });

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -265,7 +265,6 @@
@import "./views/right_panel/_EncryptionInfo.pcss"; @import "./views/right_panel/_EncryptionInfo.pcss";
@import "./views/right_panel/_ExtensionsCard.pcss"; @import "./views/right_panel/_ExtensionsCard.pcss";
@import "./views/right_panel/_PinnedMessagesCard.pcss"; @import "./views/right_panel/_PinnedMessagesCard.pcss";
@import "./views/right_panel/_RightPanelTabs.pcss";
@import "./views/right_panel/_RoomSummaryCard.pcss"; @import "./views/right_panel/_RoomSummaryCard.pcss";
@import "./views/right_panel/_ThreadPanel.pcss"; @import "./views/right_panel/_ThreadPanel.pcss";
@import "./views/right_panel/_TimelineCard.pcss"; @import "./views/right_panel/_TimelineCard.pcss";

View file

@ -10,19 +10,15 @@ Please see LICENSE files in the repository root for full details.
--cpd-separator-inset: var(--cpd-space-4x); --cpd-separator-inset: var(--cpd-space-4x);
--cpd-separator-spacing: 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 { .mx_AutoHideScrollbar {
padding: 0 var(--cpd-space-4x); padding: 0 var(--cpd-space-4x);
margin-top: var(--cpd-space-3x);
box-sizing: border-box; box-sizing: border-box;
/* Styling for the "Add extensions" button */
& > button {
width: 100%;
}
} }
.mx_ExtensionsCard_container { .mx_ExtensionsCard_container {

View file

@ -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;
}
}

View file

@ -88,10 +88,6 @@ Please see LICENSE files in the repository root for full details.
margin: var(--cpd-space-4x) 0; margin: var(--cpd-space-4x) 0;
} }
.mx_RoomSummaryCard_header {
padding: 24px 12px 15px;
}
.mx_RoomSummaryCard_search { .mx_RoomSummaryCard_search {
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;

View file

@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
margin-top: 24px;
.mx_Spinner { .mx_Spinner {
flex: 1 0 auto; flex: 1 0 auto;
@ -34,6 +33,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AutoHideScrollbar { .mx_AutoHideScrollbar {
flex: 1 1 0; flex: 1 1 0;
margin-top: var(--cpd-space-3x);
} }
} }

View file

@ -223,7 +223,11 @@ class FilePanel extends React.Component<IProps, IState> {
public render(): React.ReactNode { public render(): React.ReactNode {
if (MatrixClientPeg.safeGet().isGuest()) { if (MatrixClientPeg.safeGet().isGuest()) {
return ( return (
<BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}> <BaseCard
className="mx_FilePanel mx_RoomView_messageListWrapper"
onClose={this.props.onClose}
header={_t("right_panel|files_button")}
>
<div className="mx_RoomView_empty"> <div className="mx_RoomView_empty">
{_t( {_t(
"file_panel|guest_note", "file_panel|guest_note",
@ -241,7 +245,11 @@ class FilePanel extends React.Component<IProps, IState> {
); );
} else if (this.noRoom) { } else if (this.noRoom) {
return ( return (
<BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}> <BaseCard
className="mx_FilePanel mx_RoomView_messageListWrapper"
onClose={this.props.onClose}
header={_t("right_panel|files_button")}
>
<div className="mx_RoomView_empty">{_t("file_panel|peek_note")}</div> <div className="mx_RoomView_empty">{_t("file_panel|peek_note")}</div>
</BaseCard> </BaseCard>
); );
@ -273,6 +281,7 @@ class FilePanel extends React.Component<IProps, IState> {
onClose={this.props.onClose} onClose={this.props.onClose}
withoutScrollContainer withoutScrollContainer
ref={this.card} ref={this.card}
header={_t("right_panel|files_button")}
> >
{this.card.current && ( {this.card.current && (
<Measured sensor={this.card.current} onMeasurement={this.onMeasurement} /> <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
@ -299,7 +308,11 @@ class FilePanel extends React.Component<IProps, IState> {
timelineRenderingType: TimelineRenderingType.File, timelineRenderingType: TimelineRenderingType.File,
}} }}
> >
<BaseCard className="mx_FilePanel" onClose={this.props.onClose}> <BaseCard
className="mx_FilePanel"
onClose={this.props.onClose}
header={_t("right_panel|files_button")}
>
<Spinner /> <Spinner />
</BaseCard> </BaseCard>
</RoomContext.Provider> </RoomContext.Provider>

View file

@ -18,7 +18,6 @@ import Spinner from "../views/elements/Spinner";
import { Layout } from "../../settings/enums/Layout"; import { Layout } from "../../settings/enums/Layout";
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
import Measured from "../views/elements/Measured"; import Measured from "../views/elements/Measured";
import Heading from "../views/typography/Heading";
import EmptyState from "../views/right_panel/EmptyState"; import EmptyState from "../views/right_panel/EmptyState";
interface IProps { interface IProps {
@ -88,13 +87,7 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
}} }}
> >
<BaseCard <BaseCard
header={ header={_t("notifications|enable_prompt_toast_title")}
<div className="mx_BaseCard_header_title">
<Heading size="4" className="mx_BaseCard_header_title_heading">
{_t("notifications|enable_prompt_toast_title")}
</Heading>
</div>
}
/** /**
* Need to rename this CSS class to something more generic * Need to rename this CSS class to something more generic
* Will be done once all the panels are using a similar layout * Will be done once all the panels are using a similar layout

View file

@ -33,7 +33,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState"; import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState";
import { Action } from "../../dispatcher/actions"; import { Action } from "../../dispatcher/actions";
import { XOR } from "../../@types/common"; import { XOR } from "../../@types/common";
import { RightPanelTabs } from "../views/right_panel/RightPanelTabs";
import ExtensionsCard from "../views/right_panel/ExtensionsCard"; import ExtensionsCard from "../views/right_panel/ExtensionsCard";
interface BaseProps { interface BaseProps {
@ -164,7 +163,6 @@ export default class RightPanel extends React.Component<Props, IState> {
<MemberList <MemberList
roomId={roomId} roomId={roomId}
key={roomId} key={roomId}
hideHeaderButtons
onClose={this.onClose} onClose={this.onClose}
searchQuery={this.state.searchQuery} searchQuery={this.state.searchQuery}
onSearchQueryChanged={this.onSearchQueryChanged} onSearchQueryChanged={this.onSearchQueryChanged}
@ -313,7 +311,6 @@ export default class RightPanel extends React.Component<Props, IState> {
return ( return (
<aside className="mx_RightPanel" id="mx_RightPanel"> <aside className="mx_RightPanel" id="mx_RightPanel">
{phase && <RightPanelTabs room={this.props.room} phase={phase} />}
{card} {card}
</aside> </aside>
); );

View file

@ -193,7 +193,6 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
}} }}
> >
<BaseCard <BaseCard
hideHeaderButtons
header={ header={
hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} /> hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
} }

View file

@ -38,6 +38,12 @@ interface IProps {
children: ReactNode; children: ReactNode;
} }
function closeRightPanel(ev: MouseEvent<HTMLButtonElement>): void {
ev.preventDefault();
ev.stopPropagation();
RightPanelStore.instance.popCard();
}
const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>( const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
( (
{ {
@ -81,12 +87,12 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
} }
let closeButton; let closeButton;
if (onClose && !hideHeaderButtons) { if (!hideHeaderButtons) {
closeButton = ( closeButton = (
<IconButton <IconButton
size="28px" size="28px"
data-testid="base-card-close-button" data-testid="base-card-close-button"
onClick={onClose} onClick={onClose ?? closeRightPanel}
ref={closeButtonRef} ref={closeButtonRef}
tooltip={closeLabel ?? _t("action|close")} tooltip={closeLabel ?? _t("action|close")}
subtleBackground subtleBackground
@ -116,9 +122,16 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
<div className="mx_BaseCard_header"> <div className="mx_BaseCard_header">
{backButton} {backButton}
{typeof header === "string" ? ( {typeof header === "string" ? (
<Text size="md" weight="medium" className="mx_BaseCard_header_title"> <div className="mx_BaseCard_header_title">
<Text
size="md"
weight="medium"
className="mx_BaseCard_header_title_heading"
role="heading"
>
{header} {header}
</Text> </Text>
</div>
) : ( ) : (
(header ?? <div className="mx_BaseCard_header_spacer" />) (header ?? <div className="mx_BaseCard_header_spacer" />)
)} )}

View file

@ -157,13 +157,6 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
} }
}; };
// The button is in the header to keep it outside the scrollable region
const header = (
<Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
{_t("right_panel|add_integrations")}
</Button>
);
let body: JSX.Element; let body: JSX.Element;
if (realApps.length < 1) { if (realApps.length < 1) {
body = ( body = (
@ -197,7 +190,10 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
} }
return ( return (
<BaseCard header={header} className="mx_ExtensionsCard" onClose={onClose} hideHeaderButtons> <BaseCard header={_t("right_panel|extensions_button")} className="mx_ExtensionsCard" onClose={onClose}>
<Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
{_t("right_panel|add_integrations")}
</Button>
{body} {body}
</BaseCard> </BaseCard>
); );

View file

@ -20,7 +20,6 @@ import { PinnedEventTile } from "../rooms/PinnedEventTile";
import { useRoomState } from "../../../hooks/useRoomState"; import { useRoomState } from "../../../hooks/useRoomState";
import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext"; import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
import { ReadPinsEventId } from "./types"; import { ReadPinsEventId } from "./types";
import Heading from "../typography/Heading";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import { filterBoolean } from "../../../utils/arrays"; import { filterBoolean } from "../../../utils/arrays";
import Modal from "../../../Modal"; import Modal from "../../../Modal";
@ -86,13 +85,7 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe
return ( return (
<BaseCard <BaseCard
header={ header={_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
<div className="mx_BaseCard_header_title">
<Heading size="4" className="mx_BaseCard_header_title_heading">
{_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
</Heading>
</div>
}
className="mx_PinnedMessagesCard" className="mx_PinnedMessagesCard"
onClose={onClose} onClose={onClose}
> >

View file

@ -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<Props> = ({ phase, room }): JSX.Element | null => {
const threadsTabRef = useRef<HTMLButtonElement | null>(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 (
<NavBar className="mx_RightPanelTabs" aria-label="right panel" role="tablist">
<NavItem
aria-controls="room-summary-panel"
id="room-summary-panel-tab"
onClick={() => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomSummary }, true);
}}
active={phase === RightPanelPhases.RoomSummary}
>
{_t("right_panel|info")}
</NavItem>
<NavItem
aria-controls="memberlist-panel"
id="memberlist-panel-tab"
onClick={(ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
}}
active={phase === RightPanelPhases.RoomMemberList}
>
{_t("common|people")}
</NavItem>
<NavItem
aria-controls="thread-panel"
id="thread-panel-tab"
onClick={() => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true);
}}
active={phase === RightPanelPhases.ThreadPanel}
ref={threadsTabRef}
>
{_t("common|threads")}
</NavItem>
{SettingsStore.getValue(UIFeature.Widgets) &&
!isVideoRoom &&
shouldShowComponent(UIComponent.AddIntegrations) && (
<NavItem
aria-controls="thread-panel"
id="extensions-panel-tab"
onClick={() => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true);
}}
active={phase === RightPanelPhases.Extensions}
>
{_t("common|extensions")}
</NavItem>
)}
</NavBar>
);
};

View file

@ -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 { 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 LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files"; 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 PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; 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"; import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
@ -82,10 +85,22 @@ interface IProps {
focusRoomSearch?: boolean; 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 => { const onRoomFilesClick = (): void => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, true); RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, true);
}; };
const onRoomExtensionsClick = (): void => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true);
};
const onRoomPinsClick = (): void => { const onRoomPinsClick = (): void => {
PosthogTrackers.trackInteraction("PinnedMessageRoomInfoButton"); PosthogTrackers.trackInteraction("PinnedMessageRoomInfoButton");
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true); RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true);
@ -254,7 +269,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
); );
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || ""; const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
const header = ( const roomInfo = (
<header className="mx_RoomSummaryCard_container"> <header className="mx_RoomSummaryCard_container">
<RoomAvatar room={room} size="80px" viewAvatarOnClick /> <RoomAvatar room={room} size="80px" viewAvatarOnClick />
<RoomName room={room}> <RoomName room={room}>
@ -322,22 +337,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room)); const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room));
const isFavorite = roomTags.includes(DefaultTagID.Favourite); const isFavorite = roomTags.includes(DefaultTagID.Favourite);
return ( const header = onSearchChange && (
<BaseCard
hideHeaderButtons
id="room-summary-panel"
className="mx_RoomSummaryCard"
ariaLabelledBy="room-summary-panel-tab"
role="tabpanel"
>
<Flex
as="header"
className="mx_RoomSummaryCard_header"
gap="var(--cpd-space-3x)"
align="center"
justify="space-between"
>
{onSearchChange && (
<Form.Root className="mx_RoomSummaryCard_search" onSubmit={(e) => e.preventDefault()}> <Form.Root className="mx_RoomSummaryCard_search" onSubmit={(e) => e.preventDefault()}>
<Search <Search
placeholder={_t("room|search|placeholder")} placeholder={_t("room|search|placeholder")}
@ -354,10 +354,17 @@ const RoomSummaryCard: React.FC<IProps> = ({
}} }}
/> />
</Form.Root> </Form.Root>
)} );
</Flex>
{header} return (
<BaseCard
id="room-summary-panel"
className="mx_RoomSummaryCard"
ariaLabelledBy="room-summary-panel-tab"
role="tabpanel"
header={header}
>
{roomInfo}
<Separator /> <Separator />
@ -379,6 +386,8 @@ const RoomSummaryCard: React.FC<IProps> = ({
<Separator /> <Separator />
<MenuItem Icon={UserProfileIcon} label={_t("common|people")} onSelect={onRoomMembersClick} />
<MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={onRoomThreadsClick} />
{!isVideoRoom && ( {!isVideoRoom && (
<> <>
<ReleaseAnnouncement <ReleaseAnnouncement
@ -401,6 +410,11 @@ const RoomSummaryCard: React.FC<IProps> = ({
</div> </div>
</ReleaseAnnouncement> </ReleaseAnnouncement>
<MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} /> <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
<MenuItem
Icon={ExtensionsIcon}
label={_t("right_panel|extensions_button")}
onSelect={onRoomExtensionsClick}
/>
</> </>
)} )}

View file

@ -36,7 +36,6 @@ import SettingsStore from "../../../settings/SettingsStore";
import JumpToBottomButton from "../rooms/JumpToBottomButton"; import JumpToBottomButton from "../rooms/JumpToBottomButton";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import Measured from "../elements/Measured"; import Measured from "../elements/Measured";
import Heading from "../typography/Heading";
import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { SdkContextClass } from "../../../contexts/SDKContext"; import { SdkContextClass } from "../../../contexts/SDKContext";
@ -185,16 +184,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
} }
}; };
private renderTimelineCardHeader = (): JSX.Element => {
return (
<div className="mx_BaseCard_header_title">
<Heading size="4" className="mx_BaseCard_header_title_heading">
{_t("right_panel|video_room_chat|title")}
</Heading>
</div>
);
};
public render(): React.ReactNode { public render(): React.ReactNode {
const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : undefined; const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : undefined;
@ -226,7 +215,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
className={this.props.classNames} className={this.props.classNames}
onClose={this.props.onClose} onClose={this.props.onClose}
withoutScrollContainer={true} withoutScrollContainer={true}
header={this.renderTimelineCardHeader()} header={_t("right_panel|video_room_chat|title")}
ref={this.card} ref={this.card}
> >
{this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />} {this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}

View file

@ -55,7 +55,6 @@ const SHOW_MORE_INCREMENT = 100;
interface IProps { interface IProps {
roomId: string; roomId: string;
searchQuery: string; searchQuery: string;
hideHeaderButtons?: boolean;
onClose(): void; onClose(): void;
onSearchQueryChanged: (query: string) => void; onSearchQueryChanged: (query: string) => void;
} }
@ -355,7 +354,7 @@ export default class MemberList extends React.Component<IProps, IState> {
className="mx_MemberList" className="mx_MemberList"
ariaLabelledBy="memberlist-panel-tab" ariaLabelledBy="memberlist-panel-tab"
role="tabpanel" role="tabpanel"
hideHeaderButtons={this.props.hideHeaderButtons} header={_t("common|people")}
onClose={this.props.onClose} onClose={this.props.onClose}
> >
<Spinner /> <Spinner />
@ -420,7 +419,7 @@ export default class MemberList extends React.Component<IProps, IState> {
className="mx_MemberList" className="mx_MemberList"
ariaLabelledBy="memberlist-panel-tab" ariaLabelledBy="memberlist-panel-tab"
role="tabpanel" role="tabpanel"
hideHeaderButtons={this.props.hideHeaderButtons} header={_t("common|people")}
footer={footer} footer={footer}
onClose={this.props.onClose} onClose={this.props.onClose}
> >

View file

@ -125,7 +125,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
} }
return ( return (
<BaseCard onClose={this.props.onClose}> <BaseCard onClose={this.props.onClose} header={_t("common|profile")}>
<Flex className="mx_ThirdPartyMemberInfo" direction="column" gap="var(--cpd-space-4x)"> <Flex className="mx_ThirdPartyMemberInfo" direction="column" gap="var(--cpd-space-4x)">
<Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)"> <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
{/* same as userinfo name style */} {/* same as userinfo name style */}

View file

@ -477,7 +477,6 @@
"encrypted": "Encrypted", "encrypted": "Encrypted",
"encryption_enabled": "Encryption enabled", "encryption_enabled": "Encryption enabled",
"error": "Error", "error": "Error",
"extensions": "Extensions",
"faq": "FAQ", "faq": "FAQ",
"favourites": "Favourites", "favourites": "Favourites",
"feedback": "Feedback", "feedback": "Feedback",
@ -1832,17 +1831,17 @@
"right_panel": { "right_panel": {
"add_integrations": "Add extensions", "add_integrations": "Add extensions",
"add_topic": "Add topic", "add_topic": "Add topic",
"extensions_button": "Extensions",
"extensions_empty_description": "Select “%(addIntegrations)s” to browse and add extensions to this room", "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", "extensions_empty_title": "Boost productivity with more tools, widgets and bots",
"files_button": "Files", "files_button": "Files",
"info": "Info",
"pinned_messages": { "pinned_messages": {
"empty_description": "Select a message and choose “%(pinAction)s” to it include here.", "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", "empty_title": "Pin important messages so that they can be easily discovered",
"header": { "header": {
"one": "1 Pinned message", "one": "1 Pinned message",
"other": "%(count)s Pinned messages", "other": "%(count)s Pinned messages",
"zero": "Pinned message" "zero": "Pinned messages"
}, },
"limits": { "limits": {
"other": "You can only pin up to %(count)s widgets" "other": "You can only pin up to %(count)s widgets"

View file

@ -9,8 +9,15 @@ exports[`FilePanel renders empty state 1`] = `
class="mx_BaseCard_header" class="mx_BaseCard_header"
> >
<div <div
class="mx_BaseCard_header_spacer" class="mx_BaseCard_header_title"
/> >
<p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
>
Files
</p>
</div>
<button <button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38" class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button" data-testid="base-card-close-button"

View file

@ -0,0 +1,35 @@
/*
Copyright 2024 New Vector Ltd.
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 from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import BaseCard from "../../../../src/components/views/right_panel/BaseCard.tsx";
import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore.ts";
jest.mock("../../../../src/stores/right-panel/RightPanelStore", () => ({
instance: {
popCard: jest.fn(),
roomPhaseHistory: [],
},
}));
describe("<BaseCard />", () => {
it("should close when clicking X button", async () => {
const { asFragment } = render(
<BaseCard header="Heading text">
<div>Content</div>
</BaseCard>,
);
expect(screen.getByRole("heading")).toHaveTextContent("Heading text");
expect(asFragment()).toMatchSnapshot();
fireEvent.click(screen.getByTestId("base-card-close-button"));
expect(RightPanelStore.instance.popCard).toHaveBeenCalled();
});
});

View file

@ -1,64 +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 from "react";
import { render, fireEvent } from "@testing-library/react";
import dis from "../../../../src/dispatcher/dispatcher";
import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
import { RightPanelTabs } from "../../../../src/components/views/right_panel/RightPanelTabs";
import { Action } from "../../../../src/dispatcher/actions";
describe("<RightPanelTabs />", () => {
it("Component renders the correct tabs", () => {
const { container, getByRole } = render(<RightPanelTabs phase={RightPanelPhases.RoomSummary} />);
expect(container).toMatchSnapshot();
// We expect Info, People and Threads as tabs
expect(getByRole("tab", { name: "Info" })).toBeDefined();
expect(getByRole("tab", { name: "People" })).toBeDefined();
expect(getByRole("tab", { name: "Threads" })).toBeDefined();
});
it("Correct tab is active", () => {
const { container } = render(<RightPanelTabs phase={RightPanelPhases.RoomMemberList} />);
expect(container).toMatchSnapshot();
// Assert that the active tab is Info
expect(container.querySelectorAll("[aria-selected='true']").length).toEqual(1);
expect(container.querySelector("[aria-selected='true']")).toHaveAccessibleName("People");
});
it("Renders nothing for some phases, eg: FilePanel", () => {
const { container } = render(<RightPanelTabs phase={RightPanelPhases.FilePanel} />);
expect(container).toBeEmptyDOMElement();
});
it("onClick behaviors work as expected", () => {
const spy = jest.spyOn(RightPanelStore.instance, "pushCard");
const { getByRole } = render(<RightPanelTabs phase={RightPanelPhases.RoomSummary} />);
// Info -> People
fireEvent.click(getByRole("tab", { name: "People" }));
expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.RoomMemberList }, true);
// People -> Threads
fireEvent.click(getByRole("tab", { name: "Threads" }));
expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.ThreadPanel }, true);
// Threads -> Info
fireEvent.click(getByRole("tab", { name: "Info" }));
expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.RoomSummary }, true);
});
it("Threads tab is focused on action", () => {
const { getByRole } = render(<RightPanelTabs phase={RightPanelPhases.ThreadPanel} />);
dis.dispatch({ action: Action.FocusThreadsPanel }, true);
expect(getByRole("tab", { name: "Threads" })).toHaveFocus();
});
});

View file

@ -258,6 +258,36 @@ describe("<RoomSummaryCard />", () => {
expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: "open_room_settings" }); expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: "open_room_settings" });
}); });
it("opens room member list on button click", () => {
const { getByText } = getComponent();
fireEvent.click(getByText("People"));
expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith(
{ phase: RightPanelPhases.RoomMemberList },
true,
);
});
it("opens room threads list on button click", () => {
const { getByText } = getComponent();
fireEvent.click(getByText("Threads"));
expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith({ phase: RightPanelPhases.ThreadPanel }, true);
});
it("opens room pinned messages on button click", () => {
const { getByText } = getComponent();
fireEvent.click(getByText("Pinned messages"));
expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith(
{ phase: RightPanelPhases.PinnedMessages },
true,
);
});
describe("pinning", () => { describe("pinning", () => {
it("renders pins options", () => { it("renders pins options", () => {
const { getByText } = getComponent(); const { getByText } = getComponent();

View file

@ -0,0 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BaseCard /> should close when clicking X button 1`] = `
<DocumentFragment>
<div
class="mx_BaseCard"
>
<div
class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_title"
>
<p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
>
Heading text
</p>
</div>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</button>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<div>
Content
</div>
</div>
</div>
</DocumentFragment>
`;

View file

@ -7,6 +7,45 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
> >
<div <div
class="mx_BaseCard_header" class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_title"
>
<p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
>
Extensions
</p>
</div>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</button>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
> >
<button <button
class="_button_zt6rp_17 _has-icon_zt6rp_61" class="_button_zt6rp_17 _has-icon_zt6rp_61"
@ -22,11 +61,6 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
/> />
Add extensions Add extensions
</button> </button>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<div <div
class="mx_Flex mx_EmptyState" class="mx_Flex mx_EmptyState"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);" style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
@ -58,6 +92,45 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
> >
<div <div
class="mx_BaseCard_header" class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_title"
>
<p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
>
Extensions
</p>
</div>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</button>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
> >
<button <button
class="_button_zt6rp_17 _has-icon_zt6rp_61" class="_button_zt6rp_17 _has-icon_zt6rp_61"
@ -73,11 +146,6 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
/> />
Add extensions Add extensions
</button> </button>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<div <div
class="_separator_144s5_17" class="_separator_144s5_17"
data-kind="primary" data-kind="primary"

View file

@ -11,11 +11,12 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
<div <div
class="mx_BaseCard_header_title" class="mx_BaseCard_header_title"
> >
<h4 <p
class="mx_Heading_h4 mx_BaseCard_header_title_heading" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
> >
Pinned message Pinned messages
</h4> </p>
</div> </div>
<button <button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38" class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
@ -90,11 +91,12 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
<div <div
class="mx_BaseCard_header_title" class="mx_BaseCard_header_title"
> >
<h4 <p
class="mx_Heading_h4 mx_BaseCard_header_title_heading" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
> >
2 Pinned messages 2 Pinned messages
</h4> </p>
</div> </div>
<button <button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38" class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
@ -285,11 +287,12 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
<div <div
class="mx_BaseCard_header_title" class="mx_BaseCard_header_title"
> >
<h4 <p
class="mx_Heading_h4 mx_BaseCard_header_title_heading" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
> >
2 Pinned messages 2 Pinned messages
</h4> </p>
</div> </div>
<button <button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38" class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"

View file

@ -1,147 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RightPanelTabs /> Component renders the correct tabs 1`] = `
<div>
<nav
class="mx_RightPanelTabs _nav-bar_135dy_16"
role="presentation"
>
<ul
aria-label="right panel"
class="_nav-bar-items_135dy_22"
role="tablist"
>
<li
class="_nav-tab_135dy_33"
data-current="true"
role="presentation"
>
<button
aria-controls="room-summary-panel"
aria-selected="true"
class="_nav-item_135dy_55"
id="room-summary-panel-tab"
role="tab"
>
Info
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="memberlist-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="memberlist-panel-tab"
role="tab"
>
People
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="thread-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="thread-panel-tab"
role="tab"
>
Threads
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="thread-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="extensions-panel-tab"
role="tab"
>
Extensions
</button>
</li>
</ul>
</nav>
</div>
`;
exports[`<RightPanelTabs /> Correct tab is active 1`] = `
<div>
<nav
class="mx_RightPanelTabs _nav-bar_135dy_16"
role="presentation"
>
<ul
aria-label="right panel"
class="_nav-bar-items_135dy_22"
role="tablist"
>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="room-summary-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="room-summary-panel-tab"
role="tab"
>
Info
</button>
</li>
<li
class="_nav-tab_135dy_33"
data-current="true"
role="presentation"
>
<button
aria-controls="memberlist-panel"
aria-selected="true"
class="_nav-item_135dy_55"
id="memberlist-panel-tab"
role="tab"
>
People
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="thread-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="thread-panel-tab"
role="tab"
>
Threads
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="thread-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="extensions-panel-tab"
role="tab"
>
Extensions
</button>
</li>
</ul>
</nav>
</div>
`;

View file

@ -8,14 +8,41 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
id="room-summary-panel" id="room-summary-panel"
role="tabpanel" role="tabpanel"
> >
<div
class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_spacer"
/>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</button>
</div>
<div <div
class="mx_AutoHideScrollbar" class="mx_AutoHideScrollbar"
tabindex="-1" tabindex="-1"
> >
<header
class="mx_Flex mx_RoomSummaryCard_header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
/>
<header <header
class="mx_RoomSummaryCard_container" class="mx_RoomSummaryCard_container"
> >
@ -186,6 +213,89 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
data-orientation="horizontal" data-orientation="horizontal"
role="separator" role="separator"
/> />
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
<path
d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
People
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
/>
<path
d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
Threads
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<div <div
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
@ -272,6 +382,43 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
/> />
</svg> </svg>
</button> </button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
Extensions
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<div <div
class="_separator_144s5_17" class="_separator_144s5_17"
data-kind="primary" data-kind="primary"
@ -482,14 +629,41 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
id="room-summary-panel" id="room-summary-panel"
role="tabpanel" role="tabpanel"
> >
<div
class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_spacer"
/>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</button>
</div>
<div <div
class="mx_AutoHideScrollbar" class="mx_AutoHideScrollbar"
tabindex="-1" tabindex="-1"
> >
<header
class="mx_Flex mx_RoomSummaryCard_header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
/>
<header <header
class="mx_RoomSummaryCard_container" class="mx_RoomSummaryCard_container"
> >
@ -633,6 +807,89 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-orientation="horizontal" data-orientation="horizontal"
role="separator" role="separator"
/> />
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
<path
d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
People
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
/>
<path
d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
Threads
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<div <div
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
@ -719,6 +976,43 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/> />
</svg> </svg>
</button> </button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
Extensions
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<div <div
class="_separator_144s5_17" class="_separator_144s5_17"
data-kind="primary" data-kind="primary"
@ -929,14 +1223,41 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
id="room-summary-panel" id="room-summary-panel"
role="tabpanel" role="tabpanel"
> >
<div
class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_spacer"
/>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</button>
</div>
<div <div
class="mx_AutoHideScrollbar" class="mx_AutoHideScrollbar"
tabindex="-1" tabindex="-1"
> >
<header
class="mx_Flex mx_RoomSummaryCard_header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
/>
<header <header
class="mx_RoomSummaryCard_container" class="mx_RoomSummaryCard_container"
> >
@ -1107,6 +1428,89 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
data-orientation="horizontal" data-orientation="horizontal"
role="separator" role="separator"
/> />
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
<path
d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
People
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
/>
<path
d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
Threads
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<div <div
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
@ -1193,6 +1597,43 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
/> />
</svg> </svg>
</button> </button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1gwvj_44"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
/>
</svg>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
Extensions
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<div <div
class="_separator_144s5_17" class="_separator_144s5_17"
data-kind="primary" data-kind="primary"

View file

@ -76,12 +76,17 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
> >
<div <div
class="mx_BaseCard_header" class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_title"
> >
<p <p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
> >
Profile Profile
</p> </p>
</div>
<button <button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38" class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button" data-testid="base-card-close-button"
@ -384,12 +389,17 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
> >
<div <div
class="mx_BaseCard_header" class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_title"
> >
<p <p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
> >
Profile Profile
</p> </p>
</div>
<button <button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38" class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button" data-testid="base-card-close-button"

View file

@ -9,8 +9,39 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
class="mx_BaseCard_header" class="mx_BaseCard_header"
> >
<div <div
class="mx_BaseCard_header_spacer" class="mx_BaseCard_header_title"
>
<p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
>
Profile
</p>
</div>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/> />
</svg>
</div>
</button>
</div> </div>
<div <div
class="mx_AutoHideScrollbar" class="mx_AutoHideScrollbar"
@ -51,8 +82,39 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
class="mx_BaseCard_header" class="mx_BaseCard_header"
> >
<div <div
class="mx_BaseCard_header_spacer" class="mx_BaseCard_header_title"
>
<p
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
role="heading"
>
Profile
</p>
</div>
<button
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/> />
</svg>
</div>
</button>
</div> </div>
<div <div
class="mx_AutoHideScrollbar" class="mx_AutoHideScrollbar"