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

Make shared-components tiles render identically outside Element Web - # 2 (#33485)

Browse Source 
* Adding correct layout/density attributes to unit tests

* Move app/web styling to FileBodyView

* Unify styling for MediaBody wrapped components

* Fix prettier issues

* Update app/web snapshots

* Wrap file download and audio loading states in MediaBody

* Revert the MediaBody for download buttons.

* Revert changes for MediaBody wrappers

* Updated snaphots for MediaBody components
This commit is contained in:
rbondesson
2026-05-18 05:59:03 +00:00
committed by GitHub
parent 7fe8cdafe0
commit 297ad9bb8d
33 changed files with 63 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/_components.pcss
-2
View File
@@ -223,12 +223,10 @@
@import "./views/messages/_CreateEvent.pcss";
@import "./views/messages/_DisambiguatedProfile.pcss";
@import "./views/messages/_LegacyCallEvent.pcss";
@import "./views/messages/_MFileBody.pcss";
@import "./views/messages/_MImageReplyBody.pcss";
@import "./views/messages/_MLocationBody.pcss";
@import "./views/messages/_MPollBody.pcss";
@import "./views/messages/_MStickerBody.pcss";
@import "./views/messages/_MediaBody.pcss";
@import "./views/messages/_MessageActionBar.pcss";
@import "./views/messages/_ReactionsRow.pcss";
@import "./views/messages/_TextualEvent.pcss";
apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss
+1 -1
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
/* are shared amongst multiple voice message components. */
/* Container for live recording and playback controls */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
.mx_VoiceMessagePrimaryContainer {
/* Match mx_MediaBody spacing, offsetting the waveform's 1px internal right padding. */
padding: 6px 11px 6px 12px;
apps/web/res/css/views/messages/_MFileBody.pcss
-27
View File
@@ -1,27 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2021 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_MFileBody [data-type="download"] {
height: var(--cpd-space-9x);
& object {
margin-left: -16px;
padding-right: 4px;
margin-top: -4px;
vertical-align: middle;
pointer-events: none;
}
}
.mx_MFileBody [data-type="info"] {
svg {
color: $secondary-content !important;
background-color: $system !important;
border-radius: 20px !important;
}
}
apps/web/res/css/views/messages/_MediaBody.pcss
-24
View File
@@ -1,24 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 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.
*/
/* A "media body" is any file upload looking thing, apart from images and videos (they */
/* have unique styles). */
.mx_MediaBody {
background-color: $panels;
border-radius: 12px;
max-width: 243px; /* use max-width instead of width so it fits within right panels */
color: $secondary-content;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
}
.mx_MAudioBody > .mx_MediaBody {
border-radius: var(--MBody-border-radius);
}
apps/web/src/components/views/audio_messages/RecordingPlayback.tsx
+4 -3
View File
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type ReactNode } from "react";
import { MediaBody } from "@element-hq/web-shared-components";
import PlayPauseButton from "./PlayPauseButton";
import PlaybackClock from "./PlaybackClock";
@@ -74,8 +75,8 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
}
return (
<div
className="mx_MediaBody mx_VoiceMessagePrimaryContainer"
<MediaBody
className="mx_VoiceMessagePrimaryContainer"
onKeyDown={this.onKeyDown}
data-testid="recording-playback"
>
@@ -85,7 +86,7 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
ref={this.playPauseRef}
/>
{body}
</div>
</MediaBody>
);
}
}
apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx
+3 -2
View File
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type ReactNode } from "react";
import { MediaBody } from "@element-hq/web-shared-components";
import { type Room, type IEventRelation, type MatrixEvent } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { DeleteIcon, StopSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -239,10 +240,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
// only other UI is the recording-in-progress UI
return (
<div className="mx_MediaBody mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
<MediaBody className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
<LiveRecordingClock recorder={this.state.recorder} />
<LiveRecordingWaveform recorder={this.state.recorder} />
</div>
</MediaBody>
);
}
apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap
+5 -5
View File
@@ -3,10 +3,10 @@
exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder when showFileInfo is true 1`] = `
<div>
<span
class="_content_1t2mx_8 mx_MFileBody"
class="_content_bibip_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
class="mx_MediaBody _mediaBody_14jys_8"
data-type="info"
>
<button
@@ -44,10 +44,10 @@ exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder whe
exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when showFileInfo is true 1`] = `
<div>
<span
class="_content_1t2mx_8 mx_MFileBody"
class="_content_bibip_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
class="mx_MediaBody _mediaBody_14jys_8"
data-type="info"
>
<button
@@ -82,7 +82,7 @@ exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when
exports[`MBodyFactory renderMBody renders download button for m.file in file rendering type 1`] = `
<div>
<span
class="_content_1t2mx_8 mx_MFileBody"
class="_content_bibip_8 mx_MFileBody"
>
<div
data-type="download"