Skip to content

fix(ios): opaque bars break ui layout #6929

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
merged 3 commits into from
Feb 20, 2019
Merged

fix(ios): opaque bars break ui layout #6929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b117033
fix(ios): opaque bars break ui layout
MartoYankov Feb 18, 2019
b52d1c2
test(): change flat action bar tests
MartoYankov Feb 19, 2019
20ca0f0
test(): revert test flat change test
MartoYankov Feb 20, 2019
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
10 changes: 10 additions & 0 deletions apps/app/ui-tests-app/action-bar/flat-layout.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" backgroundColor="yellow">

<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>

<StackLayout backgroundColor="red">
<Label text="lorem ipsum" backgroundColor="green"></Label>
</StackLayout>
</Page>
6 changes: 3 additions & 3 deletions apps/app/ui-tests-app/action-bar/flat-scrollview.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">

<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>

<ScrollView backgroundColor="green">
<Label text="lorem ipsum" backgroundColor="red"></Label>
<ScrollView backgroundColor="red">
<Label text="lorem ipsum" backgroundColor="green"></Label>
</ScrollView>
</Page>
7 changes: 7 additions & 0 deletions apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { EventData } from "tns-core-modules/data/observable";
import { TabView } from "tns-core-modules/ui/tab-view";

export function onLoaded(args: EventData) {
const tabView = <TabView>args.object;
tabView.ios.tabBar.translucent = false;
}
13 changes: 13 additions & 0 deletions apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<Page backgroundColor="yellow">
<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>

<TabView androidTabsPosition="bottom" loaded="onLoaded">
<TabViewItem title="First">
<StackLayout backgroundColor="red">
<Label text="First View" backgroundColor="green"/>
</StackLayout>
</TabViewItem>
</TabView>
</Page>
8 changes: 4 additions & 4 deletions apps/app/ui-tests-app/action-bar/flat-tab.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">

<ActionBar flat="true">
<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>

<TabView selectedTabTextColor="green">
<TabViewItem title="First">
<GridLayout backgroundColor="red">
<Button text="test" backgroundColor="yellow"></Button>
<GridLayout backgroundColor="green">
<Button text="test" backgroundColor="red"></Button>
</GridLayout>
</TabViewItem>
</TabView>
Expand Down
14 changes: 8 additions & 6 deletions apps/app/ui-tests-app/action-bar/flat.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<Page navigatedTo="onNavigateTo" >
<Page.actionBar>
<ActionBar title="Flat property"/>
</Page.actionBar>
<StackLayout>
<Page navigatedTo="onNavigateTo" backgroundColor="yellow">

<ActionBar backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>

<StackLayout backgroundColor="red">
<Button margin="30" text="change flat property" tap="changeFlatPropertyValue"/>
<Label id="flatPropertyValue" />
<Label id="flatPropertyValue" backgroundColor="green" />
</StackLayout>
</Page>
2 changes: 2 additions & 0 deletions apps/app/ui-tests-app/action-bar/main-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ export function loadExamples() {
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-tab-opaque-bar", "action-bar/flat-tab-opaque-bar");
examples.set("flat-layout", "action-bar/flat-layout");
examples.set("flat-scrollview", "action-bar/flat-scrollview");

return examples;
Expand Down
2 changes: 1 addition & 1 deletion apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
<GridLayout rows="200, *" backgroundColor="blue">
<GridLayout row="1">
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
</GridLayout>>
</GridLayout>
</GridLayout>
</Page>
28 changes: 7 additions & 21 deletions tests/app/ui/layouts/safe-area-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,27 +93,13 @@ export class SafeAreaTests extends testModule.UITest<any> {
equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
}

private layout_insets_top_action_bar_flat_test(layout: view.View) {
const insets = layout.getSafeAreaInsets();
equal(insets.top, 0, `${layout}.topInset - actual:${insets.top}; expected: ${0}`)
}

private layout_in_full_screen_test(layout: view.View, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && (pageOptions.actionBarFlat)) {
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
const actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));

expectedTop = statusBarHeight + actionBarHeight;
}

const l = left(layout);
const t = top(layout);
const r = right(layout);
const b = bottom(layout);
equal(l, 0, `${layout}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${layout}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${layout}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${layout}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${layout}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}
Expand Down Expand Up @@ -193,7 +179,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
Expand Down Expand Up @@ -391,7 +377,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
Expand Down Expand Up @@ -609,7 +595,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
Expand Down Expand Up @@ -903,7 +889,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
Expand Down Expand Up @@ -1140,7 +1126,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
Expand Down Expand Up @@ -1354,7 +1340,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
Expand Down
10 changes: 1 addition & 9 deletions tests/app/ui/list-view/list-view-safe-area-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,20 +47,12 @@ export class ListViewSafeAreaTest extends UITest<ListView> {
};

private list_view_in_full_screen(listView: ListView, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(listView.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}

const l = left(listView);
const t = top(listView);
const r = right(listView);
const b = bottom(listView);
equal(l, 0, `${listView}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${listView}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${listView}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${listView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${listView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}
Expand Down
10 changes: 1 addition & 9 deletions tests/app/ui/repeater/repeater-safe-area-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,12 @@ export class RepeaterSafeAreaTest extends UITest<Repeater> {
};

private repeater_in_full_screen(repeater: Repeater, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(repeater.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}

const l = left(repeater);
const t = top(repeater);
const r = right(repeater);
const b = bottom(repeater);
equal(l, 0, `${repeater}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${repeater}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${repeater}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${repeater}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${repeater}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}
Expand Down
10 changes: 1 addition & 9 deletions tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,12 @@ class ScrollLayoutSafeAreaTest extends UITest<ScrollView> {
};

private scroll_view_in_full_screen(scrollView: view.View, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(scrollView.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}

const l = left(scrollView);
const t = top(scrollView);
const r = right(scrollView);
const b = bottom(scrollView);
equal(l, 0, `${scrollView}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${scrollView}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${scrollView}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${scrollView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${scrollView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}
Expand Down
10 changes: 1 addition & 9 deletions tests/app/ui/web-view/web-view-safe-area-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,12 @@ export class WebViewSafeAreaTest extends UITest<WebView> {
};

private webview_in_full_screen(webView: WebView, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(webView.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}

const l = left(webView);
const t = top(webView);
const r = right(webView);
const b = bottom(webView);
equal(l, 0, `${webView}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${webView}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${webView}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${webView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${webView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}
Expand Down
3 changes: 3 additions & 0 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 @@ -946,6 +946,9 @@ export namespace ios {
return;
}

// Unify translucent and opaque bars layout
this.extendedLayoutIncludesOpaqueBars = true;

updateAutoAdjustScrollInsets(this, owner);

if (!owner.parent) {
Expand Down
20 changes: 6 additions & 14 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 @@ -100,6 +100,9 @@ class UIViewControllerImpl extends UIViewController {
frame._updateActionBar(owner);
}

// Unify translucent and opaque bars layout
this.extendedLayoutIncludesOpaqueBars = true;

// Set autoAdjustScrollInsets in will appear - as early as possible
iosView.updateAutoAdjustScrollInsets(this, owner);

Expand Down Expand Up @@ -235,14 +238,9 @@ class UIViewControllerImpl extends UIViewController {
}

if (frameParent) {
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 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;
Expand Down Expand Up @@ -367,12 +365,6 @@ export class Page extends PageBase {
const childRight = right - insets.right;
let childBottom = bottom - insets.bottom;

if (majorVersion >= 11 && this.actionBar.flat) {
// on iOS 11 the flat action bar changes the fullscreen size
// the top of the page is the new fullscreen
childBottom -= top;
}

View.layoutChild(this, this.layoutView, childLeft, childTop, childRight, childBottom);
}

Expand Down
3 changes: 3 additions & 0 deletions tns-core-modules/ui/tab-view/tab-view.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ class UITabBarControllerImpl extends UITabBarController {
return;
}

// Unify translucent and opaque bars layout
this.extendedLayoutIncludesOpaqueBars = true;

iosView.updateAutoAdjustScrollInsets(this, owner);

if (!owner.parent) {
Expand Down