mirror of https://github.com/vector-im/riot-web
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 snapshott3chguy/dedup-icons-17oct
parent
77da949fd4
commit
2972219959
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue