javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 20:11:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
separatorColor property of ListView can be set in CSS
This commit is contained in:
Maya Zhecheva
2016-12-05 10:07:06 +02:00
committed by GitHub
parent 0d7a731dd0 1343aa52a4
commit 964a55f575
6 changed files with 86 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tns-core-modules/ui/list-view/list-view-common.ts
View File

@ -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));
}

32
tns-core-modules/ui/list-view/list-view.android.ts
View File

@ -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;
if (!bar.android) {
let listView = <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);
}
}
@ -286,3 +287,26 @@ 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();

34
tns-core-modules/ui/list-view/list-view.ios.ts
View File

@ -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;
if (!bar.ios) {
var listView = <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;
}
}
@ -405,3 +406,30 @@ export class ListView extends common.ListView {
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();

5
tns-core-modules/ui/styling/style.d.ts vendored
View File

@ -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;

12
tns-core-modules/ui/styling/style.ts
View File

@ -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));
@ -1168,6 +1175,11 @@ export var selectedBackgroundColorProperty = new styleProperty.Property("selecte
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",

5
tns-core-modules/ui/styling/styling.d.ts vendored
View File

@ -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();