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

Phase 2 Refactor MImageBody to MVVM and remove legacy component (#33212)

Browse Source 
* MVVMing of MImageBody and removing legacy component + css

* Fix Prettier

* update small image to large image in test

* Update test

* Preserve MImageBody legacy class names

* Click image in custom component download test

* Update snapshots

* Update MBodyFactory snapshots

* Added new tests to pass coverage

* Fix prettier

* Remove legacy import that was removed

* Add MImageReplayBody test for coverage

* Remove legacy MImageBody selectors from image view

* Update image body selectors in Playwright tests

* Keep file panel image body spacing compact

* Update apps/web/src/viewmodels/message-body/ImageBodyViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* added documentation to component

* Fix hidden media placeholder import

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
This commit is contained in:
Zack
2026-05-13 06:03:43 +00:00
committed by GitHub
co-authored by Florian Duros
parent 13dd1a0b5e
commit 1e7c9f672a
26 changed files with 3389 additions and 1608 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/views/rooms/_EventBubbleTile.pcss
+16 -20
View File
@@ -156,8 +156,8 @@ Please see LICENSE files in the repository root for full details.
padding-right: 48px !important;
}
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
.mx_ImageBody {
.mx_ImageBody_container {
justify-content: center;
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
@@ -181,8 +181,8 @@ Please see LICENSE files in the repository root for full details.
.mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_MImageBody::before,
.mx_ImageBody .mx_ImageBody_container,
.mx_ImageBody::before,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MediaBody,
.mx_MLocationBody_map,
@@ -220,8 +220,8 @@ Please see LICENSE files in the repository root for full details.
margin-inline-start: auto;
border-bottom-left-radius: var(--cornerRadius);
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_MImageBody::before,
.mx_ImageBody .mx_ImageBody_container,
.mx_ImageBody::before,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MediaBody,
.mx_MLocationBody_map,
@@ -334,16 +334,12 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_MImageBody {
.mx_ImageBody {
width: 100%;
.mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
position: unset;
}
}
/* noinspection CssReplaceWithShorthandSafely */
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_ImageBody .mx_ImageBody_container,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MediaBody {
border-radius: unset;
@@ -375,9 +371,9 @@ Please see LICENSE files in the repository root for full details.
&.mx_EventTile_continuation[data-self="false"] .mx_EventTile_line {
border-top-left-radius: 0;
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_ImageBody .mx_ImageBody_container,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MImageBody::before,
.mx_ImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map,
.mx_MBeaconBody {
@@ -387,9 +383,9 @@ Please see LICENSE files in the repository root for full details.
&.mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line {
border-bottom-left-radius: var(--cornerRadius);
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_ImageBody .mx_ImageBody_container,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MImageBody::before,
.mx_ImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map,
.mx_MBeaconBody {
@@ -400,9 +396,9 @@ Please see LICENSE files in the repository root for full details.
&.mx_EventTile_continuation[data-self="true"] .mx_EventTile_line {
border-top-right-radius: 0;
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_ImageBody .mx_ImageBody_container,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MImageBody::before,
.mx_ImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map,
.mx_MBeaconBody {
@@ -412,9 +408,9 @@ Please see LICENSE files in the repository root for full details.
&.mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_ImageBody .mx_ImageBody_container,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MImageBody::before,
.mx_ImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map,
.mx_MBeaconBody {
apps/web/res/css/views/rooms/_EventTile.pcss
+4 -4
View File
@@ -78,8 +78,8 @@ $left-gutter: 64px;
min-width: 100px;
}
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
.mx_ImageBody {
.mx_ImageBody_container {
display: flex;
align-items: center; /* on every layout */
}
@@ -156,8 +156,8 @@ $left-gutter: 64px;
position: absolute;
}
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
.mx_ImageBody {
.mx_ImageBody_container {
justify-content: flex-start;
min-height: $font-44px;
min-width: $font-44px;