mirror of
https://github.com/element-hq/element-web
synced 2024-11-21 16:55:34 +03:00
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
GitHub
parent
67cb8b7590
commit
2dbaf00e71
44 changed files with 865 additions and 500 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ test.describe("Lazy Loading", () => {
|
|||
async function openMemberlist(app: ElementAppPage): Promise<void> {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -157,6 +157,6 @@ test.describe("Threads Activity Centre", () => {
|
|||
await util.openTac();
|
||||
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 |
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -223,7 +223,11 @@ class FilePanel extends React.Component<IProps, IState> {
|
|||
public render(): React.ReactNode {
|
||||
if (MatrixClientPeg.safeGet().isGuest()) {
|
||||
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|guest_note",
|
||||
|
|
@ -241,7 +245,11 @@ class FilePanel extends React.Component<IProps, IState> {
|
|||
);
|
||||
} else if (this.noRoom) {
|
||||
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>
|
||||
</BaseCard>
|
||||
);
|
||||
|
|
@ -273,6 +281,7 @@ class FilePanel extends React.Component<IProps, IState> {
|
|||
onClose={this.props.onClose}
|
||||
withoutScrollContainer
|
||||
ref={this.card}
|
||||
header={_t("right_panel|files_button")}
|
||||
>
|
||||
{this.card.current && (
|
||||
<Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
|
||||
|
|
@ -299,7 +308,11 @@ class FilePanel extends React.Component<IProps, IState> {
|
|||
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 />
|
||||
</BaseCard>
|
||||
</RoomContext.Provider>
|
||||
|
|
|
|||
|
|
@ -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<IProps, IStat
|
|||
}}
|
||||
>
|
||||
<BaseCard
|
||||
header={
|
||||
<div className="mx_BaseCard_header_title">
|
||||
<Heading size="4" className="mx_BaseCard_header_title_heading">
|
||||
{_t("notifications|enable_prompt_toast_title")}
|
||||
</Heading>
|
||||
</div>
|
||||
}
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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<Props, IState> {
|
|||
<MemberList
|
||||
roomId={roomId}
|
||||
key={roomId}
|
||||
hideHeaderButtons
|
||||
onClose={this.onClose}
|
||||
searchQuery={this.state.searchQuery}
|
||||
onSearchQueryChanged={this.onSearchQueryChanged}
|
||||
|
|
@ -313,7 +311,6 @@ export default class RightPanel extends React.Component<Props, IState> {
|
|||
|
||||
return (
|
||||
<aside className="mx_RightPanel" id="mx_RightPanel">
|
||||
{phase && <RightPanelTabs room={this.props.room} phase={phase} />}
|
||||
{card}
|
||||
</aside>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -193,7 +193,6 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
|
|||
}}
|
||||
>
|
||||
<BaseCard
|
||||
hideHeaderButtons
|
||||
header={
|
||||
hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,12 @@ interface IProps {
|
|||
children: ReactNode;
|
||||
}
|
||||
|
||||
function closeRightPanel(ev: MouseEvent<HTMLButtonElement>): void {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
RightPanelStore.instance.popCard();
|
||||
}
|
||||
|
||||
const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
|
||||
(
|
||||
{
|
||||
|
|
@ -81,12 +87,12 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
|
|||
}
|
||||
|
||||
let closeButton;
|
||||
if (onClose && !hideHeaderButtons) {
|
||||
if (!hideHeaderButtons) {
|
||||
closeButton = (
|
||||
<IconButton
|
||||
size="28px"
|
||||
data-testid="base-card-close-button"
|
||||
onClick={onClose}
|
||||
onClick={onClose ?? closeRightPanel}
|
||||
ref={closeButtonRef}
|
||||
tooltip={closeLabel ?? _t("action|close")}
|
||||
subtleBackground
|
||||
|
|
@ -116,9 +122,16 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
|
|||
<div className="mx_BaseCard_header">
|
||||
{backButton}
|
||||
{typeof header === "string" ? (
|
||||
<Text size="md" weight="medium" className="mx_BaseCard_header_title">
|
||||
{header}
|
||||
</Text>
|
||||
<div className="mx_BaseCard_header_title">
|
||||
<Text
|
||||
size="md"
|
||||
weight="medium"
|
||||
className="mx_BaseCard_header_title_heading"
|
||||
role="heading"
|
||||
>
|
||||
{header}
|
||||
</Text>
|
||||
</div>
|
||||
) : (
|
||||
(header ?? <div className="mx_BaseCard_header_spacer" />)
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
if (realApps.length < 1) {
|
||||
body = (
|
||||
|
|
@ -197,7 +190,10 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
|
|||
}
|
||||
|
||||
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}
|
||||
</BaseCard>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<BaseCard
|
||||
header={
|
||||
<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>
|
||||
}
|
||||
header={_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
|
||||
className="mx_PinnedMessagesCard"
|
||||
onClose={onClose}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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<IProps> = ({
|
|||
);
|
||||
|
||||
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
|
||||
const header = (
|
||||
const roomInfo = (
|
||||
<header className="mx_RoomSummaryCard_container">
|
||||
<RoomAvatar room={room} size="80px" viewAvatarOnClick />
|
||||
<RoomName room={room}>
|
||||
|
|
@ -322,42 +337,34 @@ const RoomSummaryCard: React.FC<IProps> = ({
|
|||
const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room));
|
||||
const isFavorite = roomTags.includes(DefaultTagID.Favourite);
|
||||
|
||||
const header = onSearchChange && (
|
||||
<Form.Root className="mx_RoomSummaryCard_search" onSubmit={(e) => e.preventDefault()}>
|
||||
<Search
|
||||
placeholder={_t("room|search|placeholder")}
|
||||
name="room_message_search"
|
||||
onChange={onSearchChange}
|
||||
className="mx_no_textinput"
|
||||
ref={searchInputRef}
|
||||
autoFocus={focusRoomSearch}
|
||||
onKeyDown={(e) => {
|
||||
if (searchInputRef.current && e.key === Key.ESCAPE) {
|
||||
searchInputRef.current.value = "";
|
||||
onSearchCancel?.();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Form.Root>
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseCard
|
||||
hideHeaderButtons
|
||||
id="room-summary-panel"
|
||||
className="mx_RoomSummaryCard"
|
||||
ariaLabelledBy="room-summary-panel-tab"
|
||||
role="tabpanel"
|
||||
header={header}
|
||||
>
|
||||
<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()}>
|
||||
<Search
|
||||
placeholder={_t("room|search|placeholder")}
|
||||
name="room_message_search"
|
||||
onChange={onSearchChange}
|
||||
className="mx_no_textinput"
|
||||
ref={searchInputRef}
|
||||
autoFocus={focusRoomSearch}
|
||||
onKeyDown={(e) => {
|
||||
if (searchInputRef.current && e.key === Key.ESCAPE) {
|
||||
searchInputRef.current.value = "";
|
||||
onSearchCancel?.();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Form.Root>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{header}
|
||||
{roomInfo}
|
||||
|
||||
<Separator />
|
||||
|
||||
|
|
@ -379,6 +386,8 @@ const RoomSummaryCard: React.FC<IProps> = ({
|
|||
|
||||
<Separator />
|
||||
|
||||
<MenuItem Icon={UserProfileIcon} label={_t("common|people")} onSelect={onRoomMembersClick} />
|
||||
<MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={onRoomThreadsClick} />
|
||||
{!isVideoRoom && (
|
||||
<>
|
||||
<ReleaseAnnouncement
|
||||
|
|
@ -401,6 +410,11 @@ const RoomSummaryCard: React.FC<IProps> = ({
|
|||
</div>
|
||||
</ReleaseAnnouncement>
|
||||
<MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
|
||||
<MenuItem
|
||||
Icon={ExtensionsIcon}
|
||||
label={_t("right_panel|extensions_button")}
|
||||
onSelect={onRoomExtensionsClick}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -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<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 {
|
||||
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}
|
||||
onClose={this.props.onClose}
|
||||
withoutScrollContainer={true}
|
||||
header={this.renderTimelineCardHeader()}
|
||||
header={_t("right_panel|video_room_chat|title")}
|
||||
ref={this.card}
|
||||
>
|
||||
{this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
|
||||
|
|
|
|||
|
|
@ -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<IProps, IState> {
|
|||
className="mx_MemberList"
|
||||
ariaLabelledBy="memberlist-panel-tab"
|
||||
role="tabpanel"
|
||||
hideHeaderButtons={this.props.hideHeaderButtons}
|
||||
header={_t("common|people")}
|
||||
onClose={this.props.onClose}
|
||||
>
|
||||
<Spinner />
|
||||
|
|
@ -420,7 +419,7 @@ export default class MemberList extends React.Component<IProps, IState> {
|
|||
className="mx_MemberList"
|
||||
ariaLabelledBy="memberlist-panel-tab"
|
||||
role="tabpanel"
|
||||
hideHeaderButtons={this.props.hideHeaderButtons}
|
||||
header={_t("common|people")}
|
||||
footer={footer}
|
||||
onClose={this.props.onClose}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
|
|||
}
|
||||
|
||||
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 direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
|
||||
{/* same as userinfo name style */}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -9,8 +9,15 @@ exports[`FilePanel renders empty state 1`] = `
|
|||
class="mx_BaseCard_header"
|
||||
>
|
||||
<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
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
data-testid="base-card-close-button"
|
||||
|
|
|
|||
35
test/components/views/right_panel/BaseCard-test.tsx
Normal file
35
test/components/views/right_panel/BaseCard-test.tsx
Normal 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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -258,6 +258,36 @@ describe("<RoomSummaryCard />", () => {
|
|||
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", () => {
|
||||
it("renders pins options", () => {
|
||||
const { getByText } = getComponent();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -7,6 +7,45 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
|
|||
>
|
||||
<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"
|
||||
>
|
||||
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
|
||||
class="_button_zt6rp_17 _has-icon_zt6rp_61"
|
||||
|
|
@ -22,11 +61,6 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
|
|||
/>
|
||||
Add extensions
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AutoHideScrollbar"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
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);"
|
||||
|
|
@ -58,6 +92,45 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
|
|||
>
|
||||
<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"
|
||||
>
|
||||
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
|
||||
class="_button_zt6rp_17 _has-icon_zt6rp_61"
|
||||
|
|
@ -73,11 +146,6 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
|
|||
/>
|
||||
Add extensions
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AutoHideScrollbar"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="_separator_144s5_17"
|
||||
data-kind="primary"
|
||||
|
|
|
|||
|
|
@ -11,11 +11,12 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
|
|||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
|
||||
role="heading"
|
||||
>
|
||||
Pinned message
|
||||
</h4>
|
||||
Pinned messages
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
|
|
@ -90,11 +91,12 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
|
|||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
|
||||
role="heading"
|
||||
>
|
||||
2 Pinned messages
|
||||
</h4>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
|
|
@ -285,11 +287,12 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
|
|||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
|
||||
role="heading"
|
||||
>
|
||||
2 Pinned messages
|
||||
</h4>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -8,14 +8,41 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
|
|||
id="room-summary-panel"
|
||||
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
|
||||
class="mx_AutoHideScrollbar"
|
||||
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
|
||||
class="mx_RoomSummaryCard_container"
|
||||
>
|
||||
|
|
@ -186,6 +213,89 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
|
|||
data-orientation="horizontal"
|
||||
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
|
||||
aria-expanded="false"
|
||||
aria-haspopup="dialog"
|
||||
|
|
@ -272,6 +382,43 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
|
|||
/>
|
||||
</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="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
|
||||
class="_separator_144s5_17"
|
||||
data-kind="primary"
|
||||
|
|
@ -482,14 +629,41 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
|
|||
id="room-summary-panel"
|
||||
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
|
||||
class="mx_AutoHideScrollbar"
|
||||
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
|
||||
class="mx_RoomSummaryCard_container"
|
||||
>
|
||||
|
|
@ -633,6 +807,89 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
|
|||
data-orientation="horizontal"
|
||||
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
|
||||
aria-expanded="false"
|
||||
aria-haspopup="dialog"
|
||||
|
|
@ -719,6 +976,43 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
|
|||
/>
|
||||
</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="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
|
||||
class="_separator_144s5_17"
|
||||
data-kind="primary"
|
||||
|
|
@ -929,14 +1223,41 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
|
|||
id="room-summary-panel"
|
||||
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
|
||||
class="mx_AutoHideScrollbar"
|
||||
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
|
||||
class="mx_RoomSummaryCard_container"
|
||||
>
|
||||
|
|
@ -1107,6 +1428,89 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
|
|||
data-orientation="horizontal"
|
||||
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
|
||||
aria-expanded="false"
|
||||
aria-haspopup="dialog"
|
||||
|
|
@ -1193,6 +1597,43 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
|
|||
/>
|
||||
</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="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
|
||||
class="_separator_144s5_17"
|
||||
data-kind="primary"
|
||||
|
|
|
|||
|
|
@ -77,11 +77,16 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
|||
<div
|
||||
class="mx_BaseCard_header"
|
||||
>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title"
|
||||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
Profile
|
||||
</p>
|
||||
<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"
|
||||
|
|
@ -385,11 +390,16 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
|
|||
<div
|
||||
class="mx_BaseCard_header"
|
||||
>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title"
|
||||
<div
|
||||
class="mx_BaseCard_header_title"
|
||||
>
|
||||
Profile
|
||||
</p>
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -9,8 +9,39 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
|
|||
class="mx_BaseCard_header"
|
||||
>
|
||||
<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
|
||||
class="mx_AutoHideScrollbar"
|
||||
|
|
@ -51,8 +82,39 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
|
|||
class="mx_BaseCard_header"
|
||||
>
|
||||
<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
|
||||
class="mx_AutoHideScrollbar"
|
||||
|
|
|
|||
Loading…
Reference in a new issue