nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix extensions panel style (#29273)

Browse Source 
* Stop empty state scrolling

* Fix separator inset, separator vertical spacing and margin above the add extensions button

* Add screenshot for add extensions button spacing

* Add variable for add extensions overlap

* use data-testid

* Fix snapshots
This commit is contained in:
David Langley
2025-05-14 18:22:32 +01:00
committed by GitHub
parent 69c1a8cd1c
commit 76d7f6ab43
6 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
playwright/e2e/right-panel/right-panel.spec.ts
View File

@@ -81,10 +81,12 @@ test.describe("RightPanel", () => {
await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-leave-room.png"); await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-leave-room.png");
}); });
test("should handle clicking add widgets", async ({ page, app }) => { test("should handle clicking add widgets", { tag: "@screenshot" }, async ({ page, app }) => {
await viewRoomSummaryByName(page, app, ROOM_NAME); await viewRoomSummaryByName(page, app, ROOM_NAME);
await page.getByRole("menuitem", { name: "Extensions" }).click(); await page.getByRole("menuitem", { name: "Extensions" }).click();
await expect(page.getByTestId("right-panel")).toMatchScreenshot("with-extensions.png");
await page.getByRole("button", { name: "Add extensions" }).click(); await page.getByRole("button", { name: "Add extensions" }).click();
await expect(page.locator(".mx_IntegrationManager")).toBeVisible(); await expect(page.locator(".mx_IntegrationManager")).toBeVisible();
}); });

BIN
playwright/snapshots/right-panel/right-panel.spec.ts/with-extensions-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

14
res/css/views/right_panel/_ExtensionsCard.pcss
View File

@@ -7,12 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_ExtensionsCard { .mx_ExtensionsCard {
--cpd-separator-inset: var(--cpd-space-4x); --cpd-separator-spacing: var(--cpd-space-6x);
--cpd-separator-spacing: var(--cpd-space-4x); --AddExtension-overlap: -76px;
.mx_AutoHideScrollbar { .mx_AutoHideScrollbar {
padding: 0 var(--cpd-space-4x); padding: 0 var(--cpd-space-4x);
margin-top: var(--cpd-space-3x); margin-top: var(--cpd-space-6x);
box-sizing: border-box; box-sizing: border-box;
/* Styling for the "Add extensions" button */ /* Styling for the "Add extensions" button */
@@ -128,6 +127,11 @@ Please see LICENSE files in the repository root for full details.
.mx_EmptyState::before { .mx_EmptyState::before {
/* Overlap the Add extensions button */ /* Overlap the Add extensions button */
top: -76px; top: var(--AddExtension-overlap);
}
.mx_EmptyState {
/* Stop empty state scrolling */
height: calc(100% + var(--AddExtension-overlap));
} }
} }

2
src/components/structures/RightPanel.tsx
View File

@@ -282,7 +282,7 @@ export default class RightPanel extends React.Component<Props, IState> {
} }
return ( return (
<aside className="mx_RightPanel" id="mx_RightPanel"> <aside className="mx_RightPanel" id="mx_RightPanel" data-testid="right-panel">
{card} {card}
</aside> </aside>
); );

1
test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

@@ -2121,6 +2121,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
> >
<aside <aside
class="mx_RightPanel" class="mx_RightPanel"
data-testid="right-panel"
id="mx_RightPanel" id="mx_RightPanel"
> >
<div <div

1
test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View File

@@ -4,6 +4,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
<DocumentFragment> <DocumentFragment>
<aside <aside
class="mx_RightPanel" class="mx_RightPanel"
data-testid="right-panel"
id="mx_RightPanel" id="mx_RightPanel"
> >
<div <div