Browse Source

detail header and master footer component

robert2206 8 years ago
parent
commit
5cb53c232d

+ 13 - 0
src/components/odetail-header/odetail-header.html

@@ -0,0 +1,13 @@
+<ion-header>
+
+    <ion-navbar color="primary">
+        <ion-title>{{ title }}</ion-title>
+
+        <ion-buttons *ngIf="showButtons" end>
+            <button ion-button (click)="saveClick()">
+                <ion-icon color="ligth" name="create"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+    
+</ion-header>

+ 3 - 0
src/components/odetail-header/odetail-header.scss

@@ -0,0 +1,3 @@
+odetail-header {
+    
+}

+ 30 - 0
src/components/odetail-header/odetail-header.ts

@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+
+@Component({
+    selector: "odetails-header",
+    templateUrl: "odetails-header.html",
+})
+export class ODetailsHeader {
+
+
+    @Input()
+    title: string;
+
+    @Input()
+    showButtons: boolean;
+
+    @Output()
+    save: EventEmitter<any>;
+
+    constructor() {
+        this.showButtons = true;
+        this.save = new EventEmitter();
+    }
+
+    /**
+     *
+     */
+    saveClick(event) {
+        this.save.emit();
+    }
+}

+ 9 - 0
src/components/omaster-footer/omaster-footer.html

@@ -0,0 +1,9 @@
+<div class="no-element" *ngIf="showEmptyMessage()">
+    <h2>Sin elementos</h2>
+</div>
+
+<ion-fab right bottom>
+    <button ion-fab color="yellow" (click)="createNewElement($event)">
+        <ion-icon name="add" color="light"></ion-icon>
+    </button>
+</ion-fab>

+ 3 - 0
src/components/omaster-footer/omaster-footer.scss

@@ -0,0 +1,3 @@
+omaster-footer {
+    
+}

+ 46 - 0
src/components/omaster-footer/omaster-footer.ts

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter, ContentChild } from "@angular/core";
+import { Content } from "ionic-angular";
+
+@Component({
+    selector: "olist-footer",
+    templateUrl: "olist-footer.html"
+    // viewProviders: [ Content ]
+})
+export class OListFooter {
+
+    @Input()
+    hasElements: boolean;
+
+    @Output()
+    create: EventEmitter<any>;
+
+    @Output()
+    more: EventEmitter<any>;
+
+    constructor() { 
+        this.hasElements = false;
+        this.create = new EventEmitter();
+        this.more = new EventEmitter();
+    }
+
+    /**
+     *
+     */
+    showEmptyMessage(): boolean {
+        return !this.hasElements;
+    }
+
+    /**
+     *
+     */
+    createNewElement(event): void {
+        this.create.emit(event);
+    }
+
+    /**
+     *
+     */
+    showMoreElements(event): void {
+        this.more.emit(event);
+    }
+}

+ 3 - 0
src/components/omaster-header/omaster-header.scss

@@ -0,0 +1,3 @@
+omaster-header {
+    
+}