From 0f694769ed6e4cacb74733f8d9774196fa229528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 22 Oct 2020 13:30:23 +0200
Subject: [PATCH] MOBILE-3565 core: Add core-fab directive

---
 src/app/directives/directives.module.ts       |  5 +-
 src/app/directives/fab.ts                     | 63 +++++++++++++++++++
 ...{long-press.directive.ts => long-press.ts} |  0
 src/theme/app.scss                            |  1 +
 src/theme/variables.scss                      |  2 +
 5 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/app/directives/fab.ts
 rename src/app/directives/{long-press.directive.ts => long-press.ts} (100%)
 create mode 100644 src/theme/app.scss

diff --git a/src/app/directives/directives.module.ts b/src/app/directives/directives.module.ts
index e23a738a3..0d389ce22 100644
--- a/src/app/directives/directives.module.ts
+++ b/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 {}
diff --git a/src/app/directives/fab.ts b/src/app/directives/fab.ts
new file mode 100644
index 000000000..433d16bf5
--- /dev/null
+++ b/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';
+        }
+    }
+
+}
diff --git a/src/app/directives/long-press.directive.ts b/src/app/directives/long-press.ts
similarity index 100%
rename from src/app/directives/long-press.directive.ts
rename to src/app/directives/long-press.ts
diff --git a/src/theme/app.scss b/src/theme/app.scss
new file mode 100644
index 000000000..a653a15bc
--- /dev/null
+++ b/src/theme/app.scss
@@ -0,0 +1 @@
+// Add here base app styles.
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index ae34d8a76..3705ca0a1 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -134,3 +134,5 @@
     --background: var(--ion-background-color);
   }
 }
+
+@import "app.scss";