javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 03:31:45 +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

@ -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));
}
}

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

@ -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));
}
}

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.

16
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);
}
@ -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.