Skip to content

Commit 7c4b79d

Browse files
SvetoslavTsenovSvetoslavTsenov
committed
Refactoring, optimizations and remove of automationText property
1 parent 4e789b4 commit 7c4b79d

File tree

11 files changed

+133
-125
lines changed

11 files changed

+133
-125
lines changed

‎app/action-bar/action-bar-first.component.ts‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,16 @@ import {Component} from '@angular/core';
44
selector: "first-action-bar",
55
template: `
66
<ActionBar title="Title 1" automationText="title">
7-
<ActionItem *ngIf="show" text="action" (tap)="onTap()" [nsRouterLink]="['/second']"
8-
automationText="action"></ActionItem>
7+
<ActionItem *ngIf="show" text="action" (tap)="onTap()" [nsRouterLink]="['/second']"></ActionItem>
98
<ActionItem (tap)="onShare()" ios.systemIcon="9" ios.position="left"
10-
android.systemIcon="ic_menu_share_holo_light" android.position="actionBar"
11-
automationText="share"></ActionItem>
9+
android.systemIcon="ic_menu_share_holo_light" android.position="actionBar"></ActionItem>
1210
<ActionItem text="delete" (tap)="onDelete()"
13-
ios.systemIcon="16" ios.position="right"
14-
android.position="popup"
15-
automationText="delete"></ActionItem>
11+
ios.systemIcon="16" ios.position="right" android.position="popup"></ActionItem>
1612
</ActionBar>
1713
1814
<StackLayout verticalAlignment="center">
19-
<Label [text]="messageShare" automationText="lblShare"></Label>
20-
<Label [text]="messageDelete" automationText="lblDelete"></Label>
15+
<Label [text]="messageShare"></Label>
16+
<Label [text]="messageDelete"></Label>
2117
</StackLayout>
2218
`,
2319
})

‎app/action-bar/action-bar-nested.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import {Component} from '@angular/core';
55
template: `
66
<ActionBarExtension>
77
<ActionItem *ngIf="show" (tap)="onTap()">
8-
<Button text="CUSTOM" automationText="btnCustom"></Button>
8+
<Button text="CUSTOM"></Button>
99
</ActionItem>
1010
</ActionBarExtension>
1111
1212
<StackLayout orientation="horizontal" horizontalAlignment="center">
13-
<Button [text]="show ? 'hide' : 'show'" (tap)="show = !show" automationText="btnShowHide"></Button>
14-
<Label [text]="message" automationText="lblCustom"></Label>
13+
<Button [text]="show ? 'hide' : 'show'" (tap)="show = !show"></Button>
14+
<Label [text]="message"></Label>
1515
</StackLayout>
1616
`,
1717
})

‎app/action-bar/action-bar-second.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import {Component} from '@angular/core';
33
@Component({
44
selector: "second-action-bar",
55
template: `
6-
<ActionBar title="Title 2" automationText="title">
7-
<NavigationButton text="First" android.systemIcon="ic_menu_back" automationText="back"></NavigationButton>
8-
<ActionItem [text]="message" automationText="msg"></ActionItem>
9-
<ActionItem text="TAP" (tap)="onTap()" automationText="tap"></ActionItem>
6+
<ActionBar title="Title 2">
7+
<NavigationButton text="First" android.systemIcon="ic_menu_back"></NavigationButton>
8+
<ActionItem [text]="message"></ActionItem>
9+
<ActionItem text="TAP" (tap)="onTap()"></ActionItem>
1010
</ActionBar>
1111
1212
<StackLayout verticalAlignment="center">

‎app/app.routes.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Component } from "@angular/core";
2+
3+
import { FirstComponentActionBar } from "./action-bar/action-bar-first.component";
4+
import { SecondComponentActionBar } from "./action-bar/action-bar-second.component";
5+
6+
import { AppComponent } from "./template/app.component";
7+
8+
import { FirstComponent } from "./components/first.component";
9+
import { SecondComponent } from "./components/second.component";
10+
import { NavigationTestRouter, NavigationSubRoutes } from "./router/router-outlet";
11+
12+
import { BindingComponent } from "./binding/binding-page";
13+
14+
import { ListViewComponent } from "./listView/commonTemplate/list-view-page";
15+
import { ListViewControlComponent } from "./listView/customTemplate/list-view-item-template";
16+
import { ListViewAsyncPipeComponent } from "./listView/asyncPipeTemplate/async-pipe-template";
17+
import { ListViewMainPageComponent } from "./listView/listViewMainPage/list-view-main-page";
18+
19+
import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
20+
import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
21+
22+
import { NavigationOptionsComponent } from "./navigation-options/navigation-options.component";
23+
import { NavigationInfoComponent } from "./navigation-options/navigation-info.component";
24+
import { MainComponent } from "./main/main-page-router-outlet";
25+
26+
27+
export var routableComponents = [];
28+
29+
// Set isNavigatable: trueif the page is a mian page to other sub pages
30+
export const routes = [
31+
routeEntry({ path: '', component: MainComponent, data: { title: "" } }),
32+
routeEntry({ path: '', component: ModalContent, data: { title: "" } }),
33+
routeEntry({ path: 'template', component: AppComponent, data: { title: "Template", isNavigatable: true} }),
34+
35+
routeEntry({ path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true} }),
36+
37+
routeEntry({ path: 'first', component: FirstComponent, data: { title: "First", isNavigatable: true} }),
38+
routeEntry({ path: 'second', component: SecondComponent, data: { title: "Second", isNavigatable: true} }),
39+
40+
routeEntry({ path: 'first-action-bar', component: FirstComponentActionBar, data: { title: "ActionBar1", isNavigatable: true} }),
41+
routeEntry({ path: 'second-action-bar', component: SecondComponentActionBar, data: { title: "ActionBar2", isNavigatable: true} }),
42+
43+
routeEntry({ path: 'binding', component: BindingComponent, data: { title: "Binding", isNavigatable: true} }),
44+
45+
routeEntry({ path: 'ListViewExamples', component: ListViewMainPageComponent, data: { title: "ListViewExamples", isNavigatable: true} }),
46+
routeEntry({ path: 'listView/commonTemplate', component: ListViewComponent, data: { title: "commonTemplate" } }),
47+
routeEntry({ path: 'listView/customTemplate', component: ListViewControlComponent, data: { title: "customTemplate" } }),
48+
routeEntry({ path: 'listView/asyncPipeTemplate', component: ListViewAsyncPipeComponent, data: { title: "asyncPipeTemplate" } }),
49+
50+
routeEntry({ path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true} }),
51+
routeEntry({ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } }),
52+
routeEntry({ path: 'modal/modal-dialogs', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } }),
53+
54+
routeEntry({ path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} }),
55+
routeEntry({ path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } }),
56+
];
57+
58+
function routeEntry(data) {
59+
routableComponents.push(data.component)
60+
return data;
61+
}

‎app/binding/binding-page.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { Component } from "@angular/core";
44
selector: "binding",
55
template: `
66
<StackLayout>
7-
<TextField hint="oneWayDataBinding" automationText="tfOneWayBinding" keyboardType="email" [text]="oneWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
8-
<TextField hint="twoWayDataBindingBanana" automationText="tfTwoWayBinding" keyboardType="email" [(ngModel)]="twoWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
9-
<TextField hint="" automationText="tfCurlyBracket" keyboardType="email" text="{{ curlyBracket }}" autocorrect="false" autocapitalizationType="none"></TextField>
10-
<Label automationText="lbCurlyBracketBinding" text='Label with curlyBaracket binding: {{ twoWayDataBinding }}'></Label>
11-
<Label automationText="lbDate" [text]='completedDate | date:"fullDate"' ></Label>
12-
<StackLayout orientation="horizontal">
13-
<Button (tap)="changeValues()" automationText="changeValues" text="update from code" ></Button>
14-
<Button (tap)="getValues()" automationText="getValues" text="get" width="80" height="40"></Button>
7+
<TextField hint="oneWayDataBinding" keyboardType="email" [text]="oneWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
8+
<TextField hint="twoWayDataBindingBanana" keyboardType="email" [(ngModel)]="twoWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
9+
<TextField hint="" keyboardType="email" text="{{ curlyBracket }}" autocorrect="false" autocapitalizationType="none"></TextField>
10+
<Label text='Label with curlyBaracket binding: {{ twoWayDataBinding }}'></Label>
11+
<Label [text]='completedDate | date:"fullDate"' ></Label>
12+
<StackLayout orientation="horizontal" automationText="getValues">
13+
<Button (tap)="changeValues()" text="update from code" ></Button>
14+
<Button (tap)="getValues()" text="get" width="80" height="40"></Button>
1515
</StackLayout>
16-
<TextView [text]="results" automationText="tvResults" textWrap="true"></TextView>
16+
<TextView [text]="results" textWrap="true"></TextView>
1717
</StackLayout>
1818
`
1919
})

‎app/main.ts‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
// this import should be first in order to load some required settings (like globals and reflect-metadata)
22
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
33
import { NgModule } from "@angular/core";
4-
import { NavigationMainPageRouter, routes, routableComponents } from "./main/main-page-router-outlet";
5-
import { NestedComponent } from "./action-bar/action-bar-nested.component";
6-
import { CustomTemplate } from "./listView/customTemplate/list-view-item-template";
7-
import { ModalContent } from "./modal/modal-dialog.component";
4+
import { NavigationMainPageRouter } from "./main/main-page-router-outlet";
5+
import { routableComponents, routes } from "./app.routes";
86
import { NativeScriptRouterModule } from "nativescript-angular/router";
97
import { NativeScriptFormsModule } from "nativescript-angular/forms";
8+
import { NestedComponent } from "./action-bar/action-bar-nested.component";
9+
import { CustomTemplate } from "./listView/customTemplate/list-view-item-template";
1010

1111
@NgModule({
1212
declarations: [
1313
NavigationMainPageRouter,
1414
NestedComponent,
1515
CustomTemplate,
16-
ModalContent,
1716
...routableComponents
1817
],
19-
entryComponents: [
20-
ModalContent,
21-
],
2218
bootstrap: [NavigationMainPageRouter],
2319
imports: [
2420
NativeScriptModule,

‎app/main/main-page-router-outlet.ts‎

Lines changed: 31 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,44 @@
11
import { Component } from "@angular/core";
2-
3-
import { FirstComponentActionBar } from "../action-bar/action-bar-first.component";
4-
import { SecondComponentActionBar } from "../action-bar/action-bar-second.component";
5-
6-
import { AppComponent } from "../template/app.component";
7-
8-
import { FirstComponent } from "../components/first.component";
9-
import { SecondComponent } from "../components/second.component";
10-
import { NavigationTestRouter, NavigationSubRoutes } from "../router/router-outlet";
11-
12-
import { BindingComponent } from "../binding/binding-page";
13-
14-
import { ListViewComponent } from "../listView/commonTemplate/list-view-page";
15-
import { ListViewControlComponent } from "../listView/customTemplate/list-view-item-template";
16-
import { ListViewAsyncPipeComponent } from "../listView/asyncPipeTemplate/async-pipe-template";
17-
import { ListViewMainPageComponent } from "../listView/listViewMainPage/list-view-main-page";
18-
19-
import { ModalTest, ModalTestWithPushStrategy } from "../modal/modal-dialog.component";
20-
21-
import { NavigationOptionsComponent } from "../navigation-options/navigation-options.component";
22-
import { NavigationInfoComponent } from "../navigation-options/navigation-info.component";
23-
2+
import { routes } from "../app.routes";
3+
import * as platform from "platform";
244

255
@Component({
266
selector: "main",
277
template: `
28-
<StackLayout>
29-
<Label text="Main Component" class="title"></Label>
30-
31-
<StackLayout orientation="horizontal" horizontalAlignment="center">
32-
<Button text="Template" [nsRouterLink]="['/template']"></Button>
33-
<Button text="Router" [nsRouterLink]="['/router']"></Button>
34-
</StackLayout>
35-
36-
<StackLayout orientation="horizontal" horizontalAlignment="center">
37-
<Button text="First" [nsRouterLink]="['/first']"></Button>
38-
<Button text="Second" [nsRouterLink]="['/second']"></Button>
39-
</StackLayout>
40-
41-
<StackLayout orientation="horizontal" horizontalAlignment="center">
42-
<Button text="ActionBar1" [nsRouterLink]="['/first-action-bar']"></Button>
43-
<Button text="ActionBar2" [nsRouterLink]="['/second-action-bar']"></Button>
44-
</StackLayout>
45-
46-
<Button text="Binding" [nsRouterLink]="['/binding']"></Button>
47-
48-
<Button text="ListViewExamples" [nsRouterLink]="['/listView']"></Button>
49-
50-
<StackLayout orientation="horizontal" horizontalAlignment="center">
51-
<Button text="modal" [nsRouterLink]="['/modal']"></Button>
52-
<Button text="modal(onPush)" [nsRouterLink]="['/modal-on-push']"></Button>
53-
</StackLayout>
54-
55-
<Button text="nav-options" [nsRouterLink]="['/nav-options']"></Button>
56-
</StackLayout>
8+
<WrapLayout id='mainView' [orientation]="orientation">
9+
<Button *ngFor="let route of routers" [text]="route.data.title" [nsRouterLink]="route.path" [color]="route.data.isNavigatable == true ? 'red':'blue'" height="40"></Button>
10+
</WrapLayout>
5711
`,
5812
})
59-
export class MainComponent { }
13+
export class MainComponent {
14+
private _routers = [];
15+
private _routes = require("../app.routes").routes
16+
private _orientation: string = "vertical";
17+
18+
constructor() {
19+
let routs = this._routes.filter((item) => {
20+
let isNavigatable = item.data.isNavigatable != undefined && item.data.isNavigatable == true && item.path != '';
21+
console.log("Page route:" + item.path + "; page name: " + item.data.title + "; isNavigatable: " + isNavigatable);
22+
return isNavigatable;
23+
});
24+
25+
this._routers = routs;
26+
if (platform.isAndroid) {
27+
this._orientation = "horizontal";
28+
}
29+
}
30+
31+
get routers() {
32+
return this._routers;
33+
}
34+
35+
get orientation() {
36+
return this._orientation;
37+
}
38+
}
6039

6140
@Component({
6241
selector: 'navigation-main',
6342
template: `<page-router-outlet></page-router-outlet>`
6443
})
6544
export class NavigationMainPageRouter { }
66-
67-
68-
export const routes = [
69-
{ path: '', component: MainComponent },
70-
{ path: 'template', component: AppComponent },
71-
{ path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes },
72-
{ path: 'first', component: FirstComponent },
73-
{ path: 'second', component: SecondComponent },
74-
75-
{ path: 'first-action-bar', component: FirstComponentActionBar },
76-
{ path: 'second-action-bar', component: SecondComponentActionBar },
77-
{ path: 'binding', component: BindingComponent },
78-
79-
{ path: 'listView', component: ListViewMainPageComponent },
80-
{ path: 'listView/commonTemplate', component: ListViewComponent },
81-
{ path: 'listView/customTemplate', component: ListViewControlComponent },
82-
{ path: 'listView/asyncPipeTemplate', component: ListViewAsyncPipeComponent },
83-
84-
{ path: 'modal', component: ModalTest },
85-
{ path: 'modal-on-push', component: ModalTestWithPushStrategy },
86-
87-
{ path: 'nav-options', component: NavigationOptionsComponent },
88-
{ path: 'nav-info', component: NavigationInfoComponent }
89-
];
90-
91-
export const routableComponents = [
92-
AppComponent, MainComponent, NavigationTestRouter,
93-
FirstComponent, SecondComponent,
94-
FirstComponentActionBar, SecondComponentActionBar,
95-
BindingComponent,
96-
ListViewMainPageComponent, ListViewComponent,
97-
ListViewControlComponent, ListViewAsyncPipeComponent,
98-
ModalTest, ModalTestWithPushStrategy,
99-
NavigationOptionsComponent, NavigationInfoComponent,
100-
]

‎app/modal/modal-dialog.component.ts‎ renamed to ‎app/modal/modal-dialogs/modal-dialog.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
22
import * as dialogs from "ui/dialogs";
33
import { ModalDialogService, ModalDialogOptions, ModalDialogParams } from "nativescript-angular/directives/dialogs";
44

5-
65
@Component({
76
selector: 'modal-content',
87
template: `

‎app/modal/modal-view-main-page.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "main",
5+
template: `
6+
<StackLayout>
7+
<Button text="modal" [nsRouterLink]="['/modal','modal-dialogs']"></Button>
8+
<Button text="modal(onPush)" [nsRouterLink]="['/modal','modal-dialogs']"></Button>
9+
</StackLayout>
10+
`,
11+
})
12+
export class ModalViewMainPageComponent { }

‎app/navigation-options/navigation-info.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {Frame} from "ui/frame";
77
selector: 'nav-info',
88
template: `
99
<StackLayout>
10-
<Label automationText="lbFrameStack" [text]="'frameStack: ' + frameStack" ></Label>
11-
<Label automationText="lbLocationStack" [text]="'locationStack: ' + locationStack" ></Label>
10+
<Label [text]="'frameStack: ' + frameStack" ></Label>
11+
<Label [text]="'locationStack: ' + locationStack" ></Label>
1212
1313
<Button text="update" (tap)="update()"></Button>
1414
<Button text="back to main" [nsRouterLink]="['/']" [clearHistory]="true"></Button>

0 commit comments

Comments
 (0)