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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/addons/mod/data/components/index/addon-mod-data-index.html
View File

@ -37,9 +37,7 @@
</core-navbar-buttons> </core-navbar-buttons>
<!-- Content. --> <!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<ion-content>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId" <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"> contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
@ -144,11 +142,10 @@
<a (click)="searchReset()">{{ 'addon.mod_data.resetsettings' | translate}}</a> <a (click)="searchReset()">{{ 'addon.mod_data.resetsettings' | translate}}</a>
</core-empty-box> </core-empty-box>
</core-loading> </core-loading>
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd"> <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd">
<ion-fab-button (click)="gotoAddEntries()" [attr.aria-label]="'addon.mod_data.addentries' | translate"> <ion-fab-button (click)="gotoAddEntries()" [attr.aria-label]="'addon.mod_data.addentries' | translate">
<ion-icon name="fas-plus"></ion-icon> <ion-icon name="fas-plus"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
</ion-content>

10
src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
View File

@ -46,8 +46,7 @@
</core-navbar-buttons> </core-navbar-buttons>
<!-- Content. --> <!-- Content. -->
<ion-content> <core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center">
<div *ngIf="description || pageIsOffline || hasOffline || pageWarning"> <div *ngIf="description || pageIsOffline || hasOffline || pageWarning">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId" <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"> contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
@ -87,11 +86,10 @@
<core-tag-list [tags]="tags"></core-tag-list> <core-tag-list [tags]="tags"></core-tag-list>
</div> </div>
</div> </div>
</core-loading> </core-loading>
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canEdit"> <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canEdit">
<ion-fab-button (click)="goToNewPage()" [attr.aria-label]="'addon.mod_wiki.createpage' | translate"> <ion-fab-button (click)="goToNewPage()" [attr.aria-label]="'addon.mod_wiki.createpage' | translate">
<ion-icon name="fas-plus"></ion-icon> <ion-icon name="fas-plus"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
</ion-content>

14
src/core/directives/fab.ts
View File

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

8
src/theme/theme.base.scss
View File

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