From 603c901be43cbfda14d55ed185b1fd76c77ce30a Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Wed, 6 Feb 2019 13:13:03 +0200
Subject: [PATCH] feat(action-bar): flat mode breaks ios safe area (#6862)

---
 .../ui-tests-app/action-bar/flat-scrollview.xml    | 10 ++++++++++
 apps/app/ui-tests-app/action-bar/flat-tab.xml      | 14 ++++++++++++++
 apps/app/ui-tests-app/action-bar/main-page.ts      |  2 ++
 .../nested-frames/full-screen-n-y-flat.xml         | 10 ++++++++++
 .../nested-frames/full-screen-y-n-flat.xml         | 10 ++++++++++
 .../nested-frames/full-screen-y-y-flat.xml         | 10 ++++++++++
 apps/app/ui-tests-app/nested-frames/main-page.ts   |  9 +++++++++
 .../nested-frames/mid-screen-n-y-flat.xml          | 12 ++++++++++++
 .../nested-frames/mid-screen-y-n-flat.xml          | 12 ++++++++++++
 .../nested-frames/mid-screen-y-y-flat.xml          | 12 ++++++++++++
 .../nested-frames/nested-page-flat.xml             | 13 +++++++++++++
 .../ui-tests-app/nested-frames/tab-n-y-flat.xml    | 14 ++++++++++++++
 .../ui-tests-app/nested-frames/tab-y-n-flat.xml    | 14 ++++++++++++++
 .../ui-tests-app/nested-frames/tab-y-y-flat.xml    | 14 ++++++++++++++
 tns-core-modules/ui/page/page.ios.ts               | 11 ++++++++---
 15 files changed, 164 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/ui-tests-app/action-bar/flat-scrollview.xml
 create mode 100644 apps/app/ui-tests-app/action-bar/flat-tab.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/full-screen-n-y-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/full-screen-y-n-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/full-screen-y-y-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/mid-screen-n-y-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/mid-screen-y-y-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/nested-page-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/tab-n-y-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/tab-y-n-flat.xml
 create mode 100644 apps/app/ui-tests-app/nested-frames/tab-y-y-flat.xml

diff --git a/apps/app/ui-tests-app/action-bar/flat-scrollview.xml b/apps/app/ui-tests-app/action-bar/flat-scrollview.xml
new file mode 100644
index 000000000..2a851d7ef
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/flat-scrollview.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true" backgroundColor="blue">
+        <Label text="flat action bar"></Label>
+    </ActionBar>
+
+    <ScrollView backgroundColor="green">
+        <Label text="lorem ipsum" backgroundColor="red"></Label>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab.xml b/apps/app/ui-tests-app/action-bar/flat-tab.xml
new file mode 100644
index 000000000..02844a429
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/flat-tab.xml
@@ -0,0 +1,14 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="flat action bar"></Label>
+    </ActionBar>
+
+    <TabView selectedTabTextColor="green">
+        <TabViewItem title="First">
+            <GridLayout backgroundColor="red">
+                <Button text="test" backgroundColor="yellow"></Button> 
+            </GridLayout>
+        </TabViewItem>
+    </TabView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/main-page.ts b/apps/app/ui-tests-app/action-bar/main-page.ts
index fa9f55128..374cb35dd 100644
--- a/apps/app/ui-tests-app/action-bar/main-page.ts
+++ b/apps/app/ui-tests-app/action-bar/main-page.ts
@@ -22,6 +22,8 @@ export function loadExamples() {
     examples.set("modalHiddenActBar", "action-bar/modal-test-hidden-action-bar");
     examples.set("modalShownActBar", "action-bar/modal-test-with-action-bar");
     examples.set("flat", "action-bar/flat");
+    examples.set("flat-tab", "action-bar/flat-tab");
+    examples.set("flat-scrollview", "action-bar/flat-scrollview");
 
     return examples;
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/full-screen-n-y-flat.xml b/apps/app/ui-tests-app/nested-frames/full-screen-n-y-flat.xml
new file mode 100644
index 000000000..f1d360794
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/full-screen-n-y-flat.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
+
+    <ActionBar>
+        <Label text="Parent page"></Label>
+    </ActionBar>
+
+    <GridLayout backgroundColor="blue">
+        <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/full-screen-y-n-flat.xml b/apps/app/ui-tests-app/nested-frames/full-screen-y-n-flat.xml
new file mode 100644
index 000000000..ca9bdc197
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/full-screen-y-n-flat.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="Parent page flat action bar"></Label>
+    </ActionBar>
+
+    <GridLayout backgroundColor="blue">
+        <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/full-screen-y-y-flat.xml b/apps/app/ui-tests-app/nested-frames/full-screen-y-y-flat.xml
new file mode 100644
index 000000000..4a9f50771
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/full-screen-y-y-flat.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="Parent page flat action bar"></Label>
+    </ActionBar>
+
+    <GridLayout backgroundColor="blue">
+        <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/main-page.ts b/apps/app/ui-tests-app/nested-frames/main-page.ts
index 1c01b725c..efb977d14 100644
--- a/apps/app/ui-tests-app/nested-frames/main-page.ts
+++ b/apps/app/ui-tests-app/nested-frames/main-page.ts
@@ -13,15 +13,24 @@ export function loadExamples() {
     const examples = new Map<string, string>();    
     examples.set("full-screen-n-n", "nested-frames/full-screen-n-n");
     examples.set("full-screen-n-y", "nested-frames/full-screen-n-y");
+    examples.set("full-screen-n-y-flat", "nested-frames/full-screen-n-y-flat");
     examples.set("full-screen-y-n", "nested-frames/full-screen-y-n");
+    examples.set("full-screen-y-n-flat", "nested-frames/full-screen-y-n-flat");
     examples.set("full-screen-y-y", "nested-frames/full-screen-y-y");
+    examples.set("full-screen-y-y-flat", "nested-frames/full-screen-y-y-flat");
     examples.set("mid-screen-n-n", "nested-frames/mid-screen-n-n");
     examples.set("mid-screen-n-y", "nested-frames/mid-screen-n-y");
+    examples.set("mid-screen-n-y-flat", "nested-frames/mid-screen-n-y-flat");
     examples.set("mid-screen-y-n", "nested-frames/mid-screen-y-n");
+    examples.set("mid-screen-y-n-flat", "nested-frames/mid-screen-y-n-flat");
     examples.set("mid-screen-y-y", "nested-frames/mid-screen-y-y");
+    examples.set("mid-screen-y-y-flat", "nested-frames/mid-screen-y-y-flat");
     examples.set("tab-y-y", "nested-frames/tab-y-y");
+    examples.set("tab-y-y-flat", "nested-frames/tab-y-y-flat");
     examples.set("tab-n-y", "nested-frames/tab-n-y");
+    examples.set("tab-n-y-flat", "nested-frames/tab-n-y-flat");
     examples.set("tab-y-n", "nested-frames/tab-y-n");
+    examples.set("tab-y-n-flat", "nested-frames/tab-y-n-flat");
     examples.set("tab-n-n", "nested-frames/tab-n-n");
 
     return examples;
diff --git a/apps/app/ui-tests-app/nested-frames/mid-screen-n-y-flat.xml b/apps/app/ui-tests-app/nested-frames/mid-screen-n-y-flat.xml
new file mode 100644
index 000000000..d43c17f31
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/mid-screen-n-y-flat.xml
@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
+
+    <ActionBar>
+        <Label text="Parent page"></Label>
+    </ActionBar>
+
+    <GridLayout rows="200, *" backgroundColor="blue">
+        <GridLayout row="1">
+            <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
+        </GridLayout>>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml b/apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml
new file mode 100644
index 000000000..60df60ac5
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml
@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="Parent page flat action bar"></Label>
+    </ActionBar>
+
+    <GridLayout rows="200, *" backgroundColor="blue">
+        <GridLayout row="1">
+            <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
+        </GridLayout>>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/mid-screen-y-y-flat.xml b/apps/app/ui-tests-app/nested-frames/mid-screen-y-y-flat.xml
new file mode 100644
index 000000000..557a74c22
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/mid-screen-y-y-flat.xml
@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="Parent page flat action bar"></Label>
+    </ActionBar>
+
+    <GridLayout rows="200, *" backgroundColor="blue">
+        <GridLayout row="1">
+            <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
+        </GridLayout>>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/nested-page-flat.xml b/apps/app/ui-tests-app/nested-frames/nested-page-flat.xml
new file mode 100644
index 000000000..f7706b329
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/nested-page-flat.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="Nested page flat action bar"></Label>
+    </ActionBar>
+
+    <GridLayout rows="*, *" columns="*, *" backgroundColor="red">
+        <Label row="0" col="0" text="test" backgroundColor="gold"></Label>
+        <Label row="0" col="1" text="test" backgroundColor="green"></Label>
+        <Label row="1" col="0" text="test" backgroundColor="yellow"></Label>
+        <Label row="1" col="1" text="test" backgroundColor="purple"></Label>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/tab-n-y-flat.xml b/apps/app/ui-tests-app/nested-frames/tab-n-y-flat.xml
new file mode 100644
index 000000000..99ff4f575
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/tab-n-y-flat.xml
@@ -0,0 +1,14 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
+
+    <ActionBar>
+        <Label text="Parent page"></Label>
+    </ActionBar>
+
+    <TabView selectedTabTextColor="green">
+        <TabViewItem title="First">
+            <GridLayout>
+                <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
+            </GridLayout>
+        </TabViewItem>
+    </TabView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/tab-y-n-flat.xml b/apps/app/ui-tests-app/nested-frames/tab-y-n-flat.xml
new file mode 100644
index 000000000..d2d93dde9
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/tab-y-n-flat.xml
@@ -0,0 +1,14 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="Parent page flat action bar"></Label>
+    </ActionBar>
+
+    <TabView selectedTabTextColor="green">
+        <TabViewItem title="First">
+            <GridLayout>
+                <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
+            </GridLayout>
+        </TabViewItem>
+    </TabView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/nested-frames/tab-y-y-flat.xml b/apps/app/ui-tests-app/nested-frames/tab-y-y-flat.xml
new file mode 100644
index 000000000..adf155707
--- /dev/null
+++ b/apps/app/ui-tests-app/nested-frames/tab-y-y-flat.xml
@@ -0,0 +1,14 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar flat="true">
+        <Label text="Parent page flat action bar"></Label>
+    </ActionBar>
+
+    <TabView selectedTabTextColor="green">
+        <TabViewItem title="First">
+            <GridLayout>
+                <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame> 
+            </GridLayout>
+        </TabViewItem>
+    </TabView>
+</Page>
\ No newline at end of file
diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
index e00a3b2bd..5be02edcf 100644
--- a/tns-core-modules/ui/page/page.ios.ts
+++ b/tns-core-modules/ui/page/page.ios.ts
@@ -235,9 +235,14 @@ class UIViewControllerImpl extends UIViewController {
                 }
 
                 if (frameParent) {
-                    const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
-                    const currentInsetsTop = this.view.safeAreaInsets.top;
-                    const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
+                    let additionalInsetsTop = 0;
+
+                    // if current page has flat action bar, inherited top insets should be ignored.
+                    if (!owner.actionBar.flat) {
+                        const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
+                        const currentInsetsTop = this.view.safeAreaInsets.top;
+                        additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
+                    }
 
                     const parentPageInsetsBottom = frameParent.nativeViewProtected.safeAreaInsets.bottom;
                     const currentInsetsBottom = this.view.safeAreaInsets.bottom;