From 03daa2941181795d4f91759e599c6ddc408c2625 Mon Sep 17 00:00:00 2001 From: Kamen Bundev Date: Thu, 21 Mar 2019 18:47:48 +0200 Subject: [PATCH 1/6] Add PickerField element selector Add PickerPage element that inherits from Page in the modal and a selector for it Move the class set on ActionBar and ListView to the aforementioned PickerPage Document it --- README.md | 2 +- src/picker.common.ts | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 6ba2f6f..7d2395c 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ The `PickerField` is a NativeScript `TextField` which means that any functionali ## Styling ### PickerField -The `PickerField` inherits from the `TextField` class of the `tns-core-modules/ui/text-field/text-field` module which means all of the available styling of `TextField` are available directly. Additionally the `PickerField` opens a modal window contains a `ListView` instance which inherits the css class of the `PickerField` meaning you can style that ListView elements with the use of `ListView.` and simply set the `class` of the `PickerField` to `your-class-name`. The modal window also contains its own ActionBar which again inherits the css class of the `PickerField` and can be styling the same way as described above for the ListView. For full list of the available properties of which many can be styling/set via css you can refer the official API documentation of ListView [here](https://docs.nativescript.org/api-reference/modules/_ui_list_view_). +The `PickerField` can be targeted in CSS through its element selector and additionally by setting a class. The `PickerField` also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the `PickerPage` selector and through it style all picker modals with selectors like `PickerPage ActionBar` and `PickerPage ListView`. In addition to that, if you set a class on the PickerField, it will be transferred on the `PickerPage` and with it you can style individual modals. ## Contribute We love PRs! Check out the [contributing guidelines](https://github.com/NativeScript/nativescript-picker/blob/master/CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-picker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22). diff --git a/src/picker.common.ts b/src/picker.common.ts index 72603d1..95ca6c2 100644 --- a/src/picker.common.ts +++ b/src/picker.common.ts @@ -1,5 +1,5 @@ import { Observable } from 'tns-core-modules/data/observable'; -import { Property, Template, booleanConverter } from "tns-core-modules/ui/core/view/view"; +import { Property, Template, booleanConverter, CSSType } from "tns-core-modules/ui/core/view/view"; import { View, EventData } from "tns-core-modules/ui/core/view/view"; import { TextField } from 'tns-core-modules/ui/text-field/text-field'; import { Button } from 'tns-core-modules/ui/button/button'; @@ -28,6 +28,11 @@ export interface PickerField { on(event: "itemLoading", callback: (args: ItemEventData) => void, thisArg?: any); } +// Allow targeting PickerPage through CSS element selector +@CSSType("PickerPage") +export class PickerPage extends Page {} + +@CSSType("PickerField") export class PickerField extends TextField implements TemplatedItemsView { public static itemLoadingEvent = "itemLoading"; @@ -62,7 +67,7 @@ export class PickerField extends TextField implements TemplatedItemsView { private createModalView() { this._modalRoot = new Frame(); - this._page = new Page(); + this._page = new PickerPage(); this._modalListView = new ListView(); this._modalGridLayout = new GridLayout(); this.initModalView(); @@ -80,6 +85,8 @@ export class PickerField extends TextField implements TemplatedItemsView { } private initModalView() { + this.applyCssScope(this._page); + if (this.pickerTitle && this.pickerTitle !== "") { this._page.actionBar.title = this.pickerTitle; } else { @@ -87,8 +94,6 @@ export class PickerField extends TextField implements TemplatedItemsView { this._page.actionBar.title = ""; } - this.applyCssScope(this._page.actionBar); - let actionItem = new ActionItem(); actionItem.text = "Close"; actionItem.on(Button.tapEvent, (args: ItemEventData) => { @@ -111,7 +116,6 @@ export class PickerField extends TextField implements TemplatedItemsView { this._modalListView.on(ListView.itemLoadingEvent, this.listViewItemLoadingHandler.bind(this)); this._modalListView.on(ListView.itemTapEvent, this.listViewItemTapHandler.bind(this)); - this.applyCssScope(this._modalListView); this._modalListView.items = this.items; (this._modalGridLayout).addChild(this._modalListView); From 235f764149a59aeb1c6b9a54e5407ad6add2d55f Mon Sep 17 00:00:00 2001 From: Kamen Bundev Date: Fri, 22 Mar 2019 16:23:22 +0200 Subject: [PATCH 2/6] Fix demos Fix scoped styling in both Angular and Vue Fix picker accessors --- demo-angular/package.json | 6 ++-- .../reactive-forms-example.component.css | 14 ++++---- .../reactive-forms-example.component.html | 6 ++-- .../styling/styling-example.component.css | 8 ++--- .../styling/styling-example.component.html | 4 +-- .../value-api/value-api.component.css | 18 +++++++--- .../value-api/value-api.component.html | 6 ++-- demo-vue/app/components/GettingStarted.vue | 2 +- demo-vue/app/components/Home.vue | 2 +- demo-vue/app/components/Styling.vue | 12 +++---- demo-vue/app/components/ValueApis.vue | 36 ++++++++++++------- demo-vue/package.json | 10 +++--- demo-vue/tsconfig.json | 4 +-- demo/app/app.css | 10 ++++-- demo/app/examples/styling/styling-page.xml | 6 ++-- .../app/examples/value-api/value-api-page.xml | 6 ++-- demo/package.json | 6 ++-- demo/tsconfig.json | 4 +-- src/angular/nativescript-picker.accessors.ts | 6 ++-- src/picker.common.ts | 12 +++++-- src/tsconfig.json | 3 +- 21 files changed, 103 insertions(+), 78 deletions(-) diff --git a/demo-angular/package.json b/demo-angular/package.json index e21d8d5..03f8b10 100644 --- a/demo-angular/package.json +++ b/demo-angular/package.json @@ -30,7 +30,7 @@ "nativescript-theme-core": "~1.0.4", "reflect-metadata": "~0.1.10", "rxjs": "~6.4.0", - "tns-core-modules": "~5.2.0", + "tns-core-modules": "~5.2.2", "zone.js": "~0.8.18" }, "devDependencies": { @@ -45,8 +45,8 @@ "mocha-multi": "~1.0.1", "mochawesome": "^3.1.1", "nativescript-dev-appium": "^5.1.0", - "nativescript-dev-typescript": "~0.8.0", - "nativescript-dev-webpack": "~0.20.0", + "nativescript-dev-typescript": "~0.9.0", + "nativescript-dev-webpack": "~0.20.3", "tslint": "~5.11.0" }, "readme": "NativeScript PickerField Demo NG" diff --git a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css index d9da0b3..17590f2 100644 --- a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css +++ b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css @@ -4,7 +4,7 @@ .item-template-top-label { margin: 20; - font-weight: bold; + font-weight: bold; } .label-center { @@ -26,7 +26,7 @@ background-color: #F5C518; } -ListView.picker-field { +.picker ListView { background-color: green; margin-left: 20; margin-right: 20; @@ -34,13 +34,11 @@ ListView.picker-field { separator-color: red; } -ActionBar.picker-field { - background-color:yellow; - color:black; +PickerPage ActionBar { + background-color: red; + color: white; } -.picker-field { } - .field-name-label { font-size: 20; font-weight: bold; @@ -48,4 +46,4 @@ ActionBar.picker-field { .submit-button { margin: 20; -} \ No newline at end of file +} diff --git a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html index 6561161..bdad75e 100644 --- a/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html +++ b/demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html @@ -4,9 +4,9 @@ + class="picker" valueField="id" textField="name" [items]="pickerItems"> - + @@ -17,4 +17,4 @@ -> \ No newline at end of file +> diff --git a/demo-angular/src/app/examples/styling/styling-example.component.css b/demo-angular/src/app/examples/styling/styling-example.component.css index 11a53f4..f28966b 100644 --- a/demo-angular/src/app/examples/styling/styling-example.component.css +++ b/demo-angular/src/app/examples/styling/styling-example.component.css @@ -4,7 +4,7 @@ .item-template-top-label { margin: 20; - font-weight: bold; + font-weight: bold; } .green-label { @@ -21,7 +21,7 @@ color: green; } -ListView.picker-field { +.picker-field ListView { background-color: lightblue; margin-left: 20; margin-right: 20; @@ -30,7 +30,7 @@ ListView.picker-field { color: blue; } -ActionBar.picker-field { +.picker-field ActionBar { background-color:yellow; color:black; } @@ -42,4 +42,4 @@ ActionBar.picker-field { margin-left: 100; } -/* Styling css end */ \ No newline at end of file +/* Styling css end */ diff --git a/demo-angular/src/app/examples/styling/styling-example.component.html b/demo-angular/src/app/examples/styling/styling-example.component.html index 5910ddc..0df04d7 100644 --- a/demo-angular/src/app/examples/styling/styling-example.component.html +++ b/demo-angular/src/app/examples/styling/styling-example.component.html @@ -6,7 +6,7 @@ [items]="pickerItems" [pickerTitle]="pickerTitle" iOSCloseButtonIcon="14" iOSCloseButtonPosition="left" androidCloseButtonPosition="actionBar" androidCloseButtonIcon="ic_media_previous"> - + @@ -14,4 +14,4 @@ -> \ No newline at end of file +> diff --git a/demo-angular/src/app/examples/value-api/value-api.component.css b/demo-angular/src/app/examples/value-api/value-api.component.css index 52d9392..63657d4 100644 --- a/demo-angular/src/app/examples/value-api/value-api.component.css +++ b/demo-angular/src/app/examples/value-api/value-api.component.css @@ -17,7 +17,7 @@ .item-template-top-label { margin: 20; - font-weight: bold; + font-weight: bold; } .green-label { @@ -31,15 +31,23 @@ /* Styling css start */ -ListView.picker-field { - background-color: green; +PickerPage.picker-field { + background-color: lightgoldenrodyellow; +} + +.picker-field ListView { margin-left: 20; margin-right: 20; margin-bottom: 20; separator-color: red; } -.picker-field { +.picker-field ActionBar { + background-color: #369; + color: #fff; +} + +PickerField.picker-field { background-color: lightblue; color: blue; } @@ -51,4 +59,4 @@ ListView.picker-field { margin-left: 100; } -/* Styling css end */ \ No newline at end of file +/* Styling css end */ diff --git a/demo-angular/src/app/examples/value-api/value-api.component.html b/demo-angular/src/app/examples/value-api/value-api.component.html index 94862ff..6eb4df5 100644 --- a/demo-angular/src/app/examples/value-api/value-api.component.html +++ b/demo-angular/src/app/examples/value-api/value-api.component.html @@ -2,10 +2,10 @@ - - + @@ -13,4 +13,4 @@ -> \ No newline at end of file +> diff --git a/demo-vue/app/components/GettingStarted.vue b/demo-vue/app/components/GettingStarted.vue index 5440c46..23c037c 100644 --- a/demo-vue/app/components/GettingStarted.vue +++ b/demo-vue/app/components/GettingStarted.vue @@ -35,5 +35,5 @@ export default { }; - diff --git a/demo-vue/app/components/Home.vue b/demo-vue/app/components/Home.vue index 9b5a7aa..3f0c610 100644 --- a/demo-vue/app/components/Home.vue +++ b/demo-vue/app/components/Home.vue @@ -38,7 +38,7 @@ export default { }; - diff --git a/demo-vue/package.json b/demo-vue/package.json index 60d76df..4961428 100644 --- a/demo-vue/package.json +++ b/demo-vue/package.json @@ -19,8 +19,8 @@ "dependencies": { "nativescript-picker": "file:../src", "nativescript-theme-core": "~1.0.4", - "nativescript-vue": "~2.0.0", - "tns-core-modules": "~5.2.0" + "nativescript-vue": "~2.2.0", + "tns-core-modules": "~5.2.2" }, "devDependencies": { "@babel/core": "~7.2.0", @@ -34,9 +34,9 @@ "mocha-multi": "~1.0.1", "mochawesome": "^3.1.1", "nativescript-dev-appium": "^5.1.0", - "nativescript-dev-typescript": "~0.8.0", - "nativescript-dev-webpack": "~0.20.0", - "nativescript-vue-template-compiler": "~2.0.2", + "nativescript-dev-typescript": "~0.9.0", + "nativescript-dev-webpack": "^0.20.3", + "nativescript-vue-template-compiler": "~2.2.0", "node-sass": "~4.9.0", "vue-loader": "~15.4.0" }, diff --git a/demo-vue/tsconfig.json b/demo-vue/tsconfig.json index c030f55..20970ff 100644 --- a/demo-vue/tsconfig.json +++ b/demo-vue/tsconfig.json @@ -31,5 +31,5 @@ "../src/node_modules", "node_modules", "platforms" - ], -} \ No newline at end of file + ] +} diff --git a/demo/app/app.css b/demo/app/app.css index 8869dc9..53d67ac 100644 --- a/demo/app/app.css +++ b/demo/app/app.css @@ -17,7 +17,7 @@ .item-template-top-label { margin: 20; - font-weight: bold; + font-weight: bold; } .green-label { @@ -30,8 +30,12 @@ /* Styling css start */ +.picker-field ActionBar { + color: #fff; + background-color: blue; +} -ListView.picker-field { +.picker-field ListView { background-color: lightblue; margin-left: 20; margin-right: 20; @@ -51,4 +55,4 @@ ListView.picker-field { margin-left: 100; } -/* Styling css end */ \ No newline at end of file +/* Styling css end */ diff --git a/demo/app/examples/styling/styling-page.xml b/demo/app/examples/styling/styling-page.xml index 226c922..1a9a09a 100644 --- a/demo/app/examples/styling/styling-page.xml +++ b/demo/app/examples/styling/styling-page.xml @@ -1,5 +1,5 @@ - + - + - \ No newline at end of file + diff --git a/demo/app/examples/value-api/value-api-page.xml b/demo/app/examples/value-api/value-api-page.xml index 0c7a8d2..5d27ee3 100644 --- a/demo/app/examples/value-api/value-api-page.xml +++ b/demo/app/examples/value-api/value-api-page.xml @@ -6,14 +6,14 @@ valueField="name" pickerTitle="Select item from list"> - + - +