Skip to content

Commit 235f764

Browse files
bundyobundyo
committed
Fix demos
Fix scoped styling in both Angular and Vue Fix picker accessors
1 parent 03daa29 commit 235f764

21 files changed

+103
-78
lines changed

‎demo-angular/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"nativescript-theme-core": "~1.0.4",
3131
"reflect-metadata": "~0.1.10",
3232
"rxjs": "~6.4.0",
33-
"tns-core-modules": "~5.2.0",
33+
"tns-core-modules": "~5.2.2",
3434
"zone.js": "~0.8.18"
3535
},
3636
"devDependencies": {
@@ -45,8 +45,8 @@
4545
"mocha-multi": "~1.0.1",
4646
"mochawesome": "^3.1.1",
4747
"nativescript-dev-appium": "^5.1.0",
48-
"nativescript-dev-typescript": "~0.8.0",
49-
"nativescript-dev-webpack": "~0.20.0",
48+
"nativescript-dev-typescript": "~0.9.0",
49+
"nativescript-dev-webpack": "~0.20.3",
5050
"tslint": "~5.11.0"
5151
},
5252
"readme": "NativeScript PickerField Demo NG"

‎demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
.item-template-top-label {
66
margin: 20;
7-
font-weight: bold;
7+
font-weight: bold;
88
}
99

1010
.label-center {
@@ -26,26 +26,24 @@
2626
background-color: #F5C518;
2727
}
2828

29-
ListView.picker-field {
29+
.picker ListView {
3030
background-color: green;
3131
margin-left: 20;
3232
margin-right: 20;
3333
margin-bottom: 20;
3434
separator-color: red;
3535
}
3636

37-
ActionBar.picker-field {
38-
background-color:yellow;
39-
color:black;
37+
PickerPage ActionBar {
38+
background-color: red;
39+
color: white;
4040
}
4141

42-
.picker-field { }
43-
4442
.field-name-label {
4543
font-size: 20;
4644
font-weight: bold;
4745
}
4846

4947
.submit-button {
5048
margin: 20;
51-
}
49+
}

‎demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<GridLayout rows="100, *" columns="*, *" [formGroup]="movieForm" class="yellow-grid">
55
<Label row="0" col="0" text="Pick a movie:" class="black-label label-center field-name-label"></Label>
66
<PickerField #picker row="0" col="1" formControlName="movie" hint="select a movie" padding="10" pickerTitle="Pick a movie"
7-
class="picker-field" modalClass="myModal" valueField="id" textField="name" [items]="pickerItems">
7+
class="picker" valueField="id" textField="name" [items]="pickerItems">
88
<ng-template let-item="item">
9-
<GridLayout rows="auto, *" columns="*, auto" class="yellow-grid">
9+
<GridLayout rows="auto, *" columns="*, auto">
1010
<Label [text]="item.name" colSpan="2" class="black-label item-template-top-label"></Label>
1111
<Label [text]="item.year" col="0" row="1" class="item-template-label" marginBottom="20"></Label>
1212
<Image [src]="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
@@ -17,4 +17,4 @@
1717
<GridLayout row="1" col="0" colSpan="2" rows="auto, *" backgroundColor="white">
1818
<Button class="submit-button" text="Submit form" (tap)="onSubmit()"></Button>
1919
</GridLayout>
20-
</GridLayout>>
20+
</GridLayout>>

‎demo-angular/src/app/examples/styling/styling-example.component.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
.item-template-top-label {
66
margin: 20;
7-
font-weight: bold;
7+
font-weight: bold;
88
}
99

1010
.green-label {
@@ -21,7 +21,7 @@
2121
color: green;
2222
}
2323

24-
ListView.picker-field {
24+
.picker-field ListView {
2525
background-color: lightblue;
2626
margin-left: 20;
2727
margin-right: 20;
@@ -30,7 +30,7 @@ ListView.picker-field {
3030
color: blue;
3131
}
3232

33-
ActionBar.picker-field {
33+
.picker-field ActionBar {
3434
background-color:yellow;
3535
color:black;
3636
}
@@ -42,4 +42,4 @@ ActionBar.picker-field {
4242
margin-left: 100;
4343
}
4444

45-
/* Styling css end */
45+
/* Styling css end */

‎demo-angular/src/app/examples/styling/styling-example.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
[items]="pickerItems" [pickerTitle]="pickerTitle" iOSCloseButtonIcon="14" iOSCloseButtonPosition="left"
77
androidCloseButtonPosition="actionBar" androidCloseButtonIcon="ic_media_previous">
88
<ng-template let-item="item">
9-
<GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
9+
<GridLayout columns="auto, *" rows="auto, *">
1010
<Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
1111
<Label [text]="item.name" col="0" row="1" class="item-template-label red-label"
1212
marginBottom="20"></Label>
1313
<Image [src]="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
1414
</GridLayout>
1515
</ng-template>
1616
</PickerField>
17-
</GridLayout>>
17+
</GridLayout>>

‎demo-angular/src/app/examples/value-api/value-api.component.css

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
.item-template-top-label {
1919
margin: 20;
20-
font-weight: bold;
20+
font-weight: bold;
2121
}
2222

2323
.green-label {
@@ -31,15 +31,23 @@
3131
/* Styling css start */
3232

3333

34-
ListView.picker-field {
35-
background-color: green;
34+
PickerPage.picker-field {
35+
background-color: lightgoldenrodyellow;
36+
}
37+
38+
.picker-field ListView {
3639
margin-left: 20;
3740
margin-right: 20;
3841
margin-bottom: 20;
3942
separator-color: red;
4043
}
4144

42-
.picker-field {
45+
.picker-field ActionBar {
46+
background-color: #369;
47+
color: #fff;
48+
}
49+
50+
PickerField.picker-field {
4351
background-color: lightblue;
4452
color: blue;
4553
}
@@ -51,4 +59,4 @@ ListView.picker-field {
5159
margin-left: 100;
5260
}
5361

54-
/* Styling css end */
62+
/* Styling css end */

‎demo-angular/src/app/examples/value-api/value-api.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<NavigationButton android.systemIcon="ic_menu_back" text="Back" (tap)="goBack()"></NavigationButton>
33
</ActionBar>
44
<GridLayout rows="50, 50">
5-
<PickerField #myPicker hint="Click here" padding="10" id="myPicker" [items]="pickerItems"
5+
<PickerField #myPicker hint="Click here" padding="10" id="myPicker" [items]="pickerItems" class="picker-field"
66
textField="description" valueField="name" pickerTitle="Select item from list">
77
<ng-template let-item="item">
8-
<GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
8+
<GridLayout rows="auto, auto, auto">
99
<Label [text]="item.id" class="item-template-label red-label" margin="20"></Label>
1010
<Label [text]="item.name" row="1" class="item-template-label green-label"></Label>
1111
<Label [text]="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
1212
</GridLayout>
1313
</ng-template>
1414
</PickerField>
1515
<Button (tap)="checkTap()" text="Check picker value APIs" row="1"></Button>
16-
</GridLayout>>
16+
</GridLayout>>

‎demo-vue/app/components/GettingStarted.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,5 @@ export default {
3535
};
3636
</script>
3737

38-
<style scoped lang="scss">
38+
<style lang="scss">
3939
</style>

‎demo-vue/app/components/Home.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default {
3838
};
3939
</script>
4040

41-
<style scoped lang="scss">
41+
<style lang="scss">
4242
4343
.itemStackLayout {
4444
text-align: left;

‎demo-vue/app/components/Styling.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@
99
padding="10"
1010
:pickerTitle="pickerTitle"
1111
for="item in pickerObjects"
12-
class="picker-field"
12+
class="picker-field"
1313
textField="name"
14-
iOSCloseButtonIcon="14"
14+
iOSCloseButtonIcon="14"
1515
iOSCloseButtonPosition="left"
1616
androidCloseButtonPosition="actionBar"
1717
androidCloseButtonIcon="ic_media_previous">
1818
<v-template>
19-
<GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
19+
<GridLayout columns="auto, *" rows="auto, *">
2020
<Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
2121
<Label :text="item.name" col="0" row="1" class="item-template-label red-label"
2222
marginBottom="20"></Label>
@@ -64,7 +64,7 @@ export default {
6464
6565
.item-template-top-label {
6666
margin: 20;
67-
font-weight: bold;
67+
font-weight: bold;
6868
}
6969
7070
.red-label {
@@ -75,7 +75,7 @@ export default {
7575
color: green;
7676
}
7777
78-
ListView.picker-field {
78+
.picker-field ListView {
7979
background-color: lightblue;
8080
margin-left: 20;
8181
margin-right: 20;
@@ -84,7 +84,7 @@ ListView.picker-field {
8484
color: blue;
8585
}
8686
87-
ActionBar.picker-field {
87+
.picker-field ActionBar {
8888
background-color:yellow;
8989
color:black;
9090
}

‎demo-vue/app/components/ValueApis.vue

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33
<ActionBar :title="title">
44
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
55
</ActionBar>
6-
<GridLayout rows="50, 50, *">
7-
<PickerField hint="Click here"
6+
<GridLayout rows="60, 50, *">
7+
<PickerField hint="Click here"
88
ref="apiPicker"
99
row="0"
1010
padding="10"
11+
class="picker"
1112
for="item in pickerObjects"
1213
textField="description"
1314
valueField="name"
1415
pickerTitle="Select item from list">
1516
<v-template>
16-
<GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
17+
<GridLayout rows="auto, auto, auto">
1718
<Label :text="item.id" class="item-template-label red-label" margin="20"></Label>
1819
<Label :text="item.name" row="1" class="item-template-label green-label"></Label>
1920
<Label :text="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
@@ -64,18 +65,27 @@ export default {
6465
};
6566
</script>
6667

67-
<style scoped lang="scss">
68+
<style lang="scss">
6869
@import "../app-variables";
6970
70-
.item-template-label {
71-
margin-left: 20;
72-
}
71+
.item-template-label {
72+
margin-left: 20;
73+
}
74+
75+
.green-label {
76+
color: green;
77+
}
7378
74-
.green-label {
75-
color: green;
76-
}
79+
.red-label {
80+
color: red;
81+
}
82+
83+
PickerField.picker {
84+
margin: 10;
85+
height: 40;
86+
color: #fff;
87+
placeholder-color: #DDD;
88+
background: #404040;
89+
}
7790
78-
.red-label {
79-
color: red;
80-
}
8191
</style>

‎demo-vue/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"dependencies": {
2020
"nativescript-picker": "file:../src",
2121
"nativescript-theme-core": "~1.0.4",
22-
"nativescript-vue": "~2.0.0",
23-
"tns-core-modules": "~5.2.0"
22+
"nativescript-vue": "~2.2.0",
23+
"tns-core-modules": "~5.2.2"
2424
},
2525
"devDependencies": {
2626
"@babel/core": "~7.2.0",
@@ -34,9 +34,9 @@
3434
"mocha-multi": "~1.0.1",
3535
"mochawesome": "^3.1.1",
3636
"nativescript-dev-appium": "^5.1.0",
37-
"nativescript-dev-typescript": "~0.8.0",
38-
"nativescript-dev-webpack": "~0.20.0",
39-
"nativescript-vue-template-compiler": "~2.0.2",
37+
"nativescript-dev-typescript": "~0.9.0",
38+
"nativescript-dev-webpack": "^0.20.3",
39+
"nativescript-vue-template-compiler": "~2.2.0",
4040
"node-sass": "~4.9.0",
4141
"vue-loader": "~15.4.0"
4242
},

‎demo-vue/tsconfig.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@
3131
"../src/node_modules",
3232
"node_modules",
3333
"platforms"
34-
],
35-
}
34+
]
35+
}

‎demo/app/app.css

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
.item-template-top-label {
1919
margin: 20;
20-
font-weight: bold;
20+
font-weight: bold;
2121
}
2222

2323
.green-label {
@@ -30,8 +30,12 @@
3030

3131
/* Styling css start */
3232

33+
.picker-field ActionBar {
34+
color: #fff;
35+
background-color: blue;
36+
}
3337

34-
ListView.picker-field {
38+
.picker-field ListView {
3539
background-color: lightblue;
3640
margin-left: 20;
3741
margin-right: 20;
@@ -51,4 +55,4 @@ ListView.picker-field {
5155
margin-left: 100;
5256
}
5357

54-
/* Styling css end */
58+
/* Styling css end */

0 commit comments

Comments
 (0)