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

Merge pull request #1993 from NativeScript/zindex

Browse Source 
z-index support added
This commit is contained in:
Vladimir Enchev
2016-04-20 09:48:52 +03:00
parent f7c88899c2 b7e0d33387
commit a5b1acd56f
6 changed files with 75 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/ui-tests-app/css/zindex.xml Normal file
View File

@ -0,0 +1,6 @@
<Page>
<AbsoluteLayout>
<StackLayout style="height:100; width: 100; z-index: 1; background-color: red;" />
<StackLayout style="height:100; width: 100; background-color: green;" />
</AbsoluteLayout>
</Page>

22
ui/core/view.android.ts
View File

@ -701,6 +701,23 @@ export class ViewStyler implements style.Styler {
return view.translateY;
}
// z-index
private static getZIndexProperty(view: View): any {
return view.android.getZ ? view.android.getZ() : 0;
}
private static setZIndexProperty(view: View, newValue: any) {
if (view.android.setZ) {
view.android.setZ(newValue);
}
}
private static resetZIndexProperty(view: View, nativeValue: any) {
if (view.android.setZ) {
view.android.setZ(nativeValue);
}
}
public static registerHandlers() {
style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler(
ViewStyler.setVisibilityProperty,
@ -769,6 +786,11 @@ export class ViewStyler implements style.Styler {
ViewStyler.setTranslateYProperty,
ViewStyler.resetTranslateYProperty,
ViewStyler.getTranslateYProperty));
style.registerHandler(style.zIndexProperty, new style.StylePropertyChangedHandler(
ViewStyler.setZIndexProperty,
ViewStyler.resetZIndexProperty,
ViewStyler.getZIndexProperty));
}
}

18
ui/core/view.ios.ts
View File

@ -582,6 +582,19 @@ export class ViewStyler implements style.Styler {
return view.translateY;
}
//z-index
private static setZIndexProperty(view: View, newValue: any) {
view.ios.layer.zPosition = newValue;
}
private static resetZIndexProperty(view: View, nativeValue: any) {
view.ios.layer.zPosition = nativeValue;
}
private static getZIndexProperty(view: View): any {
return view.ios.layer.zPosition;
}
public static registerHandlers() {
style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBackgroundInternalProperty,
@ -635,6 +648,11 @@ export class ViewStyler implements style.Styler {
ViewStyler.setTranslateYProperty,
ViewStyler.resetTranslateYProperty,
ViewStyler.getTranslateYProperty));
style.registerHandler(style.zIndexProperty, new style.StylePropertyChangedHandler(
ViewStyler.setZIndexProperty,
ViewStyler.resetZIndexProperty,
ViewStyler.getZIndexProperty));
}
}

8
ui/styling/converters.ts
View File

@ -6,16 +6,14 @@ export function colorConverter(value: string): color.Color {
return new color.Color(value);
}
export function fontSizeConverter(value: string): number {
export function floatConverter(value: string): number {
// TODO: parse different unit types
var result: number = parseFloat(value);
return result;
}
export function letterSpacingConverter(value: string): number {
// TODO: parse different unit types
var result: number = parseFloat(value);
return result;
export function fontSizeConverter(value: string): number {
return floatConverter(value);
}
export function textAlignConverter(value: string): string {

2
ui/styling/style.d.ts vendored
View File

@ -78,6 +78,7 @@ declare module "ui/styling/style" {
public opacity: number;
public whiteSpace: string;
public letterSpacing: number;
public zIndex: number;
constructor(parentView: View);
@ -125,6 +126,7 @@ declare module "ui/styling/style" {
export var textTransformProperty: styleProperty.Property;
export var whiteSpaceProperty: styleProperty.Property;
export var letterSpacingProperty: styleProperty.Property;
export var zIndexProperty: styleProperty.Property;
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.

14
ui/styling/style.ts
View File

@ -417,7 +417,7 @@ function isOpacityValid(value: string): boolean {
return !isNaN(parsedValue) && 0 <= parsedValue && parsedValue <= 1;
}
function isLetterSpacingValid(value: string): boolean {
function isFloatValueValid(value: string): boolean {
var parsedValue: number = parseFloat(value);
return !isNaN(parsedValue);
}
@ -793,6 +793,13 @@ export class Style extends DependencyObservable implements styling.Style {
this._setValue(letterSpacingProperty, value);
}
get zIndex(): number {
return this._getValue(zIndexProperty);
}
set zIndex(value: number) {
this._setValue(zIndexProperty, value);
}
public _updateTextDecoration() {
if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@ -1085,7 +1092,10 @@ export var whiteSpaceProperty = new styleProperty.Property("whiteSpace", "white-
new PropertyMetadata(undefined, AffectsLayout, undefined, isWhiteSpaceValid), converters.whiteSpaceConverter);
export var letterSpacingProperty = new styleProperty.Property("letterSpacing", "letter-spacing",
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isLetterSpacingValid), converters.letterSpacingConverter);
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), converters.floatConverter);
export var zIndexProperty = new styleProperty.Property("zIndex", "z-index",
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), converters.floatConverter);
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.