Skip to content

Commit e4686cc

Browse files
SvetoslavTsenovSvetoslavTsenov
committed
Include new example for button text alignment.
Include tslint. Fix tslint errors. Include fonts.
1 parent 4b37586 commit e4686cc

39 files changed

+473
-168
lines changed

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,37 @@
1-
import {Component} from '@angular/core';
1+
import { Component } from "@angular/core";
22

33
@Component({
44
selector: "first-action-bar",
55
template: `
6-
<ActionBar title="Title 1" automationText="title">
6+
<ActionBar title="Title 1" automationText="title">
77
<ActionItem *ngIf="show" text="action" (tap)="onTap()" [nsRouterLink]="['/second']"></ActionItem>
8-
<ActionItem (tap)="onShare()" ios.systemIcon="9" ios.position="left"
9-
android.systemIcon="ic_menu_share_holo_light" android.position="actionBar"></ActionItem>
8+
<ActionItem (tap)="onShare()" ios.systemIcon="9"
9+
ios.position="left" android.systemIcon="ic_menu_share_holo_light" android.position="actionBar"></ActionItem>
1010
<ActionItem text="delete" (tap)="onDelete()"
1111
ios.systemIcon="16" ios.position="right" android.position="popup"></ActionItem>
1212
</ActionBar>
13-
1413
<StackLayout verticalAlignment="center">
1514
<Label [text]="messageShare"></Label>
1615
<Label [text]="messageDelete"></Label>
1716
</StackLayout>
1817
`,
1918
})
20-
export class FirstComponentActionBar {
19+
export class FirstActionBarComponent {
2120

2221
public counterShare: number = 0;
2322
public counterDelete: number = 0;
2423
public show: boolean = true;
2524

2625
public get messageShare(): string {
27-
if (this.counterShare == 1) {
26+
if (this.counterShare === 1) {
2827
return this.counterShare + " share tap";
2928
} else {
3029
return this.counterShare + " share taps";
3130
}
3231
}
3332

3433
public get messageDelete(): string {
35-
if (this.counterDelete == 1) {
34+
if (this.counterDelete === 1) {
3635
return this.counterDelete + " delete tap";
3736
} else {
3837
return this.counterDelete + " delete taps";

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component} from '@angular/core';
1+
import { Component } from "@angular/core";
22

33
@Component({
44
selector: "nested-component",
@@ -21,7 +21,7 @@ export class NestedComponent {
2121
public show: boolean = true;
2222

2323
public get message(): string {
24-
if (this.counter == 1) {
24+
if (this.counter === 1) {
2525
return this.counter + " custom tap";
2626
} else {
2727
return this.counter + " custom taps";

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import {Component} from '@angular/core';
1+
import { Component } from "@angular/core";
22

33
@Component({
44
selector: "second-action-bar",
55
template: `
66
<ActionBar title="Title 2">
77
<NavigationButton text="First" android.systemIcon="ic_menu_back"></NavigationButton>
8-
<ActionItem [text]="message"></ActionItem>
8+
<ActionItem [text]="message"></ActionItem>
99
<ActionItem text="TAP" (tap)="onTap()"></ActionItem>
1010
</ActionBar>
1111
@@ -14,12 +14,12 @@ import {Component} from '@angular/core';
1414
</StackLayout>
1515
`,
1616
})
17-
export class SecondComponentActionBar {
17+
export class SecondActionBarComponent {
1818

1919
public counter: number = 0;
2020

2121
public get message(): string {
22-
if (this.counter == 1) {
22+
if (this.counter === 1) {
2323
return this.counter + " tap";
2424
} else {
2525
return this.counter + " taps";

‎app/app.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import '~/nativescript-theme-core/css/core.light.css';
2-
2+
@import url(~/resources/fonts/FontAwesome);
33
button {
44
font-size: 13;
55
}
@@ -12,4 +12,8 @@ label {
1212
font-family: 'Courier'; /* Enabling this results in the error and shows a blank TabView */
1313
}
1414

15+
.btnIcon {
16+
font-family: 'FontAwesome';
17+
font-size: 30
18+
}
1519

‎app/app.module.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@ import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core
22
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
33
import { NSModuleFactoryLoader } from "nativescript-angular/router";
44

5-
import { NavigationMainPageRouter } from "./main/main-page-router-outlet";
5+
import { NavigationMainPageRouterComponent } from "./main/main-page-router-outlet";
66
import { routableComponents, routes } from "./app.routes";
77
import { NativeScriptRouterModule } from "nativescript-angular/router";
88
import { NativeScriptFormsModule } from "nativescript-angular/forms";
99
import { NestedComponent } from "./action-bar/action-bar-nested.component";
10-
import { CustomTemplate } from "./list-view/list-view-item-template.component";
10+
import { CustomTemplateComponent } from "./list-view/list-view-item-template.component";
1111

1212
@NgModule({
1313
declarations: [
14-
NavigationMainPageRouter,
14+
NavigationMainPageRouterComponent,
1515
NestedComponent,
16-
CustomTemplate,
16+
CustomTemplateComponent,
1717
...routableComponents,
1818
],
19-
bootstrap: [NavigationMainPageRouter],
19+
bootstrap: [NavigationMainPageRouterComponent],
2020
imports: [
2121
NativeScriptModule,
2222
NativeScriptFormsModule,
@@ -32,4 +32,3 @@ import { CustomTemplate } from "./list-view/list-view-item-template.component";
3232
schemas: [NO_ERRORS_SCHEMA],
3333
})
3434
export class AppModule { }
35-

‎app/app.routes.ts‎

Lines changed: 90 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Component } from "@angular/core";
22

3-
import { FirstComponentActionBar } from "./action-bar/action-bar-first.component";
4-
import { SecondComponentActionBar } from "./action-bar/action-bar-second.component";
3+
import { FirstActionBarComponent } from "./action-bar/action-bar-first.component";
4+
import { SecondActionBarComponent } from "./action-bar/action-bar-second.component";
55

66
import { AppComponent } from "./template/app.component";
77

88
import { FirstComponent } from "./router/router-outlet/first.component";
99
import { SecondComponent } from "./router/router-outlet/second.component";
10-
import { NavigationComponent, NavigationSubRoutes } from "./router/router-outlet/navigation.component";
10+
import { NavigationComponent, NAVIGATION_SUBROUTES } from "./router/router-outlet/navigation.component";
1111
import { LazyNavigationComponent } from "./router/lazy-module-navigation/lazy-navigation.component";
1212

1313
import { BindingComponent } from "./binding/binding-page.component";
@@ -22,7 +22,11 @@ import { ListViewMultipleTemplatesComponent } from "./list-view/multiple-templat
2222
import { ListPickerMainPageComponent } from "./list-picker/list-picker-main-page.component";
2323
import { ListPickerComponent } from "./list-picker/list-picker.component";
2424

25-
import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
25+
import {
26+
ModalTestComponent,
27+
ModalTestWithPushStrategyComponent,
28+
ModalContentComponent
29+
} from "./modal/modal-dialogs/modal-dialog.component";
2630
import { ModalViewMainPageComponent } from "./modal/modal-view-main-page.component";
2731
import { LazyLoadModalComponent } from "./modal/lazy/lazy-load-modal.component";
2832

@@ -36,12 +40,14 @@ import { SegmentedBarIssue649Component } from "./segmented-bar/issue-649.compone
3640

3741
import { DatePickerMainPageComponent } from "./date-picker/date-picker-main-page.component";
3842
import { DatePickerIssue324Component } from "./date-picker/issue-324.component";
43+
import { ButtonMainPageComponent } from "./button/button-main-page.component";
44+
import { ButtonTextAlignmentComponent } from "./button/button-text-alignment.component";
3945

4046
import { MainComponent } from "./main/main-page-router-outlet";
4147

4248
export const routableComponents = [
4349
MainComponent,
44-
ModalContent,
50+
ModalContentComponent,
4551
AppComponent,
4652

4753
NavigationComponent,
@@ -50,8 +56,8 @@ export const routableComponents = [
5056
FirstComponent,
5157
SecondComponent,
5258

53-
FirstComponentActionBar,
54-
SecondComponentActionBar,
59+
FirstActionBarComponent,
60+
SecondActionBarComponent,
5561

5662
BindingComponent,
5763

@@ -66,8 +72,8 @@ export const routableComponents = [
6672
ListPickerMainPageComponent,
6773

6874
ModalViewMainPageComponent,
69-
ModalTest,
70-
ModalTestWithPushStrategy,
75+
ModalTestComponent,
76+
ModalTestWithPushStrategyComponent,
7177
LazyLoadModalComponent,
7278

7379
TabViewComponent,
@@ -78,55 +84,102 @@ export const routableComponents = [
7884
SegmentedBarIssue649Component,
7985
DatePickerMainPageComponent,
8086
DatePickerIssue324Component,
87+
ButtonMainPageComponent,
88+
ButtonTextAlignmentComponent,
8189
];
8290

8391
// Set isNavigatable: true if the page is a mian page to other sub pages
8492
export const routes = [
85-
{ path: '', component: MainComponent, data: { title: "" } },
86-
{ path: '', component: ModalContent, data: { title: "" } },
87-
{ path: 'template', component: AppComponent, data: { title: "Template", isNavigatable: true } },
93+
{ path: "", component: MainComponent, data: { title: "" } },
94+
{ path: "", component: ModalContentComponent, data: { title: "" } },
95+
{ path: "template", component: AppComponent, data: { title: "Template", isNavigatable: true } },
8896

89-
{ path: 'router', component: NavigationComponent, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true } },
90-
{ path: 'lazy-router', component: LazyNavigationComponent, data: { title: "Lazy Router", isNavigatable: true } },
97+
{
98+
path: "router",
99+
component: NavigationComponent,
100+
children: NAVIGATION_SUBROUTES,
101+
data: { title: "Router", isNavigatable: true }
102+
},
103+
{ path: "lazy-router", component: LazyNavigationComponent, data: { title: "Lazy Router", isNavigatable: true } },
91104

92-
{ path: 'first', component: FirstComponent, data: { title: "First", isNavigatable: true } },
93-
{ path: 'second', component: SecondComponent, data: { title: "Second", isNavigatable: true } },
105+
{ path: "first", component: FirstComponent, data: { title: "First", isNavigatable: true } },
106+
{ path: "second", component: SecondComponent, data: { title: "Second", isNavigatable: true } },
94107

95-
{ path: 'first-action-bar', component: FirstComponentActionBar, data: { title: "ActionBar1", isNavigatable: true } },
96-
{ path: 'second-action-bar', component: SecondComponentActionBar, data: { title: "ActionBar2", isNavigatable: true } },
108+
{
109+
path: "first-action-bar",
110+
component: FirstActionBarComponent,
111+
data: { title: "ActionBar1", isNavigatable: true }
112+
},
113+
{
114+
path: "second-action-bar",
115+
component: SecondActionBarComponent,
116+
data: { title: "ActionBar2", isNavigatable: true }
117+
},
97118

98-
{ path: 'binding', component: BindingComponent, data: { title: "Binding", isNavigatable: true } },
119+
{ path: "binding", component: BindingComponent, data: { title: "Binding", isNavigatable: true } },
99120

100-
{ path: 'ListViewExamples', component: ListViewMainPageComponent, data: { title: "ListViewExamples", isNavigatable: true } },
121+
{
122+
path: "ListViewExamples",
123+
component: ListViewMainPageComponent,
124+
data: { title: "ListViewExamples", isNavigatable: true }
125+
},
101126
{ path: "ListViewExamples/commonTemplate", component: ListViewComponent, data: { title: "commonTemplate" } },
102127
{ path: "ListViewExamples/customTemplate", component: ListViewControlComponent, data: { title: "customTemplate" } },
103128
{ path: "listView/asyncPipeTemplate", component: ListViewAsyncPipeComponent, data: { title: "asyncPipeTemplate" } },
104-
{ path: "listView/nestedTemplate", component: ListViewWithNestedTemplateComponent, data: { title: "nestedTemplate" } },
105-
{ path: "listView/multiple-templates", component: ListViewMultipleTemplatesComponent, data: { title: "multipleTemplates" } },
106-
107-
{ path: 'listPicker', component: ListPickerMainPageComponent, data: { title: "ListPicker", isNavigatable: true } },
108-
{ path: 'listPicker/list-picker', component: ListPickerComponent, data: { title: "ListPicker", isNavigatable: false } },
129+
{
130+
path: "listView/nestedTemplate",
131+
component: ListViewWithNestedTemplateComponent,
132+
data: { title: "nestedTemplate" }
133+
},
134+
{
135+
path: "listView/multiple-templates",
136+
component: ListViewMultipleTemplatesComponent,
137+
data: { title: "multipleTemplates" }
138+
},
139+
{
140+
path: "listPicker",
141+
component: ListPickerMainPageComponent,
142+
data: { title: "ListPicker", isNavigatable: true }
143+
},
144+
{
145+
path: "listPicker/list-picker",
146+
component: ListPickerComponent,
147+
data: { title: "ListPicker", isNavigatable: false }
148+
},
149+
{ path: "modal", component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true } },
150+
{ path: "modal/modal-dialogs", component: ModalTestComponent, data: { title: "modal" } },
151+
{
152+
path: "modal/modal-dialogs-push",
153+
component: ModalTestWithPushStrategyComponent,
154+
data: { title: "modal(onPush)" }
155+
},
156+
{ path: "modal/lazy", component: LazyLoadModalComponent, data: { title: "modal(lazy)" } },
109157

110-
{ path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true } },
111-
{ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } },
112-
{ path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } },
113-
{ path: 'modal/lazy', component: LazyLoadModalComponent, data: { title: "modal(lazy)" } },
158+
{ path: "tab-view", component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
114159

115-
{ path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
160+
{ path: "nav-options", component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true } },
161+
{ path: "nav-info", component: NavigationInfoComponent, data: { title: "nav-info" } },
116162

117-
{ path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true } },
118-
{ path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } },
163+
{
164+
path: "segmented-bar",
165+
component: SegmentedBarMainPageComponent,
166+
data: { title: "SegmentedBar", isNavigatable: true }
167+
},
168+
{ path: "segmented-bar/issue-649", component: SegmentedBarIssue649Component, data: { title: "issue-649" } },
119169

120-
{ path: 'segmented-bar', component: SegmentedBarMainPageComponent, data: { title: "SegmentedBar", isNavigatable: true } },
121-
{ path: 'segmented-bar/issue-649', component: SegmentedBarIssue649Component, data: { title: "issue-649" } },
170+
{ path: "date-picker", component: DatePickerMainPageComponent, data: { title: "DatePicker", isNavigatable: true } },
171+
{ path: "date-picker/issue-324", component: DatePickerIssue324Component, data: { title: "issue-324" } },
122172

123-
{ path: 'date-picker', component: DatePickerMainPageComponent, data: { title: "DatePicker", isNavigatable: true } },
124-
{ path: 'date-picker/issue-324', component: DatePickerIssue324Component, data: { title: "issue-324" } },
173+
{ path: "button", component: ButtonMainPageComponent, data: { title: "Button", isNavigatable: true } },
174+
{
175+
path: "button/button-text-alignment",
176+
component: ButtonTextAlignmentComponent,
177+
data: { title: "button-text-alignment" }
178+
},
125179

126180
// Needed for AoT compilation
127181
{
128182
path: "lazy",
129183
loadChildren: "./lazy/lazy.module#LazyModule"
130184
},
131185
];
132-

‎app/binding/binding-page.component.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,19 @@ import { Component } from "@angular/core";
44
selector: "binding",
55
template: `
66
<StackLayout>
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>
7+
<TextField hint="oneWayDataBinding" keyboardType="email"
8+
[text]="oneWayDataBinding" autocorrect="false"
9+
autocapitalizationType="none">
10+
</TextField>
11+
<TextField hint="twoWayDataBindingBanana"
12+
keyboardType="email" [(ngModel)]="twoWayDataBinding"
13+
autocorrect="false"
14+
autocapitalizationType="none">
15+
</TextField>
16+
<TextField hint="" keyboardType="email"
17+
text="{{ curlyBracket }}" autocorrect="false"
18+
autocapitalizationType="none">
19+
</TextField>
1020
<Label text='Label with curlyBaracket binding: {{ twoWayDataBinding }}'></Label>
1121
<Label [text]='completedDate | date:"fullDate"' ></Label>
1222
<StackLayout orientation="horizontal" automationText="getValues">
@@ -23,7 +33,7 @@ export class BindingComponent {
2333
private _twoWayDataBinding: string;
2434
private _curlyBracket: string;
2535
private _result: string;
26-
public completedDate: Date = new Date(2016,5,3);
36+
public completedDate: Date = new Date(2016, 5, 3);
2737

2838
constructor() {
2939
this.refresh();
@@ -70,6 +80,6 @@ export class BindingComponent {
7080
this._oneWayDataBinding = "1";
7181
this._twoWayDataBinding = "2";
7282
this._curlyBracket = "5";
73-
this._result = ""
83+
this._result = "";
7484
}
75-
}
85+
}

‎app/button/button-main-page.component.ts‎

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

0 commit comments

Comments
 (0)