Skip to content
This repository was archived by the owner on Oct 22, 2024. It is now read-only.

Commit 2dbaf00

Browse files
t3chguyt3chguy
authored
Ditch right panel tabs and re-add close button (#99)
* Add extra buttons to room summary card Signed-off-by: Michael Telatynski <[email protected]> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <[email protected]> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <[email protected]> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Update tests Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Update screenshot Signed-off-by: Michael Telatynski <[email protected]> * Improve coverage Signed-off-by: Michael Telatynski <[email protected]> * i18n Signed-off-by: Michael Telatynski <[email protected]> * Fix base card title colours Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 67cb8b7 commit 2dbaf00

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+864
-499
lines changed

‎playwright/e2e/crypto/crypto.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ test.describe("Cryptography", function () {
220220

221221
// Assert that verified icon is rendered
222222
await page.getByTestId("base-card-back-button").click();
223-
await page.locator(".mx_RightPanelTabs").getByText("Info").click();
223+
await page.getByLabel("Room info").nth(1).click();
224224
await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
225225

226226
// Take a snapshot of RoomSummaryCard with a verified E2EE icon

‎playwright/e2e/crypto/dehydration.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ test.describe("Dehydration", () => {
9494

9595
await viewRoomSummaryByName(page, app, ROOM_NAME);
9696

97-
await page.locator(".mx_RightPanelTabs").getByText("People").click();
97+
await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
9898
await expect(page.locator(".mx_MemberList")).toBeVisible();
9999

100100
await getMemberTileByName(page, NAME).click();

‎playwright/e2e/crypto/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ export const verify = async (app: ElementAppPage, bob: Bot) => {
345345
const bobsVerificationRequestPromise = waitForVerificationRequest(bob);
346346

347347
const roomInfo = await app.toggleRoomInfoPanel();
348-
await page.locator(".mx_RightPanelTabs").getByText("People").click();
348+
await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
349349
await roomInfo.getByText("Bob").click();
350350
await roomInfo.getByRole("button", { name: "Verify" }).click();
351351
await roomInfo.getByRole("button", { name: "Start Verification" }).click();

‎playwright/e2e/integration-manager/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage";
1111
export async function openIntegrationManager(app: ElementAppPage) {
1212
const { page } = app;
1313
await app.toggleRoomInfoPanel();
14-
await page.getByRole("tab", { name: "Extensions" }).click();
14+
await page.getByRole("menuitem", { name: "Extensions" }).click();
1515
await page.getByRole("button", { name: "Add extensions" }).click();
1616
}

‎playwright/e2e/lazy-loading/lazy-loading.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ test.describe("Lazy Loading", () => {
7373
async function openMemberlist(app: ElementAppPage): Promise<void> {
7474
await app.toggleRoomInfoPanel();
7575
const { page } = app;
76-
await page.locator(".mx_RightPanelTabs").getByText("People").click();
76+
await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
7777
}
7878

7979
function getMemberInMemberlist(page: Page, name: string): Locator {

‎playwright/e2e/read-receipts/index.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -394,10 +394,7 @@ class Helpers {
394394
* Close the threads panel.
395395
*/
396396
async closeThreadsPanel() {
397-
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
398-
if (await this.page.locator("#thread-panel").isVisible()) {
399-
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
400-
}
397+
await this.page.locator(".mx_RightPanel").getByTestId("base-card-close-button").click();
401398
await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
402399
}
403400

‎playwright/e2e/right-panel/right-panel.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ test.describe("RightPanel", () => {
6565
test("should handle clicking add widgets", async ({ page, app }) => {
6666
await viewRoomSummaryByName(page, app, ROOM_NAME);
6767

68-
await page.getByRole("tab", { name: "Extensions" }).click();
68+
await page.getByRole("menuitem", { name: "Extensions" }).click();
6969
await page.getByRole("button", { name: "Add extensions" }).click();
7070
await expect(page.locator(".mx_IntegrationManager")).toBeVisible();
7171
});
@@ -106,7 +106,7 @@ test.describe("RightPanel", () => {
106106
test("should handle viewing room member", async ({ page, app }) => {
107107
await viewRoomSummaryByName(page, app, ROOM_NAME);
108108

109-
await page.locator(".mx_RightPanelTabs").getByText("People").click();
109+
await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
110110
await expect(page.locator(".mx_MemberList")).toBeVisible();
111111

112112
await getMemberTileByName(page, NAME).click();
@@ -116,7 +116,7 @@ test.describe("RightPanel", () => {
116116
await page.getByTestId("base-card-back-button").click();
117117
await expect(page.locator(".mx_MemberList")).toBeVisible();
118118

119-
await page.locator(".mx_RightPanelTabs").getByText("Info").click();
119+
await page.getByLabel("Room info").nth(1).click();
120120
await checkRoomSummaryCard(page, ROOM_NAME);
121121
});
122122
});

‎playwright/e2e/spaces/threads-activity-centre/index.ts

-7
Original file line numberDiff line numberDiff line change
@@ -328,13 +328,6 @@ export class Helpers {
328328
return expect(this.page.locator(".mx_ThreadPanel")).toBeVisible();
329329
}
330330

331-
/**
332-
* Assert that the thread tab is focused
333-
*/
334-
assertThreadTabFocused() {
335-
return expect(this.page.locator("#thread-panel-tab")).toBeFocused();
336-
}
337-
338331
/**
339332
* Populate the rooms with messages and threads
340333
* @param room1

‎playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,6 @@ test.describe("Threads Activity Centre", () => {
157157
await util.openTac();
158158
await util.clickRoomInTac(room1.name);
159159

160-
await util.assertThreadTabFocused();
160+
await util.assertThreadPanelIsOpened();
161161
});
162162
});

‎playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png

1.07 KB
Loading

‎playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-empty-linux.png

16 Bytes
Loading

‎playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png

552 Bytes
Loading

‎playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png

-3 Bytes
Loading

‎playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png

1.71 KB
Loading

‎playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png

-23 Bytes
Loading

‎res/css/_components.pcss

-1
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,6 @@
265265
@import "./views/right_panel/_EncryptionInfo.pcss";
266266
@import "./views/right_panel/_ExtensionsCard.pcss";
267267
@import "./views/right_panel/_PinnedMessagesCard.pcss";
268-
@import "./views/right_panel/_RightPanelTabs.pcss";
269268
@import "./views/right_panel/_RoomSummaryCard.pcss";
270269
@import "./views/right_panel/_ThreadPanel.pcss";
271270
@import "./views/right_panel/_TimelineCard.pcss";

‎res/css/views/right_panel/_ExtensionsCard.pcss

+5-9
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,17 @@ Please see LICENSE files in the repository root for full details.
1010
--cpd-separator-inset: var(--cpd-space-4x);
1111
--cpd-separator-spacing: var(--cpd-space-4x);
1212

13-
.mx_BaseCard_header {
14-
/* Hide the line between the header and the body of the card */
15-
border-block-end: none;
13+
.mx_AutoHideScrollbar {
14+
padding: 0 var(--cpd-space-4x);
15+
margin-top: var(--cpd-space-3x);
16+
box-sizing: border-box;
1617

1718
/* Styling for the "Add extensions" button */
18-
button {
19+
& > button {
1920
width: 100%;
2021
}
2122
}
2223

23-
.mx_AutoHideScrollbar {
24-
padding: 0 var(--cpd-space-4x);
25-
box-sizing: border-box;
26-
}
27-
2824
.mx_ExtensionsCard_container {
2925
text-align: center;
3026
margin: $spacing-20 var(--cpd-space-4x) 0;

‎res/css/views/right_panel/_RightPanelTabs.pcss

-17
This file was deleted.

‎res/css/views/right_panel/_RoomSummaryCard.pcss

-4
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,6 @@ Please see LICENSE files in the repository root for full details.
8888
margin: var(--cpd-space-4x) 0;
8989
}
9090

91-
.mx_RoomSummaryCard_header {
92-
padding: 24px 12px 15px;
93-
}
94-
9591
.mx_RoomSummaryCard_search {
9692
flex-grow: 1;
9793
min-width: 0;

‎res/css/views/rooms/_MemberList.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details.
1111
display: flex;
1212
flex-direction: column;
1313
min-height: 0;
14-
margin-top: 24px;
1514

1615
.mx_Spinner {
1716
flex: 1 0 auto;
@@ -34,6 +33,7 @@ Please see LICENSE files in the repository root for full details.
3433

3534
.mx_AutoHideScrollbar {
3635
flex: 1 1 0;
36+
margin-top: var(--cpd-space-3x);
3737
}
3838
}
3939

‎src/components/structures/FilePanel.tsx

+16-3
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,11 @@ class FilePanel extends React.Component<IProps, IState> {
223223
public render(): React.ReactNode {
224224
if (MatrixClientPeg.safeGet().isGuest()) {
225225
return (
226-
<BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
226+
<BaseCard
227+
className="mx_FilePanel mx_RoomView_messageListWrapper"
228+
onClose={this.props.onClose}
229+
header={_t("right_panel|files_button")}
230+
>
227231
<div className="mx_RoomView_empty">
228232
{_t(
229233
"file_panel|guest_note",
@@ -241,7 +245,11 @@ class FilePanel extends React.Component<IProps, IState> {
241245
);
242246
} else if (this.noRoom) {
243247
return (
244-
<BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
248+
<BaseCard
249+
className="mx_FilePanel mx_RoomView_messageListWrapper"
250+
onClose={this.props.onClose}
251+
header={_t("right_panel|files_button")}
252+
>
245253
<div className="mx_RoomView_empty">{_t("file_panel|peek_note")}</div>
246254
</BaseCard>
247255
);
@@ -273,6 +281,7 @@ class FilePanel extends React.Component<IProps, IState> {
273281
onClose={this.props.onClose}
274282
withoutScrollContainer
275283
ref={this.card}
284+
header={_t("right_panel|files_button")}
276285
>
277286
{this.card.current && (
278287
<Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
@@ -299,7 +308,11 @@ class FilePanel extends React.Component<IProps, IState> {
299308
timelineRenderingType: TimelineRenderingType.File,
300309
}}
301310
>
302-
<BaseCard className="mx_FilePanel" onClose={this.props.onClose}>
311+
<BaseCard
312+
className="mx_FilePanel"
313+
onClose={this.props.onClose}
314+
header={_t("right_panel|files_button")}
315+
>
303316
<Spinner />
304317
</BaseCard>
305318
</RoomContext.Provider>

‎src/components/structures/NotificationPanel.tsx

+1-8
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import Spinner from "../views/elements/Spinner";
1818
import { Layout } from "../../settings/enums/Layout";
1919
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
2020
import Measured from "../views/elements/Measured";
21-
import Heading from "../views/typography/Heading";
2221
import EmptyState from "../views/right_panel/EmptyState";
2322

2423
interface IProps {
@@ -88,13 +87,7 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
8887
}}
8988
>
9089
<BaseCard
91-
header={
92-
<div className="mx_BaseCard_header_title">
93-
<Heading size="4" className="mx_BaseCard_header_title_heading">
94-
{_t("notifications|enable_prompt_toast_title")}
95-
</Heading>
96-
</div>
97-
}
90+
header={_t("notifications|enable_prompt_toast_title")}
9891
/**
9992
* Need to rename this CSS class to something more generic
10093
* Will be done once all the panels are using a similar layout

‎src/components/structures/RightPanel.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
3333
import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState";
3434
import { Action } from "../../dispatcher/actions";
3535
import { XOR } from "../../@types/common";
36-
import { RightPanelTabs } from "../views/right_panel/RightPanelTabs";
3736
import ExtensionsCard from "../views/right_panel/ExtensionsCard";
3837

3938
interface BaseProps {
@@ -164,7 +163,6 @@ export default class RightPanel extends React.Component<Props, IState> {
164163
<MemberList
165164
roomId={roomId}
166165
key={roomId}
167-
hideHeaderButtons
168166
onClose={this.onClose}
169167
searchQuery={this.state.searchQuery}
170168
onSearchQueryChanged={this.onSearchQueryChanged}
@@ -313,7 +311,6 @@ export default class RightPanel extends React.Component<Props, IState> {
313311

314312
return (
315313
<aside className="mx_RightPanel" id="mx_RightPanel">
316-
{phase && <RightPanelTabs room={this.props.room} phase={phase} />}
317314
{card}
318315
</aside>
319316
);

‎src/components/structures/ThreadPanel.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,6 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
193193
}}
194194
>
195195
<BaseCard
196-
hideHeaderButtons
197196
header={
198197
hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
199198
}

‎src/components/views/right_panel/BaseCard.tsx

+18-5
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@ interface IProps {
3838
children: ReactNode;
3939
}
4040

41+
function closeRightPanel(ev: MouseEvent<HTMLButtonElement>): void {
42+
ev.preventDefault();
43+
ev.stopPropagation();
44+
RightPanelStore.instance.popCard();
45+
}
46+
4147
const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
4248
(
4349
{
@@ -81,12 +87,12 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
8187
}
8288

8389
let closeButton;
84-
if (onClose && !hideHeaderButtons) {
90+
if (!hideHeaderButtons) {
8591
closeButton = (
8692
<IconButton
8793
size="28px"
8894
data-testid="base-card-close-button"
89-
onClick={onClose}
95+
onClick={onClose ?? closeRightPanel}
9096
ref={closeButtonRef}
9197
tooltip={closeLabel ?? _t("action|close")}
9298
subtleBackground
@@ -116,9 +122,16 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
116122
<div className="mx_BaseCard_header">
117123
{backButton}
118124
{typeof header === "string" ? (
119-
<Text size="md" weight="medium" className="mx_BaseCard_header_title">
120-
{header}
121-
</Text>
125+
<div className="mx_BaseCard_header_title">
126+
<Text
127+
size="md"
128+
weight="medium"
129+
className="mx_BaseCard_header_title_heading"
130+
role="heading"
131+
>
132+
{header}
133+
</Text>
134+
</div>
122135
) : (
123136
(header ?? <div className="mx_BaseCard_header_spacer" />)
124137
)}

‎src/components/views/right_panel/ExtensionsCard.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -157,13 +157,6 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
157157
}
158158
};
159159

160-
// The button is in the header to keep it outside the scrollable region
161-
const header = (
162-
<Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
163-
{_t("right_panel|add_integrations")}
164-
</Button>
165-
);
166-
167160
let body: JSX.Element;
168161
if (realApps.length < 1) {
169162
body = (
@@ -197,7 +190,10 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
197190
}
198191

199192
return (
200-
<BaseCard header={header} className="mx_ExtensionsCard" onClose={onClose} hideHeaderButtons>
193+
<BaseCard header={_t("right_panel|extensions_button")} className="mx_ExtensionsCard" onClose={onClose}>
194+
<Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
195+
{_t("right_panel|add_integrations")}
196+
</Button>
201197
{body}
202198
</BaseCard>
203199
);

‎src/components/views/right_panel/PinnedMessagesCard.tsx

+1-8
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { PinnedEventTile } from "../rooms/PinnedEventTile";
2020
import { useRoomState } from "../../../hooks/useRoomState";
2121
import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
2222
import { ReadPinsEventId } from "./types";
23-
import Heading from "../typography/Heading";
2423
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
2524
import { filterBoolean } from "../../../utils/arrays";
2625
import Modal from "../../../Modal";
@@ -86,13 +85,7 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe
8685

8786
return (
8887
<BaseCard
89-
header={
90-
<div className="mx_BaseCard_header_title">
91-
<Heading size="4" className="mx_BaseCard_header_title_heading">
92-
{_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
93-
</Heading>
94-
</div>
95-
}
88+
header={_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })}
9689
className="mx_PinnedMessagesCard"
9790
onClose={onClose}
9891
>

0 commit comments

Comments
 (0)