Skip to content

Commit 09fa085

Browse files
MartoYankovMartoYankov
authored
fix(ios): opaque bars break ui layout (#6929)
* fix(ios): opaque bars break ui layout * test(): change flat action bar tests * test(): revert test flat change test
1 parent 46ce866 commit 09fa085

16 files changed

Lines changed: 71 additions & 85 deletions

File tree

‎apps/app/ui-tests-app/action-bar/flat-layout.xml‎

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" backgroundColor="yellow">
2+
3+
<ActionBar flat="true" backgroundColor="blue">
4+
<Label text="flat action bar"></Label>
5+
</ActionBar>
6+
7+
<StackLayout backgroundColor="red">
8+
<Label text="lorem ipsum" backgroundColor="green"></Label>
9+
</StackLayout>
10+
</Page>

‎apps/app/ui-tests-app/action-bar/flat-scrollview.xml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
22

33
<ActionBar flat="true" backgroundColor="blue">
44
<Label text="flat action bar"></Label>
55
</ActionBar>
66

7-
<ScrollView backgroundColor="green">
8-
<Label text="lorem ipsum" backgroundColor="red"></Label>
7+
<ScrollView backgroundColor="red">
8+
<Label text="lorem ipsum" backgroundColor="green"></Label>
99
</ScrollView>
1010
</Page>

‎apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { TabView } from "tns-core-modules/ui/tab-view";
3+
4+
export function onLoaded(args: EventData) {
5+
const tabView = <TabView>args.object;
6+
tabView.ios.tabBar.translucent = false;
7+
}

‎apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Page backgroundColor="yellow">
2+
<ActionBar flat="true" backgroundColor="blue">
3+
<Label text="flat action bar"></Label>
4+
</ActionBar>
5+
6+
<TabView androidTabsPosition="bottom" loaded="onLoaded">
7+
<TabViewItem title="First">
8+
<StackLayout backgroundColor="red">
9+
<Label text="First View" backgroundColor="green"/>
10+
</StackLayout>
11+
</TabViewItem>
12+
</TabView>
13+
</Page>

‎apps/app/ui-tests-app/action-bar/flat-tab.xml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
22

3-
<ActionBar flat="true">
3+
<ActionBar flat="true" backgroundColor="blue">
44
<Label text="flat action bar"></Label>
55
</ActionBar>
66

77
<TabView selectedTabTextColor="green">
88
<TabViewItem title="First">
9-
<GridLayout backgroundColor="red">
10-
<Button text="test" backgroundColor="yellow"></Button>
9+
<GridLayout backgroundColor="green">
10+
<Button text="test" backgroundColor="red"></Button>
1111
</GridLayout>
1212
</TabViewItem>
1313
</TabView>

‎apps/app/ui-tests-app/action-bar/flat.xml‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
<Page navigatedTo="onNavigateTo" >
2-
<Page.actionBar>
3-
<ActionBar title="Flat property"/>
4-
</Page.actionBar>
5-
<StackLayout>
1+
<Page navigatedTo="onNavigateTo" backgroundColor="yellow">
2+
3+
<ActionBar backgroundColor="blue">
4+
<Label text="flat action bar"></Label>
5+
</ActionBar>
6+
7+
<StackLayout backgroundColor="red">
68
<Button margin="30" text="change flat property" tap="changeFlatPropertyValue"/>
7-
<Label id="flatPropertyValue" />
9+
<Label id="flatPropertyValue" backgroundColor="green" />
810
</StackLayout>
911
</Page>

‎apps/app/ui-tests-app/action-bar/main-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export function loadExamples() {
2323
examples.set("modalShownActBar", "action-bar/modal-test-with-action-bar");
2424
examples.set("flat", "action-bar/flat");
2525
examples.set("flat-tab", "action-bar/flat-tab");
26+
examples.set("flat-tab-opaque-bar", "action-bar/flat-tab-opaque-bar");
27+
examples.set("flat-layout", "action-bar/flat-layout");
2628
examples.set("flat-scrollview", "action-bar/flat-scrollview");
2729

2830
return examples;

‎apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<GridLayout rows="200, *" backgroundColor="blue">
88
<GridLayout row="1">
99
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
10-
</GridLayout>>
10+
</GridLayout>
1111
</GridLayout>
1212
</Page>

‎tests/app/ui/layouts/safe-area-tests.ts‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -93,27 +93,13 @@ export class SafeAreaTests extends testModule.UITest<any> {
9393
equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
9494
}
9595

96-
private layout_insets_top_action_bar_flat_test(layout: view.View) {
97-
const insets = layout.getSafeAreaInsets();
98-
equal(insets.top, 0, `${layout}.topInset - actual:${insets.top}; expected: ${0}`)
99-
}
100-
10196
private layout_in_full_screen_test(layout: view.View, pageOptions?: helper.PageOptions) {
102-
let expectedTop = 0;
103-
if (pageOptions && (pageOptions.actionBarFlat)) {
104-
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
105-
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
106-
const actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));
107-
108-
expectedTop = statusBarHeight + actionBarHeight;
109-
}
110-
11197
const l = left(layout);
11298
const t = top(layout);
11399
const r = right(layout);
114100
const b = bottom(layout);
115101
equal(l, 0, `${layout}.left - actual:${l}; expected: ${0}`);
116-
equal(t, expectedTop, `${layout}.top - actual:${t}; expected: ${expectedTop}`);
102+
equal(t, 0, `${layout}.top - actual:${t}; expected: ${0}`);
117103
equal(r, platform.screen.mainScreen.widthPixels, `${layout}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
118104
equal(b, platform.screen.mainScreen.heightPixels, `${layout}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
119105
}
@@ -193,7 +179,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
193179
this.getViews(snippet),
194180
this.noop,
195181
({ root }) => {
196-
this.layout_insets_top_action_bar_flat_test(root);
182+
this.layout_insets_top_action_bar_test(root);
197183
},
198184
{ actionBarFlat: true }
199185
);
@@ -391,7 +377,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
391377
this.getViews(snippet),
392378
this.noop,
393379
({ root }) => {
394-
this.layout_insets_top_action_bar_flat_test(root);
380+
this.layout_insets_top_action_bar_test(root);
395381
},
396382
{ actionBarFlat: true }
397383
);
@@ -609,7 +595,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
609595
this.getViews(snippet),
610596
this.noop,
611597
({ root }) => {
612-
this.layout_insets_top_action_bar_flat_test(root);
598+
this.layout_insets_top_action_bar_test(root);
613599
},
614600
{ actionBarFlat: true }
615601
);
@@ -903,7 +889,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
903889
this.getViews(snippet),
904890
this.noop,
905891
({ root }) => {
906-
this.layout_insets_top_action_bar_flat_test(root);
892+
this.layout_insets_top_action_bar_test(root);
907893
},
908894
{ actionBarFlat: true }
909895
);
@@ -1140,7 +1126,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
11401126
this.getViews(snippet),
11411127
this.noop,
11421128
({ root }) => {
1143-
this.layout_insets_top_action_bar_flat_test(root);
1129+
this.layout_insets_top_action_bar_test(root);
11441130
},
11451131
{ actionBarFlat: true }
11461132
);
@@ -1354,7 +1340,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
13541340
this.getViews(snippet),
13551341
this.noop,
13561342
({ root }) => {
1357-
this.layout_insets_top_action_bar_flat_test(root);
1343+
this.layout_insets_top_action_bar_test(root);
13581344
},
13591345
{ actionBarFlat: true }
13601346
);

‎tests/app/ui/list-view/list-view-safe-area-tests.ts‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,12 @@ export class ListViewSafeAreaTest extends UITest<ListView> {
4747
};
4848

4949
private list_view_in_full_screen(listView: ListView, pageOptions?: helper.PageOptions) {
50-
let expectedTop = 0;
51-
if (pageOptions && pageOptions.actionBarFlat) {
52-
const actionBarHeight = round(dipToDp(listView.page.actionBar.nativeViewProtected.frame.size.height));
53-
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
54-
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
55-
expectedTop = actionBarHeight + statusBarHeight;
56-
}
57-
5850
const l = left(listView);
5951
const t = top(listView);
6052
const r = right(listView);
6153
const b = bottom(listView);
6254
equal(l, 0, `${listView}.left - actual:${l}; expected: ${0}`);
63-
equal(t, expectedTop, `${listView}.top - actual:${t}; expected: ${expectedTop}`);
55+
equal(t, 0, `${listView}.top - actual:${t}; expected: ${0}`);
6456
equal(r, platform.screen.mainScreen.widthPixels, `${listView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
6557
equal(b, platform.screen.mainScreen.heightPixels, `${listView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
6658
}

0 commit comments

Comments
 (0)