MOBILE-3565 core: Add core-fab directive

src/app/directives/directives.module.ts

@@ -17,8 +17,9 @@ import { NgModule } from '@angular/core';
 import { CoreAutoFocusDirective } from './auto-focus';
 import { CoreExternalContentDirective } from './external-content';
 import { CoreFormatTextDirective } from './format-text';
-import { CoreLongPressDirective } from './long-press.directive';
+import { CoreLongPressDirective } from './long-press';
 import { CoreSupressEventsDirective } from './supress-events';
+import { CoreFabDirective } from './fab';
 
 @NgModule({
     declarations: [
@@ -27,6 +28,7 @@ import { CoreSupressEventsDirective } from './supress-events';
         CoreFormatTextDirective,
         CoreLongPressDirective,
         CoreSupressEventsDirective,
+        CoreFabDirective,
     ],
     imports: [],
     exports: [
@@ -35,6 +37,7 @@ import { CoreSupressEventsDirective } from './supress-events';
         CoreFormatTextDirective,
         CoreLongPressDirective,
         CoreSupressEventsDirective,
+        CoreFabDirective,
     ],
 })
 export class CoreDirectivesModule {}

src/app/directives/fab.ts

@@ -0,0 +1,63 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Directive, OnDestroy } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+
+/**
+ * Directive to move ion-fab components as direct children of the nearest ion-content.
+ *
+ * Example usage:
+ *
+ * <ion-fab core-fab>
+ */
+@Directive({
+    selector: 'ion-fab[core-fab]',
+})
+export class CoreFabDirective implements OnDestroy {
+
+    protected static readonly PADDINGBOTTOM = 56;
+
+    protected element?: HTMLElement;
+    protected done = false;
+
+    constructor(protected content: IonContent) {
+        this.asyncInit();
+    }
+
+    /**
+     * Initialize Component.
+     */
+    async asyncInit(): Promise<void> {
+        if (this.content) {
+            this.element = await this.content.getScrollElement();
+            if (!this.done) {
+                const bottom = parseInt(this.element.style.paddingBottom, 10) ||  0;
+                this.element.style.paddingBottom = (bottom + CoreFabDirective.PADDINGBOTTOM) + 'px';
+                this.done = true;
+            }
+        }
+    }
+
+    /**
+     * 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';
+        }
+    }
+
+}

src/theme/app.scss

@@ -0,0 +1 @@
+// Add here base app styles.

src/theme/variables.scss

@@ -134,3 +134,5 @@
     --background: var(--ion-background-color);
   }
 }
+
+@import "app.scss";