OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Update `mx_AppLoading` to improve maintainability (#10783) 

* Nesting: mx_AppLoading

* Conform class and animation name to the naming policy

* Nesting for maintainability, preventing the rule from becoming an orphan

* Rename the class: mx_AppLoading to mx_AppTile_loading
pull/28788/head^2
Suguru Hirahara 2023-05-08 12:38:04 +00:00 committed by GitHub
parent 631ac742aa
commit aed5fcf64a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
res/css/views/rooms/_AppsDrawer.pcss
View File

@ -379,7 +379,7 @@ $MinWidth: 240px;
}
}
.mx_AppLoading {
.mx_AppTile_loading {
display: flex;
flex-direction: column;
justify-content: center;
@ -391,24 +391,26 @@ $MinWidth: 240px;
/* 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;
}
/* const loadingElement */
.mx_AppTile_loading_fadeInSpinner {
animation-fill-mode: backwards;
animation-duration: 200ms;
animation-delay: 500ms;
animation-name: mx_AppTile_loading_fadeInSpinnerAnimation;
.mx_Spinner {
position: absolute;
inset: 0;
}
}
}
.mx_AppLoading .mx_Spinner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_AppLoading_spinner_fadeIn {
animation-fill-mode: backwards;
animation-duration: 200ms;
animation-delay: 500ms;
animation-name: mx_AppLoading_spinner_fadeIn_animation;
}
@keyframes mx_AppLoading_spinner_fadeIn_animation {
@keyframes mx_AppTile_loading_fadeInSpinnerAnimation {
from {
opacity: 0;
}
@ -417,10 +419,6 @@ $MinWidth: 240px;
}
}
.mx_AppLoading iframe {
display: none;
}
.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}

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

@ -573,7 +573,7 @@ export default class AppTile extends React.Component<IProps, IState> {
}
const loadingElement = (
<div className="mx_AppLoading_spinner_fadeIn">
<div className="mx_AppTile_loading_fadeInSpinner">
<Spinner message={_t("Loading…")} />
</div>
);
@ -603,7 +603,7 @@ export default class AppTile extends React.Component<IProps, IState> {
} else if (this.state.initialising || !this.state.isUserProfileReady) {
appTileBody = (
<div
className={appTileBodyClass + (this.state.loading ? "mx_AppLoading" : "")}
className={appTileBodyClass + (this.state.loading ? "mx_AppTile_loading" : "")}
style={appTileBodyStyles}
>
{loadingElement}
@ -619,7 +619,7 @@ export default class AppTile extends React.Component<IProps, IState> {
} else {
appTileBody = (
<div
className={appTileBodyClass + (this.state.loading ? "mx_AppLoading" : "")}
className={appTileBodyClass + (this.state.loading ? "mx_AppTile_loading" : "")}
style={appTileBodyStyles}
>
{this.state.loading && loadingElement}