javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 02:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(action-bar): flat mode breaks ios safe area (#6862)

Browse Source
This commit is contained in:
Martin Yankov
2019-02-06 13:13:03 +02:00
committed by Svetoslav
parent 8c80044cc0
commit 603c901be4
15 changed files with 164 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/app/ui-tests-app/action-bar/flat-scrollview.xml Normal file
View File

@ -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>

14
apps/app/ui-tests-app/action-bar/flat-tab.xml Normal file
View File

@ -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>

2
apps/app/ui-tests-app/action-bar/main-page.ts
View File

@ -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;
}

10
apps/app/ui-tests-app/nested-frames/full-screen-n-y-flat.xml Normal file
View File

@ -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>

10
apps/app/ui-tests-app/nested-frames/full-screen-y-n-flat.xml Normal file
View File

@ -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>

10
apps/app/ui-tests-app/nested-frames/full-screen-y-y-flat.xml Normal file
View File

@ -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>

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

@ -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;

12
apps/app/ui-tests-app/nested-frames/mid-screen-n-y-flat.xml Normal file
View File

@ -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>

12
apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml Normal file
View File

@ -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>

12
apps/app/ui-tests-app/nested-frames/mid-screen-y-y-flat.xml Normal file
View File

@ -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>

13
apps/app/ui-tests-app/nested-frames/nested-page-flat.xml Normal file
View File

@ -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>

14
apps/app/ui-tests-app/nested-frames/tab-n-y-flat.xml Normal file
View File

@ -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>

14
apps/app/ui-tests-app/nested-frames/tab-y-n-flat.xml Normal file
View File

@ -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>

14
apps/app/ui-tests-app/nested-frames/tab-y-y-flat.xml Normal file
View File

@ -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>

11
tns-core-modules/ui/page/page.ios.ts
View File

@ -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;