Merge pull request #100 from telerik/amiorkov/migration-4.0

Migrate to latest NativeScript and add "root" RadSideDrawer

Author: DimitarTodorov

Diff for: sdkAngular/app/App_Resources/Android/AndroidManifest.xml

@@ -24,9 +24,9 @@
 		android:icon="@drawable/icon"
 		android:label="@string/app_name"
 		android:theme="@style/AppTheme" >
-		
+
 		<activity
-			android:name="org.nativescript.sdkAngular.MainActivity"
+			android:name="com.tns.NativeScriptActivity"
 			android:label="@string/title_activity_kimera"
 			android:configChanges="keyboardHidden|orientation|screenSize"
 			android:theme="@style/LaunchScreenTheme">

Diff for: sdkAngular/app/app.css

@@ -0,0 +1 @@
+@import '~nativescript-theme-core/css/core.light.css';

Diff for: sdkAngular/app/app.module.ts

@@ -2,15 +2,14 @@ import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 
 // >> using-global-directives
 // --- The built-in 'nativescript-pro-ui' modules, if you are not using 'lazy' loading, uncomment and import the below modules into the 'imports' of the first ngModule (AppModule) of the app. 
-// import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
-// import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
 // import { NativeScriptUICalendarModule } from "nativescript-ui-calendar/angular";
 // import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
 // import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
 // import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-ui-autocomplete/angular";
 // import { NativeScriptUIGaugesModule } from "nativescript-pro-ui/gauges/angular";
 
 import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
+import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
 
 // Not required imports, these are used by the nativescript-samples-angular SDK examples - https://github.com/telerik/nativescript-ui-samples-angular
 import { NativeScriptRouterModule, NSModuleFactoryLoader } from "nativescript-angular/router";
@@ -54,6 +53,7 @@ if (applicationModule.android) {
         CommonDirectivesModule,
         TNSFrescoModule,
         NativeScriptUIListViewModule,
+        NativeScriptUISideDrawerModule,
         NativeScriptFormsModule,
         NativeScriptRouterModule,
         routing

Diff for: sdkAngular/app/app.routing.ts

@@ -187,20 +187,6 @@ let APP_ROUTES: Routes = [
             "title": "Getting Started"
         }
     },
-    {
-        path: "SideDrawerOverNavigationComponent",
-        loadChildren: './sidedrawer/sidedrawer-examples.module#SideDrawerExamplesModule',
-        data: {
-            "title": "Over Navigation"
-        }
-    },
-    {
-        path: "SecondSideDrawerOverNavigationComponent",
-        loadChildren: './sidedrawer/sidedrawer-examples.module#SideDrawerExamplesModule',
-        data: {
-            "title": "Over Navigation Second"
-        }
-    },
     {
         path: "SideDrawerEventsComponent",
         loadChildren: './sidedrawer/sidedrawer-examples.module#SideDrawerExamplesModule',

Diff for: sdkAngular/app/main-activity.android.ts

@@ -1,4 +1,5 @@
 import { platformNativeScriptDynamic } from "nativescript-angular/platform";
 import { AppModule } from "./app.module";
+import * as application from "tns-core-modules/application";
 
 platformNativeScriptDynamic().bootstrapModule(AppModule);

Diff for: sdkAngular/app/main.ts

@@ -0,0 +1,14 @@
+.root-drawer-content {
+    background-color: lightgray;
+}
+
+.root-item-stack-layout {
+    text-align: left;
+    vertical-align: center;
+    font-size: 16;
+    color:#404040;
+}
+
+.btn {
+    margin: 0;
+}

Diff for: sdkAngular/app/navigation/app.component.css

@@ -0,0 +1,17 @@
+<RadSideDrawer>
+    <GridLayout tkDrawerContent rows="auto, *" class="root-drawer-content">
+        <StackLayout>
+            <Label [text]="currentExample.title" class="h1 text-center"></Label>
+        </StackLayout>
+        <ListView row="1" [items]="currentExample.subItems" (itemTap)="onNavigationItemTap($event)" class="root-drawer-content">
+            <ng-template let-item="item">
+                <StackLayout class="root-item-stack-layout">
+                    <Label [text]="item.title" textWrap="true" class="btn btn-primary btn-active"></Label>
+                    <StackLayout height="1" class="root-drawer-content"></StackLayout>
+                </StackLayout>
+            </ng-template>
+        </ListView>
+    </GridLayout>
+
+    <page-router-outlet tkMainContent></page-router-outlet>
+</RadSideDrawer>

Diff for: sdkAngular/app/navigation/app.component.html

@@ -1,8 +1,43 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import { RadSideDrawer } from "nativescript-ui-sidedrawer";
+import * as app from "application";
+import { ExampleItem } from "./exampleItem";
+import { ExampleItemService } from "./exampleItemService.service";
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
+  moduleId: module.id,
   selector: "tk-app",
-  template: "<page-router-outlet></page-router-outlet>"
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
 })
-export class AppComponent {
-}
+export class AppComponent implements OnInit {
+  private _currentExample: ExampleItem;
+
+  constructor(private _router: Router, private _exampleItemsService: ExampleItemService) { }
+
+  ngOnInit() {
+    this._currentExample = this._exampleItemsService.getParentExampleItem(0);
+  }
+
+  public get currentExample(): ExampleItem {
+    return this._currentExample;
+  }
+
+  public set currentExample(value: ExampleItem) {
+    this._currentExample = value;
+  }
+
+  public onNavigationItemTap(args: any) {
+    var itemIndex = args.index;
+    var tappedItem = this._currentExample.subItems[itemIndex];
+    const sideDrawer = <RadSideDrawer>app.getRootView();
+    sideDrawer.closeDrawer();
+    if (tappedItem.subItems.length === 0) {
+      this._router.navigateByUrl(tappedItem.path);
+    } else {
+      this._router.navigate(['/examples-depth-2', this._currentExample.title, tappedItem.title]);
+    }
+  }
+}

Diff for: sdkAngular/app/navigation/app.component.ts

@@ -441,11 +441,6 @@ export var EXAMPLEITEMS: ExampleItem[] = [
                         "title": "Events",
                         "path": "SideDrawerEventsComponent/SideDrawerEventsComponent",
                         "subItems": []
-                    },
-                    {
-                        "title": "Drawer Over Navigation",
-                        "path": "SideDrawerOverNavigationComponent/SideDrawerOverNavigationComponent",
-                        "subItems": []
                     }
                 ]
             },