From 64a812f822714750b9f975aeff7ead6960b28126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 4 Jan 2019 16:39:09 +0100
Subject: [PATCH] MOBILE-2795 ux: Fix fab button placement

---
 src/addon/files/pages/list/list.html          |  4 +-
 .../index/addon-mod-data-index.html           |  2 +-
 .../index/addon-mod-forum-index.html          |  4 +-
 .../index/addon-mod-glossary-index.html       |  4 +-
 .../index/addon-mod-wiki-index.html           |  2 +-
 src/app/app.scss                              |  6 ---
 src/core/login/pages/sites/sites.html         |  4 +-
 src/directives/directives.module.ts           |  3 ++
 src/directives/fab.ts                         | 53 +++++++++++++++++++
 9 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 src/directives/fab.ts

diff --git a/src/addon/files/pages/list/list.html b/src/addon/files/pages/list/list.html
index 360a36e70..06fdce330 100644
--- a/src/addon/files/pages/list/list.html
+++ b/src/addon/files/pages/list/list.html
@@ -3,7 +3,7 @@
         <ion-title><core-format-text [text]="title"></core-format-text></ion-title>
     </ion-navbar>
 </ion-header>
-<ion-content [class.has-fab]="showUpload && root != 'site' && !path">
+<ion-content>
     <ion-refresher [enabled]="filesLoaded && (showPrivateFiles || showSiteFiles)" (ionRefresh)="refreshData($event)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
@@ -36,7 +36,7 @@
     </core-loading>
 
     <!-- Upload a private file. -->
-    <ion-fab bottom end *ngIf="showUpload && root != 'site' && !path">
+    <ion-fab core-fab bottom end *ngIf="showUpload && root != 'site' && !path">
         <button ion-fab (click)="uploadFile()" [attr.aria-label]="'core.fileuploader.uploadafile' | translate">
             <ion-icon name="add"></ion-icon>
         </button>
diff --git a/src/addon/mod/data/components/index/addon-mod-data-index.html b/src/addon/mod/data/components/index/addon-mod-data-index.html
index 18ddc9354..166f9bfd1 100644
--- a/src/addon/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addon/mod/data/components/index/addon-mod-data-index.html
@@ -92,7 +92,7 @@
 
 </core-loading>
 
-<ion-fab bottom end *ngIf="canAdd">
+<ion-fab core-fab bottom end *ngIf="canAdd">
     <button ion-fab (click)="gotoAddEntries($event)" [attr.aria-label]="'addon.mod_data.addentries' | translate">
         <ion-icon name="add"></ion-icon>
     </button>
diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
index 981e01d02..bcbce5865 100644
--- a/src/addon/mod/forum/components/index/addon-mod-forum-index.html
+++ b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
@@ -12,7 +12,7 @@
 
 <!-- Content. -->
 <core-split-view>
-    <ion-content [class.has-fab]="forum && forum.cancreatediscussions">
+    <ion-content>
         <ion-refresher [enabled]="loaded" (ionRefresh)="doRefresh($event)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
@@ -87,7 +87,7 @@
             <core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)" [error]="loadMoreError"></core-infinite-loading>
         </core-loading>
 
-        <ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">
+        <ion-fab core-fab bottom end *ngIf="forum && forum.cancreatediscussions">
             <button ion-fab (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText">
                 <ion-icon name="add"></ion-icon>
             </button>
diff --git a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
index d3fcd19f0..f57a4fd31 100644
--- a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -16,7 +16,7 @@
 
 <!-- Content. -->
 <core-split-view>
-    <ion-content [class.has-fab]="canAdd">
+    <ion-content>
         <ion-refresher [enabled]="loaded" (ionRefresh)="doRefresh($event)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
@@ -59,7 +59,7 @@
             <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEntries($event)" [error]="loadMoreError"></core-infinite-loading>
         </core-loading>
 
-        <ion-fab bottom end *ngIf="canAdd">
+        <ion-fab core-fab bottom end *ngIf="canAdd">
             <button ion-fab (click)="openNewEntry()" [attr.aria-label]="'addon.mod_glossary.addentry' | translate">
                 <ion-icon name="add"></ion-icon>
             </button>
diff --git a/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html b/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
index bc2e6294a..976ae64c9 100644
--- a/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
@@ -73,7 +73,7 @@
 
 </core-loading>
 
-<ion-fab bottom end *ngIf="canEdit">
+<ion-fab core-fab bottom end *ngIf="canEdit">
     <button ion-fab (click)="goToNewPage()" [attr.aria-label]="'addon.mod_wiki.createpage' | translate">
         <ion-icon name="add"></ion-icon>
     </button>
diff --git a/src/app/app.scss b/src/app/app.scss
index 7d49632fc..839ceb389 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -678,12 +678,6 @@ ion-app.app-root {
     padding-bottom: 56px;
   }
 
-  .scroll-content ion-fab {
-    position: fixed;
-    margin-bottom: 56px;
-  }
-
-
   // For some reason, in iOS the pages don't inherit the background-color from ion-app, set it explicitly.
   .ion-page {
     background-color: $background-color;
diff --git a/src/core/login/pages/sites/sites.html b/src/core/login/pages/sites/sites.html
index 1de888148..d6e6ad2e4 100644
--- a/src/core/login/pages/sites/sites.html
+++ b/src/core/login/pages/sites/sites.html
@@ -12,7 +12,7 @@
         </ion-buttons>
     </ion-navbar>
 </ion-header>
-<ion-content class="has-fab">
+<ion-content>
     <ion-list>
         <a ion-item (click)="login(site.id)" *ngFor="let site of sites; let idx = index" detail-none>
             <ion-avatar item-start>
@@ -27,7 +27,7 @@
             </button>
         </a>
     </ion-list>
-    <ion-fab bottom end>
+    <ion-fab core-fab bottom end>
         <button ion-fab (click)="add()" [attr.aria-label]="'core.add' | translate">
             <ion-icon name="add"></ion-icon>
         </button>
diff --git a/src/directives/directives.module.ts b/src/directives/directives.module.ts
index e3ad9693b..6b58c1054 100644
--- a/src/directives/directives.module.ts
+++ b/src/directives/directives.module.ts
@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { CoreAutoFocusDirective } from './auto-focus';
 import { CoreDownloadFileDirective } from './download-file';
 import { CoreExternalContentDirective } from './external-content';
+import { CoreFabDirective } from './fab';
 import { CoreFormatTextDirective } from './format-text';
 import { CoreLinkDirective } from './link';
 import { CoreKeepKeyboardDirective } from './keep-keyboard';
@@ -30,6 +31,7 @@ import { CoreSupressEventsDirective } from './supress-events';
         CoreAutoFocusDirective,
         CoreDownloadFileDirective,
         CoreExternalContentDirective,
+        CoreFabDirective,
         CoreFormatTextDirective,
         CoreKeepKeyboardDirective,
         CoreLinkDirective,
@@ -44,6 +46,7 @@ import { CoreSupressEventsDirective } from './supress-events';
         CoreAutoFocusDirective,
         CoreDownloadFileDirective,
         CoreExternalContentDirective,
+        CoreFabDirective,
         CoreFormatTextDirective,
         CoreKeepKeyboardDirective,
         CoreLinkDirective,
diff --git a/src/directives/fab.ts b/src/directives/fab.ts
new file mode 100644
index 000000000..828c1cec5
--- /dev/null
+++ b/src/directives/fab.ts
@@ -0,0 +1,53 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// 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, ElementRef, OnInit, OnDestroy } from '@angular/core';
+import { Content } 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 OnInit, OnDestroy {
+    protected element: HTMLElement;
+
+    constructor(el: ElementRef, protected content: Content) {
+        this.element = el.nativeElement;
+    }
+
+    /**
+     * Initialize Component.
+     */
+    ngOnInit(): void {
+        if (this.content) {
+            this.content.getNativeElement().classList.add('has-fab');
+            this.content.getFixedElement().appendChild(this.element);
+        }
+    }
+
+    /**
+     * Destroy component.
+     */
+    ngOnDestroy(): void {
+        if (this.content) {
+            this.content.getNativeElement().classList.remove('has-fab');
+        }
+    }
+}