From fc9843d8001ebe53d801bbb3664d882b16f5cd06 Mon Sep 17 00:00:00 2001
From: vchimev <Vasil.Chimev@telerik.com>
Date: Wed, 2 Nov 2016 13:50:40 +0200
Subject: [PATCH] Add a flexbox-repeater test page

---
 .../ui-tests-app/flexbox/flexbox-main-page.ts | 23 +++++++++++++++++++
 .../flexbox/flexbox-main-page.xml             |  6 +++++
 .../ui-tests-app/flexbox/flexbox-repeater.ts  |  8 +++++++
 .../ui-tests-app/flexbox/flexbox-repeater.xml | 14 +++++++++++
 apps/app/ui-tests-app/flexbox/flexbox.ts      |  2 +-
 apps/app/ui-tests-app/flexbox/flexbox.xml     | 10 ++++++++
 apps/app/ui-tests-app/mainPage.ts             |  4 ++--
 7 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
 create mode 100644 apps/app/ui-tests-app/flexbox/flexbox-main-page.xml
 create mode 100644 apps/app/ui-tests-app/flexbox/flexbox-repeater.ts
 create mode 100644 apps/app/ui-tests-app/flexbox/flexbox-repeater.xml

diff --git a/apps/app/ui-tests-app/flexbox/flexbox-main-page.ts b/apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
new file mode 100644
index 000000000..14e51fd6b
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
@@ -0,0 +1,23 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+import { getViewById } from "ui/core/view"
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let wrapLayout = <WrapLayout>getViewById(page, "wrapLayout");
+    let examples = new Map<string, string>();
+
+    examples.set("flexbox", "flexbox/flexbox");
+    examples.set("flexrepeat", "flexbox/flexbox-repeater");
+
+    let viewModel = new FlexboxMainPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class FlexboxMainPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-main-page.xml b/apps/app/ui-tests-app/flexbox/flexbox-main-page.xml
new file mode 100644
index 000000000..043665b62
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView>
+        <WrapLayout id="wrapLayout"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-repeater.ts b/apps/app/ui-tests-app/flexbox/flexbox-repeater.ts
new file mode 100644
index 000000000..76dfa2965
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-repeater.ts
@@ -0,0 +1,8 @@
+export function pageLoaded(args) {
+    var page = args.object;
+    var itemsArray = [];
+    for (var i = 1; i <= 55; i++) {
+        itemsArray.push({ number: "item " + i });
+    }
+    page.bindingContext = { items: itemsArray };
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-repeater.xml b/apps/app/ui-tests-app/flexbox/flexbox-repeater.xml
new file mode 100644
index 000000000..65ec0d5d6
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-repeater.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+  <Repeater items="{{ items }}">
+    <Repeater.itemsLayout>
+      <FlexboxLayout flexDirection="column" flexWrap="wrap" justifyContent="center" alignItems="center" alignContent="stretch" />
+    </Repeater.itemsLayout>
+    <Repeater.itemTemplate>
+      <FlexboxLayout flexDirection="row">
+        <Label text="{{ number }}" backgroundColor="lightgreen" />
+        <Label text="{{ number }}" backgroundColor="lightblue" />
+      </FlexboxLayout>
+    </Repeater.itemTemplate>
+  </Repeater>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox.ts b/apps/app/ui-tests-app/flexbox/flexbox.ts
index 175846d9d..86ac60da8 100644
--- a/apps/app/ui-tests-app/flexbox/flexbox.ts
+++ b/apps/app/ui-tests-app/flexbox/flexbox.ts
@@ -1,4 +1,4 @@
-import {FlexboxLayout} from "ui/layouts/flexbox-layout";
+import { FlexboxLayout } from "ui/layouts/flexbox-layout";
 
 function set(what: string) {
     return function(args) {
diff --git a/apps/app/ui-tests-app/flexbox/flexbox.xml b/apps/app/ui-tests-app/flexbox/flexbox.xml
index 8752cf813..c746a9153 100644
--- a/apps/app/ui-tests-app/flexbox/flexbox.xml
+++ b/apps/app/ui-tests-app/flexbox/flexbox.xml
@@ -3,6 +3,7 @@
         <GridLayout class="control" columns="auto, *" rows="25, 15, 25, 15, 25, 15, 15, 15, 15, 25, 15">
 
             <Label row="0" text="flexDirection" verticalAlignment="center" />
+            <!--default=row-->
             <FlexboxLayout row="0" col="1">
                 <Button text="row" tap="flexDirection" flexGrow="1" automationText="flexDirection-row" />
                 <Button text="row-reverse" tap="flexDirection" flexGrow="1" automationText="flexDirection-row-reverse" />
@@ -11,6 +12,7 @@
             </FlexboxLayout>
 
             <Label row="1" text="flexWrap" verticalAlignment="center" />
+            <!--default=nowrap-->
             <FlexboxLayout row="1" col="1">
                 <Button text="nowrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-nowrap" />
                 <Button text="wrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap" />
@@ -18,6 +20,7 @@
             </FlexboxLayout>
 
             <Label row="2" text="justifyContent" verticalAlignment="center" />
+            <!--defeault=flex-start-->
             <FlexboxLayout row="2" col="1">
                 <Button text="flex-start" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-start" />
                 <Button text="flex-end" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-end" />
@@ -27,6 +30,7 @@
             </FlexboxLayout>
 
             <Label row="3" text="alignItems" verticalAlignment="center" />
+            <!--default=stretch-->
             <FlexboxLayout row="3" col="1">
                 <Button text="flex-start" tap="alignItems" flexGrow="1" automationText="alignItems-flex-start" />
                 <Button text="flex-end" tap="alignItems" flexGrow="1" automationText="alignItems-flex-end" />
@@ -36,6 +40,7 @@
             </FlexboxLayout>
 
             <Label row="4" text="alignContent" verticalAlignment="center" />
+            <!--default=stretch-->
             <FlexboxLayout row="4" col="1">
                 <Button text="flex-start" tap="alignContent" flexGrow="1" automationText="alignContent-flex-start" />
                 <Button text="flex-end" tap="alignContent" flexGrow="1" automationText="alignContent-flex-end" />
@@ -48,6 +53,7 @@
             <Label row="5" colSpan="2" text="--- selected item properties ---" />
 
             <Label text="order" row="6" />
+            <!--default=1-->
             <FlexboxLayout row="6" col="1">
                 <Button text="0" tap="order" flexGrow="1" automationText="order-0" />
                 <Button text="1" tap="order" flexGrow="1" automationText="order-1" />
@@ -57,6 +63,7 @@
             </FlexboxLayout>
 
             <Label text="flexGrow" row="7" />
+            <!--default=0-->
             <FlexboxLayout row="7" col="1">
                 <Button text="0" tap="flexGrow" flexGrow="1" automationText="flexGrow-0" />
                 <Button text="1" tap="flexGrow" flexGrow="1" automationText="flexGrow-1" />
@@ -66,6 +73,7 @@
             </FlexboxLayout>
 
             <Label text="flexShrink" row="8" />
+            <!--default=1-->
             <FlexboxLayout row="8" col="1">
                 <Button text="0" tap="flexShrink" flexGrow="1" automationText="flexShrink-0" />
                 <Button text="1" tap="flexShrink" flexGrow="1" automationText="flexShrink-1" />
@@ -75,6 +83,7 @@
             </FlexboxLayout>
 
             <Label row="9" text="alignSelf" verticalAlignment="center" />
+            <!--defaut=stretch-->
             <FlexboxLayout row="9" col="1">
                 <Button text="auto" tap="alignSelf" flexGrow="1" automationText="alignSelf-auto" />
                 <Button text="flex-start" tap="alignSelf" flexGrow="1" automationText="alignSelf-flex-start" />
@@ -108,6 +117,7 @@
             <Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-2" />
             <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" />
             -->
+
         </FlexboxLayout>
     </GridLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/mainPage.ts b/apps/app/ui-tests-app/mainPage.ts
index 180425d03..47801c9c8 100644
--- a/apps/app/ui-tests-app/mainPage.ts
+++ b/apps/app/ui-tests-app/mainPage.ts
@@ -27,7 +27,8 @@ export function pageLoaded(args: EventData) {
     examples.set("layouts", "layouts/main-page");
     examples.set("pages-events", "pages/main-page");
     examples.set("webview", "web-view/main-page");
-    
+    examples.set("flexbox", "flexbox/flexbox-main-page");
+
     examples.set("modalview", "modal-view/modal-view");
     examples.set("dialogs", "dialogs/dialogs");
     examples.set("htmlview", "html-view/html-view");
@@ -35,7 +36,6 @@ export function pageLoaded(args: EventData) {
     examples.set("animeBG", "animations/background");
     examples.set("transitions", "transitions/page0");
     examples.set("segStyle", "segmented-bar/all");
-    examples.set("flexbox", "flexbox/flexbox");
     examples.set("list-view", "list-view/list-view");
     examples.set("issues", "issues/main-page");