From d1ec70286d5d1b604696fb6733f96b6f6c98a60e Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 8 Jul 2015 18:16:28 +0300 Subject: [PATCH] more fixes & tests added --- apps/tests/ui/style/style-tests.ts | 11 ++++ .../xml-declaration/xml-declaration-tests.ts | 50 +++++++++++++++++++ ui/builder/builder.d.ts | 2 + ui/builder/builder.ts | 18 ++----- ui/page/page-common.ts | 4 +- ui/styling/style-scope.ts | 19 ++++--- 6 files changed, 77 insertions(+), 27 deletions(-) diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts index 66a35a762..9bc6ba6a9 100644 --- a/apps/tests/ui/style/style-tests.ts +++ b/apps/tests/ui/style/style-tests.ts @@ -778,6 +778,17 @@ export var test_CSS_isAppliedOnPage_From_Import = function () { }); } +export var test_CSS_isAppliedOnPage_From_addCssFile = function () { + var testButton = new buttonModule.Button(); + testButton.text = "Test"; + + helper.buildUIAndRunTest(testButton, function (views: Array) { + var page: pageModule.Page = views[1]; + page.addCssFile("~/ui/style/test.css"); + helper.assertViewBackgroundColor(page, "#FF0000"); + }); +} + // // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. // diff --git a/apps/tests/xml-declaration/xml-declaration-tests.ts b/apps/tests/xml-declaration/xml-declaration-tests.ts index 5fbc4de33..8d9f20354 100644 --- a/apps/tests/xml-declaration/xml-declaration-tests.ts +++ b/apps/tests/xml-declaration/xml-declaration-tests.ts @@ -50,6 +50,31 @@ export function test_loadWithOptionsNoXML() { TKUnit.assert(v instanceof view.View, "Expected result: View; Actual result: " + v + ";"); }; +export function test_loadWithOptionsNoXML_CSSIsApplied() { + var newPage: page.Page; + var pageFactory = function (): page.Page { + newPage = new page.Page(); + + newPage.content = builder.load({ + path: "~/xml-declaration/mymodule", + name: "MyControl", + exports: exports, + page: newPage + }); + + return newPage; + }; + + helper.navigate(pageFactory); + TKUnit.assert(newPage.isLoaded, "The page should be loaded here."); + try { + helper.assertViewBackgroundColor(newPage.content, "#FF0000"); + } + finally { + helper.goBack(); + } +}; + export function test_loadWithOptionsWithXML() { var v = builder.load({ path: "~/xml-declaration/mymodulewithxml", @@ -59,6 +84,31 @@ export function test_loadWithOptionsWithXML() { TKUnit.assert(v instanceof view.View, "Expected result: View; Actual result: " + v + ";"); }; +export function test_loadWithOptionsWithXML_CSSIsApplied() { + var newPage: page.Page; + var pageFactory = function (): page.Page { + newPage = new page.Page(); + + newPage.content = builder.load({ + path: "~/xml-declaration/mymodulewithxml", + name: "MyControl", + exports: exports, + page: newPage + }); + + return newPage; + }; + + helper.navigate(pageFactory); + TKUnit.assert(newPage.isLoaded, "The page should be loaded here."); + try { + helper.assertViewBackgroundColor(newPage.content, "#008000"); + } + finally { + helper.goBack(); + } +}; + export function test_loadWithOptionsFromTNS() { var v = builder.load({ path: "ui/label", diff --git a/ui/builder/builder.d.ts b/ui/builder/builder.d.ts index 9834658f5..9328be659 100644 --- a/ui/builder/builder.d.ts +++ b/ui/builder/builder.d.ts @@ -1,6 +1,7 @@ //@private declare module "ui/builder" { import view = require("ui/core/view"); + import page = require("ui/page"); export function load(fileName: string, exports?: any): view.View; export function load(options: LoadOptions): view.View; @@ -10,5 +11,6 @@ declare module "ui/builder" { path: string; name: string; exports?: any; + page?: page.Page; } } diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts index 9cbb64f36..d73df82f5 100644 --- a/ui/builder/builder.ts +++ b/ui/builder/builder.ts @@ -7,7 +7,6 @@ import componentBuilder = require("ui/builder/component-builder"); import templateBuilderDef = require("ui/builder/template-builder"); import platform = require("platform"); import definition = require("ui/builder"); -import frame = require("ui/frame"); import page = require("ui/page"); var KNOWNCOLLECTIONS = "knownCollections"; @@ -217,19 +216,8 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr // Add component CSS file if exists. var cssFileName = fileName.replace(".xml", ".css"); - if (fs.File.exists(cssFileName)) { - var currentPage = parentPage; - - if (!currentPage) { - var topMostFrame = frame.topmost(); - if (topMostFrame && topMostFrame.currentPage) { - currentPage = topMostFrame.currentPage; - } - } - - if (currentPage) { - currentPage.addCssFile(cssFileName); - } + if (fs.File.exists(cssFileName) && parentPage) { + parentPage.addCssFile(cssFileName); } return result; @@ -242,7 +230,7 @@ export function load(arg: any): view.View { if (arguments.length === 1) { if (!types.isString(arguments[0])) { var options = arguments[0]; - componentModule = loadCustomComponent(options.path, options.name, undefined, options.exports); + componentModule = loadCustomComponent(options.path, options.name, undefined, options.exports, options.page); } else { componentModule = loadInternal(arguments[0]); } diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts index 1514ed5bf..486ff033e 100644 --- a/ui/page/page-common.ts +++ b/ui/page/page-common.ts @@ -117,8 +117,8 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA private _cssFiles = {}; public addCssFile(cssFileName: string) { - if (cssFileName.indexOf(fs.knownFolders.currentApp().path) !== 0) { - cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName); + if (cssFileName.indexOf("~/") === 0) { + cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName.replace("~/", "")); } if (!this._cssFiles[cssFileName]) { if (fs.File.exists(cssFileName)) { diff --git a/ui/styling/style-scope.ts b/ui/styling/style-scope.ts index 05c69cb96..3015b6d45 100644 --- a/ui/styling/style-scope.ts +++ b/ui/styling/style-scope.ts @@ -33,18 +33,17 @@ export class StyleScope { } public addCss(cssString: string, cssFileName: string): void { - if (this._css === undefined) { - this._css = cssString; - } - else { - this._css += cssString; - } - this._cssFileName = cssFileName; + this._css = this._css ? this._css + cssString : cssString; + this._cssFileName = cssFileName + this._reset(); - if (this._cssSelectors) { - var addedSelectors = StyleScope.createSelectorsFromCss(cssString, cssFileName); - this._cssSelectors = StyleScope._joinCssSelectorsArrays([this._cssSelectors, addedSelectors]); + + if (!this._cssSelectors) { + this._cssSelectors = new Array(); } + + var selectorsFromFile = StyleScope.createSelectorsFromCss(cssString, cssFileName); + this._cssSelectors = StyleScope._joinCssSelectorsArrays([this._cssSelectors, selectorsFromFile]); } public static createSelectorsFromCss(css: string, cssFileName: string): cssSelector.CssSelector[] {