From 5324834b47599d6bf079246b939e094b66ebe681 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 9 Dec 2025 11:43:02 +0000 Subject: [PATCH] Fix e2e icon rendering (#31454) * Fix e2e icon rendering Regressed by change to compound icons, due to it relying on a hack of rendering icons atop each other to draw a background. Also fixes a nested tooltip which became annoying during testing 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> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../composer-e2e-icon-linux.png | Bin 322 -> 315 bytes res/css/views/rooms/_E2EIcon.pcss | 54 ++------ res/css/views/rooms/_MessageComposer.pcss | 71 ++-------- src/components/views/rooms/E2EIcon.tsx | 54 +++----- .../views/rooms/MessageComposer.tsx | 122 ++++++++--------- .../wysiwyg_composer/SendWysiwygComposer.tsx | 2 +- .../__snapshots__/RoomView-test.tsx.snap | 52 +++++--- .../UntrustedDeviceDialog-test.tsx.snap | 34 +++-- .../VerificationRequestDialog-test.tsx.snap | 38 ++++-- .../__snapshots__/Users-test.tsx.snap | 125 ++++++++++++++---- .../SendWysiwygComposer-test.tsx | 9 +- 11 files changed, 306 insertions(+), 255 deletions(-) diff --git a/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png b/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png index f954734eb1efd378151eecdb4585f37012a84da2..1adc91faf08043425ec2886481cf4e04da913dbb 100644 GIT binary patch delta 301 zcmV+|0n+}$0=oi`7k>;00ssI2*%!;O0002+NklVS% zL(WM=a4YEd_X|=!(~IIZkwDOiX97ASQ>Q{w5eB+nhhOrw>*Jp8HvyH2G1lu0a^?Jd z0N&)dZ7ruzG%M7sNm+*n0y+UI=k&5dNsFuO3x6+xAhlp3X0o&X3D$74$_?5WDy)Z+ zZjGMSk$=|m0VV(d|NpVT227k>>10ssI25=$5r0002@Nklxe2D_3h7};1Eltl(v7$q!98RRQbRul5kbL;AH-{Sp;(>ee1>z;e> z!6}O3{1eV$Ap{y9Hn~9uBt=iqqEOL32FFd0yKKMRUoYr}OMk5|c|#EWKtwKae?1vf zM0~*|Ujqpj)(j$OFoSq~++oT6?S)8-fQPptNw1dt^*@l95Q6B@7*3h;`F2Tk>Y$Vm zBII>?seE$Sg5GeyYRpE^G|H67NhzBXCNu$*w!080Zn78Lf$t?Stm2D?Nh|VCP`%|m z-E9hSe$^jys4aA~kFnX^8vp?R|3=n?3IG5A21!IgR09Cac}zoMz margins. */ - /* really we should be mixing in markdown-body from github-markdown-css instead */ - > :first-child { - margin-top: 0 !important; - } - - > :last-child { - margin-bottom: 0 !important; - } -} - -@keyframes visualbell { - from { - background-color: $visual-bell-bg-color; - } - to { - background-color: $background; - } -} - -.mx_MessageComposer_input_error { - animation: 0.2s visualbell; -} - .mx_MessageComposer_button_highlight { @mixin composerButtonHighLight; } @@ -198,10 +155,6 @@ Please see LICENSE files in the repository root for full details. z-index: 2; } } - - &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before { - background-color: $alert; - } } .mx_MessageComposer_wysiwyg { .mx_MessageComposer_wrapper { @@ -237,10 +190,6 @@ Please see LICENSE files in the repository root for full details. z-index: 2; } } - - &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before { - background-color: $alert; - } } } @@ -322,6 +271,10 @@ Please see LICENSE files in the repository root for full details. padding: 0 0 0 25px; } + .mx_MessageComposer_e2eIconWrapper { + left: 0; + } + &:not(.mx_MessageComposer_e2eStatus) { .mx_MessageComposer_wrapper { padding: 0; diff --git a/src/components/views/rooms/E2EIcon.tsx b/src/components/views/rooms/E2EIcon.tsx index cd8aeee55a..72b4b36bd3 100644 --- a/src/components/views/rooms/E2EIcon.tsx +++ b/src/components/views/rooms/E2EIcon.tsx @@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details. import React, { type JSX, type ComponentProps, type CSSProperties } from "react"; import classNames from "classnames"; import { Tooltip } from "@vector-im/compound-web"; +import { ErrorSolidIcon, ShieldIcon, LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t, _td, type TranslationKey } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; @@ -32,31 +33,20 @@ interface Props { onClick?: () => void; hideTooltip?: boolean; tooltipPlacement?: ComponentProps["placement"]; - bordered?: boolean; status: E2EStatus; isUser?: boolean; } -const E2EIcon: React.FC = ({ - isUser, - status, - className, - size, - onClick, - hideTooltip, - tooltipPlacement, - bordered, -}) => { - const classes = classNames( - { - mx_E2EIcon: true, - mx_E2EIcon_bordered: bordered, - mx_E2EIcon_warning: status === E2EStatus.Warning, - mx_E2EIcon_normal: status === E2EStatus.Normal, - mx_E2EIcon_verified: status === E2EStatus.Verified, - }, - className, - ); +const icons: Record = { + [E2EStatus.Warning]: , + [E2EStatus.Normal]: , + [E2EStatus.Verified]: , +}; + +const E2EIcon: React.FC = ({ isUser, status, className, size, onClick, hideTooltip, tooltipPlacement }) => { + const icon = icons[status]; + + const classes = classNames("mx_E2EIcon", className); let e2eTitle: TranslationKey | undefined; if (isUser) { @@ -74,19 +64,17 @@ const E2EIcon: React.FC = ({ let content: JSX.Element; if (onClick) { - content = ; + content = ( + + {icon} + + ); } else { - // Verified and warning icon have a transparent cutout, so add a white background. - // The normal icon already has the correct shape and size, so reuse that. - if (status === E2EStatus.Verified || status === E2EStatus.Warning) { - content = ( -
-
-
- ); - } else { - content =
; - } + content = ( +
+ {icon} +
+ ); } if (!e2eTitle || hideTooltip) { diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 80cda285c8..d5ec1872f9 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -533,8 +533,8 @@ export class MessageComposer extends React.Component { @@ -544,7 +544,12 @@ export class MessageComposer extends React.Component { } else if (this.props.e2eStatus !== E2EStatus.Normal) { leftIcon = (
- +
); } @@ -587,14 +592,20 @@ export class MessageComposer extends React.Component { ); } + const isTooltipOpen = Boolean(this.state.recordingTimeLeftSeconds); + const secondsLeft = this.state.recordingTimeLeftSeconds + ? Math.round(this.state.recordingTimeLeftSeconds) + : 0; controls.push( - , + + + , ); } else if (this.context.tombstone) { const replacementRoomId = this.context.tombstone.getContent()["replacement_room"]; @@ -636,9 +647,6 @@ export class MessageComposer extends React.Component { ); } - const isTooltipOpen = Boolean(this.state.recordingTimeLeftSeconds); - const secondsLeft = this.state.recordingTimeLeftSeconds ? Math.round(this.state.recordingTimeLeftSeconds) : 0; - const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null; @@ -663,55 +671,51 @@ export class MessageComposer extends React.Component { }); return ( - -
-
- - -
- {leftIcon} - {composer} -
- {controls} - {canSendMessages && ( - - )} - {showSendButton && ( - - )} -
+
+
+ + +
+ {leftIcon} + {composer} +
+ {controls} + {canSendMessages && ( + + )} + {showSendButton && ( + + )}
- +
); } } diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx index e120a76c28..dac930e6e1 100644 --- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx @@ -68,7 +68,7 @@ export default function SendWysiwygComposer({ /> ); } else if (e2eStatus !== E2EStatus.Normal) { - leftIcon = ; + leftIcon = ; } return ( diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap index cd276bbed9..1a0d7722b2 100644 --- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -363,13 +363,13 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = >
-
+ + +
@@ -3264,13 +3276,13 @@ exports[`RoomView video rooms should render joined video room view 1`] = ` > should display the dialog for the device of a id="mx_BaseDialog_title" >
-
+ + +
Not Trusted @@ -102,13 +111,22 @@ exports[` should display the dialog for the device of t id="mx_BaseDialog_title" >
-
+ + +
Not Trusted diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap index 9cf96c255c..54d661c1a8 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap @@ -32,13 +32,24 @@ exports[`VerificationRequestDialog After scanning QR, shows confirmation dialog Check again on your other device to finish verification.

-
+ + +
-
+ + +
should render a single device - signed by owner 1`] = ` Verification status:
+ > + + + +
Signed by owner @@ -130,12 +143,21 @@ exports[` should render a single device - unsigned 1`] = ` Verification status:
-
+ + +
Not signed by owner @@ -225,12 +247,23 @@ exports[` should render a single device - verified by cross-signing 1`] Verification status:
-
+ + +
Verified by cross-signing @@ -323,12 +356,23 @@ exports[` should render a single user 1`] = ` Verification status:
-
+ + +
Verified @@ -344,12 +388,23 @@ exports[` should render a single user 1`] = ` class="mx_DevTools_button" >
-
+ + +
VERIFIED @@ -359,9 +414,22 @@ exports[` should render a single user 1`] = ` class="mx_DevTools_button" >
+ > + + + +
SIGNED @@ -370,12 +438,21 @@ exports[` should render a single user 1`] = ` class="mx_DevTools_button" >
-
+ + +
UNSIGNED diff --git a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx index a9a66d72f3..c38b95a1a5 100644 --- a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx +++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx @@ -340,7 +340,14 @@ describe("SendWysiwygComposer", () => { const leftIcon = screen.getByTestId("e2e-icon"); // Then expect(leftIcon).toBeInTheDocument(); - expect(leftIcon).toHaveClass(expectedClass ? `mx_E2EIcon ${expectedClass}` : `mx_E2EIcon`); + expect(leftIcon).toHaveClass("mx_E2EIcon"); + if (expectedClass) { + // eslint-disable-next-line jest/no-conditional-expect + expect(leftIcon.querySelector("svg")).toHaveClass(expectedClass); + } else { + // eslint-disable-next-line jest/no-conditional-expect + expect(leftIcon.querySelector("svg")).not.toBeInTheDocument(); + } }); }, );