Skip to content

Commit 5ec8242

Browse files
SvetoslavTsenovSvetoslavTsenov
authored
Tsenov/button alignment (NativeScript#4460)
* Include new example for issue 4385 * Include new test page for issue 4385. Restyle and rename main-page. * Update main-page * Fix navigation
1 parent 23757e5 commit 5ec8242

File tree

11 files changed

+104
-41
lines changed

11 files changed

+104
-41
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,4 @@ application.on(application.uncaughtErrorEvent, function (args: application.Unhan
8181
});
8282

8383
application.setCssFileName("ui-tests-app/app.css");
84-
application.start({ moduleName: "ui-tests-app/mainPage" });
84+
application.start({ moduleName: "ui-tests-app/main-page" });

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.btnIcon {
2+
font-family: "FontAwesome";
3+
font-size: 60;
4+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { EventData, Observable } from "tns-core-modules/data/observable";
2+
import { Page } from "tns-core-modules/ui/page";
3+
import * as frame from "tns-core-modules/ui/frame";
4+
5+
export function navigatingTo(args: EventData) {
6+
const page = <Page>args.object;
7+
page.bindingContext = new TestPage();
8+
}
9+
10+
export function onNavBtnTap(args) {
11+
frame.topmost().goBack();
12+
}
13+
14+
export class TestPage extends Observable {
15+
constructor() {
16+
super();
17+
}
18+
19+
// new line of span can be set with \n from code behind
20+
get test(): string {
21+
return "\ntest";
22+
}
23+
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Page
2+
xmlns="http://schemas.nativescript.org/tns.xsd" loaded="navigatingTo">
3+
<Page.actionBar>
4+
<ActionBar title="4385">
5+
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onNavBtnTap"/>
6+
</ActionBar>
7+
</Page.actionBar>
8+
<StackLayout>
9+
<!--In xml the new line can be set with &#xA;-->
10+
<Button style="text-align:center; background-color:yellow" textWrap="true" class="btnIcon" >
11+
<Button.formattedText>
12+
<formattedString>
13+
<formattedString.spans>
14+
<Span text="&#xf1ec; text-align: center" fontSize="14">
15+
</Span>
16+
<Span text="&#xA;new line">
17+
</Span>
18+
</formattedString.spans>
19+
</formattedString>
20+
</Button.formattedText>
21+
</Button>
22+
<Button style="text-align:center; background-color:green" textWrap="true" class="btnIcon" >
23+
<button.formattedText>
24+
<formattedString>
25+
<formattedString.spans>
26+
<Span text="code behind" fontSize="14">
27+
</Span>
28+
<Span text="{{ test }}">
29+
</Span>
30+
</formattedString.spans>
31+
</formattedString>
32+
</button.formattedText>
33+
</Button>
34+
</StackLayout>
35+
</Page>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,6 @@ export function loadExamples() {
1717
examples.set("background", "button/background");
1818
examples.set("border-playground","button/border-playground");
1919
examples.set("issue-4287","button/issue-4287");
20+
examples.set("issue-4385","button/issue-4385");
2021
return examples;
2122
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<Page loaded="pageLoaded">
3-
<ScrollView orientation="vertical" row="1">
4-
<WrapLayout id="wrapLayoutWithExamples"/>
5-
</ScrollView>
3+
<WrapLayout id="wrapLayoutWithExamples" orientation="horizontal"/>
64
</Page>

apps/app/ui-tests-app/mainPage.ts renamed to apps/app/ui-tests-app/main-page.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { MainPageViewModel } from "./main-page-view-model";
33
import { Page } from "tns-core-modules/ui/page";
44
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
5+
import { isAndroid } from "tns-core-modules/platform"
56

67
export function pageLoaded(args: EventData) {
78
const page = <Page>args.object;
@@ -35,9 +36,11 @@ export function pageLoaded(args: EventData) {
3536

3637
const parent = page.getViewById('parentLayout');
3738
const searchBar = page.getViewById('textView');
38-
if (parent.android) {
39+
if (isAndroid) {
3940
parent.android.setFocusableInTouchMode(true);
4041
parent.android.setFocusable(true);
4142
searchBar.android.clearFocus();
43+
}else{
44+
parent.style.marginBottom=10;
4245
}
4346
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Page loaded="pageLoaded">
3+
<GridLayout rows="auto, *">
4+
<GridLayout row="0" columns="*,30" id="parentLayout">
5+
<TextView col="0" automationText="tv" id="textView" hint="Enter example name" text="{{ exampleName }}" />
6+
<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;"/>
7+
</GridLayout>
8+
<WrapLayout row="1" id="wrapLayoutWithExamples"/>
9+
<ListView row="1" items="{{ filteredListOfExamples }}" itemTap="{{ loadExampleFromListView }}" id="filteredListOfExamplesListView">
10+
<ListView.itemTemplate>
11+
<GridLayout columns="*,2*">
12+
<Label text="{{ name }}" textWrap="true" />
13+
<Label text="{{ path }}" textWrap="true" col="1"/>
14+
</GridLayout>
15+
</ListView.itemTemplate>
16+
</ListView>
17+
</GridLayout>
18+
</Page>

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

Lines changed: 0 additions & 20 deletions
This file was deleted.

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { Observable } from "tns-core-modules/data/observable";
22
import { Button } from "tns-core-modules/ui/button";
33
import { Color } from "tns-core-modules/color";
44
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
5-
import * as dialogs from "tns-core-modules/ui/dialogs";
5+
import { alert } from "tns-core-modules/ui/dialogs";
66
import * as frame from "tns-core-modules/ui/frame";
77
import * as platform from "tns-core-modules/platform";
88

99
export class TestPageMainViewModel extends Observable {
10-
private _colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
10+
private _colors = ["#0000cc", "#33cc33", "#0000cc"];
1111

1212
public static APP_NAME: string = "ui-tests-app";
1313
public basePath: string = "";
@@ -24,19 +24,18 @@ export class TestPageMainViewModel extends Observable {
2424

2525
protected selectExample(selectedExample: any) {
2626
console.log(" EXAMPLE: " + selectedExample);
27-
2827
if (this.examples.has(selectedExample)) {
2928
this.navigateToExample(this.examples.get(selectedExample));
30-
} else {
31-
dialogs.alert("Cannot find example: " + selectedExample);
29+
} else if (selectedExample.indexOf("/") > 0) {
30+
this.navigateToExample(selectedExample);
3231
}
3332
}
3433

3534
protected navigateToExample(exampleFullPath: string) {
3635
try {
3736
frame.topmost().navigate(TestPageMainViewModel.APP_NAME + "/" + exampleFullPath);
3837
} catch (error) {
39-
dialogs.alert("Cannot find example: " + exampleFullPath);
38+
alert("Cannot find example: " + exampleFullPath);
4039

4140
}
4241
}
@@ -55,17 +54,19 @@ export class TestPageMainViewModel extends Observable {
5554

5655
this.examples.forEach((element, key) => {
5756
var btn = new Button();
58-
5957
if (platform.isAndroid) {
6058
btn.style.height = 25;
6159
btn.style.fontSize = 10;
62-
btn.style.margin = "0";
63-
btn.style.padding = "0";
60+
btn.style.padding = 0;
6461
} else {
65-
btn.style.padding = "5";
62+
btn.style.padding = 5;
6663
}
64+
btn.style.marginRight = 5;
65+
btn.style.marginBottom = 5;
6766

68-
btn.style.color = new Color(this._colors[count++ % 3]);
67+
btn.style.color = new Color("white");
68+
btn.style.backgroundColor = new Color(this._colors[count++ % 3]);
69+
btn.style.borderRadius = 5;
6970
btn.on(Button.tapEvent, function (eventData) {
7071
let text = btn.text;
7172
this.loadExample(text);
@@ -100,4 +101,4 @@ export class TestPageMainViewModel extends Observable {
100101
this.examples.clear();
101102
this.examples = sortedExamples;
102103
}
103-
}
104+
}

0 commit comments

Comments
 (0)