Merge pull request #309 from NativeScript/modal_page_actionbar

modal page with ActionBar example

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/article.md

@@ -0,0 +1,17 @@
+Modal Dialog with ActionBar
+
+Defining the main view component
+<snippet id='main-view-html'/>
+<snippet id='main-view-code'/>
+
+Definig modal page innner component's routes
+
+<snippet id='modal-page-routes-actionbar'/>
+
+Defining the modal root component
+<snippet id='modal-root-html'/>
+<snippet id='modal-root-code'/>
+
+Defining the modal view component with an ActionBar
+<snippet id='modal-view-actionbar-html'/>
+<snippet id='modal-view-actionbar-code'/>

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/main-view.component.html

@@ -0,0 +1,5 @@
+<!-- >> modal-view-html -->
+<StackLayout class="page" sdkExampleTitle sdkToggleNavButton>
+    <Button text="SHOW MODAL" (tap)="onTap()"></Button>
+</StackLayout>
+<!-- << modal-view-html -->

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/main-view.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, ViewContainerRef } from "@angular/core";
+import { ModalDialogOptions, ModalDialogService } from "nativescript-angular/modal-dialog";
+
+import { ModalRootComponent } from "./modal-root.component";
+
+@Component({
+    moduleId: module.id,
+    providers: [ModalDialogService],
+    templateUrl: "./main-view.component.html"
+})
+export class MainViewComponent implements OnInit {
+    constructor(
+        private _modalService: ModalDialogService,
+        private _vcRef: ViewContainerRef) { }
+
+    ngOnInit(): void { }
+    // >> main-view-code
+    onTap(): void {
+        const options: ModalDialogOptions = {
+            viewContainerRef: this._vcRef,
+            context: {},
+            fullscreen: true
+        };
+
+        this._modalService.showModal(ModalRootComponent, options)
+            .then((result: string) => {
+                console.log(result);
+            });
+    }
+    // << main-view-code
+}

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/modal-root.component.html

@@ -0,0 +1,3 @@
+<!-- >> modal-root-html -->
+<page-router-outlet></page-router-outlet>
+<!-- << modal-root-html -->

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/modal-root.component.ts

@@ -0,0 +1,19 @@
+// >> modal-root-code
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./modal-root.component.html"
+})
+export class ModalRootComponent implements OnInit {
+    constructor(
+        private _routerExtensions: RouterExtensions,
+        private _activeRoute: ActivatedRoute) {}
+
+    ngOnInit(): void {
+        this._routerExtensions.navigate(["modal-view"], { relativeTo: this._activeRoute });
+    }
+}
+// << modal-root-code

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/modal-view.component.css

@@ -0,0 +1,10 @@
+.action-bar, .page {
+    background-color: chocolate;
+}
+.my-label {
+    border-radius: 5;
+    color: white;
+    font-family: FontAwesome;
+    font-size: 24;
+    vertical-align: middle;
+}

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/modal-view.component.html

@@ -0,0 +1,9 @@
+<!-- >> modal-view-actionbar-html -->
+<ActionBar backgroundColor="red" title="MODAL VIEW" class="action-bar">
+</ActionBar>
+
+<StackLayout backgroundColor="green" class="page">
+    <Label class="my-label" style="text-align: center;" text="Modal Page with ActionBar" textWrap="true"></Label>
+    <Button text="CLOSE MODAL" (tap)="onClose()"></Button>
+</StackLayout>
+<!-- << modal-view-actionbar-html -->

app/ng-ui-widgets-category/modal-page/modal-page-actionbar/modal-view.component.ts

@@ -0,0 +1,22 @@
+// tslint:disable:max-line-length
+// >> modal-view-actionbar-code
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+import { ModalDialogParams } from "nativescript-angular/modal-dialog";
+import { Page } from "ui/page";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./modal-view.component.html",
+    styleUrls: ["./modal-view.component.css"]
+})
+export class ModalViewActionBarComponent implements OnInit {
+    constructor(private _params: ModalDialogParams, private _page: Page, private router: RouterExtensions, private _activeRoute: ActivatedRoute) {}
+
+    ngOnInit(): void {}
+    onClose(): void {
+        this._params.closeCallback("return value");
+    }
+}
+// << modal-view-actionbar-code

app/ng-ui-widgets-category/modal-page/modal-page-examples.component.ts

@@ -3,7 +3,8 @@ import { Link } from "./../../link";
 
 let menuLinks = [
     new Link("Modal page example", "/modal-page/sample-modal-page"),
-    new Link("Modal page navigation", "/modal-page/modal-page-navigation")
+    new Link("Modal page navigation", "/modal-page/modal-page-navigation"),
+    new Link("Modal page ActionBar", "/modal-page/modal-view-actionbar")
 ];
 
 @Component({

app/ng-ui-widgets-category/modal-page/modal-page-examples.module.ts

@@ -10,7 +10,9 @@ import { ModalViewComponent } from "./sample-modal-page-module-example/modal-vie
 import { HomeModalViewComponent } from "./modal-page-navigation/home-modal-view.component";
 import { HomeModalViewContentComponent } from "./modal-page-navigation/home-modal-view-content.component";
 import { SecondModalViewContentComponent } from "./modal-page-navigation/second-modal-view-content.component";
-
+import { MainViewComponent } from "./modal-page-actionbar/main-view.component";
+import { ModalRootComponent } from "./modal-page-actionbar/modal-root.component";
+import { ModalViewActionBarComponent } from "./modal-page-actionbar/modal-view.component";
 export const routerConfig = [
     {
         path: "",
@@ -34,8 +36,20 @@ export const routerConfig = [
                 path: "second-modal", component: SecondModalViewContentComponent
             }
         ]
-    }
+    },
     // << modal-page-routes
+    // >> modal-page-routes-actionbar
+    {
+        path: "modal-view-actionbar",
+        component: MainViewComponent,
+        data: { title: "Main page" },
+        children: [
+            {
+                path: "modal-view", component: ModalViewActionBarComponent
+            }
+        ]
+    }
+    // << modal-page-routes-actionbar
 ];
 
 @NgModule({
@@ -53,9 +67,12 @@ export const routerConfig = [
         ModalViewComponent,
         HomeModalViewComponent,
         HomeModalViewContentComponent,
-        SecondModalViewContentComponent
+        SecondModalViewContentComponent,
+        MainViewComponent,
+        ModalRootComponent,
+        ModalViewActionBarComponent
     ],
-    entryComponents: [ModalViewComponent, HomeModalViewComponent]
+    entryComponents: [ModalViewComponent, HomeModalViewComponent, ModalRootComponent]
 })
 
 export class ModalPageExamplesModule {