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

feat: apply insets to flexbox row layout

Browse Source
This commit is contained in:
Vasil Chimev
2018-08-23 15:23:59 +03:00
committed by Martin Yankov
parent c02f062457
commit db7f913072
7 changed files with 69 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
e2e/safe-area/app/app.css
View File

@@ -25,6 +25,10 @@ Page {
background-color: HoneyDew;
}
.flex {
background-color: Indigo;
}
.grid {
background-color: LightBlue;
}

10
e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-row-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="flexboxlayout/fragments">
<ActionBar>
<Label text="Action Bar"></Label>
</ActionBar>
<fragments:flexboxlayout-row-fragment></fragments:flexboxlayout-row-fragment>
</Page>

8
e2e/safe-area/app/flexboxlayout/flexboxlayout-page.ts Normal file
View File

@@ -0,0 +1,8 @@
import { View, EventData } from "tns-core-modules/ui/core/view";
export function onNavigate(args: EventData) {
const view = args.object as View;
const route = view["route"];
view.page.frame.navigate(route);
}

18
e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml Normal file
View File

@@ -0,0 +1,18 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<ActionBar>
<Label text="FlexboxLayout Examples"></Label>
</ActionBar>
<StackLayout horizontalAlignment="center">
<StackLayout>
<Label text="Pages w/ ActionBar"></Label>
<Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/action-bar/flexboxlayout-row-page"></Button>
</StackLayout>
<StackLayout>
<Label text="Pages w/o ActionBar"></Label>
<Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/no-action-bar/flexboxlayout-row-page"></Button>
</StackLayout>
</StackLayout>
</Page>

11
e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml Normal file
View File

@@ -0,0 +1,11 @@
<FlexboxLayout flexDirection="row" class="flex">
<StackLayout backgroundColor="red">
<Label backgroundColor="#965251" text="Item"></Label>
</StackLayout>
<StackLayout flexGrow="1" class="stack">
<Label flexGrow="1" backgroundColor="#d2b29b" text="Flex-Grow 1"></Label>
</StackLayout>
<StackLayout backgroundColor="blue">
<Label backgroundColor="#F69256" text="Item"></Label>
</StackLayout>
</FlexboxLayout>

7
e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-row-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="flexboxlayout/fragments"
actionBarHidden="true">
<fragments:flexboxlayout-row-fragment></fragments:flexboxlayout-row-fragment>
</Page>

14
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
View File

@@ -943,6 +943,12 @@ export class FlexboxLayout extends FlexboxLayoutBase {
}
public onLayout(left: number, top: number, right: number, bottom: number) {
const insets = this.getSafeAreaInsets();
left += insets.left;
top += insets.top;
right -= insets.right;
bottom -= insets.bottom;
let isRtl;
switch (this.flexDirection) {
case FlexDirection.ROW:
@@ -973,8 +979,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
}
private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number) {
let paddingLeft = this.effectivePaddingLeft;
let paddingRight = this.effectivePaddingRight;
// include insets
let paddingLeft = this.effectivePaddingLeft + left;
let paddingRight = this.effectivePaddingRight + right;
let childLeft;
let currentViewIndex = 0;
@@ -982,8 +989,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
let height = bottom - top;
let width = right - left;
// include insets
let childBottom = height - this.effectivePaddingBottom;
let childTop = this.effectivePaddingTop;
let childTop = this.effectivePaddingTop + top;
let childRight;
this._flexLines.forEach((flexLine, i) => {