Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Update mx_AppLoading to improve maintainability #10783

Merged
merged 5 commits into from
May 8, 2023
Merged

Update mx_AppLoading to improve maintainability #10783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9cc53d
Nesting: mx_AppLoading
luixxiul May 4, 2023
90dc289
Conform class and animation name to the naming policy
luixxiul May 4, 2023
66a41b9
Nesting for maintainability, preventing the rule from becoming an orphan
luixxiul May 4, 2023
fdab988
Rename the class: mx_AppLoading to mx_AppTile_loading
luixxiul May 4, 2023
4e8117d
Merge branch 'develop' into AppsDrawer2
luixxiul May 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 17 additions & 19 deletions res/css/views/rooms/_AppsDrawer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ $MinWidth: 240px;
}
}

.mx_AppLoading {
.mx_AppTile_loading {
display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -380,24 +380,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;
}

.mx_AppLoading .mx_Spinner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
iframe {
display: none;
}

.mx_AppLoading_spinner_fadeIn {
animation-fill-mode: backwards;
animation-duration: 200ms;
animation-delay: 500ms;
animation-name: mx_AppLoading_spinner_fadeIn_animation;
/* 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;
}
}
}

@keyframes mx_AppLoading_spinner_fadeIn_animation {
@keyframes mx_AppTile_loading_fadeInSpinnerAnimation {
from {
opacity: 0;
}
Expand All @@ -406,10 +408,6 @@ $MinWidth: 240px;
}
}

.mx_AppLoading iframe {
display: none;
}

.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}
6 changes: 3 additions & 3 deletions src/components/views/elements/AppTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down