Tsenov/button alignment (#4460)

* Include new example for issue 4385

* Include new test page for issue 4385. Restyle and rename main-page.

* Update main-page

* Fix navigation

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

@@ -81,4 +81,4 @@ application.on(application.uncaughtErrorEvent, function (args: application.Unhan
 });
 
 application.setCssFileName("ui-tests-app/app.css");
-application.start({ moduleName: "ui-tests-app/mainPage" });
+application.start({ moduleName: "ui-tests-app/main-page" });

apps/app/ui-tests-app/button/issue-4385.css

@@ -0,0 +1,4 @@
+.btnIcon {
+   font-family: "FontAwesome";
+   font-size: 60;
+}

apps/app/ui-tests-app/button/issue-4385.ts

@@ -0,0 +1,23 @@
+import { EventData, Observable } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import * as frame from "tns-core-modules/ui/frame";
+
+export function navigatingTo(args: EventData) {
+    const page = <Page>args.object;
+    page.bindingContext = new TestPage();
+}
+
+export function onNavBtnTap(args) {
+    frame.topmost().goBack();
+}
+
+export class TestPage extends Observable {
+    constructor() {
+        super();
+    }
+
+// new line of span can be set with \n from code behind
+    get test(): string {
+        return "\ntest";
+    }
+}

apps/app/ui-tests-app/button/issue-4385.xml

@@ -0,0 +1,35 @@
+<Page 
+    xmlns="http://schemas.nativescript.org/tns.xsd" loaded="navigatingTo">
+    <Page.actionBar>
+        <ActionBar title="4385">
+            <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onNavBtnTap"/>
+        </ActionBar>
+    </Page.actionBar>
+    <StackLayout>
+        <!--In xml the new line can be set with &#xA;-->
+        <Button style="text-align:center; background-color:yellow" textWrap="true" class="btnIcon" >
+            <Button.formattedText>
+                <formattedString>
+                    <formattedString.spans>
+                        <Span text="&#xf1ec; text-align: center" fontSize="14">
+                        </Span>
+                        <Span text="&#xA;new line">
+                        </Span>
+                    </formattedString.spans>
+                </formattedString>
+            </Button.formattedText>
+        </Button>
+        <Button style="text-align:center; background-color:green" textWrap="true" class="btnIcon" >
+            <button.formattedText>
+                <formattedString>
+                    <formattedString.spans>
+                        <Span text="code behind" fontSize="14">
+                        </Span>
+                        <Span text="{{ test }}">
+                        </Span>
+                    </formattedString.spans>
+                </formattedString>
+            </button.formattedText>
+        </Button>
+    </StackLayout>
+</Page>

apps/app/ui-tests-app/button/main-page.ts

@@ -17,5 +17,6 @@ export function loadExamples() {
     examples.set("background", "button/background");
     examples.set("border-playground","button/border-playground");
     examples.set("issue-4287","button/issue-4287");
+    examples.set("issue-4385","button/issue-4385");
     return examples;
 }

apps/app/ui-tests-app/css/main-page.xml

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Page loaded="pageLoaded">
-    <ScrollView orientation="vertical" row="1">
+    <WrapLayout id="wrapLayoutWithExamples" orientation="horizontal"/>
-        <WrapLayout id="wrapLayoutWithExamples"/>
-    </ScrollView>
 </Page>

apps/app/ui-tests-app/main-page.ts

@@ -2,6 +2,7 @@
 import { MainPageViewModel } from "./main-page-view-model";
 import { Page } from "tns-core-modules/ui/page";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import { isAndroid } from "tns-core-modules/platform"
 
 export function pageLoaded(args: EventData) {
     const page = <Page>args.object;
@@ -35,9 +36,11 @@ export function pageLoaded(args: EventData) {
 
     const parent = page.getViewById('parentLayout');
     const searchBar = page.getViewById('textView');
-    if (parent.android) {
+    if (isAndroid) {
         parent.android.setFocusableInTouchMode(true);
         parent.android.setFocusable(true);
         searchBar.android.clearFocus();
+    }else{
+        parent.style.marginBottom=10;
     }
 }

apps/app/ui-tests-app/main-page.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+  <GridLayout rows="auto, *">
+    <GridLayout row="0" columns="*,30" id="parentLayout">
+      <TextView col="0" automationText="tv" id="textView" hint="Enter example name" text="{{ exampleName }}" />
+      <Button col="1" automationText="Run" id="btnRun" text="&#xf046;" tap="{{ loadExampleFromTextField }}" style="font-family:FontAwesome; padding:0; background-color:#33cc33; color:white; border-radius:5; height:30; padding:0;"/>
+    </GridLayout>
+    <WrapLayout row="1" id="wrapLayoutWithExamples"/>
+    <ListView row="1" items="{{ filteredListOfExamples }}" itemTap="{{ loadExampleFromListView }}" id="filteredListOfExamplesListView">
+      <ListView.itemTemplate>
+        <GridLayout columns="*,2*">
+          <Label text="{{ name }}" textWrap="true" />
+          <Label text="{{ path }}" textWrap="true" col="1"/>
+        </GridLayout>
+      </ListView.itemTemplate>
+    </ListView>
+  </GridLayout>
+</Page> 

apps/app/ui-tests-app/mainPage.xml

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<Page loaded="pageLoaded">
-  <GridLayout rows="auto, *">
-    <StackLayout id="parentLayout" row="0" >
-      <TextView automationText="tv" id="textView" text="{{ exampleName }}" />
-      <Button automationText="Run" id="btnRun" text="Run" tap="{{ loadExampleFromTextField }}" />
-    </StackLayout>
-    <ScrollView row="1">
-      <WrapLayout id="wrapLayoutWithExamples"/>
-    </ScrollView>
-    <ListView items="{{ filteredListOfExamples }}" row="1" itemTap="{{ loadExampleFromListView }}" id="filteredListOfExamplesListView" >
-      <ListView.itemTemplate>
-        <GridLayout columns="*,2*" >
-          <Label text="{{ name }}" textWrap="true" />
-          <Label text="{{ path }}" textWrap="true" col="1"/>
-        </GridLayout>
-      </ListView.itemTemplate>
-    </ListView>
-  </GridLayout>
-</Page> 

apps/app/ui-tests-app/test-page-main-view-model.ts

@@ -2,12 +2,12 @@ import { Observable } from "tns-core-modules/data/observable";
 import { Button } from "tns-core-modules/ui/button";
 import { Color } from "tns-core-modules/color";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
-import * as dialogs from "tns-core-modules/ui/dialogs";
+import { alert } from "tns-core-modules/ui/dialogs";
 import * as frame from "tns-core-modules/ui/frame";
 import * as platform from "tns-core-modules/platform";
 
 export class TestPageMainViewModel extends Observable {
-    private _colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
+    private _colors = ["#0000cc", "#33cc33", "#0000cc"];
 
     public static APP_NAME: string = "ui-tests-app";
     public basePath: string = "";
@@ -24,11 +24,10 @@ export class TestPageMainViewModel extends Observable {
 
     protected selectExample(selectedExample: any) {
         console.log(" EXAMPLE: " + selectedExample);
-
         if (this.examples.has(selectedExample)) {
             this.navigateToExample(this.examples.get(selectedExample));
-        } else {
+        } else if (selectedExample.indexOf("/") > 0) {
-            dialogs.alert("Cannot find example: " + selectedExample);
+            this.navigateToExample(selectedExample);
         }
     }
 
@@ -36,7 +35,7 @@ export class TestPageMainViewModel extends Observable {
         try {
             frame.topmost().navigate(TestPageMainViewModel.APP_NAME + "/" + exampleFullPath);
         } catch (error) {
-            dialogs.alert("Cannot find example: " + exampleFullPath);
+            alert("Cannot find example: " + exampleFullPath);
 
         }
     }
@@ -55,17 +54,19 @@ export class TestPageMainViewModel extends Observable {
 
         this.examples.forEach((element, key) => {
             var btn = new Button();
-
             if (platform.isAndroid) {
                 btn.style.height = 25;
                 btn.style.fontSize = 10;
-                btn.style.margin = "0";
+                btn.style.padding = 0;
-                btn.style.padding = "0";
             } else {
-                btn.style.padding = "5";
+                btn.style.padding = 5;
             }
+            btn.style.marginRight = 5;
+            btn.style.marginBottom = 5;
 
-            btn.style.color = new Color(this._colors[count++ % 3]);
+            btn.style.color = new Color("white");
+            btn.style.backgroundColor = new Color(this._colors[count++ % 3]);
+            btn.style.borderRadius = 5;
             btn.on(Button.tapEvent, function (eventData) {
                 let text = btn.text;
                 this.loadExample(text);
@@ -100,4 +101,4 @@ export class TestPageMainViewModel extends Observable {
         this.examples.clear();
         this.examples = sortedExamples;
     }
-}
+}

apps/package.json

@@ -5,11 +5,11 @@
   "repository": "<fill-your-repository-here>",
   "nativescript": {
     "id": "org.nativescript.apps",
-    "tns-android": {
-      "version": "3.0.1"
-    },
     "tns-ios": {
-      "version": "3.1.0-2017-5-16-2"
+      "version": "3.1.0"
+    },
+    "tns-android": {
+      "version": "3.1.0"
     }
   },
   "dependencies": {