From 669f6dc8ec67451858b0414d51e1e97c011c09f3 Mon Sep 17 00:00:00 2001 From: zh-m Date: Fri, 2 Dec 2016 11:45:44 +0200 Subject: [PATCH] ListPicker color and bckgColor set from CSS --- apps/app/ui-tests-app/css/list-picker.ts | 7 +++ apps/app/ui-tests-app/css/list-picker.xml | 5 ++ apps/app/ui-tests-app/css/main-page.ts | 1 + .../ui/list-picker/list-picker.android.ts | 44 +++++++++++++- .../ui/list-picker/list-picker.ios.ts | 60 +++++++++++++++++-- 5 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 apps/app/ui-tests-app/css/list-picker.ts create mode 100644 apps/app/ui-tests-app/css/list-picker.xml diff --git a/apps/app/ui-tests-app/css/list-picker.ts b/apps/app/ui-tests-app/css/list-picker.ts new file mode 100644 index 000000000..78606aca1 --- /dev/null +++ b/apps/app/ui-tests-app/css/list-picker.ts @@ -0,0 +1,7 @@ +export function loaded(args) { + var items = []; + for (var i = 0; i < 100; i++) { + items.push("name" + i); + } + args.object.bindingContext = { items: items }; +} \ No newline at end of file diff --git a/apps/app/ui-tests-app/css/list-picker.xml b/apps/app/ui-tests-app/css/list-picker.xml new file mode 100644 index 000000000..9849ff1c2 --- /dev/null +++ b/apps/app/ui-tests-app/css/list-picker.xml @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts index d8d28ca32..c4cffb190 100644 --- a/apps/app/ui-tests-app/css/main-page.ts +++ b/apps/app/ui-tests-app/css/main-page.ts @@ -37,6 +37,7 @@ export function pageLoaded(args: EventData) { examples.set("all-uniform-border", "css/all-uniform-border"); examples.set("all-non-uniform-border", "css/all-non-uniform-border"); examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage"); + examples.set("list-picker", "css/list-picker"); //examples.set("border-playground", "css/border-playground"); let viewModel = new SubMainPageViewModel(wrapLayout, examples); diff --git a/tns-core-modules/ui/list-picker/list-picker.android.ts b/tns-core-modules/ui/list-picker/list-picker.android.ts index 93e514aeb..71ba9eb91 100644 --- a/tns-core-modules/ui/list-picker/list-picker.android.ts +++ b/tns-core-modules/ui/list-picker/list-picker.android.ts @@ -2,6 +2,8 @@ import dependencyObservable = require("ui/core/dependency-observable"); import utils = require("utils/utils") import * as types from "utils/types"; +import { Styler, colorProperty, registerHandler, StylePropertyChangedHandler } from "ui/styling/style"; +import { View } from "ui/core/view"; global.moduleMerge(common, exports); @@ -60,7 +62,7 @@ export class ListPicker extends common.ListPicker { mInputTextField.setAccessible(true); this._editText = mInputTextField.get(this._android); this._editText.setFilters([]); - + //Since the Android NumberPicker has to always have at least one item, i.e. minValue=maxValue=value=0, we don't want this zero showing up when this.items is empty. this._editText.setText(" ", android.widget.TextView.BufferType.NORMAL); } @@ -93,7 +95,7 @@ export class ListPicker extends common.ListPicker { if (!this.android) { return; } - + //HACK: Force the stubborn NumberPicker to render correctly when we have 0 or 1 items. this.android.setFormatter(null); this.android.setFormatter(this._formatter); //Force the NumberPicker to call our Formatter @@ -103,4 +105,40 @@ export class ListPicker extends common.ListPicker { this._editText.invalidate(); //Force the EditText to redraw this.android.invalidate(); } -} +} + +export class ListPickerStyler implements Styler { + // color + private static setColorProperty(view: View, newValue: any) { + var picker = view._nativeView; + ListPickerStyler._setNumberPickerTextColor(picker, newValue); + } + + private static resetColorProperty(view: View, nativeValue: any) { + var picker = view._nativeView; + ListPickerStyler._setNumberPickerTextColor(picker, nativeValue); + } + + public static registerHandlers() { + registerHandler(colorProperty, new StylePropertyChangedHandler( + ListPickerStyler.setColorProperty, + ListPickerStyler.resetColorProperty), "ListPicker"); + } + + private static _setNumberPickerTextColor(picker: android.widget.NumberPicker, newValue: any) { + let childrenCount = picker.getChildCount(); + + for (let i = 0; i < childrenCount; i++) { + let child = picker.getChildAt(i); + if (child instanceof android.widget.EditText) { + let selectorWheelPaintField = picker.getClass().getDeclaredField("mSelectorWheelPaint"); + selectorWheelPaintField.setAccessible(true); + + selectorWheelPaintField.get(picker).setColor(newValue); + (picker.getChildAt(i)).setTextColor(newValue); + } + } + } +} + +ListPickerStyler.registerHandlers(); \ No newline at end of file diff --git a/tns-core-modules/ui/list-picker/list-picker.ios.ts b/tns-core-modules/ui/list-picker/list-picker.ios.ts index 2e2cc45e3..109df5fca 100644 --- a/tns-core-modules/ui/list-picker/list-picker.ios.ts +++ b/tns-core-modules/ui/list-picker/list-picker.ios.ts @@ -1,6 +1,8 @@ import common = require("./list-picker-common"); import dependencyObservable = require("ui/core/dependency-observable"); import * as types from "utils/types"; +import { backgroundColorProperty, colorProperty, registerHandler, Styler, StylePropertyChangedHandler } from "ui/styling/style"; +import { View } from "ui/core/view"; global.moduleMerge(common, exports); @@ -49,7 +51,7 @@ export class ListPicker extends common.ListPicker { class ListPickerDataSource extends NSObject implements UIPickerViewDataSource { public static ObjCProtocols = [UIPickerViewDataSource]; - + private _owner: WeakRef; public static initWithOwner(owner: WeakRef): ListPickerDataSource { @@ -79,13 +81,13 @@ class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate { return delegate; } - public pickerViewTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): string { + public pickerViewAttributedTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): NSAttributedString { let owner = this._owner.get(); if (owner) { - return owner._getItemAsString(row); + let title = NSAttributedString.alloc().initWithStringAttributes(owner._getItemAsString(row), { [NSForegroundColorAttributeName]: pickerView.tintColor }); + return title; } - - return row.toString(); + return NSAttributedString.alloc().initWithStringAttributes(row.toString(), { [NSForegroundColorAttributeName]: pickerView.tintColor }); } public pickerViewDidSelectRowInComponent(pickerView: UIPickerView, row: number, component: number): void { @@ -95,3 +97,51 @@ class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate { } } } + +export class ListPickerStyler implements Styler { + // background-color + private static setBackgroundColorProperty(view: View, newValue: any) { + var picker = view._nativeView; + picker.backgroundColor = newValue; + } + + private static resetBackgroundColorProperty(view: View, nativeValue: any) { + var picker = view._nativeView; + picker.backgroundColor = nativeValue; + } + + private static getBackgroundColorProperty(view: View): any { + var picker = view._nativeView; + return picker.backgroundColor; + } + + // color + private static setColorProperty(view: View, newValue: any) { + var picker = view._nativeView; + picker.tintColor = newValue; + } + + private static resetColorProperty(view: View, nativeValue: any) { + var picker = view._nativeView; + picker.tintColor = nativeValue; + } + + private static getColorProperty(view: View): any { + var picker = view._nativeView; + return picker.tintColor; + } + + public static registerHandlers() { + registerHandler(backgroundColorProperty, new StylePropertyChangedHandler( + ListPickerStyler.setBackgroundColorProperty, + ListPickerStyler.resetBackgroundColorProperty, + ListPickerStyler.getBackgroundColorProperty), "ListPicker"); + + registerHandler(colorProperty, new StylePropertyChangedHandler( + ListPickerStyler.setColorProperty, + ListPickerStyler.resetColorProperty, + ListPickerStyler.getColorProperty), "ListPicker"); + } +} + +ListPickerStyler.registerHandlers(); \ No newline at end of file