feat(css): Improve styling via class selectors

feat(): add PickerField element selector feat(): add PickerPage element that inherits from Page in the modal and a selector for it chore: ipdate version and dependencies
NativeScript · Mar 27, 2019 · 9ec34e3 · 9ec34e3
1 parent 18d0a9d
commit 9ec34e3
Show file tree

Hide file tree

Showing 27 changed files with 122 additions and 92 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,9 @@ src/**/*.d.ts
 !demo/karma.conf.js
 !demo/app/tests/*.js
 demo/platforms/
+demo/outputs/
+demo-angular/outputs/
+demo-vue/outputs/
 demo-angular/platforms/
 demo-vue/platforms/
 !demo/e2e-tests/*

diff --git 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.<your-class-name>` 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/demo-angular/e2e/helper.ts b/demo-angular/e2e/helper.ts
@@ -1,8 +1,6 @@
 import { AppiumDriver, SearchOptions, Direction, UIElement } from "nativescript-dev-appium";
 import { runType } from "nativescript-dev-appium/lib/parser";
 
-const isAndroid: boolean = runType.includes("android");
-
 export const QUEUE_WAIT_TIME: number = 600000; // Sometimes SauceLabs threads are not available and the tests wait in a queue to start. Wait 10 min before timeout.
 
 export async function navigateBackToHome(driver: AppiumDriver, view?: string) {
@@ -21,7 +19,7 @@ export async function navigateBackToView(driver: AppiumDriver, view: string) {
 
 export async function scrollToElement(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView: UIElement;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.FrameLayout");
     }
     else {
@@ -37,7 +35,7 @@ export async function scrollToElement(driver: AppiumDriver, element: string, dir
 
 export async function scrollToElementInListView(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView: UIElement;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.ListView");
     }
     else {
@@ -63,7 +61,7 @@ export async function swipe(driver: AppiumDriver, item: any, direction: Directio
         swipeX = 10;
     }
 
-    if (isAndroid) {
+    if (driver.isAndroid) {
         const wd = driver.wd();
         const action = new wd.TouchAction(driver.driver);
         action.press({ x: centerX, y: centerY })
@@ -85,7 +83,7 @@ export async function swipe(driver: AppiumDriver, item: any, direction: Directio
 
 export async function swipeToElement(driver: AppiumDriver, element: string, direction: Direction = Direction.down) {
     let listView;
-    if (isAndroid) {
+    if (driver.isAndroid) {
         listView = await driver.findElementByClassName("android.widget.FrameLayout");
     }
     else {

diff --git a/demo-angular/e2e/tsconfig.json b/demo-angular/e2e/tsconfig.json
@@ -5,6 +5,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "importHelpers": false,
+    "sourceMap": true,
     "types": [
       "mocha",
       "chai",

diff --git 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
@@ -4,7 +4,7 @@
 
 .item-template-top-label {
     margin: 20;
-    font-weight: bold;    
+    font-weight: bold;
 }
 
 .label-center {
@@ -26,26 +26,24 @@
     background-color: #F5C518;
 }
 
-ListView.picker-field {
+.picker ListView {
     background-color: green;
     margin-left: 20;
     margin-right: 20;
     margin-bottom: 20;
     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;
 }
 
 .submit-button {
     margin: 20;
-}
+}
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
@@ -4,9 +4,9 @@
 <GridLayout rows="100, *" columns="*, *" [formGroup]="movieForm" class="yellow-grid">
     <Label row="0" col="0" text="Pick a movie:" class="black-label label-center field-name-label"></Label>
     <PickerField #picker row="0" col="1" formControlName="movie" hint="select a movie" padding="10" pickerTitle="Pick a movie"
-        class="picker-field" modalClass="myModal" valueField="id" textField="name" [items]="pickerItems">
+        class="picker" valueField="id" textField="name" [items]="pickerItems">
         <ng-template let-item="item">
-            <GridLayout rows="auto, *" columns="*, auto" class="yellow-grid">
+            <GridLayout rows="auto, *" columns="*, auto">
                 <Label [text]="item.name" colSpan="2" class="black-label item-template-top-label"></Label>
                 <Label [text]="item.year" col="0" row="1" class="item-template-label" marginBottom="20"></Label>
                 <Image [src]="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
@@ -17,4 +17,4 @@
     <GridLayout row="1" col="0" colSpan="2" rows="auto, *" backgroundColor="white">
         <Button class="submit-button" text="Submit form" (tap)="onSubmit()"></Button>
     </GridLayout>
-</GridLayout>>
+</GridLayout>>
diff --git 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 */
+/* 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
@@ -6,12 +6,12 @@
         [items]="pickerItems" [pickerTitle]="pickerTitle" iOSCloseButtonIcon="14" iOSCloseButtonPosition="left"
         androidCloseButtonPosition="actionBar" androidCloseButtonIcon="ic_media_previous">
         <ng-template let-item="item">
-            <GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
+            <GridLayout columns="auto, *" rows="auto, *">
                 <Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
                 <Label [text]="item.name" col="0" row="1" class="item-template-label red-label"
                     marginBottom="20"></Label>
                 <Image [src]="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
             </GridLayout>
         </ng-template>
     </PickerField>
-</GridLayout>>
+</GridLayout>>
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
@@ -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 */
+/* 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
@@ -5,12 +5,12 @@
     <PickerField #myPicker hint="Click here" padding="10" id="myPicker" [items]="pickerItems"
         textField="description" valueField="name" pickerTitle="Select item from list">
         <ng-template let-item="item">
-            <GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
+            <GridLayout rows="auto, auto, auto">
                 <Label [text]="item.id" class="item-template-label red-label" margin="20"></Label>
                 <Label [text]="item.name" row="1" class="item-template-label green-label"></Label>
                 <Label [text]="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
             </GridLayout>
         </ng-template>
     </PickerField>
     <Button (tap)="checkTap()" text="Check picker value APIs" row="1"></Button>
-</GridLayout>>
+</GridLayout>>
diff --git a/demo-vue/app/components/GettingStarted.vue b/demo-vue/app/components/GettingStarted.vue
@@ -35,5 +35,5 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 </style>
diff --git a/demo-vue/app/components/Home.vue b/demo-vue/app/components/Home.vue
@@ -38,7 +38,7 @@ export default {
   };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 
 .itemStackLayout {
   text-align: left;

diff --git a/demo-vue/app/components/Styling.vue b/demo-vue/app/components/Styling.vue
@@ -9,14 +9,14 @@
                   padding="10"
                   :pickerTitle="pickerTitle"
                   for="item in pickerObjects"
-                  class="picker-field" 
+                  class="picker-field"
                   textField="name"
-                  iOSCloseButtonIcon="14" 
+                  iOSCloseButtonIcon="14"
                   iOSCloseButtonPosition="left"
                   androidCloseButtonPosition="actionBar"
                   androidCloseButtonIcon="ic_media_previous">
         <v-template>
-          <GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
+          <GridLayout columns="auto, *" rows="auto, *">
             <Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
             <Label :text="item.name" col="0" row="1" class="item-template-label red-label"
                 marginBottom="20"></Label>
@@ -64,7 +64,7 @@ export default {
 
 .item-template-top-label {
     margin: 20;
-    font-weight: bold;    
+    font-weight: bold;
 }
 
 .red-label {
@@ -75,7 +75,7 @@ export default {
     color: green;
 }
 
-ListView.picker-field {
+.picker-field ListView {
     background-color: lightblue;
     margin-left: 20;
     margin-right: 20;
@@ -84,7 +84,7 @@ ListView.picker-field {
     color: blue;
 }
 
-ActionBar.picker-field {
+.picker-field ActionBar {
     background-color:yellow;
     color:black;
 }

diff --git a/demo-vue/app/components/ValueApis.vue b/demo-vue/app/components/ValueApis.vue
@@ -3,8 +3,8 @@
     <ActionBar :title="title">
       <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
     </ActionBar>
-    <GridLayout rows="50, 50, *">
-      <PickerField hint="Click here" 
+    <GridLayout rows="60, 50, *">
+      <PickerField hint="Click here"
                   ref="apiPicker"
                   row="0"
                   padding="10"
@@ -13,7 +13,7 @@
                   valueField="name"
                   pickerTitle="Select item from list">
         <v-template>
-          <GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
+          <GridLayout rows="auto, auto, auto">
             <Label :text="item.id" class="item-template-label red-label" margin="20"></Label>
             <Label :text="item.name" row="1" class="item-template-label green-label"></Label>
             <Label :text="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
@@ -64,18 +64,27 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "../app-variables";
 
-.item-template-label {
-    margin-left: 20;
-}
+  .item-template-label {
+      margin-left: 20;
+  }
+
+  .green-label {
+      color: green;
+  }
 
-.green-label {
-    color: green;
-}
+  .red-label {
+      color: red;
+  }
+
+  PickerField.picker {
+    margin: 10;
+    height: 40;
+    color: #fff;
+    placeholder-color: #DDD;
+    background: #404040;
+  }
 
-.red-label {
-    color: red;
-}
 </style>