EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 core: Fix animations on core loading

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-06-10 11:01:13 +02:00
parent e3c74b3c53
commit 045cd0b924
5 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/core/components/loading/core-loading.html
View File

@ -2,7 +2,8 @@
<ion-spinner color="primary"></ion-spinner>
<p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
</div>
<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="hideUntil" [@coreShowHideAnimation]>
<ng-content *ngIf="hideUntil">
<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" [@coreShowHideAnimation]
[class.opacity-hide]="!hideUntil">
<ng-content *ngIf="loaded">
</ng-content>
</div>

4
src/core/components/loading/loading.scss
View File

@ -43,6 +43,10 @@
flex-direction: column;
}
.core-loading-content {
@include core-transition(opacity, 200ms);
}
.core-loading-message {
@include margin(10px, 0, 0, 0);
}

6
src/core/components/loading/loading.ts
View File

@ -55,6 +55,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
uniqueId: string;
protected element: HTMLElement; // Current element.
loaded = false; // Only comes true once.
constructor(element: ElementRef) {
this.element = element.nativeElement;
@ -83,6 +84,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
if (this.hideUntil) {
this.element.classList.add('core-loading-loaded');
}
this.loaded = !!this.hideUntil;
this.content?.nativeElement.classList.toggle('core-loading-content', !!this.hideUntil);
}
@ -94,6 +96,10 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
*/
ngOnChanges(changes: { [name: string]: SimpleChange }): void {
if (changes.hideUntil) {
if (!this.loaded) {
this.loaded = !!this.hideUntil; // Only comes true once.
}
if (this.hideUntil) {
setTimeout(() => {
// Content is loaded so, center the spinner on the content itself.

2
src/core/features/login/pages/sites/sites.html
View File

@ -34,7 +34,7 @@
<span class="sr-only">{{ 'core.login.sitebadgedescription' | translate:{ count: site.badge } }}</span>
</ion-badge>
<ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
[attr.aria-label]="'core.delete' | translate">
[attr.aria-label]="'core.delete' | translate" [@coreSlideInOut]="'fromRight'">
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>

2
src/core/features/login/pages/sites/sites.ts
View File

@ -22,6 +22,7 @@ import { CoreLoginHelper } from '@features/login/services/login-helper';
import { CoreNavigator } from '@services/navigator';
import { CorePushNotifications } from '@features/pushnotifications/services/pushnotifications';
import { CoreFilter } from '@features/filter/services/filter';
import { CoreAnimations } from '@components/animations';
/**
* Page that displays a "splash screen" while the app is being initialized.
@ -29,6 +30,7 @@ import { CoreFilter } from '@features/filter/services/filter';
@Component({
selector: 'page-core-login-sites',
templateUrl: 'sites.html',
animations: [CoreAnimations.SLIDE_IN_OUT],
})
export class CoreLoginSitesPage implements OnInit {