MOBILE-2253 core: Implement core-loading

src/components/components.module.ts

@@ -0,0 +1,30 @@
+// (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 { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { CoreLoadingComponent } from './loading/loading';
+
+@NgModule({
+    declarations: [
+        CoreLoadingComponent
+    ],
+    imports: [
+        IonicModule
+    ],
+    exports: [
+        CoreLoadingComponent
+    ]
+})
+export class CoreComponentsModule {}

src/components/loading/loading.html

@@ -0,0 +1,8 @@
+<div class="mm-loading-container mm-animate-show-hide" *ngIf="!hideUntil">
+    <span class="mm-loading-spinner">
+        <ion-spinner></ion-spinner>
+        <p class="mm-loading-message" *ngIf="message">{{message}}</p>
+    </span>
+</div>
+<ng-content class="mm-loading-content mm-animate-show-hide" *ngIf="hideUntil">
+</ng-content>

src/components/loading/loading.scss

@@ -0,0 +1,28 @@
+core-loading {
+    .mm-loading-container {
+        width: 100%;
+        text-align: center;
+        padding-top: 10px;
+        clear: both;
+    }
+
+    .mm-loading-content {
+        padding-bottom: 1px; /* This makes height be real */
+    }
+
+    &.mm-loading-noheight .mm-loading-content {
+        height: auto;
+    }
+}
+
+.scroll-content > .padding > core-loading > .mm-loading-container,
+ion-content[padding] > .scroll-content > core-loading > .mm-loading-container,
+.mm-loading-center .mm-loading-container {
+    display: table;
+
+    .mm-loading-spinner {
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+    }
+}

src/components/loading/loading.ts

@@ -0,0 +1,50 @@
+// (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 { Component, Input, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+/**
+ * Component to show a loading spinner and message while data is being loaded.
+ *
+ * It will show a spinner with a message and hide all the content until 'dataLoaded' variable is set to true.
+ * If 'message' and 'dynMessage' attributes aren't set, default message "Loading" is shown.
+ * 'message' attribute accepts hardcoded strings, variables, filters, etc. E.g. message="'mm.core.loading' | translate".
+ *
+ * Usage:
+ * <core-loading [message]="loadingMessage" [hideUntil]="dataLoaded">
+ *     <!-- CONTENT TO HIDE UNTIL LOADED -->
+ * </core-loading>
+ */
+@Component({
+    selector: 'core-loading',
+    templateUrl: 'loading.html'
+})
+export class CoreLoadingComponent implements OnInit {
+    @Input() hideUntil: boolean; // Determine when should the contents be shown.
+    @Input() message?: string; // Message to show while loading.
+
+    constructor(private translate: TranslateService) {}
+
+    /**
+     * Component being initialized.
+     */
+    ngOnInit() {
+        if (!this.message) {
+            // Default loading message.
+            this.message = this.translate.instant('mm.core.loading');
+        }
+    }
+
+}