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

fix(css): widget properties in css didn't work (#6889)

Browse Source
This commit is contained in:
Martin Yankov
2019-02-13 15:10:06 +02:00
committed by GitHub
parent ddc860128e
commit 8330ac0ac1
5 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
tests/app/ui/search-bar/search-bar-tests-native.android.ts
View File

@@ -23,6 +23,15 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM
return undefined;
}
export function getNativeTextFieldBackgroundColor(searchBar: searchBarModule.SearchBar): colorModule.Color {
var textView = getTextView(searchBar.android);
if (textView) {
return new colorModule.Color((<android.graphics.drawable.ColorDrawable>textView.getBackground()).getColor());
}
return undefined;
}
export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number {
var textView = getTextView(searchBar.android);

1
tests/app/ui/search-bar/search-bar-tests-native.d.ts vendored
View File

@@ -3,4 +3,5 @@ import * as searchBarModule from "tns-core-modules/ui/search-bar";
import * as colorModule from "tns-core-modules/color";
export declare function getNativeHintColor(textView: searchBarModule.SearchBar): colorModule.Color;
export declare function getNativeTextFieldBackgroundColor(textView: searchBarModule.SearchBar): colorModule.Color;
export declare function getNativeFontSize(searchBar: searchBarModule.SearchBar): number;

5
tests/app/ui/search-bar/search-bar-tests-native.ios.ts
View File

@@ -5,6 +5,11 @@ import { getColor } from "../helper";
export function getNativeHintColor(searchBar: SearchBar): Color {
return (<any>searchBar)._placeholderLabel ? getColor((<any>searchBar)._placeholderLabel.textColor) : undefined;
}
export function getNativeTextFieldBackgroundColor(searchBar: SearchBar): Color {
return (<any>searchBar)._textField ? getColor((<any>searchBar)._textField.backgroundColor) : undefined;
}
export function getNativeFontSize(searchBar: SearchBar): number {
return (<any>searchBar)._textField ? (<any>searchBar)._textField.font.pointSize : undefined;
}

50
tests/app/ui/search-bar/search-bar-tests.ts
View File

@@ -28,7 +28,7 @@ export function test_recycling() {
helper.nativeView_recycling_test(() => new searchBarModule.SearchBar());
}
export var testSearchBarHintColorAndroid = function () {
export var testSearchBarHintColor = function () {
helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
var searchBar = <searchBarModule.SearchBar>views[0];
@@ -50,6 +50,28 @@ export var testSearchBarHintColorAndroid = function () {
});
};
export var testSearchBarTextFieldBackgroundColor = function () {
helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
var searchBar = <searchBarModule.SearchBar>views[0];
searchBar.text = "";
searchBar.hint = "";
var expectedNormalizedValue;
var actualValue;
searchBar.textFieldBackgroundColor = new colorModule.Color("blue");
expectedNormalizedValue = "#0000FF"; // blue
actualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
searchBar.textFieldBackgroundColor = new colorModule.Color("red");
expectedNormalizedValue = "#FF0000"; // red
actualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
});
};
export var testSearchBarFontSize = function () {
helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
var searchBar = <searchBarModule.SearchBar>views[0];
@@ -66,6 +88,32 @@ export var testSearchBarFontSize = function () {
});
};
export var testSearchBarPropertiesWithCSS = function () {
helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
var searchBar = <searchBarModule.SearchBar>views[0];
const expectedHintColor = "#0000FF"; // blue
const expectedTextFieldBackgroundColor = "#FF0000"; // red
const expectedFontSize = 30;
const hintColorActualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex;
const textFieldBackgroundColorActualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
const fontSizeActualValue = searchBarTestsNative.getNativeFontSize(searchBar);
TKUnit.assert(hintColorActualValue === expectedHintColor, "HintColor - Actual: " + hintColorActualValue + "; Expected: " + expectedHintColor);
TKUnit.assert(expectedTextFieldBackgroundColor === textFieldBackgroundColorActualValue, "Text Background Color - Actual: " + textFieldBackgroundColorActualValue + "; Expected: " + expectedTextFieldBackgroundColor);
TKUnit.assertAreClose(expectedFontSize, fontSizeActualValue, 0.2, "Font Size - Actual: " + fontSizeActualValue + "; Expected: " + expectedFontSize);
}, { pageCss: `
SearchBar {
text: test;
hint: test;
text-field-hint-color: blue;
text-field-background-color: red;
font-size: 30;
}
`});
};
export function test_DummyTestForSnippetOnly() {
// >> article-searching
var searchBar = new searchBarModule.SearchBar();

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

@@ -481,7 +481,8 @@ export class CssState {
if (property in this.view.style) {
this.view.style[`css:${property}`] = value;
} else {
this.view[property] = value;
const camelCasedProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
this.view[camelCasedProperty] = value;
}
} catch (e) {
traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);