From 1e7f80ccafddb10ef5156b38b51c86216394d46a Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Tue, 10 Apr 2018 10:00:34 +0300 Subject: [PATCH 01/10] chore: Rafactor example to add RadSideDrawer as a root of the application chore: Remove "Show over Navigation" example as it is outdated chore: Updated Pro ui plugins version --- sdkAngular/app/app.css | 1 + sdkAngular/app/app.module.ts | 3 +- sdkAngular/app/app.routing.ts | 14 ----- sdkAngular/app/navigation/app.component.css | 14 +++++ sdkAngular/app/navigation/app.component.html | 17 ++++++ sdkAngular/app/navigation/app.component.ts | 43 +++++++++++++-- .../over-navigation.component.css | 36 ------------- .../over-navigation.component.html | 26 --------- .../over-navigation.component.ts | 49 ----------------- .../second-over-navigation.component.css | 36 ------------- .../second-over-navigation.component.html | 28 ---------- .../second-over-navigation.component.ts | 54 ------------------- .../sidedrawer/sidedrawer-examples.module.ts | 4 -- .../sidedrawer/sidedrawer-examples.routing.ts | 4 -- sdkAngular/package.json | 42 ++++++++------- 15 files changed, 95 insertions(+), 276 deletions(-) create mode 100644 sdkAngular/app/navigation/app.component.css create mode 100644 sdkAngular/app/navigation/app.component.html delete mode 100644 sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.css delete mode 100644 sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.html delete mode 100644 sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.ts delete mode 100644 sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.css delete mode 100644 sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.html delete mode 100644 sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.ts diff --git a/sdkAngular/app/app.css b/sdkAngular/app/app.css index e69de29b..50170bdd 100644 --- a/sdkAngular/app/app.css +++ b/sdkAngular/app/app.css @@ -0,0 +1 @@ +@import '~nativescript-theme-core/css/core.light.css'; \ No newline at end of file diff --git a/sdkAngular/app/app.module.ts b/sdkAngular/app/app.module.ts index a7536ffb..0d03ed72 100644 --- a/sdkAngular/app/app.module.ts +++ b/sdkAngular/app/app.module.ts @@ -2,7 +2,6 @@ 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"; @@ -11,6 +10,7 @@ import { NativeScriptModule } from "nativescript-angular/nativescript.module"; // 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 +54,7 @@ if (applicationModule.android) { CommonDirectivesModule, TNSFrescoModule, NativeScriptUIListViewModule, + NativeScriptUISideDrawerModule, NativeScriptFormsModule, NativeScriptRouterModule, routing diff --git a/sdkAngular/app/app.routing.ts b/sdkAngular/app/app.routing.ts index 87915a7c..4dac34bb 100644 --- a/sdkAngular/app/app.routing.ts +++ b/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 --git a/sdkAngular/app/navigation/app.component.css b/sdkAngular/app/navigation/app.component.css new file mode 100644 index 00000000..054b3074 --- /dev/null +++ b/sdkAngular/app/navigation/app.component.css @@ -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 --git a/sdkAngular/app/navigation/app.component.html b/sdkAngular/app/navigation/app.component.html new file mode 100644 index 00000000..4c51afad --- /dev/null +++ b/sdkAngular/app/navigation/app.component.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/sdkAngular/app/navigation/app.component.ts b/sdkAngular/app/navigation/app.component.ts index 00395f47..540085ec 100644 --- a/sdkAngular/app/navigation/app.component.ts +++ b/sdkAngular/app/navigation/app.component.ts @@ -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: "" + 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 = 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]); + } + } +} \ No newline at end of file diff --git a/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.css b/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.css deleted file mode 100644 index 6c7e92b9..00000000 --- a/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.css +++ /dev/null @@ -1,36 +0,0 @@ -button { - font-size: 15; - horizontal-align: center; -} - -.mainContentText { - font-size: 13; - padding: 10; -} - -.mainContentButton { - margin: 10; - horizontal-align: left; -} - -.drawerContentButton { - color: white; -} - -.sideStackLayout { - background-color: gray; -} - -.sideTitleStackLayout { - height: 56; - text-align: center; - vertical-align: center; -} - -.sideLabel { - padding: 10; -} - -.sideLightGrayLabel { - background-color: lightgray; -} \ No newline at end of file diff --git a/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.html b/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.html deleted file mode 100644 index cbc738e7..00000000 --- a/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.ts b/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.ts deleted file mode 100644 index f4f6ccb7..00000000 --- a/sdkAngular/app/sidedrawer/over-navigation/over-navigation.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core"; -import { RadSideDrawer } from "nativescript-ui-sidedrawer"; -import { RadSideDrawerComponent } from "nativescript-ui-sidedrawer/angular"; -import { Router } from '@angular/router'; - -@Component({ - moduleId: module.id, - selector: "tk-sidedrawer-over-navigation", - templateUrl: 'over-navigation.component.html', - styleUrls: ['over-navigation.component.css'] -}) -export class SideDrawerOverNavigationComponent implements AfterViewInit, OnInit { - private _mainContentText: string; - - constructor(private _router: Router, private _changeDetectionRef: ChangeDetectorRef) { - } - - @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; - private drawer: RadSideDrawer; - - ngAfterViewInit() { - this.drawer = this.drawerComponent.sideDrawer; - this._changeDetectionRef.detectChanges(); - } - - ngOnInit() { - this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer."; - } - - get mainContentText() { - return this._mainContentText; - } - - set mainContentText(value: string) { - this._mainContentText = value; - } - - public openDrawer() { - this.drawer.showDrawer(); - } - - public onCloseDrawerTap() { - this.drawer.closeDrawer(); - } - - public goToSecondPage() { - this._router.navigateByUrl("SideDrawerOverNavigationComponent/SecondSideDrawerOverNavigationComponent"); - } -} diff --git a/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.css b/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.css deleted file mode 100644 index 6c7e92b9..00000000 --- a/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.css +++ /dev/null @@ -1,36 +0,0 @@ -button { - font-size: 15; - horizontal-align: center; -} - -.mainContentText { - font-size: 13; - padding: 10; -} - -.mainContentButton { - margin: 10; - horizontal-align: left; -} - -.drawerContentButton { - color: white; -} - -.sideStackLayout { - background-color: gray; -} - -.sideTitleStackLayout { - height: 56; - text-align: center; - vertical-align: center; -} - -.sideLabel { - padding: 10; -} - -.sideLightGrayLabel { - background-color: lightgray; -} \ No newline at end of file diff --git a/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.html b/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.html deleted file mode 100644 index e762e239..00000000 --- a/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.ts b/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.ts deleted file mode 100644 index 08bbf3a5..00000000 --- a/sdkAngular/app/sidedrawer/over-navigation/second-page/second-over-navigation.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Component, ViewChild, AfterViewInit, OnInit, ChangeDetectorRef } from "@angular/core"; -import { RadSideDrawer } from "nativescript-ui-sidedrawer"; -import { RadSideDrawerComponent } from "nativescript-ui-sidedrawer/angular"; -import { RouterExtensions } from 'nativescript-angular/router'; -import * as frameModule from "tns-core-modules/ui/frame"; - -@Component({ - moduleId: module.id, - selector: "tk-second-over-navigation", - templateUrl: 'second-over-navigation.component.html', - styleUrls: ['second-over-navigation.component.css'] -}) -export class SecondSideDrawerOverNavigationComponent implements AfterViewInit, OnInit { - private _mainContentText: string; - - constructor(private routerExtensions: RouterExtensions, private _changeDetectionRef: ChangeDetectorRef) { - } - - @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; - private drawer: RadSideDrawer; - - ngAfterViewInit() { - this.drawer = this.drawerComponent.sideDrawer; - this._changeDetectionRef.detectChanges(); - } - - get mainContentText() { - return this._mainContentText; - } - - set mainContentText(value: string) { - this._mainContentText = value; - } - - ngOnInit() { - this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer."; - } - - public openDrawer() { - this.drawer.showDrawer(); - } - - public onCloseDrawerTap() { - this.drawer.closeDrawer(); - } - - public onNavigationButtonTap() { - frameModule.topmost().goBack(); - } - - public goBack() { - this.routerExtensions.back(); - } -} diff --git a/sdkAngular/app/sidedrawer/sidedrawer-examples.module.ts b/sdkAngular/app/sidedrawer/sidedrawer-examples.module.ts index 6766b1df..7598f195 100644 --- a/sdkAngular/app/sidedrawer/sidedrawer-examples.module.ts +++ b/sdkAngular/app/sidedrawer/sidedrawer-examples.module.ts @@ -6,8 +6,6 @@ import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angul import { SideDrawerEventsComponent } from './events/events.component'; import { SideDrawerGettingStartedComponent } from './getting-started/getting-started.component'; -import { SideDrawerOverNavigationComponent } from './over-navigation/over-navigation.component'; -import { SecondSideDrawerOverNavigationComponent } from './over-navigation/second-page/second-over-navigation.component'; import { SideDrawerPositionComponent } from './position/position.component'; import { SideDrawerTransitionsComponent } from './transitions/transitions.component'; @@ -26,8 +24,6 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv declarations: [ SideDrawerEventsComponent, SideDrawerGettingStartedComponent, - SideDrawerOverNavigationComponent, - SecondSideDrawerOverNavigationComponent, SideDrawerPositionComponent, SideDrawerTransitionsComponent ] diff --git a/sdkAngular/app/sidedrawer/sidedrawer-examples.routing.ts b/sdkAngular/app/sidedrawer/sidedrawer-examples.routing.ts index 4a56862d..e4ba440c 100644 --- a/sdkAngular/app/sidedrawer/sidedrawer-examples.routing.ts +++ b/sdkAngular/app/sidedrawer/sidedrawer-examples.routing.ts @@ -3,16 +3,12 @@ import { Routes, RouterModule } from '@angular/router'; import { SideDrawerEventsComponent } from './events/events.component'; import { SideDrawerGettingStartedComponent } from './getting-started/getting-started.component'; -import { SideDrawerOverNavigationComponent } from './over-navigation/over-navigation.component'; -import { SecondSideDrawerOverNavigationComponent } from './over-navigation/second-page/second-over-navigation.component'; import { SideDrawerPositionComponent } from './position/position.component'; import { SideDrawerTransitionsComponent } from './transitions/transitions.component'; export const routes: Routes = [ { path: 'SideDrawerEventsComponent', component: SideDrawerEventsComponent }, { path: 'SideDrawerGettingStartedComponent', component: SideDrawerGettingStartedComponent }, - { path: 'SideDrawerOverNavigationComponent', component: SideDrawerOverNavigationComponent }, - { path: 'SecondSideDrawerOverNavigationComponent', component: SecondSideDrawerOverNavigationComponent }, { path: 'SideDrawerPositionComponent', component: SideDrawerPositionComponent }, { path: 'SideDrawerTransitionsComponent', component: SideDrawerTransitionsComponent } ]; \ No newline at end of file diff --git a/sdkAngular/package.json b/sdkAngular/package.json index e7734390..4393b637 100644 --- a/sdkAngular/package.json +++ b/sdkAngular/package.json @@ -18,32 +18,33 @@ } }, "dependencies": { - "@angular/common": "~5.1.0", - "@angular/compiler": "~5.1.0", - "@angular/core": "~5.1.0", - "@angular/forms": "~5.1.0", - "@angular/http": "~5.1.0", - "@angular/platform-browser": "~5.1.0", - "@angular/platform-browser-dynamic": "~5.1.0", - "@angular/router": "~5.1.0", - "nativescript-angular": "~5.1.0", + "@angular/common": "^5.0.0", + "@angular/compiler": "^5.0.0", + "@angular/core": "^5.0.0", + "@angular/forms": "^5.0.0", + "@angular/http": "^5.0.0", + "@angular/platform-browser": "^5.0.0", + "@angular/platform-browser-dynamic": "^5.0.0", + "@angular/router": "^5.0.0", + "nativescript-angular": "next", "nativescript-fresco": "^3.0.2", "nativescript-intl": "^3.0.0", - "nativescript-ui-autocomplete": "^3.6.0", - "nativescript-ui-calendar": "^3.5.0", - "nativescript-ui-chart": "^3.5.0", - "nativescript-ui-dataform": "^3.5.0", - "nativescript-ui-gauge": "^3.5.0", - "nativescript-ui-listview": "^3.5.0", - "nativescript-ui-sidedrawer": "^3.5.0", + "nativescript-theme-core": "^1.0.4", + "nativescript-ui-autocomplete": "^^4.0.0", + "nativescript-ui-calendar": "^4.0.0", + "nativescript-ui-chart": "^4.0.0", + "nativescript-ui-dataform": "^4.0.0", + "nativescript-ui-gauge": "^4.0.0", + "nativescript-ui-listview": "^4.0.0", + "nativescript-ui-sidedrawer": "^4.0.0", "nativescript-unit-test-runner": "^0.3.2", "rxjs": "^5.5.2", - "tns-core-modules": "~3.4.0", + "tns-core-modules": "next", "zone.js": "~0.8.2" }, "devDependencies": { "uglifyjs-webpack-plugin": "^1.1.6", - "@angular/compiler-cli": "~5.1.0", + "@angular/compiler-cli": "^5.0.0", "@ngtools/webpack": "~1.8.2", "babel-traverse": "6.24.1", "babel-types": "6.24.1", @@ -62,7 +63,7 @@ "mocha": "^3.3.0", "nativescript-css-loader": "~0.26.0", "nativescript-dev-typescript": "0.5.1", - "nativescript-dev-webpack": "~0.9.0", + "nativescript-dev-webpack": "next", "nativescript-worker-loader": "~0.8.1", "raw-loader": "~0.5.1", "resolve-url-loader": "~2.1.0", @@ -72,7 +73,8 @@ "typescript": "~2.4.2", "webpack": "~3.8.1", "webpack-bundle-analyzer": "^2.8.2", - "webpack-sources": "~1.0.1" + "webpack-sources": "~1.0.1", + "clean-webpack-plugin": "~0.1.19" }, "scripts": { "tslint": "tslint --project tsconfig.json --config tslint.json", From 35447aad5d3133ac630a33b895526d4e61799e5e Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Tue, 10 Apr 2018 13:58:45 +0300 Subject: [PATCH 02/10] chore: Returned previous plugins version --- sdkAngular/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/sdkAngular/package.json b/sdkAngular/package.json index 4393b637..029148a0 100644 --- a/sdkAngular/package.json +++ b/sdkAngular/package.json @@ -30,12 +30,12 @@ "nativescript-fresco": "^3.0.2", "nativescript-intl": "^3.0.0", "nativescript-theme-core": "^1.0.4", - "nativescript-ui-autocomplete": "^^4.0.0", - "nativescript-ui-calendar": "^4.0.0", - "nativescript-ui-chart": "^4.0.0", - "nativescript-ui-dataform": "^4.0.0", - "nativescript-ui-gauge": "^4.0.0", - "nativescript-ui-listview": "^4.0.0", + "nativescript-ui-autocomplete": "^3.6.0", + "nativescript-ui-calendar": "^3.5.0", + "nativescript-ui-chart": "^3.5.0", + "nativescript-ui-dataform": "^3.5.0", + "nativescript-ui-gauge": "^3.5.0", + "nativescript-ui-listview": "^3.5.0", "nativescript-ui-sidedrawer": "^4.0.0", "nativescript-unit-test-runner": "^0.3.2", "rxjs": "^5.5.2", From d499f6aaaea1d1bd42b2583d28eda99b27a1b161 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Tue, 10 Apr 2018 16:18:07 +0300 Subject: [PATCH 03/10] chore: Update versions for release of 4.0.0 --- sdkAngular/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sdkAngular/package.json b/sdkAngular/package.json index 029148a0..c7cfbcce 100644 --- a/sdkAngular/package.json +++ b/sdkAngular/package.json @@ -26,7 +26,7 @@ "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", - "nativescript-angular": "next", + "nativescript-angular": "5.3.0", "nativescript-fresco": "^3.0.2", "nativescript-intl": "^3.0.0", "nativescript-theme-core": "^1.0.4", @@ -39,7 +39,7 @@ "nativescript-ui-sidedrawer": "^4.0.0", "nativescript-unit-test-runner": "^0.3.2", "rxjs": "^5.5.2", - "tns-core-modules": "next", + "tns-core-modules": "4.0.0", "zone.js": "~0.8.2" }, "devDependencies": { From 7245174ad8c6a39bc702ab7adb24993b76bdc799 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Tue, 10 Apr 2018 16:48:14 +0300 Subject: [PATCH 04/10] chore Update runtime dependencies to latest --- sdkAngular/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sdkAngular/package.json b/sdkAngular/package.json index c7cfbcce..110206ef 100644 --- a/sdkAngular/package.json +++ b/sdkAngular/package.json @@ -11,10 +11,10 @@ "nativescript": { "id": "org.nativescript.sdkAngular", "tns-ios": { - "version": "3.4.0" + "version": "4.0.0" }, "tns-android": { - "version": "3.4.0" + "version": "4.0.0" } }, "dependencies": { From 7d755880f4619465f07b921d1425d39267a506fc Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Wed, 11 Apr 2018 11:03:26 +0300 Subject: [PATCH 05/10] chore: Remove "Drawer Over Navigation" example --- sdkAngular/app/navigation/mock-exampleItems.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/sdkAngular/app/navigation/mock-exampleItems.ts b/sdkAngular/app/navigation/mock-exampleItems.ts index d44011e9..976894e8 100644 --- a/sdkAngular/app/navigation/mock-exampleItems.ts +++ b/sdkAngular/app/navigation/mock-exampleItems.ts @@ -441,11 +441,6 @@ export var EXAMPLEITEMS: ExampleItem[] = [ "title": "Events", "path": "SideDrawerEventsComponent/SideDrawerEventsComponent", "subItems": [] - }, - { - "title": "Drawer Over Navigation", - "path": "SideDrawerOverNavigationComponent/SideDrawerOverNavigationComponent", - "subItems": [] } ] }, From 7686d64f03001ec9e43f99c46fe05971ebf412d9 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Wed, 11 Apr 2018 15:00:56 +0300 Subject: [PATCH 06/10] chore: Update package versions --- sdkAngular/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdkAngular/package.json b/sdkAngular/package.json index 110206ef..e128455e 100644 --- a/sdkAngular/package.json +++ b/sdkAngular/package.json @@ -11,7 +11,7 @@ "nativescript": { "id": "org.nativescript.sdkAngular", "tns-ios": { - "version": "4.0.0" + "version": "4.0.1" }, "tns-android": { "version": "4.0.0" From 392c62667187b47693693a49e1ba89b6372d16b9 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Wed, 11 Apr 2018 15:08:20 +0300 Subject: [PATCH 07/10] chore: Update nativescript-dev-webpack package and related files --- sdkAngular/app/vendor-platform.android.ts | 1 - sdkAngular/package.json | 8 +- sdkAngular/webpack.config.js | 113 +++++++++++++++------- 3 files changed, 80 insertions(+), 42 deletions(-) diff --git a/sdkAngular/app/vendor-platform.android.ts b/sdkAngular/app/vendor-platform.android.ts index da00f85f..a2dbdd9a 100644 --- a/sdkAngular/app/vendor-platform.android.ts +++ b/sdkAngular/app/vendor-platform.android.ts @@ -8,4 +8,3 @@ if (!global["__snapshot"]) { require("ui/frame/activity"); require("./main-activity.android.ts"); } - diff --git a/sdkAngular/package.json b/sdkAngular/package.json index e128455e..b9f8b6b0 100644 --- a/sdkAngular/package.json +++ b/sdkAngular/package.json @@ -43,13 +43,13 @@ "zone.js": "~0.8.2" }, "devDependencies": { - "uglifyjs-webpack-plugin": "^1.1.6", "@angular/compiler-cli": "^5.0.0", "@ngtools/webpack": "~1.8.2", "babel-traverse": "6.24.1", "babel-types": "6.24.1", "babylon": "6.17.0", "chai": "^3.5.0", + "clean-webpack-plugin": "~0.1.19", "codelyzer": "^3.0.0", "copy-webpack-plugin": "~4.0.1", "css-loader": "~0.28.7", @@ -63,7 +63,7 @@ "mocha": "^3.3.0", "nativescript-css-loader": "~0.26.0", "nativescript-dev-typescript": "0.5.1", - "nativescript-dev-webpack": "next", + "nativescript-dev-webpack": "^0.10.1", "nativescript-worker-loader": "~0.8.1", "raw-loader": "~0.5.1", "resolve-url-loader": "~2.1.0", @@ -71,10 +71,10 @@ "tslib": "1.7.1", "tslint": "^5.1.0", "typescript": "~2.4.2", + "uglifyjs-webpack-plugin": "^1.1.6", "webpack": "~3.8.1", "webpack-bundle-analyzer": "^2.8.2", - "webpack-sources": "~1.0.1", - "clean-webpack-plugin": "~0.1.19" + "webpack-sources": "~1.0.1" }, "scripts": { "tslint": "tslint --project tsconfig.json --config tslint.json", diff --git a/sdkAngular/webpack.config.js b/sdkAngular/webpack.config.js index 4a8a5ff7..401ff1f6 100644 --- a/sdkAngular/webpack.config.js +++ b/sdkAngular/webpack.config.js @@ -1,10 +1,10 @@ -const { resolve, join } = require("path"); +const { relative, resolve, join } = require("path"); const webpack = require("webpack"); const nsWebpack = require("nativescript-dev-webpack"); const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); +const CleanWebpackPlugin = require("clean-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); @@ -14,25 +14,52 @@ module.exports = env => { if (!platform) { throw new Error("You need to provide a target platform!"); } + const platforms = ["ios", "android"]; - const { snapshot, uglify, report, aot } = env; - const ngToolsWebpackOptions = { tsConfigPath: "tsconfig.json" }; + const projectRoot = __dirname; + // Default destination inside platforms//... + const dist = resolve(projectRoot, nsWebpack.getAppPath(platform)); + const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS"; + + const { + // The 'appPath' and 'appResourcesPath' values are fetched from + // the nsconfig.json configuration file + // when bundling with `tns run android|ios --bundle`. + appPath = "app", + appResourcesPath = "app/App_Resources", + + // Aot, snapshot, uglify and report can be enabled by providing + // the `--env.snapshot`, `--env.uglify` or `--env.report` flags + // when running 'tns run android|ios' + aot, + snapshot, + uglify, + report, + } = env; + const ngToolsWebpackOptions = { tsConfigPath: join(__dirname, "tsconfig.json") }; - const nativeClassExtenders = [ - join(__dirname, "app/main-activity.android.ts"), - ]; + const appFullPath = resolve(projectRoot, appPath); + const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const config = { - context: resolve("./app"), + context: appFullPath, + watchOptions: { + ignored: [ + appResourcesFullPath, + // Don't watch hidden files + "**/.*", + ] + }, target: nativescriptTarget, entry: { - bundle: aot ? "./main.aot.ts" : "./main.ts", + bundle: aot ? + `./${nsWebpack.getAotEntryModule(appFullPath)}` : + `./${nsWebpack.getEntryModule(appFullPath)}`, vendor: "./vendor", }, output: { pathinfo: true, - // Default destination inside platforms//... - path: resolve(nsWebpack.getAppPath(platform)), + path: dist, libraryTarget: "commonjs2", filename: "[name].js", }, @@ -44,7 +71,7 @@ module.exports = env => { "node_modules", ], alias: { - '~': resolve("./app") + '~': appFullPath }, // don't resolve symlinks to symlinked modules symlinks: false @@ -65,15 +92,30 @@ module.exports = env => { { test: /\.html$|\.xml$/, use: "raw-loader" }, // tns-core-modules reads the app.css and its imports using css-loader - { test: /\/app\.css$/, use: "css-loader?url=false" }, - { test: /\/app\.scss$/, use: ["css-loader?url=false", "sass-loader"] }, + { + test: /[\/|\\]app\.css$/, + use: { + loader: "css-loader", + options: { minimize: false, url: false }, + } + }, + { + test: /[\/|\\]app\.scss$/, + use: [ + { loader: "css-loader", options: { minimize: false, url: false } }, + "sass-loader" + ] + }, // Angular components reference css files and their imports using raw-loader - { test: /\.css$/, exclude: /\/app\.css$/, use: "raw-loader" }, - { test: /\.scss$/, exclude: /\/app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] }, + { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" }, + { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] }, // Compile TypeScript files with ahead-of-time compiler. - { test: /.ts$/, use: ["nativescript-dev-webpack/moduleid-compat-loader", "@ngtools/webpack"] }, + { test: /.ts$/, use: [ + "nativescript-dev-webpack/moduleid-compat-loader", + { loader: "@ngtools/webpack", options: ngToolsWebpackOptions }, + ]}, ], }, plugins: [ @@ -85,16 +127,23 @@ module.exports = env => { new webpack.DefinePlugin({ "global.TNS_WEBPACK": "true", }), + // Remove all files from the out dir. + new CleanWebpackPlugin([ `${dist}/**/*` ]), + // Copy native app resources to out dir. + new CopyWebpackPlugin([ + { + from: `${appResourcesFullPath}/${appResourcesPlatformDir}`, + to: `${dist}/App_Resources/${appResourcesPlatformDir}`, + context: projectRoot + }, + ]), // Copy assets to out dir. Add your own globs as needed. new CopyWebpackPlugin([ - { from: "App_Resources/**" }, { from: "fonts/**" }, { from: "**/*.jpg" }, { from: "**/*.png" }, { from: "**/*.xml" }, - { from: "**/person-model.json" }, - { from: "**/person-metadata.json" }, - ]), + ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), // Generate a bundle starter script and activate it in package.json new nsWebpack.GenerateBundleStarterPlugin([ "./vendor", @@ -105,7 +154,7 @@ module.exports = env => { // AngularCompilerPlugin with augmented NativeScript filesystem to handle platform specific resource resolution. new nsWebpack.NativeScriptAngularCompilerPlugin( Object.assign({ - entryModule: resolve(__dirname, "app/app.module#AppModule"), + entryModule: resolve(appPath, "app.module#AppModule"), skipCodeGeneration: !aot, platformOptions: { platform, @@ -124,20 +173,17 @@ module.exports = env => { analyzerMode: "static", openAnalyzer: false, generateStatsFile: true, - reportFilename: join(__dirname, "report", `report.html`), - statsFilename: join(__dirname, "report", `stats.json`), + reportFilename: resolve(projectRoot, "report", `report.html`), + statsFilename: resolve(projectRoot, "report", `stats.json`), })); } if (snapshot) { config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ chunk: "vendor", - projectRoot: __dirname, + projectRoot, webpackConfig: config, targetArchs: ["arm", "arm64", "ia32"], - tnsJavaClassesOptions: { - packages: ["tns-core-modules" ], - modules: nativeClassExtenders, - }, + tnsJavaClassesOptions: { packages: ["tns-core-modules" ] }, useLibs: false })); } @@ -148,17 +194,10 @@ module.exports = env => { const compress = platform !== "android"; config.plugins.push(new UglifyJsPlugin({ uglifyOptions: { - mangle: { - reserved: [ - ...nsWebpack.uglifyMangleExcludes, - "org.nativescript.sdkAngular.MainActivity", - "AutoCompleteAdapter", - ], - }, + mangle: { reserved: nsWebpack.uglifyMangleExcludes }, // Deprecated. Remove if using {N} 4+. compress, } })); } - return config; }; From efe2879bec2c618d755778ae9fe9ce6d21530f6d Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Fri, 13 Apr 2018 11:16:24 +0300 Subject: [PATCH 08/10] fix: Move "main-activity" request out of vendor --- sdkAngular/app/main.ts | 1 + sdkAngular/app/vendor-platform.android.ts | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/sdkAngular/app/main.ts b/sdkAngular/app/main.ts index 639bfd51..de7ecf98 100644 --- a/sdkAngular/app/main.ts +++ b/sdkAngular/app/main.ts @@ -1,4 +1,5 @@ import { platformNativeScriptDynamic } from "nativescript-angular/platform"; import { AppModule } from "./app.module"; +require("./main-activity.android.ts"); platformNativeScriptDynamic().bootstrapModule(AppModule); diff --git a/sdkAngular/app/vendor-platform.android.ts b/sdkAngular/app/vendor-platform.android.ts index a2dbdd9a..719f2649 100644 --- a/sdkAngular/app/vendor-platform.android.ts +++ b/sdkAngular/app/vendor-platform.android.ts @@ -6,5 +6,4 @@ if (!global["__snapshot"]) { // This way, they will be evaluated on app start as early as possible. require("ui/frame"); require("ui/frame/activity"); - require("./main-activity.android.ts"); } From cfc42f8dc58904df9473513d5d4c9bbb05b420ef Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Fri, 13 Apr 2018 11:48:24 +0300 Subject: [PATCH 09/10] fix: Move main-activity request for Android only --- sdkAngular/app/main.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/sdkAngular/app/main.ts b/sdkAngular/app/main.ts index de7ecf98..38674044 100644 --- a/sdkAngular/app/main.ts +++ b/sdkAngular/app/main.ts @@ -1,5 +1,9 @@ import { platformNativeScriptDynamic } from "nativescript-angular/platform"; import { AppModule } from "./app.module"; -require("./main-activity.android.ts"); +import * as application from "tns-core-modules/application"; + +if (application.android) { + require("./main-activity.android.ts"); +} platformNativeScriptDynamic().bootstrapModule(AppModule); From 1eccccff7e541c2b710a8796e032ffeaf7c7ad5a Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Mon, 16 Apr 2018 13:53:50 +0300 Subject: [PATCH 10/10] fix: Remove custom main-activity chore: Update to latest versions of packages chore: Update tsconfig --- .../App_Resources/Android/AndroidManifest.xml | 4 +- sdkAngular/app/app.module.ts | 1 - sdkAngular/app/main-activity.android.ts | 42 -------------- sdkAngular/app/main.ts | 4 -- sdkAngular/package.json | 57 ++++++++++--------- sdkAngular/tsconfig.json | 6 +- sdkAngular/webpack.config.js | 1 - 7 files changed, 34 insertions(+), 81 deletions(-) delete mode 100644 sdkAngular/app/main-activity.android.ts diff --git a/sdkAngular/app/App_Resources/Android/AndroidManifest.xml b/sdkAngular/app/App_Resources/Android/AndroidManifest.xml index fc247124..94811acc 100644 --- a/sdkAngular/app/App_Resources/Android/AndroidManifest.xml +++ b/sdkAngular/app/App_Resources/Android/AndroidManifest.xml @@ -24,9 +24,9 @@ android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/AppTheme" > - + diff --git a/sdkAngular/app/app.module.ts b/sdkAngular/app/app.module.ts index 0d03ed72..987894c1 100644 --- a/sdkAngular/app/app.module.ts +++ b/sdkAngular/app/app.module.ts @@ -2,7 +2,6 @@ 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 { 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"; diff --git a/sdkAngular/app/main-activity.android.ts b/sdkAngular/app/main-activity.android.ts deleted file mode 100644 index 8a220fa3..00000000 --- a/sdkAngular/app/main-activity.android.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { setActivityCallbacks, AndroidActivityCallbacks } from "tns-core-modules/ui/frame"; - -@JavaProxy("org.nativescript.sdkAngular.MainActivity") -class Activity extends android.support.v7.app.AppCompatActivity { - private _callbacks: AndroidActivityCallbacks; - - protected onCreate(savedInstanceState: android.os.Bundle): void { - if (!this._callbacks) { - setActivityCallbacks(this); - } - - this._callbacks.onCreate(this, savedInstanceState, super.onCreate); - } - - protected onSaveInstanceState(outState: android.os.Bundle): void { - this._callbacks.onSaveInstanceState(this, outState, super.onSaveInstanceState); - } - - protected onStart(): void { - this._callbacks.onStart(this, super.onStart); - } - - protected onStop(): void { - this._callbacks.onStop(this, super.onStop); - } - - protected onDestroy(): void { - this._callbacks.onDestroy(this, super.onDestroy); - } - - public onBackPressed(): void { - this._callbacks.onBackPressed(this, super.onBackPressed); - } - - public onRequestPermissionsResult(requestCode: number, permissions: Array, grantResults: Array): void { - this._callbacks.onRequestPermissionsResult(this, requestCode, permissions, grantResults, undefined); - } - - protected onActivityResult(requestCode: number, resultCode: number, data: android.content.Intent): void { - this._callbacks.onActivityResult(this, requestCode, resultCode, data, super.onActivityResult); - } -} \ No newline at end of file diff --git a/sdkAngular/app/main.ts b/sdkAngular/app/main.ts index 38674044..6d3b78c8 100644 --- a/sdkAngular/app/main.ts +++ b/sdkAngular/app/main.ts @@ -2,8 +2,4 @@ import { platformNativeScriptDynamic } from "nativescript-angular/platform"; import { AppModule } from "./app.module"; import * as application from "tns-core-modules/application"; -if (application.android) { - require("./main-activity.android.ts"); -} - platformNativeScriptDynamic().bootstrapModule(AppModule); diff --git a/sdkAngular/package.json b/sdkAngular/package.json index b9f8b6b0..34b3db7e 100644 --- a/sdkAngular/package.json +++ b/sdkAngular/package.json @@ -1,6 +1,6 @@ { "name": "nativescript-telerik-ui-sdk-angular-examples", - "version": "3.0.0", + "version": "4.0.0", "description": "Nativescript project that demonstrates the Progress NativeScript UI suite with Angular", "license": "SEE LICENSE IN ", "readme": "NativeScript Application", @@ -18,18 +18,19 @@ } }, "dependencies": { - "@angular/common": "^5.0.0", - "@angular/compiler": "^5.0.0", - "@angular/core": "^5.0.0", - "@angular/forms": "^5.0.0", - "@angular/http": "^5.0.0", - "@angular/platform-browser": "^5.0.0", - "@angular/platform-browser-dynamic": "^5.0.0", - "@angular/router": "^5.0.0", - "nativescript-angular": "5.3.0", + "@angular/animations": "~5.2.0", + "@angular/common": "~5.2.0", + "@angular/compiler": "~5.2.0", + "@angular/core": "~5.2.0", + "@angular/forms": "~5.2.0", + "@angular/http": "~5.2.0", + "@angular/platform-browser": "~5.2.0", + "@angular/platform-browser-dynamic": "~5.2.0", + "@angular/router": "~5.2.0", + "nativescript-angular": "~5.3.0", "nativescript-fresco": "^3.0.2", "nativescript-intl": "^3.0.0", - "nativescript-theme-core": "^1.0.4", + "nativescript-theme-core": "~1.0.4", "nativescript-ui-autocomplete": "^3.6.0", "nativescript-ui-calendar": "^3.5.0", "nativescript-ui-chart": "^3.5.0", @@ -38,22 +39,28 @@ "nativescript-ui-listview": "^3.5.0", "nativescript-ui-sidedrawer": "^4.0.0", "nativescript-unit-test-runner": "^0.3.2", - "rxjs": "^5.5.2", + "reflect-metadata": "~0.1.10", + "rxjs": "~5.5.5", "tns-core-modules": "4.0.0", - "zone.js": "~0.8.2" + "zone.js": "~0.8.18" }, "devDependencies": { - "@angular/compiler-cli": "^5.0.0", - "@ngtools/webpack": "~1.8.2", - "babel-traverse": "6.24.1", - "babel-types": "6.24.1", - "babylon": "6.17.0", - "chai": "^3.5.0", + "@angular/compiler-cli": "~5.2.0", + "@ngtools/webpack": "~1.9.4", + "babel-traverse": "6.26.0", + "babel-types": "6.26.0", + "babylon": "6.18.0", "clean-webpack-plugin": "~0.1.19", + "copy-webpack-plugin": "~4.3.0", + "extract-text-webpack-plugin": "~3.0.2", + "nativescript-dev-typescript": "~0.7.0", + "resolve-url-loader": "~2.2.1", + "typescript": "~2.7.2", + "webpack": "~3.10.0", + "webpack-bundle-analyzer": "^2.9.1", + "webpack-sources": "~1.1.0", "codelyzer": "^3.0.0", - "copy-webpack-plugin": "~4.0.1", "css-loader": "~0.28.7", - "extract-text-webpack-plugin": "~3.0.0", "filewalker": "0.1.3", "karma": "^1.6.0", "karma-chai": "^0.1.0", @@ -62,19 +69,13 @@ "lazy": "1.0.11", "mocha": "^3.3.0", "nativescript-css-loader": "~0.26.0", - "nativescript-dev-typescript": "0.5.1", "nativescript-dev-webpack": "^0.10.1", "nativescript-worker-loader": "~0.8.1", "raw-loader": "~0.5.1", - "resolve-url-loader": "~2.1.0", "tns-platform-declarations": "3.4.0", "tslib": "1.7.1", "tslint": "^5.1.0", - "typescript": "~2.4.2", - "uglifyjs-webpack-plugin": "^1.1.6", - "webpack": "~3.8.1", - "webpack-bundle-analyzer": "^2.8.2", - "webpack-sources": "~1.0.1" + "uglifyjs-webpack-plugin": "^1.1.6" }, "scripts": { "tslint": "tslint --project tsconfig.json --config tslint.json", diff --git a/sdkAngular/tsconfig.json b/sdkAngular/tsconfig.json index fe58ed22..8e80ded9 100644 --- a/sdkAngular/tsconfig.json +++ b/sdkAngular/tsconfig.json @@ -23,12 +23,12 @@ "*": [ "./node_modules/tns-core-modules/*", "./node_modules/*" + ], + "~/*": [ + "app/*" ] } }, - "filesGlob": [ - "./**/*.ts" - ], "exclude": [ "node_modules", "platforms" diff --git a/sdkAngular/webpack.config.js b/sdkAngular/webpack.config.js index 401ff1f6..0fe66435 100644 --- a/sdkAngular/webpack.config.js +++ b/sdkAngular/webpack.config.js @@ -194,7 +194,6 @@ module.exports = env => { const compress = platform !== "android"; config.plugins.push(new UglifyJsPlugin({ uglifyOptions: { - mangle: { reserved: nsWebpack.uglifyMangleExcludes }, // Deprecated. Remove if using {N} 4+. compress, } }));