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

Allow updates to application CSS rules.

Browse Source 
Expose an `application.addCss` method and hide `application.cssSelectors`
from end-user typings. Update StyleScope's with new application selectors
on style application.

NOT updating existing controls/views unless reloaded, or forced (via a
change to className, etc).
This commit is contained in:
Hristo Deshev
2016-03-24 14:44:49 +02:00
parent 04cb12f86b
commit 9daa948887
8 changed files with 184 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/tests/ui/style/style-tests.ts
View File

@@ -1,4 +1,5 @@
import TKUnit = require("../../TKUnit");
import application = require("application");
import buttonModule = require("ui/button");
import labelModule = require("ui/label");
import pageModule = require("ui/page");
@@ -52,6 +53,42 @@ export function test_css_is_applied_to_special_properties() {
});
}
export function test_applies_css_changes_to_application_rules_before_page_load() {
application.addCss(".applicationChangedLabelBefore { color: red; }");
const label = new labelModule.Label();
label.className = "applicationChangedLabelBefore";
label.text = "Red color coming from updated application rules";
helper.buildUIAndRunTest(label, function (views: Array<viewModule.View>) {
helper.assertViewColor(label, "#FF0000");
});
}
export function test_applies_css_changes_to_application_rules_after_page_load() {
const label1 = new labelModule.Label();
label1.text = "Blue color coming from updated application rules";
helper.buildUIAndRunTest(label1, function (views: Array<viewModule.View>) {
application.addCss(".applicationChangedLabelAfter { color: blue; }");
label1.className = "applicationChangedLabelAfter";
helper.assertViewColor(label1, "#0000FF");
});
}
export function test_applies_css_changes_to_application_rules_after_page_load_new_views() {
const host = new stackModule.StackLayout();
helper.buildUIAndRunTest(host, function (views: Array<viewModule.View>) {
application.addCss(".applicationChangedLabelAfterNew { color: #00FF00; }");
const label = new labelModule.Label();
label.className = "applicationChangedLabelAfterNew";
label.text = "Blue color coming from updated application rules";
host.addChild(label);
helper.assertViewColor(label, "#00FF00");
});
}
// Test for inheritance in different containers
export function test_css_is_applied_inside_StackLayout() {
var testButton = new buttonModule.Button();