sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Tweak new user menu design (#33444)

Browse Source 
* Tweak new user menu design

* Update screenshots

* More screenshots

* Add story with no avatar

* add story to test

* Expand the menu so it actually shows what it's supposed to show

* Use the open parameter

which is the param to open the menu

* snapshot

* Add test for normal open menu version

* Move menu to the right of the avatar

and make it appear on top of the display name

* Fix user menu layout

* screenshots

* snapshot

* screenshots

* more screenshots

* Shift toasts to the left slightly

So they completely cover the display name of the user menu when
it's expanded. Also down slightly so they're level with the user menu.

* Tweak toast border radius & position

to match & sit on top of the user menu

* Close toasts in cider tests

* Only close the toast if it's actually there

* Fix some toasts to be dismissed & update screenshots

more to come though

* Make closeKeyStorageToast actually optional

* Fix some more toasts & races

* Screenshots again again (again)

* More screenshots

* Convert to rejectToast

* Fix toast rejectors to not wait and update screenshots

* Apparently 1ms is not long enough
This commit is contained in:
David Baker
2026-05-19 13:10:14 +00:00
committed by GitHub
parent 00ccc97c79
commit 0140563b64
46 changed files with 1011 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/e2e/composer/CIDER.spec.ts
+5 -1
View File
@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
import { test, expect } from "../../element-web-test";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { getSampleFilePath } from "../../sample-files";
@@ -28,7 +30,9 @@ test.describe("Composer", () => {
},
});
test.beforeEach(async ({ room }) => {}); // trigger room fixture
test.beforeEach(async ({ app, room /* trigger room fixture */ }) => {
await rejectToastIfExists(app.page, "Notifications");
});
test.describe("CIDER", () => {
test("sends a message when you click send or press Enter", async ({ page }) => {
apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts
+8
View File
@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
import type { Preset, RoomMemberEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { expect, test } from "../../element-web-test";
import {
@@ -118,6 +120,9 @@ test.describe("Cryptography", function () {
user: alice,
bot: bob,
}) => {
await rejectToastIfExists(page, "Verify this device");
await rejectToastIfExists(page, "Notifications");
// Bob creates an encrypted room and sends a message to it. He then invites Alice
const roomId = await bob.evaluate(
async (client, { alice }) => {
@@ -224,6 +229,9 @@ test.describe("Cryptography", function () {
user: alice,
bot: bob,
}) => {
await rejectToastIfExists(page, "Verify this device");
await rejectToastIfExists(page, "Notifications");
// Bob:
// - creates an encrypted room,
// - invites Alice,
apps/web/playwright/e2e/room_options/marked_unread.spec.ts
+4
View File
@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
import { test, expect } from "../../element-web-test";
import { isDendrite } from "../../plugins/homeserver/dendrite";
@@ -46,6 +48,8 @@ test.describe("Mark as Unread", () => {
// navigate away from the room again
await page.goto("/#/room/" + dummyRoomId);
await rejectToastIfExists(page, "Verify this device");
const roomTile = page.getByLabel(TEST_ROOM_NAME);
await roomTile.click({ button: "right" });
await page.getByRole("menuitem", { name: "Mark as unread" }).click();
apps/web/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
+1
View File
@@ -69,6 +69,7 @@ test.describe("Appearance user settings tab", () => {
{ tag: "@screenshot" },
async ({ page, app, user, util }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
const roomId = await util.createAndDisplayRoom();
apps/web/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
+11
View File
@@ -28,6 +28,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
{ tag: "@screenshot" },
async ({ util, page }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
// Open the space panel
await util.expandSpacePanel();
@@ -41,6 +42,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
{ tag: "@screenshot" },
async ({ room1, util, app, page }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
// No indicator should be shown
await util.assertNoTacIndicator();
@@ -61,6 +63,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
page,
}) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);
@@ -78,6 +81,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
page,
}) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.goTo(room1);
await util.receiveMessages(room1, [
@@ -101,6 +105,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
{ tag: "@screenshot" },
async ({ room1, room2, util, msg, user, app, page }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.goTo(room2);
await util.populateThreads(room1, room2, msg, user);
@@ -124,6 +129,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
{ tag: "@screenshot" },
async ({ room1, room2, util, msg, user, app, page }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.goTo(room2);
await util.populateThreads(room1, room2, msg, user);
@@ -150,6 +156,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
test("should order by recency after notification level", async ({ room1, room2, util, msg, user, app, page }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.goTo(room2);
await util.populateThreads(room1, room2, msg, user, false);
@@ -163,6 +170,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
test("should block the Spotlight to open when the TAC is opened", async ({ util, page, app }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
const toggleSpotlight = () => page.keyboard.press(`${CommandOrControl}+k`);
@@ -180,6 +188,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
test("should have the correct hover state", { tag: "@screenshot" }, async ({ util, page, app }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.hoverTacButton();
await expect(util.getSpacePanel()).toMatchScreenshot("tac-hovered.png");
@@ -192,6 +201,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
test("should mark all threads as read", { tag: "@screenshot" }, async ({ room1, room2, util, msg, page, app }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);
@@ -214,6 +224,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
page,
}) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);