Skip to content

fix-next: handle action bar safe area nesting #6455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SvetoslavTsenov merged 2 commits into from
Oct 26, 2018
Merged

fix-next: handle action bar safe area nesting #6455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
542180a
fix-next: handle action bar safe area nesting
MartoYankov Oct 25, 2018
7edc8f1
Merge branch 'master' into myankov/nested-action-bar
SvetoslavTsenov Oct 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/app/ui-tests-app/main-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export function pageLoaded(args: EventData) {
examples.set("webview", "web-view/main-page");
examples.set("progress-bar", "progress-bar/main-page");
examples.set("date-picker", "date-picker/date-picker");
examples.set("nested-frames", "nested-frames/main-page");
page.bindingContext = new MainPageViewModel(wrapLayout, examples);

const parent = page.getViewById("parentLayout");
Expand Down
10 changes: 10 additions & 0 deletions apps/app/ui-tests-app/nested-frames/full-screen-n-n.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" actionBarVisibility="never"></Frame>
</GridLayout>
</Page>
10 changes: 10 additions & 0 deletions apps/app/ui-tests-app/nested-frames/full-screen-n-y.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" actionBarVisibility="always"></Frame>
</GridLayout>
</Page>
10 changes: 10 additions & 0 deletions apps/app/ui-tests-app/nested-frames/full-screen-y-n.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">

<ActionBar>
<Label text="Parent page"></Label>
</ActionBar>

<GridLayout backgroundColor="blue">
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
</GridLayout>
</Page>
10 changes: 10 additions & 0 deletions apps/app/ui-tests-app/nested-frames/full-screen-y-y.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">

<ActionBar>
<Label text="Parent page"></Label>
</ActionBar>

<GridLayout backgroundColor="blue">
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="always"></Frame>
</GridLayout>
</Page>
28 changes: 28 additions & 0 deletions apps/app/ui-tests-app/nested-frames/main-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { EventData } from "tns-core-modules/data/observable";
import { SubMainPageViewModel } from "../sub-main-page-view-model";
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
import { Page } from "tns-core-modules/ui/page";

export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}

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-y-n", "nested-frames/full-screen-y-n");
examples.set("full-screen-y-y", "nested-frames/full-screen-y-y");
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-y-n", "nested-frames/mid-screen-y-n");
examples.set("mid-screen-y-y", "nested-frames/mid-screen-y-y");
examples.set("tab-y-y", "nested-frames/tab-y-y");
examples.set("tab-n-y", "nested-frames/tab-n-y");
examples.set("tab-y-n", "nested-frames/tab-y-n");
examples.set("tab-n-n", "nested-frames/tab-n-n");

return examples;
}
6 changes: 6 additions & 0 deletions apps/app/ui-tests-app/nested-frames/main-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<ScrollView orientation="vertical" row="1">
<WrapLayout id="wrapLayoutWithExamples"/>
</ScrollView>
</Page>
12 changes: 12 additions & 0 deletions apps/app/ui-tests-app/nested-frames/mid-screen-n-n.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" actionBarVisibility="never"></Frame>
</GridLayout>>
</GridLayout>
</Page>
12 changes: 12 additions & 0 deletions apps/app/ui-tests-app/nested-frames/mid-screen-n-y.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" actionBarVisibility="always"></Frame>
</GridLayout>>
</GridLayout>
</Page>
12 changes: 12 additions & 0 deletions apps/app/ui-tests-app/nested-frames/mid-screen-y-n.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">

<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" actionBarVisibility="never"></Frame>
</GridLayout>>
</GridLayout>
</Page>
12 changes: 12 additions & 0 deletions apps/app/ui-tests-app/nested-frames/mid-screen-y-y.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">

<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" actionBarVisibility="always"></Frame>
</GridLayout>>
</GridLayout>
</Page>
13 changes: 13 additions & 0 deletions apps/app/ui-tests-app/nested-frames/nested-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">

<ActionBar>
<Label text="Nested page"></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 changes: 14 additions & 0 deletions apps/app/ui-tests-app/nested-frames/tab-n-n.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" actionBarVisibility="never"></Frame>
</GridLayout>
</TabViewItem>
</TabView>
</Page>
14 changes: 14 additions & 0 deletions apps/app/ui-tests-app/nested-frames/tab-n-y.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" actionBarVisibility="always"></Frame>
</GridLayout>
</TabViewItem>
</TabView>
</Page>
14 changes: 14 additions & 0 deletions apps/app/ui-tests-app/nested-frames/tab-y-n.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">

<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" actionBarVisibility="never"></Frame>
</GridLayout>
</TabViewItem>
</TabView>
</Page>
14 changes: 14 additions & 0 deletions apps/app/ui-tests-app/nested-frames/tab-y-y.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">

<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" actionBarVisibility="always"></Frame>
</GridLayout>
</TabViewItem>
</TabView>
</Page>
38 changes: 23 additions & 15 deletions tns-core-modules/ui/core/view/view.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -704,21 +704,6 @@ export namespace ios {
}

export function layoutView(controller: UIViewController, owner: View): void {
if (majorVersion >= 11) {
// apply parent page additional top insets if any. The scenario is when there is a parent page with action bar.
const parentPage = getAncestor(owner, "Page");
if (parentPage) {
const parentPageInsetsTop = parentPage.viewController.view.safeAreaInsets.top;
const currentInsetsTop = controller.view.safeAreaInsets.top;
const additionalInsetsTop = parentPageInsetsTop - currentInsetsTop;

if (additionalInsetsTop > 0) {
const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: 0, right: 0 });
controller.additionalSafeAreaInsets = additionalInsets;
}
}
}

let layoutGuide = controller.view.safeAreaLayoutGuide;
if (!layoutGuide) {
traceWrite(`safeAreaLayoutGuide during layout of ${owner}. Creating fallback constraints, but layout might be wrong.`,
Expand Down Expand Up @@ -897,6 +882,29 @@ export namespace ios {
super.viewDidLayoutSubviews();
const owner = this.owner.get();
if (owner) {
if (majorVersion >= 11) {
// Handle nested UILayoutViewController safe area application.
// Currently, UILayoutViewController can be nested only in a TabView.
// The TabView itself is handled by the OS, so we check the TabView's parent (usually a Page, but can be a Layout).
const tabViewItem = owner.parent;
const tabView = tabViewItem && tabViewItem.parent;
const parent = tabView && tabView.parent;
if (parent) {
const parentPageInsetsTop = parent.nativeViewProtected.safeAreaInsets.top;
const currentInsetsTop = this.view.safeAreaInsets.top;
const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);

const parentPageInsetsBottom = parent.nativeViewProtected.safeAreaInsets.bottom;
const currentInsetsBottom = this.view.safeAreaInsets.bottom;
const additionalInsetsBottom = Math.max(parentPageInsetsBottom - currentInsetsBottom, 0);

if (additionalInsetsTop > 0 || additionalInsetsBottom > 0) {
const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: additionalInsetsBottom, right: 0 });
this.additionalSafeAreaInsets = additionalInsets;
}
}
}

layoutView(this, owner);
}
}
Expand Down
2 changes: 1 addition & 1 deletion tns-core-modules/ui/frame/frame.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -602,7 +602,7 @@ class iOSFrame implements iOSFrameDefinition {
}
public set showNavigationBar(value: boolean) {
this._showNavigationBar = value;
this._controller.setNavigationBarHiddenAnimated(!value, true);
this._controller.setNavigationBarHiddenAnimated(!value, !this._disableNavBarAnimation);
}

public get navBarVisibility(): "auto" | "never" | "always" {
Expand Down
24 changes: 24 additions & 0 deletions tns-core-modules/ui/page/page.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,30 @@ class UIViewControllerImpl extends UIViewController {
if (owner) {
// layout(owner.actionBar)
// layout(owner.content)

if (majorVersion >= 11) {
// Handle nested Page safe area insets application.
// A Page is nested if its Frame has a parent.
// If the Page is nested, cross check safe area insets on top and bottom with Frame parent.
const frame = owner.parent;
// There is a legacy scenario where Page is not in a Frame - the root of a Modal View, so it has no parent.
const frameParent = frame && frame.parent;
if (frameParent) {
const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
const currentInsetsTop = this.view.safeAreaInsets.top;
const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);

const parentPageInsetsBottom = frameParent.nativeViewProtected.safeAreaInsets.bottom;
const currentInsetsBottom = this.view.safeAreaInsets.bottom;
const additionalInsetsBottom = Math.max(parentPageInsetsBottom - currentInsetsBottom, 0);

if (additionalInsetsTop > 0 || additionalInsetsBottom > 0) {
const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: additionalInsetsBottom, right: 0 });
this.additionalSafeAreaInsets = additionalInsets;
}
}
}

iosView.layoutView(this, owner);
}
}
Expand Down