diff --git a/.stylelintrc.js b/.stylelintrc.js index 3244d122c5..2cbebc0472 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -56,7 +56,6 @@ module.exports = { { from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" }, { from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" }, { from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" }, - { from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" }, { from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" }, { from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" }, { from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" }, diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/default-auto.png new file mode 100644 index 0000000000..8a8c8bd9b0 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/has-children-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/has-children-auto.png new file mode 100644 index 0000000000..9c397d3a2b Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/has-children-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/has-lock-solid-icon-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/has-lock-solid-icon-auto.png new file mode 100644 index 0000000000..3013eba1b4 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/has-lock-solid-icon-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/is-crypto-event-bubble-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/is-crypto-event-bubble-auto.png new file mode 100644 index 0000000000..d7af848ce2 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/EventTileBubble/EventTileBubble.stories.tsx/is-crypto-event-bubble-auto.png differ diff --git a/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.module.css b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.module.css new file mode 100644 index 0000000000..40c6156ba8 --- /dev/null +++ b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.module.css @@ -0,0 +1,51 @@ +/* + * Copyright 2026 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. + */ + +.container { + background-color: var(--cpd-color-bg-subtle-secondary); + padding: var(--cpd-space-3x); + border-radius: 8px; + /* Reserve space for external timestamps, but also cap the width */ + /* Legacy variable: --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */ + /* max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); */ + max-width: min(calc(100% - 2 * 46px), 600px); + box-sizing: border-box; + display: grid; + grid-template-columns: 24px minmax(0, 1fr) min-content min-content; + + svg { + position: relative; + grid-column: 1; + grid-row: 1 / 3; + width: 16px; + height: 16px; + content: ""; + inset: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + margin-top: var(--cpd-space-1x); + } + + .title, + .subtitle { + grid-column: 2; + overflow-wrap: break-word; + min-inline-size: 50px; + } + + .title { + font-weight: var(--cpd-font-weight-semibold); + font-size: var(--cpd-font-size-body-md); + grid-row: 1; + } + + .subtitle { + font-size: var(--cpd-font-size-body-sm); + grid-row: 2; + } +} diff --git a/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx new file mode 100644 index 0000000000..9ad126da3c --- /dev/null +++ b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx @@ -0,0 +1,49 @@ +/* + * Copyright 2026 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 React from "react"; +import { LockSolidIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; + +import type { Meta, StoryFn } from "@storybook/react-vite"; +import { EventTileBubble } from "./EventTileBubble"; + +export default { + title: "Event/EventTileBubble", + component: EventTileBubble, + tags: ["autodocs"], + args: { + icon: , + title: "Title goes here", + subtitle: "Subtitle goes here", + className: "custom-class", + }, +} as Meta; + +const Template: StoryFn = (args) => ; + +export const Default = Template.bind({}); + +export const HasLockSolidIcon = Template.bind({}); +HasLockSolidIcon.args = { + className: undefined, + icon: , + children: undefined, +}; + +export const HasChildren = Template.bind({}); +HasChildren.args = { + className: undefined, + children:
children
, +}; + +export const IsCryptoEventBubble = Template.bind({}); +IsCryptoEventBubble.args = { + className: undefined, + icon: , + title: "Encryption enabled", + subtitle: "Messages here are end-to-end encrypted. Verify XYZ in their profile - tap on their profile picture.", +}; diff --git a/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.test.tsx b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.test.tsx new file mode 100644 index 0000000000..ecac4f6615 --- /dev/null +++ b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.test.tsx @@ -0,0 +1,37 @@ +/* + * Copyright 2026 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 "@test-utils"; +import { composeStories } from "@storybook/react-vite"; +import { describe, it, expect } from "vitest"; +import React from "react"; + +import * as stories from "./EventTileBubble.stories.tsx"; + +const { Default, HasLockSolidIcon, HasChildren, IsCryptoEventBubble } = composeStories(stories); + +describe("EventTileBubble", () => { + it("renders the event tile bubble", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders the event tile bubble with icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders the event tile bubble with children", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders the event tile bubble as crypto event bubble", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.tsx b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.tsx new file mode 100644 index 0000000000..7890e62302 --- /dev/null +++ b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.tsx @@ -0,0 +1,64 @@ +/* + * Copyright 2026 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 React, { type JSX, type ReactNode } from "react"; +import classNames from "classnames"; + +import styles from "./EventTileBubble.module.css"; + +export interface EventTileBubbleProps { + /** + * Icon rendered at the start of the bubble. + */ + icon: JSX.Element; + /** + * Main title text for the bubble. + */ + title: string; + /** + * Optional subtitle rendered beneath the title. + */ + subtitle?: ReactNode; + /** + * Optional extra class name for the container. + */ + className?: string; + /** + * Optional children rendered between subtitle and timestamp. + */ + children?: JSX.Element; + /** + * Forwarded ref for the container element. + */ + ref?: React.RefObject; +} + +/** + * EventTileBubble renders a compact event tile with an icon, title, and optional subtitle/content. + * + * @example + * ```tsx + * } title="Room created" /> + * ``` + */ +export function EventTileBubble({ + icon, + title, + subtitle, + className, + children, + ref, +}: EventTileBubbleProps): JSX.Element { + return ( +
+ {icon} +
{title}
+ {subtitle &&
{subtitle}
} + {children} +
+ ); +} diff --git a/packages/shared-components/src/event-tiles/EventTileBubble/__snapshots__/EventTileBubble.test.tsx.snap b/packages/shared-components/src/event-tiles/EventTileBubble/__snapshots__/EventTileBubble.test.tsx.snap new file mode 100644 index 0000000000..ce96c45525 --- /dev/null +++ b/packages/shared-components/src/event-tiles/EventTileBubble/__snapshots__/EventTileBubble.test.tsx.snap @@ -0,0 +1,124 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`EventTileBubble > renders the event tile bubble 1`] = ` +
+
+ + + +
+ Title goes here +
+
+ Subtitle goes here +
+
+
+`; + +exports[`EventTileBubble > renders the event tile bubble as crypto event bubble 1`] = ` +
+
+ + + +
+ Encryption enabled +
+
+ Messages here are end-to-end encrypted. Verify XYZ in their profile - tap on their profile picture. +
+
+
+`; + +exports[`EventTileBubble > renders the event tile bubble with children 1`] = ` +
+
+ + + +
+ Title goes here +
+
+ Subtitle goes here +
+
+ children +
+
+
+`; + +exports[`EventTileBubble > renders the event tile bubble with icon 1`] = ` +
+
+ + + +
+ Title goes here +
+
+ Subtitle goes here +
+
+
+`; diff --git a/packages/shared-components/src/event-tiles/EventTileBubble/index.ts b/packages/shared-components/src/event-tiles/EventTileBubble/index.ts new file mode 100644 index 0000000000..e9f58fc469 --- /dev/null +++ b/packages/shared-components/src/event-tiles/EventTileBubble/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright 2026 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. + */ + +export { EventTileBubble, type EventTileBubbleProps } from "./EventTileBubble"; diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts index 270b805781..95c3d1994d 100644 --- a/packages/shared-components/src/index.ts +++ b/packages/shared-components/src/index.ts @@ -13,6 +13,7 @@ export * from "./audio/SeekBar"; export * from "./avatar/AvatarWithDetails"; export * from "./composer/Banner"; export * from "./crypto/SasEmoji"; +export * from "./event-tiles/EventTileBubble"; export * from "./event-tiles/TextualEventView"; export * from "./message-body/MediaBody"; export * from "./message-body/DecryptionFailureBodyView"; diff --git a/playwright/e2e/audio-player/audio-player.spec.ts b/playwright/e2e/audio-player/audio-player.spec.ts index d6f730b23b..28dd3b922d 100644 --- a/playwright/e2e/audio-player/audio-player.spec.ts +++ b/playwright/e2e/audio-player/audio-player.spec.ts @@ -23,6 +23,7 @@ const clickButtonReply = async (tile: Locator) => { }; test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => { + test.slow(); test.use({ displayName: "Hanako", }); @@ -100,35 +101,39 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => { .mx_MessageActionBar { display: none !important; } + /* Stabilize play button appearance in CI (disabled due to decoding) */ + button[aria-label="Play"] { + opacity: 1 !important; + } + button[aria-label="Play"] svg, + button[aria-label="Play"] path { + fill: magenta !important; + stroke: magenta !important; + } `, mask: [page.getByTestId("audio-player-seek")], + clip: undefined, }; // Take a snapshot of mx_EventTile_last on IRC layout - await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot( - `${detail.replaceAll(" ", "-")}-irc-layout.png`, - screenshotOptions, - ); + screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox(); + await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-irc-layout.png`, screenshotOptions); // Take a snapshot on modern/group layout await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group); const groupTile = page.locator(".mx_EventTile_last[data-layout='group']"); await groupTile.locator(".mx_MessageTimestamp").click(); await checkPlayerVisibility(groupTile); - await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot( - `${detail.replaceAll(" ", "-")}-group-layout.png`, - screenshotOptions, - ); + screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox(); + await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-group-layout.png`, screenshotOptions); // Take a snapshot on bubble layout await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); const bubbleTile = page.locator(".mx_EventTile_last[data-layout='bubble']"); await bubbleTile.locator(".mx_MessageTimestamp").click(); await checkPlayerVisibility(bubbleTile); - await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot( - `${detail.replaceAll(" ", "-")}-bubble-layout.png`, - screenshotOptions, - ); + screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox(); + await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-bubble-layout.png`, screenshotOptions); }; test.beforeEach(async ({ page, app, user }) => { diff --git a/playwright/e2e/composer/CIDER.spec.ts b/playwright/e2e/composer/CIDER.spec.ts index 55cb84f37a..d164a689e1 100644 --- a/playwright/e2e/composer/CIDER.spec.ts +++ b/playwright/e2e/composer/CIDER.spec.ts @@ -80,7 +80,15 @@ test.describe("Composer", () => { test.use({ viewport: { width: 1280, height: 720 } }); test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => { await app.getComposer(false).getByRole("button", { name: "Emoji" }).click(); - await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png"); + // Mask the background of the screenshot to avoid failing the test just because some + // other component have changed its rendering. + await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png", { + css: ` + .mx_ContextualMenu_background { + background-color: magenta !important; + } + `, + }); }); }); @@ -88,7 +96,15 @@ test.describe("Composer", () => { test.use({ viewport: { width: 1280, height: 360 } }); test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => { await app.getComposer(false).getByRole("button", { name: "Emoji" }).click(); - await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png"); + // Mask the background of the screenshot to avoid failing the test just because some + // other component have changed its rendering. + await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png", { + css: ` + .mx_ContextualMenu_background { + background-color: magenta !important; + } + `, + }); }); }); diff --git a/playwright/e2e/crypto/toasts.spec.ts b/playwright/e2e/crypto/toasts.spec.ts index 5e1dedfdc7..b67a43756f 100644 --- a/playwright/e2e/crypto/toasts.spec.ts +++ b/playwright/e2e/crypto/toasts.spec.ts @@ -37,7 +37,15 @@ test.describe("Key storage out of sync toast", () => { // playwright only evaluates the 'first()' call initially, not subsequent times it checks, so // it would always be checking the same toast, even if another one is now the first. await expect(page.getByRole("alert")).toHaveCount(2); - await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png"); + // Mask the background of the screenshot to avoid failing the test just because some + // other component have changed its rendering. + await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png", { + css: ` + .mx_ToastContainer { + background-color: magenta !important; + } + `, + }); await page.getByRole("button", { name: "Enter recovery key" }).click(); diff --git a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts index 84dc161bea..eb0f759652 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts @@ -37,6 +37,8 @@ test.describe("Room list", () => { }); test.describe("Room list", () => { + test.slow(); + test.beforeEach(async ({ page, app, user }) => { for (let i = 0; i < 30; i++) { await app.client.createRoom({ name: `room${i}` }); diff --git a/playwright/e2e/timeline/timeline.spec.ts b/playwright/e2e/timeline/timeline.spec.ts index b9df009df9..b4e927cdac 100644 --- a/playwright/e2e/timeline/timeline.spec.ts +++ b/playwright/e2e/timeline/timeline.spec.ts @@ -949,6 +949,10 @@ test.describe("Timeline", () => { await page.getByRole("textbox", { name: "Edit message" }).press("Enter"); const newTile = page.locator(".mx_EventTile"); + const codeBlock = newTile.locator(".mx_EventTile_pre_container"); + await expect(codeBlock).toBeVisible(); + await codeBlock.hover(); + await expect(newTile.locator(".mx_EventTile_copyButton")).toBeVisible(); await expect(newTile).toMatchScreenshot("edited-code-block.png", { css: ` .mx_MessageTimestamp { diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png index ad46ca44d5..a0aa6bebde 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png index d4c123d787..7866accb70 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png index 97097a3f28..26e8bf6449 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png index 5d240ebd76..ba5d27771e 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png index 2620b9cd20..b60332c1a1 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png index 6c09f076f9..29e61d6968 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png index 06f850704d..17d3ccbd10 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png index 5f4e409c3a..16d212bfe0 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png index 74060e2f42..76d9745d47 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png index 706ed77713..a15bd80ccf 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png index ac0c53994d..e136a01f3b 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png index 07534229d8..e0dfb3601a 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png index a3a1894eac..bcab07b3f5 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png index aa9956a50d..d55718a5ae 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png index 45a80c8ed5..1d0d8f6118 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png index b12365c9ac..226fc99f00 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png index 724bcb482f..06d5b6bde8 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png index 340015a06b..c843ff8d48 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ diff --git a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png index 3eeebe4fc5..93889d05e3 100644 Binary files a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png and b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png differ diff --git a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png index df75efd4c9..ffbbf10025 100644 Binary files a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png and b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png differ diff --git a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png index 211ce86cf1..8aa140d0d2 100644 Binary files a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png and b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png differ diff --git a/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png b/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png index 09db9d3b5c..5439a4cd5a 100644 Binary files a/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png and b/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png index ab42c30cd2..b39a8c82cb 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png index b69b5fc013..f9a865a0f4 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png index cb2e03ee47..cdb4586302 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png index 201253ca4d..bc78959225 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png index 1a0a852cd1..4b5c6ff7e9 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png index cf5e66851c..0ad4a0f191 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png index d9359dab70..10896ff87d 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png index 7c660888e6..2e02360ce9 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png index 63eb2da98f..e8c495e8e9 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png index f943108d73..f5dfef5714 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png index 912fa679b8..376f2d2d94 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png index 9fbe9c79e1..383a43bcae 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png index 330524a42b..d05b9938d5 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png index 7c660888e6..2e02360ce9 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png index 3684f57b11..4196fedfbf 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png index b36f3662eb..d0ec667834 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png index 74a2028787..8ab5bc91b7 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png index f6785d89c9..6b864dc8c0 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png index fdcbb28133..766a6fffa1 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png index 78196d2632..fa2d11b810 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png index df6aca3083..a2dc6d35bb 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png differ diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 0c977b79f3..736c535d65 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -22,6 +22,7 @@ Please see LICENSE files in the repository root for full details. --buttons-dialog-gap-row: $spacing-8; --buttons-dialog-gap-column: $spacing-8; --MBody-border-radius: 8px; + --EventTileBubble_margin-block: 10px; /* Expected z-indexes for dialogs: 4000 - Default wrapper index diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 60bca97841..a47fc0ac82 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -221,7 +221,6 @@ @import "./views/messages/_CreateEvent.pcss"; @import "./views/messages/_DateSeparator.pcss"; @import "./views/messages/_DisambiguatedProfile.pcss"; -@import "./views/messages/_EventTileBubble.pcss"; @import "./views/messages/_HiddenBody.pcss"; @import "./views/messages/_HiddenMediaPlaceholder.pcss"; @import "./views/messages/_JumpToDatePicker.pcss"; diff --git a/res/css/views/messages/_EventTileBubble.pcss b/res/css/views/messages/_EventTileBubble.pcss deleted file mode 100644 index 403a4b7c9b..0000000000 --- a/res/css/views/messages/_EventTileBubble.pcss +++ /dev/null @@ -1,59 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. - -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. -*/ - -.mx_EventTileBubble { - --EventTileBubble_margin-block: 10px; - - background-color: $dark-panel-bg-color; - padding: 10px; - border-radius: 8px; - /* Reserve space for external timestamps, but also cap the width */ - max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); - box-sizing: border-box; - display: grid; - grid-template-columns: 24px minmax(0, 1fr) min-content min-content; - - svg { - position: relative; - grid-column: 1; - grid-row: 1 / 3; - width: 16px; - height: 16px; - content: ""; - inset: 0; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - margin-top: $spacing-4; - } - - .mx_EventTileBubble_title, - .mx_EventTileBubble_subtitle { - grid-column: 2; - overflow-wrap: break-word; - min-inline-size: 50px; - } - - .mx_EventTileBubble_title { - font-weight: var(--cpd-font-weight-semibold); - font-size: $font-15px; - grid-row: 1; - } - - .mx_EventTileBubble_subtitle { - font-size: $font-12px; - grid-row: 2; - } - - .mx_MessageTimestamp { - grid-column: 4; - grid-row: 1 / 3; - align-self: center; - margin-left: $spacing-16; - } -} diff --git a/src/components/structures/WaitingForThirdPartyRoomView.tsx b/src/components/structures/WaitingForThirdPartyRoomView.tsx index 278af8c6c4..0b0e07bbeb 100644 --- a/src/components/structures/WaitingForThirdPartyRoomView.tsx +++ b/src/components/structures/WaitingForThirdPartyRoomView.tsx @@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details. import React, { type RefObject } from "react"; import { type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { EventTileBubble } from "@element-hq/web-shared-components"; import type ResizeNotifier from "../../utils/ResizeNotifier"; import ErrorBoundary from "../views/elements/ErrorBoundary"; import RoomHeader from "../views/rooms/RoomHeader/RoomHeader.tsx"; import ScrollPanel from "./ScrollPanel"; -import EventTileBubble from "../views/messages/EventTileBubble"; import NewRoomIntro from "../views/rooms/NewRoomIntro"; import { UnwrappedEventTile } from "../views/rooms/EventTile"; import { _t } from "../../languageHandler"; @@ -45,7 +45,7 @@ export const WaitingForThirdPartyRoomView: React.FC = ({ roomView, resize } - className="mx_cryptoEvent mx_cryptoEvent_icon" + className="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon" title={_t("room|waiting_for_join_title", { brand })} subtitle={_t("room|waiting_for_join_subtitle", { brand })} /> diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx index c931f19176..a8467e0519 100644 --- a/src/components/views/messages/EncryptionEvent.tsx +++ b/src/components/views/messages/EncryptionEvent.tsx @@ -6,13 +6,13 @@ 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 React, { type JSX, type Ref, type ReactNode } from "react"; +import React, { type JSX, type ReactNode } from "react"; import { type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { ErrorSolidIcon, LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { EventTileBubble } from "@element-hq/web-shared-components"; import type { RoomEncryptionEventContent } from "matrix-js-sdk/src/types"; import { _t } from "../../../languageHandler"; -import EventTileBubble from "./EventTileBubble"; import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import DMRoomMap from "../../../utils/DMRoomMap"; import { objectHasDiff } from "../../../utils/objects"; @@ -23,7 +23,7 @@ import { useIsEncrypted } from "../../../hooks/useIsEncrypted.ts"; interface IProps { mxEvent: MatrixEvent; timestamp?: JSX.Element; - ref?: Ref; + ref?: React.RefObject; } const EncryptionEvent = ({ mxEvent, timestamp, ref }: IProps): ReactNode => { @@ -60,11 +60,12 @@ const EncryptionEvent = ({ mxEvent, timestamp, ref }: IProps): ReactNode => { return ( } - className="mx_cryptoEvent mx_cryptoEvent_icon" + className="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon" title={stateEncrypted ? _t("common|state_encryption_enabled") : _t("common|encryption_enabled")} subtitle={subtitle} - timestamp={timestamp} - /> + > + {timestamp} + ); } @@ -72,23 +73,25 @@ const EncryptionEvent = ({ mxEvent, timestamp, ref }: IProps): ReactNode => { return ( } - className="mx_cryptoEvent mx_cryptoEvent_icon" + className="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon" title={_t("common|encryption_enabled")} subtitle={_t("timeline|m.room.encryption|disable_attempt")} - timestamp={timestamp} - /> + > + {timestamp} + ); } return ( } - className="mx_cryptoEvent" + className="mx_EventTileBubble mx_cryptoEvent" title={_t("timeline|m.room.encryption|disabled")} subtitle={_t("timeline|m.room.encryption|unsupported")} ref={ref} - timestamp={timestamp} - /> + > + {timestamp} + ); }; diff --git a/src/components/views/messages/EventTileBubble.tsx b/src/components/views/messages/EventTileBubble.tsx deleted file mode 100644 index 9a75f69d54..0000000000 --- a/src/components/views/messages/EventTileBubble.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2020 The Matrix.org Foundation C.I.C. - -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 React, { type JSX, type ReactNode, type Ref } from "react"; -import classNames from "classnames"; - -interface IProps { - className: string; - icon: JSX.Element; - title: string; - timestamp?: JSX.Element; - subtitle?: ReactNode; - children?: JSX.Element; - ref?: Ref; -} - -const EventTileBubble = ({ className, icon, title, timestamp, subtitle, children, ref }: IProps): JSX.Element => { - return ( -
- {icon} -
{title}
- {subtitle &&
{subtitle}
} - {children} - {timestamp} -
- ); -}; - -export default EventTileBubble; diff --git a/src/components/views/messages/MJitsiWidgetEvent.tsx b/src/components/views/messages/MJitsiWidgetEvent.tsx index 1f751af94a..a51fe6065e 100644 --- a/src/components/views/messages/MJitsiWidgetEvent.tsx +++ b/src/components/views/messages/MJitsiWidgetEvent.tsx @@ -9,10 +9,10 @@ Please see LICENSE files in the repository root for full details. import React, { type JSX } from "react"; import { type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { EventTileBubble } from "@element-hq/web-shared-components"; import { _t } from "../../../languageHandler"; import WidgetStore from "../../../stores/WidgetStore"; -import EventTileBubble from "./EventTileBubble"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; @@ -43,32 +43,35 @@ export default class MJitsiWidgetEvent extends React.PureComponent { return ( } - className="mx_MJitsiWidgetEvent" + className="mx_EventTileBubble mx_MJitsiWidgetEvent" title={_t("timeline|m.widget|jitsi_ended", { senderName })} - timestamp={this.props.timestamp} - /> + > + {this.props.timestamp} + ); } else if (prevUrl) { // modified return ( } - className="mx_MJitsiWidgetEvent" + className="mx_EventTileBubble mx_MJitsiWidgetEvent" title={_t("timeline|m.widget|jitsi_updated", { senderName })} subtitle={joinCopy} - timestamp={this.props.timestamp} - /> + > + {this.props.timestamp} + ); } else { // assume added return ( } - className="mx_MJitsiWidgetEvent" + className="mx_EventTileBubble mx_MJitsiWidgetEvent" title={_t("timeline|m.widget|jitsi_started", { senderName })} subtitle={joinCopy} - timestamp={this.props.timestamp} - /> + > + {this.props.timestamp} + ); } } diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index aa993fa542..022766868e 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -9,10 +9,10 @@ Please see LICENSE files in the repository root for full details. import React, { type JSX } from "react"; import { type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { EventTileBubble } from "@element-hq/web-shared-components"; import { _t } from "../../../languageHandler"; import { getNameForEventRoom, userLabelForEventRoom } from "../../../utils/KeyVerificationStateObserver"; -import EventTileBubble from "./EventTileBubble"; import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; interface Props { @@ -75,12 +75,11 @@ const MKeyVerificationRequest: React.FC = ({ mxEvent, timestamp }) => { return ( } - className="mx_cryptoEvent mx_cryptoEvent_icon" + className="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon" title={title} subtitle={subtitle} - timestamp={timestamp} > - <> + {timestamp} ); }; diff --git a/src/components/views/messages/RoomPredecessorTile.tsx b/src/components/views/messages/RoomPredecessorTile.tsx index 01e1ac831b..a33369bd76 100644 --- a/src/components/views/messages/RoomPredecessorTile.tsx +++ b/src/components/views/messages/RoomPredecessorTile.tsx @@ -11,13 +11,13 @@ import React, { type JSX, useCallback } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { type MatrixEvent, type Room, type RoomState } from "matrix-js-sdk/src/matrix"; import { ChatSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { EventTileBubble } from "@element-hq/web-shared-components"; import dis from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { _t } from "../../../languageHandler"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import EventTileBubble from "./EventTileBubble"; import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { useRoomState } from "../../../hooks/useRoomState"; import SettingsStore from "../../../settings/SettingsStore"; @@ -91,26 +91,28 @@ export const RoomPredecessorTile: React.FC = ({ mxEvent, timestamp }) => return ( } - className="mx_CreateEvent" + className="mx_EventTileBubble mx_CreateEvent" title={_t("timeline|m.room.create|continuation")} - timestamp={timestamp} > -
- - {!!guessedLink ? ( - <> - {_t("timeline|m.room.create|unknown_predecessor_guess_server", { + <> +
+ + {!!guessedLink ? ( + <> + {_t("timeline|m.room.create|unknown_predecessor_guess_server", { + roomId: predecessor.roomId, + })} + {guessedLink} + + ) : ( + _t("timeline|m.room.create|unknown_predecessor", { roomId: predecessor.roomId, - })} - {guessedLink} - - ) : ( - _t("timeline|m.room.create|unknown_predecessor", { - roomId: predecessor.roomId, - }) - )} - -
+ }) + )} + +
+ {timestamp} + ); } @@ -131,11 +133,12 @@ export const RoomPredecessorTile: React.FC = ({ mxEvent, timestamp }) => return ( } - className="mx_CreateEvent" + className="mx_EventTileBubble mx_CreateEvent" title={_t("timeline|m.room.create|continuation")} subtitle={link} - timestamp={timestamp} - /> + > + {timestamp} + ); function createLinkWithRoom(room: Room, roomId: string, eventId?: string): string { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 93225a43dc..6d1ed70a06 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -117,7 +117,7 @@ export interface IEventTileOps { unhideWidget(): void; } -export interface IEventTileType extends React.Component { +export interface IEventTileType extends React.Component { getEventTileOps?(): IEventTileOps; getMediaHelper(): MediaEventHelper | undefined; } diff --git a/src/components/views/rooms/HistoryTile.tsx b/src/components/views/rooms/HistoryTile.tsx index 0701122c56..0f34609e29 100644 --- a/src/components/views/rooms/HistoryTile.tsx +++ b/src/components/views/rooms/HistoryTile.tsx @@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { EventTimeline } from "matrix-js-sdk/src/matrix"; import { VisibilityOffIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { EventTileBubble } from "@element-hq/web-shared-components"; -import EventTileBubble from "../messages/EventTileBubble"; import { _t } from "../../../languageHandler"; import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx"; @@ -30,7 +30,7 @@ const HistoryTile: React.FC = () => { return ( } - className="mx_HistoryTile" + className="mx_EventTileBubble mx_HistoryTile" title={_t("timeline|historical_messages_unavailable")} subtitle={subtitle} /> diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index e8dfbd5d1b..b486b5e059 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.tsx @@ -10,6 +10,7 @@ import React, { type JSX, useContext } from "react"; import { EventType, type Room, type User, type MatrixClient } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import { ErrorSolidIcon, UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { EventTileBubble } from "@element-hq/web-shared-components"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import DMRoomMap from "../../../utils/DMRoomMap"; @@ -22,7 +23,6 @@ import { type ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPaylo import { Action } from "../../../dispatcher/actions"; import SpaceStore from "../../../stores/spaces/SpaceStore"; import { showSpaceInvite } from "../../../utils/space"; -import EventTileBubble from "../messages/EventTileBubble"; import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; @@ -296,7 +296,7 @@ const NewRoomIntro: React.FC = () => { {!hasExpectedEncryptionSettings(cli, room) && ( } - className="mx_cryptoEvent" + className="mx_EventTileBubble mx_cryptoEvent" title={_t("room|intro|unencrypted_warning")} subtitle={subtitle} /> diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index 3bec221c7a..3c3735ab81 100644 --- a/src/events/EventTileFactory.tsx +++ b/src/events/EventTileFactory.tsx @@ -21,7 +21,7 @@ import { TextualEventView } from "@element-hq/web-shared-components"; import SettingsStore from "../settings/SettingsStore"; import type LegacyCallEventGrouper from "../components/structures/LegacyCallEventGrouper"; -import { type EventTileProps } from "../components/views/rooms/EventTile"; +import { type IEventTileType, type EventTileProps } from "../components/views/rooms/EventTile"; import { TimelineRenderingType } from "../contexts/RoomContext"; import MessageEvent from "../components/views/messages/MessageEvent"; import LegacyCallEvent from "../components/views/messages/LegacyCallEvent"; @@ -61,7 +61,7 @@ export interface EventTileTypeProps extends Pick< | "isSeeingThroughMessageHiddenForModeration" | "inhibitInteraction" > { - ref?: React.RefObject; // `any` because it's effectively impossible to convince TS of a reasonable type + ref?: React.RefObject; maxImageHeight?: number; // pixels overrideBodyTypes?: Record>; overrideEventTypes?: Record>; diff --git a/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap index 77540f0b86..716b0e7257 100644 --- a/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap @@ -61,7 +61,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
You can't see earlier messages
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 4465fa474d..8db7b094f5 100644 --- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -152,7 +152,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`] class="mx_NewRoomIntro" >
End-to-end encryption isn't enabled
@@ -342,7 +342,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = class="mx_NewRoomIntro" >
End-to-end encryption isn't enabled
@@ -717,7 +717,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t style="height: 400px;" >
Encryption enabled
Messages in this chat will be end-to-end encrypted.
diff --git a/test/unit-tests/components/views/messages/__snapshots__/RoomPredecessorTile-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/RoomPredecessorTile-test.tsx.snap index 06fbda4fd1..2565ee90d6 100644 --- a/test/unit-tests/components/views/messages/__snapshots__/RoomPredecessorTile-test.tsx.snap +++ b/test/unit-tests/components/views/messages/__snapshots__/RoomPredecessorTile-test.tsx.snap @@ -3,7 +3,7 @@ exports[` Renders as expected 1`] = `
Renders as expected 1`] = ` />
This room is a continuation of another conversation.