Skip to content

Commit 2972219

Browse files
luixxiulluixxiul
authored
Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy (matrix-org#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
1 parent 77da949 commit 2972219

File tree

3 files changed

+57
-49
lines changed

3 files changed

+57
-49
lines changed

‎res/css/views/rooms/_AppsDrawer.pcss

Lines changed: 50 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -254,20 +254,13 @@ limitations under the License.
254254
}
255255
}
256256

257-
.mx_AppTileBody,
258-
.mx_AppTileBody_mini {
259-
width: 100%;
260-
overflow: hidden;
257+
/* Rules added to this selector style appTileBody generally */
258+
.mx_AppTileBody {
259+
/* Apply to every variant of appTileBody */
261260
border-radius: 8px;
262-
height: var(--AppTileBody-height);
263-
264-
iframe {
265-
border: none;
266-
width: 100%;
267-
height: 100%;
268-
}
269261

270262
/* const loadingElement */
263+
/* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
271264
.mx_AppTileBody_fadeInSpinner {
272265
/* place spinner and the message at the center of mx_AppTileBody */
273266
height: 100%;
@@ -279,49 +272,63 @@ limitations under the License.
279272
animation-delay: 500ms;
280273
animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
281274
}
282-
}
283-
284-
.mx_AppTileBody {
285-
--AppTileBody-height: 100%;
286-
287-
background-color: $widget-body-bg-color;
288275

289-
iframe {
276+
&.mx_AppTileBody--large,
277+
&.mx_AppTileBody--mini {
278+
width: 100%;
290279
overflow: hidden;
291-
padding: 0;
292-
margin: 0;
293-
display: block;
280+
height: var(--AppTileBody-height);
281+
282+
iframe {
283+
border: none;
284+
width: 100%;
285+
height: 100%;
286+
}
294287
}
295-
}
296288

297-
.mx_AppTileBody_mini {
298-
--AppTileBody-height: var(--AppTile_mini-height);
299-
}
289+
&.mx_AppTileBody--large {
290+
--AppTileBody-height: 100%;
300291

301-
.mx_AppTile .mx_AppTileBody,
302-
.mx_AppTileFullWidth .mx_AppTileBody,
303-
.mx_AppTile_mini .mx_AppTileBody_mini {
304-
height: inherit;
305-
flex: 1;
306-
}
292+
background-color: $widget-body-bg-color;
307293

308-
.mx_AppTile_loading {
309-
display: flex;
310-
flex-direction: column;
311-
justify-content: center;
312-
align-items: center;
313-
position: relative;
314-
height: 100%;
294+
iframe {
295+
overflow: hidden;
296+
padding: 0;
297+
margin: 0;
298+
display: block;
299+
}
300+
}
315301

316-
/* match bg of border so that the cut corners have the right fill */
317-
background-color: $widget-body-bg-color !important;
318-
border-radius: 8px;
302+
&.mx_AppTileBody--mini {
303+
--AppTileBody-height: var(--AppTile_mini-height);
304+
}
305+
306+
&.mx_AppTileBody--loading {
307+
display: flex;
308+
flex-direction: column;
309+
justify-content: center;
310+
align-items: center;
311+
position: relative;
312+
height: 100%;
313+
314+
/* match bg of border so that the cut corners have the right fill */
315+
background-color: $widget-body-bg-color !important;
319316

320-
iframe {
321-
display: none;
317+
iframe {
318+
display: none;
319+
}
322320
}
323321
}
324322

323+
/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
324+
so rules to style appTileBody generally should not be included here. */
325+
.mx_AppTile .mx_AppTileBody--large,
326+
.mx_AppTileFullWidth .mx_AppTileBody--large,
327+
.mx_AppTile_mini .mx_AppTileBody--mini {
328+
height: inherit;
329+
flex: 1;
330+
}
331+
325332
@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
326333
from {
327334
opacity: 0;

‎src/components/views/elements/AppTile.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -596,9 +596,10 @@ export default class AppTile extends React.Component<IProps, IState> {
596596
"microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write; " + "clipboard-read;";
597597

598598
const appTileBodyClass = classNames({
599-
mx_AppTileBody: !this.props.miniMode,
600-
mx_AppTileBody_mini: this.props.miniMode,
601-
mx_AppTile_loading: this.state.loading,
599+
"mx_AppTileBody": true,
600+
"mx_AppTileBody--large": !this.props.miniMode,
601+
"mx_AppTileBody--mini": this.props.miniMode,
602+
"mx_AppTileBody--loading": this.state.loading,
602603
});
603604
const appTileBodyStyles: CSSProperties = {};
604605
if (this.props.pointerEvents) {

‎test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
4343
id="1"
4444
>
4545
<div
46-
class="mx_AppTileBody mx_AppTile_loading"
46+
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
4747
>
4848
<div
4949
class="mx_AppTileBody_fadeInSpinner"
@@ -230,7 +230,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
230230
</span>
231231
</div>
232232
<div
233-
class="mx_AppTileBody"
233+
class="mx_AppTileBody mx_AppTileBody--large"
234234
>
235235
<div
236236
class="mx_AppPermission"
@@ -383,7 +383,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
383383
</span>
384384
</div>
385385
<div
386-
class="mx_AppTileBody mx_AppTile_loading"
386+
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
387387
>
388388
<div
389389
class="mx_AppTileBody_fadeInSpinner"

0 commit comments

Comments
 (0)