enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Refactor MFileBody using MVVM and move to shared-components (#32730)

Browse Source 
* Refactor MFileBody using MVVM and move to shared component

* Simplyfing rendering properties

* Create a first version of view model for the component

* Simplifying component properties and make it possible to override module css using data-* attributes

* Create a MBodyFactory in element-web and use it to render MFileBodyView from MessageEvent

* Use <MediaBody instead of <button to support legacy rendering

* Updated styling and comments

* Refactoring className from snapshot to component property

* Rename MFileBody* to FileBody*

* Rename MFileBody* to FileBody*

* Refactoring render branches to allow for displaying nothing

* Fix styling issues

* Fix lint errors

* Fix for css selectors in playwright tests

* Remove the MFileBody component and change all callers to use MBodyFactory:FileBodyView

* Remove unused strings in element-web

* Revert to render text in story iframes

* Fix for prettier error

* Fix playwright test css selectors

* Apply legacy styling in element-web

* Add legacy styling for mx_MFileBody

* Restore file

* Change from <div to <button

* Calculate span width ad update screenshots

* Remove width calculation and update snapshots

* Fix for letter-spacing and better content in story

* Updated playwright screenshots

* Updated snapshots

* Fixing Sonar errors/warnings

* Removed extra parentheses

* Changes after review

* Change border-radius to px and updated snapshots

* Fix typo in description

* And another typo fix

* Changes after review
This commit is contained in:
rbondesson
2026-03-16 09:47:23 +01:00
committed by GitHub
parent 394356c4df
commit d791e3fe8a
46 changed files with 2316 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/structures/_FilePanel.pcss
+1 -1
View File
@@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details.
padding-inline-start: 0;
}
.mx_MFileBody_download {
.mx_MFileBody [data-type="download"] {
margin-top: var(--cpd-space-4x);
}
apps/web/res/css/views/dialogs/_ForwardDialog.pcss
+1 -1
View File
@@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details.
/* We also hide download links to not encourage users to try interacting */
.mx_EventTile_msgOption,
.mx_EventTile_e2eIcon,
.mx_MFileBody_download {
.mx_MFileBody [data-type="download"] {
display: none;
}
}
apps/web/res/css/views/messages/_MFileBody.pcss
+14 -47
View File
@@ -6,56 +6,23 @@ 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.
*/
.mx_MFileBody_download {
.mx_MFileBody [data-type="download"] {
color: $accent;
height: var(--cpd-space-9x);
}
.mx_MFileBody_download object {
margin-left: -16px;
padding-right: 4px;
margin-top: -4px;
vertical-align: middle;
pointer-events: none;
}
/* Remove the border and padding for iframes for download links. */
.mx_MFileBody_download iframe {
margin: 0px;
padding: 0px;
border: none;
width: 100%;
}
.mx_MFileBody_info {
cursor: pointer;
.mx_MFileBody_info_icon {
background-color: $system;
border-radius: 20px;
display: inline-block;
width: 16px;
height: 16px;
padding: var(--cpd-space-2x);
vertical-align: middle;
margin-right: 12px;
svg {
color: $secondary-content;
width: inherit;
height: inherit;
display: block;
}
}
.mx_MFileBody_info_filename {
font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-primary);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: calc(100% - 32px - 12px); /* 32px icon, 12px margin on the icon */
& 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;
}
}