From 12a9c5181e69a7cf470e88efcc75eca42065c00d Mon Sep 17 00:00:00 2001
From: Vasil Chimev <Vasil.Chimev@gmail.com>
Date: Thu, 23 Aug 2018 13:23:25 +0300
Subject: [PATCH] feat: apply insets to dock layout

---
 e2e/safe-area/app/app.css                         |  4 ++++
 e2e/safe-area/app/docklayout/docklayout-page.xml  | 15 +++++++++++++++
 e2e/safe-area/app/home/home-page.xml              |  1 +
 .../ui/layouts/dock-layout/dock-layout.ios.ts     | 11 ++++++-----
 4 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 e2e/safe-area/app/docklayout/docklayout-page.xml

diff --git a/e2e/safe-area/app/app.css b/e2e/safe-area/app/app.css
index 49c333da5..43ec11f2c 100644
--- a/e2e/safe-area/app/app.css
+++ b/e2e/safe-area/app/app.css
@@ -17,6 +17,10 @@ Page {
     background-color: LightGreen;
 }
 
+.dock {
+    background-color: HoneyDew;
+}
+
 .grid {
     background-color: LightBlue;
 }
diff --git a/e2e/safe-area/app/docklayout/docklayout-page.xml b/e2e/safe-area/app/docklayout/docklayout-page.xml
new file mode 100644
index 000000000..802e870f7
--- /dev/null
+++ b/e2e/safe-area/app/docklayout/docklayout-page.xml
@@ -0,0 +1,15 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar>
+        <Label text="DockLayout Examples"></Label>
+    </ActionBar>
+
+    <DockLayout stretchLastChild="true" class="dock">
+        <Button dock="Left" text="left" backgroundColor="red" />
+        <Button dock="Top" text="top" backgroundColor="green" />
+        <Button dock="Right" text="right" backgroundColor="blue" />
+        <Button dock="Bottom" text="bottom" backgroundColor="yellow" />
+        <Button text="Fill"/>
+    </DockLayout>
+
+</Page>
diff --git a/e2e/safe-area/app/home/home-page.xml b/e2e/safe-area/app/home/home-page.xml
index ff1c19709..c5198a4a1 100644
--- a/e2e/safe-area/app/home/home-page.xml
+++ b/e2e/safe-area/app/home/home-page.xml
@@ -7,6 +7,7 @@
     <ScrollView>
         <StackLayout>
             <Button text="Component Examples" tap="onNavigate" route="component/component-page"></Button>
+            <Button text="DockLayout Examples" tap="onNavigate" route="docklayout/docklayout-page"></Button>
             <Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page"></Button>
             <Button text="ListView Examples" tap="onNavigate" route="listview/listview-page" />
             <Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page"></Button>
diff --git a/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts b/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
index b689ebf2f..2c8efdf66 100644
--- a/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
@@ -22,7 +22,7 @@ export class DockLayout extends DockLayoutBase {
 
         const horizontalPaddingsAndMargins = this.effectivePaddingLeft + this.effectivePaddingRight + this.effectiveBorderLeftWidth + this.effectiveBorderRightWidth;
         const verticalPaddingsAndMargins = this.effectivePaddingTop + this.effectivePaddingBottom + this.effectiveBorderTopWidth + this.effectiveBorderBottomWidth;
-        
+
         let remainingWidth = widthMode === layout.UNSPECIFIED ? Number.MAX_VALUE : width - horizontalPaddingsAndMargins;
         let remainingHeight = heightMode === layout.UNSPECIFIED ? Number.MAX_VALUE : height - verticalPaddingsAndMargins;
 
@@ -79,11 +79,12 @@ export class DockLayout extends DockLayoutBase {
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         super.onLayout(left, top, right, bottom);
 
-        const horizontalPaddingsAndMargins = this.effectivePaddingLeft + this.effectivePaddingRight + this.effectiveBorderLeftWidth + this.effectiveBorderRightWidth;
-        const verticalPaddingsAndMargins = this.effectivePaddingTop + this.effectivePaddingBottom + this.effectiveBorderTopWidth + this.effectiveBorderBottomWidth;
+        const insets = this.getSafeAreaInsets();
+        const horizontalPaddingsAndMargins = this.effectivePaddingLeft + this.effectivePaddingRight + this.effectiveBorderLeftWidth + this.effectiveBorderRightWidth + insets.left + insets.right;
+        const verticalPaddingsAndMargins = this.effectivePaddingTop + this.effectivePaddingBottom + this.effectiveBorderTopWidth + this.effectiveBorderBottomWidth + insets.top + insets.bottom;
 
-        let childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
-        let childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
+        let childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
+        let childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
 
         let x = childLeft;
         let y = childTop;