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
This commit is contained in:
Martin Yankov
2019-02-20 18:46:14 +02:00
committed by GitHub
parent 46ce8666d2
commit 09fa0856b8
16 changed files with 71 additions and 85 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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