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

Tsenov/button alignment (#4460)

Browse Source 
* Include new example for issue 4385

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

* Update main-page

* Fix navigation
This commit is contained in:
SvetoslavTsenov
2017-06-29 22:16:17 +03:00
committed by GitHub
parent 23757e5dfc
commit 5ec8242654
11 changed files with 104 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/ui-tests-app/app.ts
View File

@@ -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" });

4
apps/app/ui-tests-app/button/issue-4385.css Normal file
View File

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

23
apps/app/ui-tests-app/button/issue-4385.ts Normal file
View File

@@ -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";
}
}

35
apps/app/ui-tests-app/button/issue-4385.xml Normal file
View File

@@ -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>

1
apps/app/ui-tests-app/button/main-page.ts
View File

@@ -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;
}

4
apps/app/ui-tests-app/css/main-page.xml
View File

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

5
apps/app/ui-tests-app/mainPage.ts → apps/app/ui-tests-app/main-page.ts
View File

@@ -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;
}
}

18
apps/app/ui-tests-app/main-page.xml Normal file
View File

@@ -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>

20
apps/app/ui-tests-app/mainPage.xml
View File

@@ -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>

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

@@ -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 {
dialogs.alert("Cannot find example: " + selectedExample);
} else if (selectedExample.indexOf("/") > 0) {
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;
}
}
}

8
apps/package.json
View File

@@ -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": {