Merge pull request #2924 from NativeScript/zhecheva/percent-margin

Support of percentage margins for certain elements - frame, page, contentview.

tests/app/ui/frame/frame-tests.ts

@@ -3,8 +3,89 @@ import frameModule = require("ui/frame");
 var topmost = frameModule.topmost();
 // << frame-require
 
+import platform = require("platform");
 import labelModule = require("ui/label");
 import pagesModule = require("ui/page");
+import testModule = require("../../ui-test");
+import TKUnit = require("../../TKUnit");
+import {widthProperty, heightProperty} from "ui/styling/style"
+
+var uiUtils;
+if (platform.isIOS) {
+     uiUtils = require("ui/utils");
+}
+
+export class FrameTest extends testModule.UITest<frameModule.Frame> {
+
+    public create(): frameModule.Frame {
+        return new frameModule.Frame();
+    }
+    
+    public test_percent_width_and_height_set_to_page_support() {
+        let topFrame = frameModule.topmost();
+
+        let currentPage = topFrame.currentPage;
+        
+        (<any>currentPage).width = "50%";
+        (<any>currentPage).height = "50%";
+
+        this.waitUntilTestElementLayoutIsValid();
+
+        let topFrameWidth = topFrame.getMeasuredWidth();
+        let topFrameHeight = topFrame.getMeasuredHeight();
+
+        let currentPageWidth = currentPage.getMeasuredWidth();
+        let currentPageHeight = currentPage.getMeasuredHeight()
+
+        TKUnit.assertEqual(currentPageWidth, Math.round(topFrameWidth / 2), "Current page MeasuredWidth incorrect");
+        TKUnit.assertEqual(currentPageHeight, Math.round(topFrameHeight / 2), "Current page MeasuredHeight incorrect");
+
+        //reset values.
+        (<any>currentPage.style)._resetValue(heightProperty);
+        (<any>currentPage.style)._resetValue(widthProperty);
+
+        TKUnit.assert(isNaN(currentPage.width), "width");
+        TKUnit.assert(isNaN(currentPage.height), "height");
+    }
+
+    public test_percent_margin_set_to_page_support() {
+        let topFrame = frameModule.topmost();
+
+        let currentPage = topFrame.currentPage;
+
+        currentPage.margin = "10%";
+
+        this.waitUntilTestElementLayoutIsValid();
+
+        let topFrameWidth = topFrame.getMeasuredWidth();
+        let topFrameHeight = topFrame.getMeasuredHeight();
+
+        let currentPageWidth = currentPage.getMeasuredWidth();
+        let currentPageHeight = currentPage.getMeasuredHeight()
+
+        let marginLeft = topFrameWidth * 0.1;
+        let marginTop;
+        if (uiUtils) {
+            marginTop = topFrameHeight * 0.1 + uiUtils.ios.getStatusBarHeight();
+        } else {
+             marginTop = topFrameHeight * 0.1;
+       }
+
+        let bounds = currentPage._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, Math.round(marginLeft), "Current page LEFT position incorrect");
+        TKUnit.assertEqual(bounds.top, Math.round(marginTop), "Current page  TOP position incorrect");
+        TKUnit.assertEqual(bounds.right, Math.round(marginLeft + currentPageWidth), "Current page  RIGHT position incorrect");
+        TKUnit.assertEqual(bounds.bottom, Math.round(marginTop + currentPageHeight), "Current page  BOTTOM position incorrect");
+
+        //reset values.
+        currentPage.margin = "0";
+
+        TKUnit.assertEqual(currentPage.marginLeft, 0, "marginLeft");
+        TKUnit.assertEqual(currentPage.marginTop, 0, "marginTop");
+        TKUnit.assertEqual(currentPage.marginRight, 0, "marginRight");
+        TKUnit.assertEqual(currentPage.marginBottom, 0, "marginBottom");
+    }
+}
 
 export var ignore_test_DummyTestForSnippetOnly0 = function () {
     // >> frame-navigating
@@ -41,3 +122,7 @@ export var ignore_test_DummyTestForSnippetOnly3 = function () {
     topmost.goBack();
     // << frame-back
 }
+
+export function createTestCase(): FrameTest {
+    return new FrameTest();
+}

tests/app/ui/layouts/absolute-layout-tests.ts

@@ -82,7 +82,7 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
         layoutHelper.assertLayout(btn, 25, 35, 100, 100);
     }
 
-    public test_percent_support() {
+    public test_percent_children_support() {
         let layout = this.testView;
         layout.width = layoutHelper.dp(200);
         layout.height = layoutHelper.dp(200);

tests/app/ui/layouts/common-layout-tests.ts

@@ -74,7 +74,7 @@ export function percent_support_nativeLayoutParams_are_correct(test: testModule.
     TKUnit.assertEqual(lp.bottomMarginPercent, -1, "bottomMarginPercent");
 }
 
-export function percent_support_test(test: testModule.UITest<LayoutBase>) {
+export function percent_support_children_test(test: testModule.UITest<LayoutBase>) {
     let layout: LayoutBase = test.testView;
     layout.removeChildren();
     layout.width = layoutHelper.dp(200);

tests/app/ui/layouts/dock-layout-tests.ts

@@ -165,8 +165,8 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
         // << dock-layout-setdocl
     }
 
-    public test_percent_support() {
+    public test_percent_children_support() {
-        commonTests.percent_support_test(this);
+        commonTests.percent_support_children_test(this);
     }
 
     public test_percent_support_nativeLayoutParams_are_correct() {

tests/app/ui/layouts/grid-layout-tests.ts

@@ -633,10 +633,6 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
         // << grid-layout-add-rowscols
     }
 
-    public test_percent_support() {
-        commonTests.percent_support_test(this);
-    }
-
     public test_percent_support_nativeLayoutParams_are_correct() {
         commonTests.percent_support_nativeLayoutParams_are_correct(this);
     }

tests/app/ui/layouts/wrap-layout-tests.ts

@@ -262,7 +262,7 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
         layoutHelper.assertLayout(btn2, 50, 0, 50, 80, "button2");
     }
 
-    public test_percent_support() {
+    public test_percent_children_support() {
         let layout = this.testView;
         layout.removeChildren();
         layout.width = layoutHelper.dp(200);

tests/app/ui/page/page-tests-common.ts

@@ -20,6 +20,7 @@ import observable = require("data/observable");
 import {Page, ShownModallyData, NavigatedData} from "ui/page";
 import {Label} from "ui/label";
 import {EventData} from "data/observable";
+import {widthProperty} from "ui/styling/style"
 import platform = require("platform");
 
 export function addLabelToPage(page: Page, text?: string) {
@@ -536,6 +537,61 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
     masterPage.off(Page.navigatedToEvent, navigatedToEventHandler);
 }
 
+export function  test_percent_width_and_height_support() {
+    let testPage = new Page();
+    testPage.id = "test_percent_width_and_height_support";
+
+    let stackLayout = new StackLayout();
+    (<any>stackLayout).width = "50%";
+    (<any>stackLayout).height = "50%";
+
+    testPage.content = stackLayout; 
+
+    let pageWidth = testPage.getMeasuredWidth();
+    let pageHeight = testPage.getMeasuredHeight()
+
+    TKUnit.assertEqual(pageWidth, Math.round(pageWidth / 2), "Current page MeasuredWidth incorrect");
+    TKUnit.assertEqual(pageHeight, Math.round(pageHeight / 2), "Current page MeasuredHeight incorrect");
+
+    //reset values.
+    testPage.height = Number.NaN;
+    (<any>testPage.style)._resetValue(widthProperty);
+    
+    testPage.height = Number.NaN;
+
+    TKUnit.assert(isNaN(testPage.width), "width");
+    TKUnit.assert(isNaN(testPage.height), "height");
+}
+
+export function  test_percent_margin_support() {
+    let testPage = new Page();
+    testPage.id = "ttest_percent_margin_support";
+
+    let stackLayout = new StackLayout();
+    stackLayout.margin = "10%";
+    testPage.content = stackLayout;
+
+    let pageWidth = testPage.getMeasuredWidth();
+    let pageHeight = testPage.getMeasuredHeight()
+
+    let marginLeft = pageWidth * 0.1;
+    let marginTop = pageHeight * 0.1;
+
+    let bounds = stackLayout._getCurrentLayoutBounds();
+    TKUnit.assertEqual(bounds.left, Math.round(marginLeft), "Page's content LEFT position incorrect");
+    TKUnit.assertEqual(bounds.top, Math.round(marginTop), "Page's content  TOP position incorrect");
+    TKUnit.assertEqual(bounds.right, Math.round(marginLeft + pageWidth), "Page's content  RIGHT position incorrect");
+    TKUnit.assertEqual(bounds.bottom, Math.round(marginTop + pageHeight), "Page's content  BOTTOM position incorrect");
+
+    //reset values.
+    testPage.margin = "0";
+
+    TKUnit.assertEqual(testPage.marginLeft, 0, "marginLeft");
+    TKUnit.assertEqual(testPage.marginTop, 0, "marginTop");
+    TKUnit.assertEqual(testPage.marginRight, 0, "marginRight");
+    TKUnit.assertEqual(testPage.marginBottom, 0, "marginBottom");
+}
+
 //export function test_ModalPage_Layout_is_Correct() {
 //    let testPage: Page;
 //    let label: Label;

tns-core-modules/ui/content-view/content-view.ts

@@ -67,6 +67,8 @@ export class ContentView extends view.CustomLayoutView implements definition.Con
 
     // This method won't be called in Android because we use the native android layout.
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
+        view.View.adjustChildLayoutParams(this.layoutView, widthMeasureSpec, heightMeasureSpec);
+
         var result = view.View.measureChild(this, this.layoutView, widthMeasureSpec, heightMeasureSpec);
 
         var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
@@ -88,5 +90,7 @@ export class ContentView extends view.CustomLayoutView implements definition.Con
     // This method won't be called in Android because we use the native android layout.
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         view.View.layoutChild(this, this.layoutView, 0, 0, right - left, bottom - top);
+
+        view.View.restoreChildOriginalParams(this.layoutView);
     }
 }

tns-core-modules/ui/core/view-common.ts

@@ -980,6 +980,75 @@ export class View extends ProxyObject implements definition.View {
         return changed;
     }
 
+    protected static adjustChildLayoutParams(view: View, widthMeasureSpec: number, heightMeasureSpec: number): void {
+        if(!view) {
+            return;
+        }
+
+        let availableWidth = utils.layout.getMeasureSpecSize(widthMeasureSpec);
+        let widthSpec = utils.layout.getMeasureSpecMode(widthMeasureSpec);
+
+        let availableHeight = utils.layout.getMeasureSpecSize(heightMeasureSpec);
+        let heightSpec = utils.layout.getMeasureSpecMode(heightMeasureSpec);
+
+         let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
+
+         if (widthSpec !== utils.layout.UNSPECIFIED) {
+             if (lp.widthPercent > 0) {
+                 lp.width = Math.round(availableWidth * lp.widthPercent);
+             }
+
+             if (lp.leftMarginPercent > 0) {
+                 lp.leftMargin = Math.round(availableWidth * lp.leftMarginPercent);
+             }
+
+             if (lp.rightMarginPercent > 0) {
+                 lp.rightMargin = Math.round(availableWidth * lp.rightMarginPercent);
+             }
+         }
+
+         if (heightSpec !== utils.layout.UNSPECIFIED) {
+             if (lp.heightPercent > 0) {
+                 lp.height = Math.round(availableHeight * lp.heightPercent);
+             }
+
+             if (lp.topMarginPercent > 0) {
+                 lp.topMargin = Math.round(availableHeight * lp.topMarginPercent);
+             }
+
+             if (lp.bottomMarginPercent > 0) {
+                 lp.bottomMargin = Math.round(availableHeight * lp.bottomMarginPercent);
+             }
+         }
+    }
+
+    protected static restoreChildOriginalParams(view: View): void {
+        if(!view) {
+            return;
+        }
+        let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
+
+        if (lp.widthPercent > 0) {
+            lp.width = -1;
+        }
+
+        if (lp.heightPercent > 0) {
+            lp.height = -1;
+        }
+        if (lp.leftMarginPercent > 0) {
+            lp.leftMargin = 0;
+        }
+        if (lp.topMarginPercent > 0) {
+            lp.topMargin = 0;
+        }
+        if (lp.rightMarginPercent > 0) {
+            lp.rightMargin = 0;
+        }
+        if (lp.bottomMarginPercent > 0) {
+            lp.bottomMargin = 0;
+        }
+    }
+
     _getCurrentLayoutBounds(): { left: number; top: number; right: number; bottom: number } {
         return { left: this._oldLeft, top: this._oldTop, right: this._oldRight, bottom: this._oldBottom }
     }

tns-core-modules/ui/core/view.d.ts

@@ -454,6 +454,19 @@ declare module "ui/core/view" {
          */
         public static layoutChild(parent: View, child: View, left: number, top: number, right: number, bottom: number): void;
 
+        /**
+         * Changes the width, height and margins of the child to one calculated from percentage values.
+         *
+         * @param widthMeasureSpec  Width MeasureSpec of the parent layout.
+         * @param heightMeasureSpec Height MeasureSpec of the parent layout.
+         */
+        protected static adjustChildLayoutParams(view: View, widthMeasureSpec: number, heightMeasureSpec: number): void;
+
+        /**
+         * Restores the original dimensions of the child that were changed for percentage values.
+         */
+        protected static restoreChildOriginalParams(view: View): void;
+
         /**
          * Utility to reconcile a desired size and state, with constraints imposed
          * by a MeasureSpec.  Will take the desired size, unless a different size

tns-core-modules/ui/frame/frame.ios.ts

@@ -256,6 +256,7 @@ export class Frame extends frameCommon.Frame {
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
+         View.adjustChildLayoutParams(this.currentPage, widthMeasureSpec, heightMeasureSpec);
 
         let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
         let widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
@@ -300,6 +301,8 @@ export class Frame extends frameCommon.Frame {
         if (this._navigateToEntry && this.currentPage) {
             this.layoutPage(this._navigateToEntry.resolvedPage);
         }
+
+        View.restoreChildOriginalParams(this.currentPage);
     }
 
     public layoutPage(page: Page): void {

tns-core-modules/ui/layouts/layout-base-common.ts

@@ -2,8 +2,6 @@
 import types = require("utils/types");
 import view = require("ui/core/view");
 import dependencyObservable = require("ui/core/dependency-observable");
-import utils = require("utils/utils");
-import style = require("ui/styling/style");
 import {PropertyChangeData, Property } from "ui/core/dependency-observable";
 import {PropertyMetadata } from "ui/core/proxy";
 
@@ -180,71 +178,16 @@ export class LayoutBase extends view.CustomLayoutView implements definition.Layo
     }
 
     protected static adjustChildrenLayoutParams(layoutBase: LayoutBase, widthMeasureSpec: number, heightMeasureSpec: number): void {
-        let availableWidth = utils.layout.getMeasureSpecSize(widthMeasureSpec);
-        let widthSpec = utils.layout.getMeasureSpecMode(widthMeasureSpec);
-
-        let availableHeight = utils.layout.getMeasureSpecSize(heightMeasureSpec);
-        let heightSpec = utils.layout.getMeasureSpecMode(heightMeasureSpec);
-
         for (let i = 0, count = layoutBase.getChildrenCount(); i < count; i++) {
             let child = layoutBase.getChildAt(i);
-            let lp: style.CommonLayoutParams = child.style._getValue(style.nativeLayoutParamsProperty);
+            view.View.adjustChildLayoutParams(child, widthMeasureSpec, heightMeasureSpec);
-
-            if (widthSpec !== utils.layout.UNSPECIFIED) {
-                if (lp.widthPercent > 0) {
-                    lp.width = Math.round(availableWidth * lp.widthPercent);
-                }
-
-                if (lp.leftMarginPercent > 0) {
-                    lp.leftMargin = Math.round(availableWidth * lp.leftMarginPercent);
-                }
-
-                if (lp.rightMarginPercent > 0) {
-                    lp.rightMargin = Math.round(availableWidth * lp.rightMarginPercent);
-                }
-            }
-
-            if (heightSpec !== utils.layout.UNSPECIFIED) {
-                if (lp.heightPercent > 0) {
-                    lp.height = Math.round(availableHeight * lp.heightPercent);
-                }
-
-                if (lp.topMarginPercent > 0) {
-                    lp.topMargin = Math.round(availableHeight * lp.topMarginPercent);
-                }
-
-                if (lp.bottomMarginPercent > 0) {
-                    lp.bottomMargin = Math.round(availableHeight * lp.bottomMarginPercent);
-                }
-            }
         }
     }
 
     protected static restoreOriginalParams(layoutBase: LayoutBase): void {
         for (let i = 0, count = layoutBase.getChildrenCount(); i < count; i++) {
             let child = layoutBase.getChildAt(i);
-            let lp: style.CommonLayoutParams = child.style._getValue(style.nativeLayoutParamsProperty);
+            view.View.restoreChildOriginalParams(child);
-
-            if (lp.widthPercent > 0) {
-                lp.width = -1;
-            }
-
-            if (lp.heightPercent > 0) {
-                lp.height = -1;
-            }
-            if (lp.leftMarginPercent > 0) {
-                lp.leftMargin = 0;
-            }
-            if (lp.topMarginPercent > 0) {
-                lp.topMargin = 0;
-            }
-            if (lp.rightMarginPercent > 0) {
-                lp.rightMargin = 0;
-            }
-            if (lp.bottomMarginPercent > 0) {
-                lp.bottomMargin = 0;
-            }
         }
     }
 }
-

tns-core-modules/ui/page/page.ios.ts

@@ -443,6 +443,8 @@ export class Page extends pageCommon.Page {
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
+        View.adjustChildLayoutParams(this.layoutView, widthMeasureSpec, heightMeasureSpec);
+        
         let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
         let widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
 
@@ -507,6 +509,8 @@ export class Page extends pageCommon.Page {
         }
 
         View.layoutChild(this, this.layoutView, 0, navigationBarHeight + statusBarHeight, right - left, bottom - top);
+
+        View.restoreChildOriginalParams(this.layoutView);
     }
 
     public _addViewToNativeVisualTree(view: View): boolean {