Merge pull request #668 from NativeScript/hhristov/layout-in-modal-pages

Fix iOS layout in modal pages.

CrossPlatformModules.csproj

@@ -150,6 +150,15 @@
     <TypeScriptCompile Include="apps\animations\model.ts" />
     <TypeScriptCompile Include="apps\orientation-demo\main-page.ts" />
     <TypeScriptCompile Include="apps\tests\navigation-tests.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\page\page21.ts">
+      <DependentUpon>page21.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\tests\pages\page20.ts">
+      <DependentUpon>page20.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\tests\pages\page19.ts">
+      <DependentUpon>page19.xml</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\tests\ui\animation\animation-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.android.ts" />
     <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.d.ts" />
@@ -157,6 +166,15 @@
     <TypeScriptCompile Include="apps\tests\ui\repeaterItems-bindingToGestures.ts" />
     <TypeScriptCompile Include="apps\tests\xml-declaration\inherited-base-page.ts" />
     <TypeScriptCompile Include="apps\tests\xml-declaration\inherited-page.ts" />
+    <Content Include="apps\tests\ui\page\page21.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\tests\pages\page20.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\tests\pages\page19.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\ui-tests-app\app.css" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\handlers.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\htmlview.ts" />
@@ -1964,6 +1982,7 @@
       </FlavorProperties>
       <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
       <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

CrossPlatformModules.sln

@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio 14
-VisualStudioVersion = 14.0.22310.1
+# Visual Studio 2013
+VisualStudioVersion = 12.0.30501.0
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CrossPlatformModules", "CrossPlatformModules.csproj", "{2313F1BF-1F2D-4F11-806A-87927FA6A7C0}"
 EndProject

apps/tests/TKUnit.ts

@@ -156,6 +156,12 @@ export function assert(test: any, message?: string) {
     }
 };
 
+export function assertTrue(test: boolean, message?: string) {
+    if (test !== true) {
+        throw new Error(message);
+    }
+};
+
 export function assertNotEqual(actual: any, expected: any, message?: string) {
 
     var equals = false;

apps/tests/pages/page19.ts

@@ -0,0 +1,8 @@
+import observable = require("data/observable");
+import trace = require("trace");
+trace.addCategories(trace.categories.Layout);
+trace.enable();
+
+export function onLoaded(args: observable.EventData) {
+    (<any>args.object).bindingContext = [0, 1];
+}

apps/tests/pages/page19.xml

@@ -0,0 +1,3 @@
+<Page loaded="onLoaded">
+  <ListView items="{{ $value }}" verticalAlignment="top" />
+</Page>

apps/tests/pages/page20.ts

@@ -0,0 +1,11 @@
+import observable = require("data/observable");
+import trace = require("trace");
+import {Button} from "ui/button";
+import {Page} from "ui/page";
+trace.addCategories(trace.categories.Layout);
+trace.enable();
+
+export function onTap(args: observable.EventData) {
+    var btn = <Button>args.object;
+    (<Page>btn.page).showModal("tests/pages/page21", null, null);
+}

apps/tests/pages/page20.xml

@@ -0,0 +1,5 @@
+<Page id="page" loaded="onLoaded">
+  <StackLayout>
+    <Button tap="onTap" text="Show Modal Page"/>
+  </StackLayout>
+</Page>

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

@@ -366,4 +366,41 @@ export function test_page_backgroundColor_is_white() {
         var page = <PageModule.Page>views[0];
         TKUnit.assertEqual(page.style.backgroundColor.hex.toLowerCase(), "#ffffff", "page background-color");
     });
-}
+}
+
+//export function test_ModalPage_Layout_is_Correct() {
+//    var testPage: PageModule.Page;
+//    var label: LabelModule.Label;
+//    var pageFactory = function () {
+//        testPage = new PageModule.Page();
+//        label = new LabelModule.Label();
+//        label.text = "Will Show modal page";
+//        testPage.content = label;
+//        return testPage;
+//    };
+
+//    helper.navigate(pageFactory);
+//    var basePath = "ui/page/";
+//    testPage.showModal(basePath + "page21", testPage, () => { }, false);
+
+//    // TODO: Remove this once navigate and showModal returns Promise<Page>.
+//    TKUnit.wait(0.350);
+//    var childPage = (<any>testPage).childPage;
+//    var closeCallback: Function = (<any>testPage).close;
+
+//    try {
+//        var layout = <stackLayoutModule.StackLayout>childPage.content;
+//        var repeater = layout.getChildAt(1);
+//        TKUnit.assertTrue(repeater.isLayoutValid, "layout should be valid.");
+//        var bounds = repeater._getCurrentLayoutBounds();
+//        var height = bounds.bottom - bounds.top;
+//        TKUnit.assertTrue(height > 0, "Layout should be >0.");
+
+//        closeCallback();
+//        TKUnit.wait(0.150);
+//    }
+//    finally {
+//        helper.goBack
+//        helper.goBack();
+//    }
+//}

apps/tests/ui/page/page21.ts

@@ -0,0 +1,10 @@
+import {ShownModallyData} from "ui/page";
+
+export function onShownModally(args: ShownModallyData) {
+    args.context.childPage = args.object;
+    args.context.close = args.closeCallback;
+
+    setTimeout(() => {
+        (<any>args.object).bindingContext = [0, 1];
+    }, 200);
+}

apps/tests/ui/page/page21.xml

@@ -0,0 +1,6 @@
+<Page shownModally="onShownModally">
+  <StackLayout>
+    <Label text="In Modal Page" />
+    <Repeater items="{{ $value }}" verticalAlignment="top" />
+  </StackLayout>
+</Page>

ui/page/page.ios.ts

@@ -21,7 +21,7 @@ class UIViewControllerImpl extends UIViewController {
 
     public didRotateFromInterfaceOrientation(fromInterfaceOrientation: number) {
         trace.write(this._owner + " didRotateFromInterfaceOrientation(" + fromInterfaceOrientation + ")", trace.categories.ViewHierarchy);
-        if ((<any>this._owner)._isModal) {
+        if (this._owner._isModal) {
             var parentBounds = (<any>this._owner)._UIModalPresentationFormSheet ? (<UIView>this._owner._nativeView).superview.bounds : UIScreen.mainScreen().bounds;
             utils.ios._layoutRootView(this._owner, parentBounds);
         }
@@ -35,7 +35,13 @@ class UIViewControllerImpl extends UIViewController {
 
     public viewDidLayoutSubviews() {
         trace.write(this._owner + " viewDidLayoutSubviews, isLoaded = " + this._owner.isLoaded, trace.categories.ViewHierarchy);
-        this._owner._updateLayout();
+        if (this._owner._isModal) {
+            var parentBounds = (<any>this._owner)._UIModalPresentationFormSheet ? this._owner._nativeView.superview.bounds : UIScreen.mainScreen().bounds;
+            utils.ios._layoutRootView(this._owner, parentBounds);
+        }
+        else {
+            this._owner._updateLayout();
+        }
     }
 
     public viewWillAppear() {
@@ -56,12 +62,20 @@ class UIViewControllerImpl extends UIViewController {
 export class Page extends pageCommon.Page {
     private _ios: UIViewController;
     public _enableLoadedEvents: boolean;
+    public _isModal: boolean = false;
 
     constructor(options?: definition.Options) {
         super(options);
         this._ios = UIViewControllerImpl.new().initWithOwner(this);
     }
 
+    public requestLayout(): void {
+        super.requestLayout();
+        if (!this.parent && this.ios && this._nativeView) {
+            this._nativeView.setNeedsLayout();
+        }
+    }
+
     public _onContentChanged(oldView: viewModule.View, newView: viewModule.View) {
         super._onContentChanged(oldView, newView);
         this._removeNativeView(oldView);
@@ -110,12 +124,12 @@ export class Page extends pageCommon.Page {
         return this._ios;
     }
 
-    get _nativeView(): any {
+    get _nativeView(): UIView {
         return this.ios.view;
     }
 
     protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
-        (<any>this)._isModal = true;
+        this._isModal = true;
 
         if (!parent.ios.view.window) {
             throw new Error("Parent page is not part of the window hierarchy. Close the current modal page before showing another one!");
@@ -143,7 +157,7 @@ export class Page extends pageCommon.Page {
 
     protected _hideNativeModalView(parent: Page) {
         parent._ios.dismissModalViewControllerAnimated(false);
-        (<any>this)._isModal = false;
+        this._isModal = false;
         (<any>this)._UIModalPresentationFormSheet = false;
     }