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

Improve icon rendering in iconized context menu (#31458)

Browse Source 
* Fix composer button visibility in contrast colour mode

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

* Iterate

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

* Update snapshot

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

* Iterate

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

* Iterate

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

* Update test

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

* Simplify

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

* Update snapshots

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

* Update screenshots

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

* Update screenshots

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

* Update screenshot

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

* Improve icon rendering in iconized context menu

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

* Iterate

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

* Add test

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

* Delint

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-09 15:10:42 +00:00
committed by GitHub
parent 4fda167c11
commit efe59ff35f
37 changed files with 440 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
test/unit-tests/components/views/context_menus/DeviceContextMenu-test.tsx Normal file
View File

@@ -0,0 +1,39 @@
/*
Copyright 2025 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { render } from "jest-matrix-react";
import React from "react";
import { clearAllModals } from "../../../../test-utils";
import DeviceContextMenu from "../../../../../src/components/views/context_menus/DeviceContextMenu.tsx";
import MediaDeviceHandler from "../../../../../src/MediaDeviceHandler.ts";
describe("DeviceContextMenu", () => {
afterEach(async () => {
await clearAllModals();
});
it("renders a menu with the selected device checked", async () => {
jest.spyOn(MediaDeviceHandler, "getDevices").mockResolvedValue({
videoinput: [
{ deviceId: "A", label: "Camera 1" } as MediaDeviceInfo,
{ deviceId: "B", label: "Camera 2" } as MediaDeviceInfo,
{ deviceId: "C", label: "Camera 3" } as MediaDeviceInfo,
],
audioinput: [],
audiooutput: [],
});
jest.spyOn(MediaDeviceHandler, "getDevice").mockReturnValue("B");
const { container, findByLabelText } = render(
<DeviceContextMenu deviceKinds={["videoinput"]} onFinished={jest.fn()} mountAsChild />,
);
await expect(findByLabelText("Camera 2")).resolves.toBeChecked();
expect(container).toMatchSnapshot();
});
});

85
test/unit-tests/components/views/context_menus/__snapshots__/DeviceContextMenu-test.tsx.snap Normal file
View File

@@ -0,0 +1,85 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`DeviceContextMenu renders a menu with the selected device checked 1`] = `
<div>
<div
class="mx_ContextualMenu_wrapper"
>
<div
class="mx_ContextualMenu_background"
/>
<div
class="mx_ContextualMenu"
role="menu"
>
<ul
class="mx_IconizedContextMenu mx_DeviceContextMenu mx_IconizedContextMenu_compact"
role="none"
>
<div
class="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst"
>
<div>
<span
class="mx_IconizedContextMenu_optionList_label"
>
Cameras
</span>
</div>
<div
aria-checked="false"
aria-label="Camera 1"
class="mx_AccessibleButton mx_IconizedContextMenu_item"
role="menuitemradio"
tabindex="0"
>
<span
class="mx_IconizedContextMenu_label"
>
Camera 1
</span>
</div>
<div
aria-checked="true"
aria-label="Camera 2"
class="mx_AccessibleButton mx_IconizedContextMenu_item mx_IconizedContextMenu_active"
role="menuitemradio"
tabindex="-1"
>
<span
class="mx_IconizedContextMenu_label"
>
Camera 2
</span>
<svg
class="mx_IconizedContextMenu_checked"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
<div
aria-checked="false"
aria-label="Camera 3"
class="mx_AccessibleButton mx_IconizedContextMenu_item"
role="menuitemradio"
tabindex="-1"
>
<span
class="mx_IconizedContextMenu_label"
>
Camera 3
</span>
</div>
</div>
</ul>
</div>
</div>
</div>
`;

34
test/unit-tests/components/views/context_menus/__snapshots__/RoomGeneralContextMenu-test.tsx.snap
View File

@@ -32,9 +32,20 @@ exports[`RoomGeneralContextMenu renders an empty context menu for archived rooms
role="menuitem"
tabindex="-1"
>
<span
class="mx_IconizedContextMenu_icon mx_RoomGeneralContextMenu_iconSignOut"
/>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 13q.424 0 .713-.287A.97.97 0 0 0 15 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 14 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 13 12q0 .424.287.713.288.287.713.287"
/>
<path
d="M10.385 21.788A1 1 0 0 1 10 21V3a1.003 1.003 0 0 1 1.242-.97l8 2A1 1 0 0 1 20 5v14a1 1 0 0 1-.758.97l-8 2a1 1 0 0 1-.857-.182M18 5.781l-6-1.5v15.438l6-1.5zM9 6H7v12h2v2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2z"
/>
</svg>
<span
class="mx_IconizedContextMenu_label"
>
@@ -80,9 +91,20 @@ exports[`RoomGeneralContextMenu renders the default context menu 1`] = `
role="menuitem"
tabindex="-1"
>
<span
class="mx_IconizedContextMenu_icon mx_RoomGeneralContextMenu_iconSignOut"
/>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 13q.424 0 .713-.287A.97.97 0 0 0 15 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 14 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 13 12q0 .424.287.713.288.287.713.287"
/>
<path
d="M10.385 21.788A1 1 0 0 1 10 21V3a1.003 1.003 0 0 1 1.242-.97l8 2A1 1 0 0 1 20 5v14a1 1 0 0 1-.758.97l-8 2a1 1 0 0 1-.857-.182M18 5.781l-6-1.5v15.438l6-1.5zM9 6H7v12h2v2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2z"
/>
</svg>
<span
class="mx_IconizedContextMenu_label"
>

61
test/unit-tests/components/views/context_menus/__snapshots__/SpaceContextMenu-test.tsx.snap
View File

@@ -34,9 +34,17 @@ exports[`<SpaceContextMenu /> renders menu correctly 1`] = `
role="menuitem"
tabindex="0"
>
<span
class="mx_IconizedContextMenu_icon mx_SpacePanel_iconHome"
/>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0"
/>
</svg>
<span
class="mx_IconizedContextMenu_label"
>
@@ -49,9 +57,17 @@ exports[`<SpaceContextMenu /> renders menu correctly 1`] = `
role="menuitem"
tabindex="-1"
>
<span
class="mx_IconizedContextMenu_icon mx_SpacePanel_iconExplore"
/>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
/>
</svg>
<span
class="mx_IconizedContextMenu_label"
>
@@ -64,9 +80,19 @@ exports[`<SpaceContextMenu /> renders menu correctly 1`] = `
role="menuitem"
tabindex="-1"
>
<span
class="mx_IconizedContextMenu_icon mx_SpacePanel_iconPreferences"
/>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.5 2h11a4.5 4.5 0 1 1 0 9h-11a4.5 4.5 0 0 1 0-9m0 2h7.258A4.5 4.5 0 0 0 13 6.5c0 .925.28 1.785.758 2.5H6.5a2.5 2.5 0 0 1 0-5M15 6.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m-13 11A4.5 4.5 0 0 1 6.5 13h11a4.5 4.5 0 1 1 0 9h-11q-.233 0-.46-.023A4.5 4.5 0 0 1 2 17.5m8.242-2.5H17.5a2.5 2.5 0 0 1 0 5h-7.258A4.5 4.5 0 0 0 11 17.5c0-.925-.28-1.785-.758-2.5M6.5 15a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5"
fill-rule="evenodd"
/>
</svg>
<span
class="mx_IconizedContextMenu_label"
>
@@ -80,9 +106,20 @@ exports[`<SpaceContextMenu /> renders menu correctly 1`] = `
role="menuitem"
tabindex="-1"
>
<span
class="mx_IconizedContextMenu_icon mx_SpacePanel_iconLeave"
/>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 13q.424 0 .713-.287A.97.97 0 0 0 15 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 14 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 13 12q0 .424.287.713.288.287.713.287"
/>
<path
d="M10.385 21.788A1 1 0 0 1 10 21V3a1.003 1.003 0 0 1 1.242-.97l8 2A1 1 0 0 1 20 5v14a1 1 0 0 1-.758.97l-8 2a1 1 0 0 1-.857-.182M18 5.781l-6-1.5v15.438l6-1.5zM9 6H7v12h2v2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2z"
/>
</svg>
<span
class="mx_IconizedContextMenu_label"
>