Skip to content

Commit 33b4343

Browse files
author
Vasil Chimev
authored
Merge pull request #2979 from NativeScript/vchimev-flex
Update flexbox test page
2 parents 43199ec + 0b9d7b7 commit 33b4343

File tree

3 files changed

+42
-31
lines changed

3 files changed

+42
-31
lines changed

‎apps/app/ui-tests-app/flexbox/flexbox.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
#container>Label {
1+
#container {
2+
border-color: black;
23
border-width: 1;
4+
margin: 5;
5+
}
6+
#container>Label {
7+
border-width: 2;
38
border-color: black;
49
border-radius: 5;
510
}
611
#container>Label[selected="yes"] {
7-
border-color: yellow;
12+
border-color: gray;
813
}
914

1015
.control {
@@ -17,6 +22,7 @@
1722
.control Button {
1823
border-width: 1 1 0 0;
1924
border-color: gray;
25+
font-size: 9;
2026
padding: 0;
2127
height: 0;
2228
}

‎apps/app/ui-tests-app/flexbox/flexbox.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {FlexboxLayout} from "ui/layouts/flexbox-layout";
33
function set(what: string) {
44
return function(args) {
55
args.object.page.getViewById("container")[what] = args.object.text;
6+
// console.log(args.object.text);
67
}
78
}
89

‎apps/app/ui-tests-app/flexbox/flexbox.xml

+33-29
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
22
<GridLayout rows="auto, *">
3-
<GridLayout class="control" columns="auto, *" rows="30, 30, 30, 30, 30, 25, 15, 15, 15, 30, 30">
4-
<Label row="0" text="FlexDirection" verticalAlignment="center" />
5-
<FlexboxLayout row="0" col="1" flexWrap="wrap" alignContent="stretch">
3+
<GridLayout class="control" columns="auto, *" rows="25, 15, 25, 15, 25, 15, 15, 15, 15, 25, 15">
4+
5+
<Label row="0" text="flexDirection" verticalAlignment="center" />
6+
<FlexboxLayout row="0" col="1">
67
<Button text="row" tap="flexDirection" flexGrow="1" automationText="flexDirection-row" />
78
<Button text="row-reverse" tap="flexDirection" flexGrow="1" automationText="flexDirection-row-reverse" />
89
<Button text="column" tap="flexDirection" flexGrow="1" automationText="flexDirection-column" />
910
<Button text="column-reverse" tap="flexDirection" flexGrow="1" automationText="flexDirection-column-reverse" />
1011
</FlexboxLayout>
1112

12-
<Label row="1" text="FlexWrap" verticalAlignment="center" />
13-
<FlexboxLayout row="1" col="1" flexWrap="wrap" alignContent="stretch">
13+
<Label row="1" text="flexWrap" verticalAlignment="center" />
14+
<FlexboxLayout row="1" col="1">
1415
<Button text="nowrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-nowrap" />
1516
<Button text="wrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap" />
1617
<Button text="wrap-reverse" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap-reverse" />
1718
</FlexboxLayout>
1819

19-
<Label row="2" text="JustifyContent" verticalAlignment="center" />
20-
<FlexboxLayout row="2" col="1" flexWrap="wrap" alignContent="stretch">
20+
<Label row="2" text="justifyContent" verticalAlignment="center" />
21+
<FlexboxLayout row="2" col="1">
2122
<Button text="flex-start" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-start" />
2223
<Button text="flex-end" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-end" />
2324
<Button text="center" tap="justifyContent" flexGrow="1" automationText="justifyContent-center" />
@@ -26,7 +27,7 @@
2627
</FlexboxLayout>
2728

2829
<Label row="3" text="alignItems" verticalAlignment="center" />
29-
<FlexboxLayout row="3" col="1" flexWrap="wrap" alignContent="stretch">
30+
<FlexboxLayout row="3" col="1">
3031
<Button text="flex-start" tap="alignItems" flexGrow="1" automationText="alignItems-flex-start" />
3132
<Button text="flex-end" tap="alignItems" flexGrow="1" automationText="alignItems-flex-end" />
3233
<Button text="center" tap="alignItems" flexGrow="1" automationText="alignItems-center" />
@@ -35,7 +36,7 @@
3536
</FlexboxLayout>
3637

3738
<Label row="4" text="alignContent" verticalAlignment="center" />
38-
<FlexboxLayout row="4" col="1" flexWrap="wrap" alignContent="stretch">
39+
<FlexboxLayout row="4" col="1">
3940
<Button text="flex-start" tap="alignContent" flexGrow="1" automationText="alignItems-flex-start" />
4041
<Button text="flex-end" tap="alignContent" flexGrow="1" automationText="alignItems-flex-end" />
4142
<Button text="center" tap="alignContent" flexGrow="1" automationText="alignItems-center" />
@@ -47,7 +48,7 @@
4748
<Label row="5" colSpan="2" text="--- selected item properties ---" />
4849

4950
<Label text="order" row="6" />
50-
<FlexboxLayout row="6" col="1" alignContent="stretch">
51+
<FlexboxLayout row="6" col="1">
5152
<Button text="0" tap="order" flexGrow="1" automationText="order-0" />
5253
<Button text="1" tap="order" flexGrow="1" automationText="order-1" />
5354
<Button text="2" tap="order" flexGrow="1" automationText="order-2" />
@@ -56,7 +57,7 @@
5657
</FlexboxLayout>
5758

5859
<Label text="flexGrow" row="7" />
59-
<FlexboxLayout row="7" col="1" alignContent="stretch">
60+
<FlexboxLayout row="7" col="1">
6061
<Button text="0" tap="flexGrow" flexGrow="1" automationText="flexGrow-0" />
6162
<Button text="1" tap="flexGrow" flexGrow="1" automationText="flexGrow-1" />
6263
<Button text="2" tap="flexGrow" flexGrow="1" automationText="flexGrow-2" />
@@ -65,7 +66,7 @@
6566
</FlexboxLayout>
6667

6768
<Label text="flexShrink" row="8" />
68-
<FlexboxLayout row="8" col="1" alignContent="stretch">
69+
<FlexboxLayout row="8" col="1">
6970
<Button text="0" tap="flexShrink" flexGrow="1" automationText="flexShrink-0" />
7071
<Button text="1" tap="flexShrink" flexGrow="1" automationText="flexShrink-1" />
7172
<Button text="2" tap="flexShrink" flexGrow="1" automationText="flexShrink-2" />
@@ -74,7 +75,7 @@
7475
</FlexboxLayout>
7576

7677
<Label row="9" text="alignSelf" verticalAlignment="center" />
77-
<FlexboxLayout row="9" col="1" flexWrap="wrap" alignContent="stretch">
78+
<FlexboxLayout row="9" col="1">
7879
<Button text="auto" tap="alignSelf" flexGrow="1" automationText="alignSelf-auto" />
7980
<Button text="flex-start" tap="alignSelf" flexGrow="1" automationText="alignSelf-flex-start" />
8081
<Button text="flex-end" tap="alignSelf" flexGrow="1" automationText="alignSelf-flex-end" />
@@ -84,26 +85,29 @@
8485
</FlexboxLayout>
8586

8687
<Label row="10" text="flexWrapBefore" verticalAlignment="center" />
87-
<FlexboxLayout row="10" col="1" flexWrap="wrap" alignContent="stretch">
88+
<FlexboxLayout row="10" col="1">
8889
<Button text="true" tap="flexWrapBefore" flexGrow="1" automationText="flexWrapBefore-true" />
8990
<Button text="false" tap="flexWrapBefore" flexGrow="1" automationText="flexWrapBefore-false" />
9091
</FlexboxLayout>
9192
</GridLayout>
9293

93-
<FlexboxLayout id="container" row="1" borderWidth="1" borderColor="black" margin="10">
94-
<Label text="row" tap="select" margin="10" />
95-
<Label text="row-reverse" tap="select" />
96-
<Label text="column" tap="select" />
97-
<Label text="column-reverse" tap="select" />
98-
<Label text="row" tap="select" />
99-
<Label text="row-reverse" tap="select" />
100-
<Label text="column" tap="select" />
101-
<Label text="column-reverse" tap="select" />
102-
<Label text="row" tap="select" />
103-
<Label text="row-reverse" tap="select" />
104-
<Label text="column" tap="select" />
105-
<Label text="column-reverse" tap="select" />
106-
<Label text="row" tap="select" />
94+
<FlexboxLayout id="container" row="1">
95+
<Label text="row" tap="select" margin="10" backgroundColor="yellow" automationText="itemRow-0" />
96+
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-0" />
97+
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-0" />
98+
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" />
99+
100+
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-1" />
101+
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-1" />
102+
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-1" />
103+
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-1" />
104+
105+
<!--
106+
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-2" />
107+
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-2" />
108+
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-2" />
109+
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" />
110+
-->
107111
</FlexboxLayout>
108112
</GridLayout>
109113
</Page>

0 commit comments

Comments
 (0)