Skip to content

Commit dcb83c3

Browse files
committed
feat(action-bar): flat mode breaks ios safe area
1 parent 8c80044 commit dcb83c3

13 files changed

+153
-3
lines changed
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout backgroundColor="blue">
8+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
9+
</GridLayout>
10+
</Page>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Parent page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<GridLayout backgroundColor="blue">
8+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
9+
</GridLayout>
10+
</Page>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Parent page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<GridLayout backgroundColor="blue">
8+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
9+
</GridLayout>
10+
</Page>

apps/app/ui-tests-app/nested-frames/main-page.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,26 @@ export function loadExamples() {
1313
const examples = new Map<string, string>();
1414
examples.set("full-screen-n-n", "nested-frames/full-screen-n-n");
1515
examples.set("full-screen-n-y", "nested-frames/full-screen-n-y");
16+
examples.set("full-screen-n-y-flat", "nested-frames/full-screen-n-y-flat");
1617
examples.set("full-screen-y-n", "nested-frames/full-screen-y-n");
18+
examples.set("full-screen-y-n-flat", "nested-frames/full-screen-y-n-flat");
1719
examples.set("full-screen-y-y", "nested-frames/full-screen-y-y");
20+
examples.set("full-screen-y-y-flat", "nested-frames/full-screen-y-y-flat");
1821
examples.set("mid-screen-n-n", "nested-frames/mid-screen-n-n");
1922
examples.set("mid-screen-n-y", "nested-frames/mid-screen-n-y");
23+
examples.set("mid-screen-n-y-flat", "nested-frames/mid-screen-n-y-flat");
2024
examples.set("mid-screen-y-n", "nested-frames/mid-screen-y-n");
25+
examples.set("mid-screen-y-n-flat", "nested-frames/mid-screen-y-n-flat");
2126
examples.set("mid-screen-y-y", "nested-frames/mid-screen-y-y");
27+
examples.set("mid-screen-y-y-flat", "nested-frames/mid-screen-y-y-flat");
2228
examples.set("tab-y-y", "nested-frames/tab-y-y");
29+
examples.set("tab-y-y-flat", "nested-frames/tab-y-y-flat");
2330
examples.set("tab-n-y", "nested-frames/tab-n-y");
31+
examples.set("tab-n-y-flat", "nested-frames/tab-n-y-flat");
2432
examples.set("tab-y-n", "nested-frames/tab-y-n");
33+
examples.set("tab-y-n-flat", "nested-frames/tab-y-n-flat");
2534
examples.set("tab-n-n", "nested-frames/tab-n-n");
35+
examples.set("tab-flat", "nested-frames/tab-flat");
2636

2737
return examples;
2838
}
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="200, *" backgroundColor="blue">
8+
<GridLayout row="1">
9+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
10+
</GridLayout>>
11+
</GridLayout>
12+
</Page>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Parent page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="200, *" backgroundColor="blue">
8+
<GridLayout row="1">
9+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
10+
</GridLayout>>
11+
</GridLayout>
12+
</Page>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Parent page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="200, *" backgroundColor="blue">
8+
<GridLayout row="1">
9+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
10+
</GridLayout>>
11+
</GridLayout>
12+
</Page>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Nested page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="*, *" columns="*, *" backgroundColor="red">
8+
<Label row="0" col="0" text="test" backgroundColor="gold"></Label>
9+
<Label row="0" col="1" text="test" backgroundColor="green"></Label>
10+
<Label row="1" col="0" text="test" backgroundColor="yellow"></Label>
11+
<Label row="1" col="1" text="test" backgroundColor="purple"></Label>
12+
</GridLayout>
13+
</Page>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Parent page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Button text="test" backgroundColor="yellow"></Button>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Parent page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar flat="true">
4+
<Label text="Parent page flat action bar"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page-flat" actionBarVisibility="always"></Frame>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -235,9 +235,14 @@ class UIViewControllerImpl extends UIViewController {
235235
}
236236

237237
if (frameParent) {
238-
const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
239-
const currentInsetsTop = this.view.safeAreaInsets.top;
240-
const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
238+
let additionalInsetsTop = 0;
239+
240+
// if current page has flat action bar, inherited top insets should be ignored.
241+
if (!owner.actionBar.flat) {
242+
const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
243+
const currentInsetsTop = this.view.safeAreaInsets.top;
244+
additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
245+
}
241246

242247
const parentPageInsetsBottom = frameParent.nativeViewProtected.safeAreaInsets.bottom;
243248
const currentInsetsBottom = this.view.safeAreaInsets.bottom;

0 commit comments

Comments
 (0)