imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy (#11002)

Browse source 
* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Update a Jest snapshot

* Update a Jest snapshot
This commit is contained in:
Suguru Hirahara 2023-06-16 18:24:10 +00:00 • committed by GitHub
parent 77da949fd4
commit 2972219959
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

97
res/css/views/rooms/_AppsDrawer.pcss
View file

@ -254,20 +254,13 @@ limitations under the License.
}
}
.mx_AppTileBody,
.mx_AppTileBody_mini {
width: 100%;
overflow: hidden;
/* Rules added to this selector style appTileBody generally */
.mx_AppTileBody {
/* Apply to every variant of appTileBody */
border-radius: 8px;
height: var(--AppTileBody-height);
iframe {
border: none;
width: 100%;
height: 100%;
}
/* const loadingElement */
/* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
.mx_AppTileBody_fadeInSpinner {
/* place spinner and the message at the center of mx_AppTileBody */
height: 100%;
@ -279,49 +272,63 @@ limitations under the License.
animation-delay: 500ms;
animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
}
}
.mx_AppTileBody {
--AppTileBody-height: 100%;
background-color: $widget-body-bg-color;
iframe {
&.mx_AppTileBody--large,
&.mx_AppTileBody--mini {
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
display: block;
height: var(--AppTileBody-height);
iframe {
border: none;
width: 100%;
height: 100%;
}
}
&.mx_AppTileBody--large {
--AppTileBody-height: 100%;
background-color: $widget-body-bg-color;
iframe {
overflow: hidden;
padding: 0;
margin: 0;
display: block;
}
}
&.mx_AppTileBody--mini {
--AppTileBody-height: var(--AppTile_mini-height);
}
&.mx_AppTileBody--loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
/* match bg of border so that the cut corners have the right fill */
background-color: $widget-body-bg-color !important;
iframe {
display: none;
}
}
}
.mx_AppTileBody_mini {
--AppTileBody-height: var(--AppTile_mini-height);
}
.mx_AppTile .mx_AppTileBody,
.mx_AppTileFullWidth .mx_AppTileBody,
.mx_AppTile_mini .mx_AppTileBody_mini {
/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
so rules to style appTileBody generally should not be included here. */
.mx_AppTile .mx_AppTileBody--large,
.mx_AppTileFullWidth .mx_AppTileBody--large,
.mx_AppTile_mini .mx_AppTileBody--mini {
height: inherit;
flex: 1;
}
.mx_AppTile_loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
/* match bg of border so that the cut corners have the right fill */
background-color: $widget-body-bg-color !important;
border-radius: 8px;
iframe {
display: none;
}
}
@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
from {
opacity: 0;