Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f4c9e4e

Browse files
committed
Merge pull request #237 from NativeScript/hdeshev/setElementStyle
Implement Renderer.setElementStyle.
2 parents 5ecacd0 + cb6df7d commit f4c9e4e

File tree

8 files changed

+82
-12
lines changed

8 files changed

+82
-12
lines changed

‎.ctags-exclude‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ tests/lib
1515
tests/src/typings
1616
tests/typings
1717
web
18-
src/*.js
18+
*.js

‎ng-sample/app/app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ import {ModalTest} from "./examples/modal/modal-test";
2828
import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
2929
import {RouterOutletTest} from "./examples/navigation/router-outlet-test";
3030

31-
//nativeScriptBootstrap(RendererTest);
32-
nativeScriptBootstrap(TabViewTest);
31+
nativeScriptBootstrap(RendererTest);
32+
//nativeScriptBootstrap(TabViewTest);
3333
//nativeScriptBootstrap(Benchmark);
3434
//nativeScriptBootstrap(ListTest);
3535
//nativeScriptBootstrap(ListTestAsync);

‎ng-sample/app/examples/renderer-test.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<DatePicker [(ngModel)]='model.deliveryDate' ></DatePicker>
66
<Label [text]='model.deliveryDate' ></Label>-->
77
<SearchBar [(ngModel)]='model.search'></SearchBar>
8-
<Label [text]='model.search'></Label>
9-
<Label [text]='model.mydate | date:"fullDate"'></Label>
8+
<Label [text]='model.search'[style.backgroundColor]="'hotpink'"></Label>
9+
<Label [text]='model.mydate | date:"fullDate"'[ngStyle]="{'background-color': 'lime'}"></Label>
1010
<Slider [(ngModel)]='model.sliderTest'></Slider>
1111
<Label [text]='model.sliderTest'></Label>
1212
<ListPicker [items]='model.listPickerItems' [(ngModel)]='model.selectedIndex'></ListPicker>

‎ng-sample/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
},
2424
"homepage": "https://github.com/NativeScript/template-hello-world",
2525
"dependencies": {
26-
"tns-core-modules": "^2.0.0",
26+
"tns-core-modules": "2.0.0-angular-7",
2727
"nativescript-intl": "^0.0.2",
2828
"@angular/common": "2.0.0-rc.1",
2929
"@angular/compiler": "2.0.0-rc.1",
@@ -64,4 +64,4 @@
6464
"version": "2.0.0"
6565
}
6666
}
67-
}
67+
}

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nativescript-angular",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"description": "",
55
"homepage": "http://www.telerik.com",
66
"bugs": "http://www.telerik.com",
@@ -14,7 +14,7 @@
1414
},
1515
"scripts": {},
1616
"dependencies": {
17-
"tns-core-modules": "^2.0.0",
17+
"tns-core-modules": "2.0.0-angular-7",
1818
"nativescript-intl": "^0.0.2",
1919
"@angular/common": "2.0.0-rc.1",
2020
"@angular/compiler": "2.0.0-rc.1",
@@ -43,7 +43,7 @@
4343
"typescript": "^1.8.10"
4444
},
4545
"peerDependencies": {
46-
"tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-4"
46+
"tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-7"
4747
},
4848
"nativescript": {}
4949
}

‎src/nativescript-angular/view-util.ts‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import {ContentView} from 'ui/content-view';
55
import {LayoutBase} from 'ui/layouts/layout-base';
66
import {ViewClass, getViewClass, getViewMeta, isKnownView, ViewExtensions, NgView, ViewClassMeta} from './element-registry';
77
import {getSpecialPropertySetter} from "ui/builder/special-properties";
8+
import * as styleProperty from "ui/styling/style-property";
9+
import {StyleProperty, getPropertyByName, withStyleProperty} from "ui/styling/style-property";
10+
import {ValueSource} from "ui/core/dependency-observable";
811
import { ActionBar, ActionItem, NavigationButton } from "ui/action-bar";
912
import trace = require("trace");
1013
import {device, platformNames, Device} from "platform";
@@ -287,7 +290,38 @@ export class ViewUtil {
287290
view.cssClass = classValue;
288291
}
289292

293+
private resolveCssValue(styleValue: string): string {
294+
return styleValue;
295+
}
296+
297+
private setStyleValue(view: NgView, property: StyleProperty, value: any) {
298+
try {
299+
view.style._setValue(property, value, ValueSource.Local);
300+
} catch (ex) {
301+
trace.write("Error setting property: " + property.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error);
302+
}
303+
}
304+
290305
public setStyleProperty(view: NgView, styleName: string, styleValue: string): void {
291-
throw new Error("Not implemented: setStyleProperty");
306+
traceLog("setStyleProperty: " + styleName + " = " + styleValue);
307+
308+
let name = styleName;
309+
let resolvedValue = this.resolveCssValue(styleValue);
310+
withStyleProperty(name, resolvedValue, (property, value) => {
311+
if (isString(property)) {
312+
//Fall back to resolving property by name.
313+
const propertyName = <string>property;
314+
const resolvedProperty = getPropertyByName(name);
315+
if (resolvedProperty) {
316+
this.setStyleValue(view, resolvedProperty, resolvedValue);
317+
} else {
318+
traceLog("Unknown style property: " + styleName);
319+
}
320+
} else {
321+
const resolvedProperty = <StyleProperty>property;
322+
this.setStyleValue(view, resolvedProperty, resolvedValue);
323+
}
324+
325+
});
292326
}
293327
}

‎tests/app/tests/style-properties.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
//make sure you import mocha-config before @angular/core
2+
import {assert} from "./test-config";
3+
import {TextField} from "ui/text-field";
4+
import {Red, Lime} from "color/known-colors";
5+
import {NativeScriptRenderer, NativeScriptRootRenderer} from "nativescript-angular/renderer";
6+
import {device} from "platform";
7+
import {RenderComponentType} from '@angular/core/src/render/api';
8+
import {NgView} from "nativescript-angular/view-util";
9+
10+
describe("Setting style properties", () => {
11+
let renderer: NativeScriptRenderer = null;
12+
let element: NgView = null;
13+
14+
beforeEach(() => {
15+
const rootRenderer = new NativeScriptRootRenderer(null, device);
16+
const componentType = new RenderComponentType("id", "templateUrl", 0,
17+
null, []);
18+
renderer = new NativeScriptRenderer(rootRenderer, componentType);
19+
element = <NgView><any>new TextField();
20+
});
21+
22+
it("resolves hyphenated CSS names", () => {
23+
renderer.setElementStyle(element, "background-color", "red");
24+
assert.equal(Red, element.style.backgroundColor.hex);
25+
});
26+
27+
it("resolves camel-cased JavaScript names", () => {
28+
renderer.setElementStyle(element, "backgroundColor", "lime");
29+
assert.equal(Lime, element.style.backgroundColor.hex);
30+
});
31+
32+
it("resolves CSS shorthand properties", () => {
33+
renderer.setElementStyle(element, "font", "12");
34+
assert.equal(12, element.style.fontSize);
35+
});
36+
})

‎tests/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"homepage": "http://nativescript.org",
3232
"dependencies": {
3333
"nativescript-unit-test-runner": "^0.3.3",
34-
"tns-core-modules": "^2.0.0",
34+
"tns-core-modules": "2.0.0-angular-7",
3535
"nativescript-intl": "^0.0.2",
3636
"@angular/common": "2.0.0-rc.1",
3737
"@angular/compiler": "2.0.0-rc.1",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /