From b7e0d33387130364e0fcb0f63e517248dabd0079 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Tue, 19 Apr 2016 15:41:16 +0300 Subject: [PATCH] z-index support added --- apps/ui-tests-app/css/zindex.xml | 6 +++++ ui/core/view.android.ts | 22 ++++++++++++++++++ ui/core/view.ios.ts | 40 +++++++++++++++++++++++--------- ui/styling/converters.ts | 8 +++---- ui/styling/style.d.ts | 2 ++ ui/styling/style.ts | 16 ++++++++++--- 6 files changed, 75 insertions(+), 19 deletions(-) create mode 100644 apps/ui-tests-app/css/zindex.xml diff --git a/apps/ui-tests-app/css/zindex.xml b/apps/ui-tests-app/css/zindex.xml new file mode 100644 index 000000000..d332c7974 --- /dev/null +++ b/apps/ui-tests-app/css/zindex.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/ui/core/view.android.ts b/ui/core/view.android.ts index 43d3c6b5c..c27b09f5f 100644 --- a/ui/core/view.android.ts +++ b/ui/core/view.android.ts @@ -700,6 +700,23 @@ export class ViewStyler implements style.Styler { private static getTranslateYProperty(view: View): any { 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( @@ -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)); } } diff --git a/ui/core/view.ios.ts b/ui/core/view.ios.ts index 75e1236a8..cb3808c1b 100644 --- a/ui/core/view.ios.ts +++ b/ui/core/view.ios.ts @@ -262,7 +262,7 @@ export class View extends viewCommon.View { return { x: utils.layout.toDeviceIndependentPixels(pointInWindow.x), y: utils.layout.toDeviceIndependentPixels(pointInWindow.y), - } + } } public getLocationOnScreen(): viewDefinition.Point { @@ -275,7 +275,7 @@ export class View extends viewCommon.View { return { x: utils.layout.toDeviceIndependentPixels(pointOnScreen.x), y: utils.layout.toDeviceIndependentPixels(pointOnScreen.y), - } + } } public getLocationRelativeTo(otherView: viewDefinition.View): viewDefinition.Point { @@ -290,7 +290,7 @@ export class View extends viewCommon.View { return { x: utils.layout.toDeviceIndependentPixels(myPointInWindow.x - otherPointInWindow.x), y: utils.layout.toDeviceIndependentPixels(myPointInWindow.y - otherPointInWindow.y), - } + } } private _onSizeChanged() { @@ -340,17 +340,17 @@ export class View extends viewCommon.View { // This is done by calling CATransaction begin and commit methods. // This action should be disabled when updating those properties during an animation. public _suspendPresentationLayerUpdates() { - this._suspendCATransaction = true; + this._suspendCATransaction = true; } public _resumePresentationLayerUpdates() { - this._suspendCATransaction = false; + this._suspendCATransaction = false; } public _isPresentationLayerUpdateSuspeneded() { - return this._suspendCATransaction; + return this._suspendCATransaction; } - } +} export class CustomLayoutView extends View { @@ -394,11 +394,11 @@ export class ViewStyler implements style.Styler { ensureBackground(); var updateSuspended = view._isPresentationLayerUpdateSuspeneded(); if (!updateSuspended) { - CATransaction.begin(); + CATransaction.begin(); } nativeView.backgroundColor = background.ios.createBackgroundUIColor(view); if (!updateSuspended) { - CATransaction.commit(); + CATransaction.commit(); } } } @@ -439,11 +439,11 @@ export class ViewStyler implements style.Styler { if (nativeView) { var updateSuspended = view._isPresentationLayerUpdateSuspeneded(); if (!updateSuspended) { - CATransaction.begin(); + CATransaction.begin(); } var alpha = nativeView.alpha = newValue; if (!updateSuspended) { - CATransaction.commit(); + CATransaction.commit(); } return alpha; } @@ -581,6 +581,19 @@ export class ViewStyler implements style.Styler { private static getTranslateYProperty(view: View): any { 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( @@ -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)); } } diff --git a/ui/styling/converters.ts b/ui/styling/converters.ts index ff595c7a9..a7d96d918 100644 --- a/ui/styling/converters.ts +++ b/ui/styling/converters.ts @@ -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 { diff --git a/ui/styling/style.d.ts b/ui/styling/style.d.ts index 8402f3d89..583be9c5f 100644 --- a/ui/styling/style.d.ts +++ b/ui/styling/style.d.ts @@ -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. diff --git a/ui/styling/style.ts b/ui/styling/style.ts index eec643262..15d2a11d6 100644 --- a/ui/styling/style.ts +++ b/ui/styling/style.ts @@ -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); } @@ -791,7 +791,14 @@ export class Style extends DependencyObservable implements styling.Style { } set letterSpacing(value: number) { 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) { @@ -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.