From 297221995958df337695de6a0afe3a6c0a917685 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 16 Jun 2023 18:24:10 +0000 Subject: [PATCH] Conform class names of `mx_AppTileBody` for a widget and PiP widget to our naming policy (#11002) * 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 --- res/css/views/rooms/_AppsDrawer.pcss | 97 ++++++++++--------- src/components/views/elements/AppTile.tsx | 7 +- .../__snapshots__/AppTile-test.tsx.snap | 6 +- 3 files changed, 59 insertions(+), 51 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 17095a4c54..da4ae21550 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -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; diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 10cd8c40aa..0d48113b7b 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -596,9 +596,10 @@ export default class AppTile extends React.Component { "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) { diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index dac8883dec..843ee980e1 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -43,7 +43,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] = id="1" >