Merge pull request #1705 from crazyserver/MOBILE-2795

Mobile 2795

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>

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>

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>

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>

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>

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;

src/core/comments/components/comments/comments.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
 import { NavParams, NavController } from 'ionic-angular';
 import { CoreCommentsProvider } from '../../providers/comments';
 
@@ -23,7 +23,7 @@ import { CoreCommentsProvider } from '../../providers/comments';
     selector: 'core-comments',
     templateUrl: 'core-comments.html',
 })
-export class CoreCommentsCommentsComponent {
+export class CoreCommentsCommentsComponent implements OnChanges {
     @Input() contextLevel: string;
     @Input() instanceId: number;
     @Input() component: string;
@@ -41,6 +41,22 @@ export class CoreCommentsCommentsComponent {
      * View loaded.
      */
     ngOnInit(): void {
+        this.fetchData();
+    }
+
+    /**
+     * Listen to changes.
+     */
+    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        // If something change, update the fields.
+        if (changes) {
+            this.fetchData();
+        }
+    }
+
+    protected fetchData(): void {
+        this.commentsLoaded = false;
+
         this.commentsProvider.getComments(this.contextLevel, this.instanceId, this.component, this.itemId, this.area, this.page)
             .then((comments) => {
                 this.commentsCount = comments && comments.length ? comments.length : 0;

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>

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,

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');
+        }
+    }
+}