From f771b48621b7e5bd22107bf07e1dc3e136256913 Mon Sep 17 00:00:00 2001 From: Hristo Deshev Date: Mon, 16 May 2016 17:35:44 +0300 Subject: [PATCH 1/5] Implement Renderer.setElementStyle. Support style bindings: - [ngStyle]="{'background-color': 'red'}" - [style.backgroundColor]="'red'" --- src/nativescript-angular/view-util.ts | 36 ++++++++++++++++++++++++++- tests/app/tests/style-properties.ts | 36 +++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 tests/app/tests/style-properties.ts diff --git a/src/nativescript-angular/view-util.ts b/src/nativescript-angular/view-util.ts index f074be8e0..5f2fc9727 100644 --- a/src/nativescript-angular/view-util.ts +++ b/src/nativescript-angular/view-util.ts @@ -5,6 +5,9 @@ import {ContentView} from 'ui/content-view'; import {LayoutBase} from 'ui/layouts/layout-base'; import {ViewClass, getViewClass, getViewMeta, isKnownView, ViewExtensions, NgView, ViewClassMeta} from './element-registry'; import {getSpecialPropertySetter} from "ui/builder/special-properties"; +import * as styleProperty from "ui/styling/style-property"; +import {StyleProperty, getPropertyByName, withStyleProperty} from "ui/styling/style-property"; +import {ValueSource} from "ui/core/dependency-observable"; import { ActionBar, ActionItem, NavigationButton } from "ui/action-bar"; import trace = require("trace"); import {device, platformNames, Device} from "platform"; @@ -287,7 +290,38 @@ export class ViewUtil { view.cssClass = classValue; } + private resolveCssValue(styleValue: string): string { + return styleValue; + } + + private setStyleValue(view: NgView, property: StyleProperty, value: any) { + try { + view.style._setValue(property, value, ValueSource.Local); + } catch (ex) { + trace.write("Error setting property: " + property.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error); + } + } + public setStyleProperty(view: NgView, styleName: string, styleValue: string): void { - throw new Error("Not implemented: setStyleProperty"); + traceLog("setStyleProperty: " + styleName + " = " + styleValue); + + let name = styleName; + let resolvedValue = this.resolveCssValue(styleValue); + withStyleProperty(name, resolvedValue, (property, value) => { + if (isString(property)) { + //Fall back to resolving property by name. + const propertyName = property; + const resolvedProperty = getPropertyByName(name); + if (resolvedProperty) { + this.setStyleValue(view, resolvedProperty, resolvedValue); + } else { + traceLog("Unknown style property: " + styleName); + } + } else { + const resolvedProperty = property; + this.setStyleValue(view, resolvedProperty, resolvedValue); + } + + }); } } diff --git a/tests/app/tests/style-properties.ts b/tests/app/tests/style-properties.ts new file mode 100644 index 000000000..56205e876 --- /dev/null +++ b/tests/app/tests/style-properties.ts @@ -0,0 +1,36 @@ +//make sure you import mocha-config before @angular/core +import {assert} from "./test-config"; +import {TextField} from "ui/text-field"; +import {Red, Lime} from "color/known-colors"; +import {NativeScriptRenderer, NativeScriptRootRenderer} from "nativescript-angular/renderer"; +import {device} from "platform"; +import {RenderComponentType} from '@angular/core/src/render/api'; +import {NgView} from "nativescript-angular/view-util"; + +describe("Setting style properties", () => { + let renderer: NativeScriptRenderer = null; + let element: NgView = null; + + beforeEach(() => { + const rootRenderer = new NativeScriptRootRenderer(null, device); + const componentType = new RenderComponentType("id", "templateUrl", 0, + null, []); + renderer = new NativeScriptRenderer(rootRenderer, componentType); + element = new TextField(); + }); + + it("resolves hyphenated CSS names", () => { + renderer.setElementStyle(element, "background-color", "red"); + assert.equal(Red, element.style.backgroundColor.hex); + }); + + it("resolves camel-cased JavaScript names", () => { + renderer.setElementStyle(element, "backgroundColor", "lime"); + assert.equal(Lime, element.style.backgroundColor.hex); + }); + + it("resolves CSS shorthand properties", () => { + renderer.setElementStyle(element, "font", "12"); + assert.equal(12, element.style.fontSize); + }); +}) From 3f65534bfd6ad60f58e55d5eaa77c675dc8f98e3 Mon Sep 17 00:00:00 2001 From: Hristo Deshev Date: Tue, 17 May 2016 13:53:08 +0300 Subject: [PATCH 2/5] Update tns-core-modules dependency --- ng-sample/package.json | 4 ++-- package.json | 4 ++-- tests/package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ng-sample/package.json b/ng-sample/package.json index 396ae6dbd..2bdb6395b 100644 --- a/ng-sample/package.json +++ b/ng-sample/package.json @@ -23,7 +23,7 @@ }, "homepage": "https://github.com/NativeScript/template-hello-world", "dependencies": { - "tns-core-modules": "^2.0.0", + "tns-core-modules": "2.0.0-angular-7", "nativescript-intl": "^0.0.2", "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", @@ -64,4 +64,4 @@ "version": "2.0.0" } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index bec689ff8..94292d706 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ }, "scripts": {}, "dependencies": { - "tns-core-modules": "^2.0.0", + "tns-core-modules": "2.0.0-angular-7", "nativescript-intl": "^0.0.2", "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", @@ -43,7 +43,7 @@ "typescript": "^1.8.10" }, "peerDependencies": { - "tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-4" + "tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-7" }, "nativescript": {} } diff --git a/tests/package.json b/tests/package.json index 142816149..d0498b533 100644 --- a/tests/package.json +++ b/tests/package.json @@ -31,7 +31,7 @@ "homepage": "http://nativescript.org", "dependencies": { "nativescript-unit-test-runner": "^0.3.3", - "tns-core-modules": "^2.0.0", + "tns-core-modules": "2.0.0-angular-7", "nativescript-intl": "^0.0.2", "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", From 42146373bba6453eec2fcc1a475c8836084ab28f Mon Sep 17 00:00:00 2001 From: Hristo Deshev Date: Tue, 17 May 2016 13:53:24 +0300 Subject: [PATCH 3/5] Add style/ngStyle bindings to RendererTest example --- ng-sample/app/app.ts | 4 ++-- ng-sample/app/examples/renderer-test.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ng-sample/app/app.ts b/ng-sample/app/app.ts index 4fa5c1a45..1310bf8e3 100644 --- a/ng-sample/app/app.ts +++ b/ng-sample/app/app.ts @@ -28,8 +28,8 @@ import {ModalTest} from "./examples/modal/modal-test"; import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test"; import {RouterOutletTest} from "./examples/navigation/router-outlet-test"; -//nativeScriptBootstrap(RendererTest); -nativeScriptBootstrap(TabViewTest); +nativeScriptBootstrap(RendererTest); +//nativeScriptBootstrap(TabViewTest); //nativeScriptBootstrap(Benchmark); //nativeScriptBootstrap(ListTest); //nativeScriptBootstrap(ListTestAsync); diff --git a/ng-sample/app/examples/renderer-test.html b/ng-sample/app/examples/renderer-test.html index aa9fa5f18..09f7673ef 100644 --- a/ng-sample/app/examples/renderer-test.html +++ b/ng-sample/app/examples/renderer-test.html @@ -5,8 +5,8 @@ --> - - + + From 75cf39031890810132d7b65b52c9631651b4f48a Mon Sep 17 00:00:00 2001 From: Hristo Deshev Date: Tue, 17 May 2016 13:53:37 +0300 Subject: [PATCH 4/5] Exclude *.js files from ctags config. --- .ctags-exclude | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.ctags-exclude b/.ctags-exclude index 4841229da..0b0a4b0dd 100644 --- a/.ctags-exclude +++ b/.ctags-exclude @@ -15,4 +15,4 @@ tests/lib tests/src/typings tests/typings web -src/*.js +*.js From cb6df7deeddac9de323f70cee1afbdd27e34c4c7 Mon Sep 17 00:00:00 2001 From: Hristo Deshev Date: Tue, 17 May 2016 13:53:56 +0300 Subject: [PATCH 5/5] Version bump: 0.1.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 94292d706..26f97bfc7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nativescript-angular", - "version": "0.1.2", + "version": "0.1.3", "description": "", "homepage": "http://www.telerik.com", "bugs": "http://www.telerik.com",