From 1343aa52a490df3fb296b9e957393c817fe13c91 Mon Sep 17 00:00:00 2001 From: zh-m Date: Fri, 2 Dec 2016 17:42:59 +0200 Subject: [PATCH] separatorColor property of ListView can be set in CSS --- .../ui/list-view/list-view-common.ts | 4 +-- .../ui/list-view/list-view.android.ts | 34 +++++++++++++++--- .../ui/list-view/list-view.ios.ts | 36 ++++++++++++++++--- tns-core-modules/ui/styling/style.d.ts | 5 +++ tns-core-modules/ui/styling/style.ts | 14 +++++++- tns-core-modules/ui/styling/styling.d.ts | 5 +++ 6 files changed, 86 insertions(+), 12 deletions(-) diff --git a/tns-core-modules/ui/list-view/list-view-common.ts b/tns-core-modules/ui/list-view/list-view-common.ts index d23f06b4d..99fc81da8 100644 --- a/tns-core-modules/ui/list-view/list-view-common.ts +++ b/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(value)); } diff --git a/tns-core-modules/ui/list-view/list-view.android.ts b/tns-core-modules/ui/list-view/list-view.android.ts index edd90c61c..67b4c51ec 100644 --- a/tns-core-modules/ui/list-view/list-view.android.ts +++ b/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 = data.object; - if (!bar.android) { + let listView = data.object; + if (!listView.android) { return; } ensureColor(); if (data.newValue instanceof color.Color) { - bar.android.setDivider(new android.graphics.drawable.ColorDrawable(data.newValue.android)); - bar.android.setDividerHeight(1); + listView.android.setDivider(new android.graphics.drawable.ColorDrawable(data.newValue.android)); + listView.android.setDividerHeight(1); } } @@ -285,4 +286,27 @@ function ensureListViewAdapterClass() { } ListViewAdapterClass = ListViewAdapter; -} \ No newline at end of file +} + +export class ListViewStyler implements Styler { + // separator-color + private static setSeparatorColorProperty(view: viewModule.View, newValue: any) { + let listView = view._nativeView; + listView.setDivider(new android.graphics.drawable.ColorDrawable(newValue)); + listView.setDividerHeight(1); + } + + private static resetSeparatorColorProperty(view: viewModule.View, nativeValue: any) { + let 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(); \ No newline at end of file diff --git a/tns-core-modules/ui/list-view/list-view.ios.ts b/tns-core-modules/ui/list-view/list-view.ios.ts index 1a0f63377..b48a3da6a 100644 --- a/tns-core-modules/ui/list-view/list-view.ios.ts +++ b/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 = data.object; - if (!bar.ios) { + var listView = data.object; + 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); } -} \ No newline at end of file +} + +export class ListViewStyler implements Styler { + // separator-color + private static setSeparatorColorProperty(view: view.View, newValue: any) { + let tableView = view._nativeView; + tableView.separatorColor = newValue; + } + + private static resetSeparatorColorProperty(view: view.View, nativeValue: any) { + let tableView = view._nativeView; + tableView.separatorColor = nativeValue; + } + + private static getSeparatorColorProperty(view: view.View): any { + let tableView = view._nativeView; + return tableView.separatorColor; + } + + public static registerHandlers() { + registerHandler(separatorColorProperty, new StylePropertyChangedHandler( + ListViewStyler.setSeparatorColorProperty, + ListViewStyler.resetSeparatorColorProperty, + ListViewStyler.getSeparatorColorProperty), "ListView"); + } +} + +ListViewStyler.registerHandlers(); \ No newline at end of file diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts index 85fcd844c..dc91c508b 100644 --- a/tns-core-modules/ui/styling/style.d.ts +++ b/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; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index 9120f47d5..cc9b135d4 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/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", diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts index 159e49344..34698f244 100644 --- a/tns-core-modules/ui/styling/styling.d.ts +++ b/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();