MOBILE-2334 core: Fix loading content height after loaded

main
Pau Ferrer Ocaña 2018-04-16 12:27:05 +02:00 committed by Dani Palou
parent 847a9da41b
commit bb6f4b21e7
3 changed files with 57 additions and 25 deletions

View File

@ -4,5 +4,7 @@
<p class="core-loading-message" *ngIf="message">{{message}}</p> <p class="core-loading-message" *ngIf="message">{{message}}</p>
</span> </span>
</div> </div>
<ng-content [@coreShowHideAnimation] class="core-loading-content" *ngIf="hideUntil"> <div #content>
</ng-content> <ng-content [@coreShowHideAnimation] *ngIf="hideUntil">
</ng-content>
</div>

View File

@ -1,4 +1,6 @@
core-loading { core-loading {
@include core-transition(height, 200ms);
.core-loading-container { .core-loading-container {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -7,18 +9,28 @@ core-loading {
} }
.core-loading-content { .core-loading-content {
display: unset;
padding-bottom: 1px; /* This makes height be real */ padding-bottom: 1px; /* This makes height be real */
} }
&.core-loading-noheight .core-loading-content { &.core-loading-noheight .core-loading-content {
height: auto; height: auto;
} }
@include core-transition(core-show-animation);
} }
.scroll-content > core-loading > .core-loading-container, .scroll-content > core-loading,
ion-content > .scroll-content > core-loading > .core-loading-container, ion-content > .scroll-content > core-loading,
.core-loading-center .core-loading-container { .core-loading-center {
position: unset !important;
}
.scroll-content > core-loading,
ion-content > .scroll-content > core-loading,
.core-loading-center,
core-loading.core-loading-loaded {
position: relative;
> .core-loading-container {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -37,4 +49,5 @@ ion-content > .scroll-content > core-loading > .core-loading-container,
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
}
} }

View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit, OnChanges, SimpleChange, ViewChild, ElementRef } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { coreShowHideAnimation } from '@classes/animations'; import { coreShowHideAnimation } from '@classes/animations';
@ -41,11 +41,15 @@ import { coreShowHideAnimation } from '@classes/animations';
templateUrl: 'loading.html', templateUrl: 'loading.html',
animations: [coreShowHideAnimation] animations: [coreShowHideAnimation]
}) })
export class CoreLoadingComponent implements OnInit { export class CoreLoadingComponent implements OnInit, OnChanges {
@Input() hideUntil: boolean; // Determine when should the contents be shown. @Input() hideUntil: boolean; // Determine when should the contents be shown.
@Input() message?: string; // Message to show while loading. @Input() message?: string; // Message to show while loading.
@ViewChild('content') content: ElementRef;
protected element: HTMLElement; // Current element.
constructor(private translate: TranslateService) { } constructor(private translate: TranslateService, element: ElementRef) {
this.element = element.nativeElement;
}
/** /**
* Component being initialized. * Component being initialized.
@ -57,4 +61,17 @@ export class CoreLoadingComponent implements OnInit {
} }
} }
ngOnChanges(changes: { [name: string]: SimpleChange }): void {
if (changes.hideUntil.currentValue === true) {
setTimeout(() => {
// Content is loaded so, center the spinner on the content itself.
this.element.classList.add('core-loading-loaded');
setTimeout(() => {
// Change CSS to force calculate height.
this.content.nativeElement.classList.add('core-loading-content');
}, 500);
});
}
}
} }