MOBILE-3734 core: Style ion fab not direct children of ion content

main
Pau Ferrer Ocaña 2021-04-26 14:14:15 +02:00 committed by Dani Palou
parent ac8d2b4434
commit 650aafc96e
4 changed files with 155 additions and 152 deletions

View File

@ -37,8 +37,6 @@
</core-navbar-buttons>
<!-- Content. -->
<ion-content>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
@ -151,4 +149,3 @@
<ion-icon name="fas-plus"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>

View File

@ -46,7 +46,6 @@
</core-navbar-buttons>
<!-- Content. -->
<ion-content>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<div *ngIf="description || pageIsOffline || hasOffline || pageWarning">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
@ -94,4 +93,3 @@
<ion-icon name="fas-plus"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>

View File

@ -29,7 +29,7 @@ export class CoreFabDirective implements OnDestroy {
protected static readonly PADDINGBOTTOM = 56;
protected element?: HTMLElement;
protected scrollElement?: HTMLElement;
protected done = false;
constructor(protected content: IonContent) {
@ -41,10 +41,10 @@ export class CoreFabDirective implements OnDestroy {
*/
async asyncInit(): Promise<void> {
if (this.content) {
this.element = await this.content.getScrollElement();
this.scrollElement = await this.content.getScrollElement();
if (!this.done) {
const bottom = parseInt(this.element.style.paddingBottom, 10) || 0;
this.element.style.paddingBottom = (bottom + CoreFabDirective.PADDINGBOTTOM) + 'px';
const bottom = parseInt(this.scrollElement.style.paddingBottom, 10) || 0;
this.scrollElement.style.paddingBottom = (bottom + CoreFabDirective.PADDINGBOTTOM) + 'px';
this.done = true;
}
}
@ -54,9 +54,9 @@ export class CoreFabDirective implements OnDestroy {
* Destroy component.
*/
ngOnDestroy(): void {
if (this.done && this.element) {
const bottom = parseInt(this.element.style.paddingBottom, 10) || 0;
this.element.style.paddingBottom = (bottom + CoreFabDirective.PADDINGBOTTOM) + 'px';
if (this.done && this.scrollElement) {
const bottom = parseInt(this.scrollElement.style.paddingBottom, 10) || 0;
this.scrollElement.style.paddingBottom = (bottom - CoreFabDirective.PADDINGBOTTOM) + 'px';
}
}

View File

@ -496,3 +496,11 @@ ion-button.core-button-select {
textarea:not([core-auto-rows]) {
height: 200px;
}
ion-fab[core-fab] {
position: fixed;
}
ion-content > ion-fab[core-fab] {
position: absolute;
}