Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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;

7
src/components/views/elements/AppTile.tsx
View File

@ -596,9 +596,10 @@ export default class AppTile extends React.Component<IProps, IState> {
"microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write; " + "clipboard-read;";
const appTileBodyClass = classNames({
mx_AppTileBody: !this.props.miniMode,
mx_AppTileBody_mini: this.props.miniMode,
mx_AppTile_loading: this.state.loading,
"mx_AppTileBody": true,
"mx_AppTileBody--large": !this.props.miniMode,
"mx_AppTileBody--mini": this.props.miniMode,
"mx_AppTileBody--loading": this.state.loading,
});
const appTileBodyStyles: CSSProperties = {};
if (this.props.pointerEvents) {

6
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View File

@ -43,7 +43,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
id="1"
>
<div
class="mx_AppTileBody mx_AppTile_loading"
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
>
<div
class="mx_AppTileBody_fadeInSpinner"
@ -230,7 +230,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
</span>
</div>
<div
class="mx_AppTileBody"
class="mx_AppTileBody mx_AppTileBody--large"
>
<div
class="mx_AppPermission"
@ -383,7 +383,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
</span>
</div>
<div
class="mx_AppTileBody mx_AppTile_loading"
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
>
<div
class="mx_AppTileBody_fadeInSpinner"