Merge pull request #3233 from NativeScript/zhecheva/separator-color

separatorColor property of ListView can be set in CSS

tns-core-modules/ui/list-view/list-view-common.ts

@@ -205,10 +205,10 @@ export class ListView extends view.View implements definition.ListView {
     }
 
     get separatorColor(): color.Color {
-        return this._getValue(ListView.separatorColorProperty);
+        return this.style._getValue(ListView.separatorColorProperty);
     }
     set separatorColor(value: color.Color) {
-        this._setValue(ListView.separatorColorProperty,
+        this.style._setValue(ListView.separatorColorProperty,
             value instanceof color.Color ? value : new color.Color(<any>value));
     }
 

tns-core-modules/ui/list-view/list-view.android.ts

@@ -8,6 +8,7 @@ import definition = require("ui/list-view");
 import {ProxyViewContainer} from "ui/proxy-view-container";
 import * as layoutBase from "ui/layouts/layout-base";
 import * as colorModule from "color";
+import { separatorColorProperty, registerHandler, Styler, StylePropertyChangedHandler } from "ui/styling/style";
 
 let color: typeof colorModule;
 function ensureColor() {
@@ -23,16 +24,16 @@ let ITEMTAP = common.ListView.itemTapEvent;
 global.moduleMerge(common, exports);
 
 function onSeparatorColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    let bar = <ListView>data.object;
+    let listView = <ListView>data.object;
-    if (!bar.android) {
+    if (!listView.android) {
         return;
     }
 
     ensureColor();
 
     if (data.newValue instanceof color.Color) {
-        bar.android.setDivider(new android.graphics.drawable.ColorDrawable(data.newValue.android));
+        listView.android.setDivider(new android.graphics.drawable.ColorDrawable(data.newValue.android));
-        bar.android.setDividerHeight(1);
+        listView.android.setDividerHeight(1);
     }
 }
 
@@ -285,4 +286,27 @@ function ensureListViewAdapterClass() {
     }
 
     ListViewAdapterClass = ListViewAdapter;
-}
+}
+
+export class ListViewStyler implements Styler {
+    // separator-color
+    private static setSeparatorColorProperty(view: viewModule.View, newValue: any) {
+        let listView = <android.widget.ListView>view._nativeView;
+        listView.setDivider(new android.graphics.drawable.ColorDrawable(newValue));
+        listView.setDividerHeight(1);
+    }
+
+    private static resetSeparatorColorProperty(view: viewModule.View, nativeValue: any) {
+        let listView = <android.widget.ListView>view._nativeView;
+        listView.setDivider(new android.graphics.drawable.ColorDrawable(nativeValue));
+        listView.setDividerHeight(1);
+    }
+
+    public static registerHandlers() {
+        registerHandler(separatorColorProperty, new StylePropertyChangedHandler(
+            ListViewStyler.setSeparatorColorProperty,
+            ListViewStyler.resetSeparatorColorProperty), "ListView");
+    }
+}
+
+ListViewStyler.registerHandlers();

tns-core-modules/ui/list-view/list-view.ios.ts

@@ -8,6 +8,7 @@ import {StackLayout} from "ui/layouts/stack-layout";
 import {ProxyViewContainer} from "ui/proxy-view-container";
 import dependencyObservable = require("ui/core/dependency-observable");
 import * as colorModule from "color";
+import { separatorColorProperty, registerHandler, Styler, StylePropertyChangedHandler } from "ui/styling/style";
 
 var color: typeof colorModule;
 function ensureColor() {
@@ -193,15 +194,15 @@ class UITableViewRowHeightDelegateImpl extends NSObject implements UITableViewDe
 }
 
 function onSeparatorColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var bar = <ListView>data.object;
+    var listView = <ListView>data.object;
-    if (!bar.ios) {
+    if (!listView.ios) {
         return;
     }
 
     ensureColor();
 
     if (data.newValue instanceof color.Color) {
-        bar.ios.separatorColor = data.newValue.ios;
+        listView.ios.separatorColor = data.newValue.ios;
     }
 }
 
@@ -404,4 +405,31 @@ export class ListView extends common.ListView {
         view.parent._removeView(view);
         this._map.delete(cell);
     }
-}
+}
+
+export class ListViewStyler implements Styler {
+    // separator-color
+    private static setSeparatorColorProperty(view: view.View, newValue: any) {
+        let tableView = <UITableView>view._nativeView;
+        tableView.separatorColor = newValue;
+    }
+
+    private static resetSeparatorColorProperty(view: view.View, nativeValue: any) {
+        let tableView = <UITableView>view._nativeView;
+        tableView.separatorColor = nativeValue;
+    }
+
+    private static getSeparatorColorProperty(view: view.View): any {
+        let tableView = <UITableView>view._nativeView;
+        return tableView.separatorColor;
+    }
+
+    public static registerHandlers() {
+        registerHandler(separatorColorProperty, new StylePropertyChangedHandler(
+            ListViewStyler.setSeparatorColorProperty,
+            ListViewStyler.resetSeparatorColorProperty,
+            ListViewStyler.getSeparatorColorProperty), "ListView");
+    }
+}
+
+ListViewStyler.registerHandlers();

tns-core-modules/ui/styling/style.d.ts

@@ -108,6 +108,9 @@ declare module "ui/styling/style" {
         public selectedTabTextColor: Color;
         public androidSelectedTabHighlightColor: Color;
 
+        // ListView-specific props
+        public separatorColor : Color;
+
         //SegmentedBar-specific props
         public selectedBackgroundColor: Color;
 
@@ -189,6 +192,8 @@ declare module "ui/styling/style" {
     export var statusBarStyleProperty: styleProperty.Property;
     export var androidStatusBarBackgroundProperty: styleProperty.Property;
 
+    export var separatorColorProperty: styleProperty.Property;
+
     // Helper property holding most layout related properties available in CSS.
     // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
     export var nativeLayoutParamsProperty: styleProperty.Property;

tns-core-modules/ui/styling/style.ts

@@ -887,6 +887,13 @@ export class Style extends DependencyObservable implements styling.Style {
         this._setValue(selectedBackgroundColorProperty, value);
     }
 
+     get separatorColor(): Color {
+        return this._getValue(separatorColorProperty);
+    }
+    set separatorColor(value: Color) {
+        this._setValue(separatorColorProperty, value);
+    }
+
     public _updateTextDecoration() {
         if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
             this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@@ -1162,12 +1169,17 @@ export var statusBarStyleProperty = new styleProperty.Property("statusBarStyle",
 export var androidStatusBarBackgroundProperty = new styleProperty.Property("androidStatusBarBackground", "android-status-bar-background",
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
     converters.colorConverter);
-
+   
 // SegmentedBar-specific props
 export var selectedBackgroundColorProperty = new styleProperty.Property("selectedBackgroundColor", "selected-background-color",
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
     converters.colorConverter);
 
+// ListView-specific props
+export var separatorColorProperty = new styleProperty.Property("separatorColor", "separator-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
+    converters.colorConverter);    
+
 // Helper property holding most layout related properties available in CSS.
 // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
 export var nativeLayoutParamsProperty = new styleProperty.Property("nativeLayoutParams", "nativeLayoutParams",

tns-core-modules/ui/styling/styling.d.ts

@@ -333,6 +333,11 @@
          */
         selectedBackgroundColor: color.Color;
 
+        /**
+         * Gets or sets the color of the line(separator) between the items of ListView.
+         */
+        separatorColor: color.Color;
+
         //@private
         public _beginUpdate();
         public _endUpdate();