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

Merge pull request #974 from NativeScript/switch-css

Browse Source 
Switch color and background-color css support added
This commit is contained in:
Vladimir Enchev
2015-10-22 13:14:18 +03:00
parent 6a9f212044 b1c330be65
commit b0ff7a46bb
8 changed files with 137 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CrossPlatformModules.csproj
View File

@ -1006,6 +1006,7 @@
<Content Include="apps\ui-tests-app\modal-view\modalview.xml" />
<Content Include="apps\ui-tests-app\image-view\red.png" />
<Content Include="apps\ui-tests-app\pages\test2.png" />
<Content Include="apps\ui-tests-app\pages\switchandprogress.xml" />
<Content Include="apps\ui-tests-app\pages\textfield.xml" />
<Content Include="apps\ui-tests-app\pages\text\text-field.xml" />
<Content Include="apps\ui-tests-app\pages\text\text-view.xml" />
@ -1014,6 +1015,7 @@
<Content Include="apps\ui-tests-app\web-view\test.css" />
<Content Include="apps\ui-tests-app\web-view\test.html" />
<Content Include="apps\ui-tests-app\web-view\webview.xml" />
<Content Include="apps\ui-tests-app\web-view\webviewhtmlwithimages.xml" />
<Content Include="apps\ui-tests-app\web-view\webviewlocalfile.xml" />
<Content Include="fetch\fetch.js" />
<Content Include="css-value\reworkcss-value.js" />
@ -1998,7 +2000,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio>
</ProjectExtensions>
</Project>

27
apps/tests/ui/switch/switch-tests.ts
View File

@ -3,6 +3,8 @@ import helper = require("../helper");
import viewModule = require("ui/core/view");
import bindable = require("ui/core/bindable");
import observable = require("data/observable");
import color = require("color");
import platform = require("platform");
// <snippet module="ui/switch" title="switch">
// # Switch
// Using a switch requires the Switch module.
@ -51,6 +53,31 @@ export function test_default_native_values() {
helper.buildUIAndRunTest(mySwitch, testAction);
}
// Uncomment this when find way to check android Drawable color set by setColorFilter() method.
if (platform.device.os === platform.platformNames.ios) {
exports.test_set_color = function () {
var mySwitch = new switchModule.Switch();
mySwitch.color = new color.Color("red");
function testAction(views: Array<viewModule.View>) {
TKUnit.assert(mySwitch.color.ios.isEqual(mySwitch.ios.thumbTintColor), "mySwitch.color");
};
helper.buildUIAndRunTest(mySwitch, testAction);
}
exports.test_set_backgroundColor = function () {
var mySwitch = new switchModule.Switch();
mySwitch.backgroundColor = new color.Color("red");
function testAction(views: Array<viewModule.View>) {
TKUnit.assert(CGColorEqualToColor(mySwitch.backgroundColor.ios.CGColor, mySwitch.ios.onTintColor.CGColor), "mySwitch.color");
};
helper.buildUIAndRunTest(mySwitch, testAction);
}
}
export function test_set_TNS_checked_updates_native_checked() {
var mySwitch = new switchModule.Switch();
function testAction(views: Array<viewModule.View>) {

6
apps/ui-tests-app/pages/switchandprogress.xml Normal file
View File

@ -0,0 +1,6 @@
<Page>
<StackLayout>
<Progress value="45" color="red" backgroundColor="green" />
<Switch color="red" backgroundColor="green" />
</StackLayout>
</Page>

5
ui/core/view.ios.ts
View File

@ -274,10 +274,7 @@ export class View extends viewCommon.View {
}
private _onBoundsChanged() {
var bgColor = background.ios.createBackgroundUIColor(this);
if (bgColor) {
this._nativeView.backgroundColor = bgColor;
}
this.style._boundsChanged();
}
}

1
ui/styling/style.d.ts vendored
View File

@ -71,6 +71,7 @@ declare module "ui/styling/style" {
public _syncNativeProperties(): void;
public _inheritStyleProperty(property: Property): void;
public _inheritStyleProperties(): void;
public _boundsChanged(): void;
}
export function registerHandler(property: Property, handler: styling.stylers.StylePropertyChangedHandler, className?: string);

4
ui/styling/style.ts
View File

@ -600,6 +600,10 @@ export class Style extends DependencyObservable implements styling.Style {
});
}
public _boundsChanged() {
this._applyProperty(backgroundInternalProperty, this._getValue(backgroundInternalProperty));
}
private _applyProperty(property: Property, newValue: any) {
this._applyStyleProperty(property, newValue);

47
ui/styling/stylers.android.ts
View File

@ -550,6 +550,52 @@ export class ProgressStyler implements definition.stylers.Styler {
}
}
export class SwitchStyler implements definition.stylers.Styler {
private static setColorProperty(view: view.View, newValue: any) {
var sw = <android.widget.Switch>view._nativeView;
var drawable = <android.graphics.drawable.StateListDrawable>sw.getThumbDrawable();
if (drawable) {
drawable.setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN);
}
}
private static resetColorProperty(view: view.View, nativeValue: number) {
var sw = <android.widget.Switch>view._nativeView;
// Do nothing.
}
private static setBackgroundAndBorderProperty(view: view.View, newValue: any) {
var sw = <android.widget.Switch>view._nativeView;
var drawable = <android.graphics.drawable.StateListDrawable>sw.getTrackDrawable();
if (drawable) {
drawable.setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN);
}
}
private static resetBackgroundAndBorderProperty(view: view.View, nativeValue: number) {
var sw = <android.widget.Switch>view._nativeView;
// Do nothing.
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
SwitchStyler.setColorProperty,
SwitchStyler.resetColorProperty), "Switch");
var borderHandler = new stylersCommon.StylePropertyChangedHandler(
SwitchStyler.setBackgroundAndBorderProperty,
SwitchStyler.resetBackgroundAndBorderProperty);
style.registerHandler(style.backgroundColorProperty, borderHandler, "Switch");
style.registerHandler(style.borderWidthProperty, borderHandler, "Switch");
style.registerHandler(style.borderColorProperty, borderHandler, "Switch");
style.registerHandler(style.borderRadiusProperty, borderHandler, "Switch");
style.registerHandler(style.backgroundInternalProperty, borderHandler, "Switch");
}
}
export class SearchBarStyler implements definition.stylers.Styler {
private static getBackgroundColorProperty(view: view.View): any {
@ -749,4 +795,5 @@ export function _registerDefaultStylers() {
ActionBarStyler.registerHandlers();
TabViewStyler.registerHandlers();
ProgressStyler.registerHandlers();
SwitchStyler.registerHandlers();
}

48
ui/styling/stylers.ios.ts
View File

@ -439,6 +439,53 @@ export class ProgressStyler implements definition.stylers.Styler {
}
}
export class SwitchStyler implements definition.stylers.Styler {
private static setColorProperty(view: view.View, newValue: any) {
var sw = <UISwitch>view.ios;
sw.thumbTintColor = newValue;
}
private static resetColorProperty(view: view.View, nativeValue: any) {
var sw = <UISwitch>view.ios;
sw.thumbTintColor = nativeValue;
}
private static getNativeColorValue(view: view.View): any {
var sw = <UISwitch>view.ios;
return sw.thumbTintColor;
}
private static setBackgroundColorProperty(view: view.View, newValue: any) {
var sw = <UISwitch>view.ios;
sw.onTintColor = view.backgroundColor.ios;
}
private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
var sw = <UISwitch>view.ios;
sw.onTintColor = nativeValue;
}
private static getBackgroundColorProperty(view: view.View): any {
var sw = <UISwitch>view.ios;
return sw.onTintColor;
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
SwitchStyler.setColorProperty,
SwitchStyler.resetColorProperty,
SwitchStyler.getNativeColorValue), "Switch");
var bkgHandler = new stylersCommon.StylePropertyChangedHandler(
SwitchStyler.setBackgroundColorProperty,
SwitchStyler.resetBackgroundColorProperty,
SwitchStyler.getBackgroundColorProperty);
style.registerHandler(style.backgroundColorProperty, bkgHandler, "Switch");
style.registerHandler(style.backgroundInternalProperty, bkgHandler, "Switch");
}
}
export class SearchBarStyler implements definition.stylers.Styler {
private static setBackgroundColorProperty(view: view.View, newValue: any) {
@ -593,4 +640,5 @@ export function _registerDefaultStylers() {
ActionBarStyler.registerHandlers();
TabViewStyler.registerHandlers();
ProgressStyler.registerHandlers();
SwitchStyler.registerHandlers();
}