mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
Merge branch 'master' into mdonev/release-to-master20190621
This commit is contained in:
Dimitar Topuzov
@@ -1 +0,0 @@
|
||||
<Frame defaultPage="cuteness.io/main-page" />
|
||||
@@ -1 +0,0 @@
|
||||
/* Add app css here */
|
||||
@@ -1,6 +0,0 @@
|
||||
import * as application from "tns-core-modules/application";
|
||||
|
||||
// Start the application
|
||||
global.registerModule("cuteness.io/app.css", () => require("~/cuteness.io/app.css"));
|
||||
application.setCssFileName("cuteness.io/app.css");
|
||||
application.run({ moduleName: "cuteness.io/app-root" });
|
||||
@@ -1,14 +0,0 @@
|
||||
Page {
|
||||
background-color: #363940;
|
||||
}
|
||||
|
||||
.detailsTitle {
|
||||
color: #FFFFFF;
|
||||
font-size: 30;
|
||||
margin: 10;
|
||||
}
|
||||
|
||||
ActivityIndicator {
|
||||
width: 50;
|
||||
height: 50;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
|
||||
<GridLayout rows="*, auto">
|
||||
<ScrollView>
|
||||
<StackLayout>
|
||||
<Image imageSource="{{ imageSource }}" stretch="aspectFill"/>
|
||||
<Label text="{{ title }}" class="detailsTitle" textWrap="true" />
|
||||
</StackLayout>
|
||||
</ScrollView>
|
||||
<StackLayout orientation="horizontal" row="1">
|
||||
<Label margin="2">
|
||||
<Label.formattedText>
|
||||
<FormattedString fontSize="20" color="#C6C6C6">
|
||||
<FormattedString.spans>
|
||||
<Span text="{{ author ? 'by ' + author : '' }}"/>
|
||||
<Span text="{{ num_comments ? ' | ' : '' }}" />
|
||||
<Span text="{{ num_comments ? num_comments + ' comments' : '' }}" color="#10C2B0"/>
|
||||
</FormattedString.spans>
|
||||
</FormattedString>
|
||||
</Label.formattedText>
|
||||
</Label>
|
||||
</StackLayout>
|
||||
<ActivityIndicator busy="{{ isLoading }}" />
|
||||
</GridLayout>
|
||||
</Page>
|
||||
@@ -1,29 +0,0 @@
|
||||
.title {
|
||||
font-size: 20;
|
||||
margin: 3;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 14;
|
||||
horizontal-align: left;
|
||||
vertical-align: bottom;
|
||||
margin: 3;
|
||||
}
|
||||
|
||||
.comments {
|
||||
color: #10C2B0;
|
||||
font-size: 14;
|
||||
vertical-align: bottom;
|
||||
margin: 3;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 72;
|
||||
height: 72;
|
||||
margin: 3;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
TabView {
|
||||
background-color: white;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { EventData as ObservableEventData } from "tns-core-modules/data/observable";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
import { ItemEventData as ListViewItemEventData } from "tns-core-modules/ui/list-view";
|
||||
import { topmost as topmostFrame } from "tns-core-modules/ui/frame";
|
||||
import { AppViewModel } from "./reddit-app-view-model";
|
||||
|
||||
var appViewModel = new AppViewModel();
|
||||
|
||||
// Event handler for Page "loaded" event attached in main-page.xml
|
||||
export function pageLoaded(args: ObservableEventData) {
|
||||
// Get the event sender
|
||||
var page = <Page>args.object;
|
||||
|
||||
page.bindingContext = appViewModel;
|
||||
}
|
||||
|
||||
export function listViewItemTap(args: ListViewItemEventData) {
|
||||
// Navigate to the details page with context set to the data item for specified index
|
||||
topmostFrame().navigate({
|
||||
moduleName: "cuteness.io/details-page",
|
||||
bindingContext: appViewModel.redditItems.getItem(args.index)
|
||||
});
|
||||
}
|
||||
|
||||
export function listViewLoadMoreItems(args: ObservableEventData) {
|
||||
// Increase model items length with model items loadSize property value
|
||||
//appViewModel.redditItems.length += appViewModel.redditItems.loadSize;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
|
||||
<TabView>
|
||||
<TabView.items>
|
||||
<TabViewItem title="List">
|
||||
<TabViewItem.view>
|
||||
<ListView items="{{ redditItems }}" isScrolling="{{ isScrolling }}" itemTap="listViewItemTap" loadMoreItems="listViewLoadMoreItems">
|
||||
<ListView.itemTemplate>
|
||||
<!-- Binding in template property of an component will use the bindingContext provided by the component. -->
|
||||
<GridLayout columns="auto, *, auto" rows="auto, 25">
|
||||
<Image src="{{ thumbnailImage }}" class="thumbnail" rowSpan="2"/>
|
||||
<Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
|
||||
<Label text="{{ author ? 'by ' + author : '' }}" class="author" col="1" row="1" />
|
||||
<Label text="{{ num_comments ? num_comments + ' comments' : '' }}" class="comments" col="2" row="1" />
|
||||
</GridLayout>
|
||||
<!-- End of tempplate. -->
|
||||
</ListView.itemTemplate>
|
||||
</ListView>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem title="About">
|
||||
<TabViewItem.view>
|
||||
<StackLayout>
|
||||
<Image margin="10" src="~/cuteness.io/res/telerik-logo.png" />
|
||||
<Label margin="10" textWrap="true" text="{{ aboutText }}" />
|
||||
</StackLayout>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
</TabView.items>
|
||||
</TabView>
|
||||
</Page>
|
||||
@@ -1,80 +0,0 @@
|
||||
import { ImageSource, fromFile as imageSourceFromFile } from "tns-core-modules/image-source";
|
||||
import { VirtualArray, ItemsLoading as virtualArrayItemsLoadingData } from "tns-core-modules/data/virtual-array";
|
||||
import { Observable } from "tns-core-modules/data/observable";
|
||||
import { Cache as ImageCache } from "tns-core-modules/ui/image-cache";
|
||||
|
||||
import { Data as RedditData } from "./reddit-model";
|
||||
import { RedditViewModel } from "./reddit-item-view-model";
|
||||
|
||||
var aboutText = "Cuteness is a proof of concept app demonstrating the Telerik's NativeScript for writing native mobile applications using JavaScript.";
|
||||
export var defaultThumbnailImageSource = imageSourceFromFile("~/cuteness.io/res/reddit-logo.png");
|
||||
export var defaultNoThumbnailImageSource = imageSourceFromFile("~/cuteness.io/res/no-image.png");
|
||||
|
||||
var redditUrl = "https://www.reddit.com/r/aww.json?limit=";
|
||||
var after: string;
|
||||
var ISSCROLLING = "isLoading";
|
||||
|
||||
// initialize the image cache for the main list
|
||||
export var cache = new ImageCache();
|
||||
cache.placeholder = defaultThumbnailImageSource;
|
||||
cache.maxRequests = 5;
|
||||
|
||||
export class AppViewModel extends Observable {
|
||||
|
||||
private _redditItems: VirtualArray<RedditViewModel>;
|
||||
get redditItems(): VirtualArray<RedditViewModel> {
|
||||
if (!this._redditItems) {
|
||||
this._redditItems = new VirtualArray<RedditViewModel>(1000);
|
||||
this._redditItems.loadSize = 50;
|
||||
this._redditItems.on(VirtualArray.itemsLoadingEvent, (args: virtualArrayItemsLoadingData) => {
|
||||
|
||||
fetch(redditUrl + args.count + (after ? "&after=" + after : "")).then<RedditData>(response => response.json()).then(result => {
|
||||
|
||||
var itemsToLoad = result.data.children.map(i => {
|
||||
return new RedditViewModel(i.data);
|
||||
});
|
||||
|
||||
this._redditItems.load(args.index, itemsToLoad);
|
||||
|
||||
var lastItem = itemsToLoad[itemsToLoad.length - 1];
|
||||
if (lastItem) {
|
||||
after = itemsToLoad[itemsToLoad.length - 1].source.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return this._redditItems;
|
||||
}
|
||||
|
||||
private _isScrolling = false;
|
||||
get isScrolling(): boolean {
|
||||
return this._isScrolling;
|
||||
}
|
||||
set isScrolling(value: boolean) {
|
||||
if (this._isScrolling !== value) {
|
||||
this._isScrolling = value;
|
||||
|
||||
if (value) {
|
||||
cache.disableDownload();
|
||||
}
|
||||
else {
|
||||
cache.enableDownload();
|
||||
}
|
||||
|
||||
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: ISSCROLLING, value: value });
|
||||
}
|
||||
}
|
||||
|
||||
get aboutText(): string {
|
||||
return aboutText;
|
||||
}
|
||||
|
||||
get defaultThumbnailImageSource(): ImageSource {
|
||||
return defaultThumbnailImageSource;
|
||||
}
|
||||
|
||||
get defaultNoThumbnailImageSource(): ImageSource {
|
||||
return defaultNoThumbnailImageSource;
|
||||
}
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
import { Observable } from "tns-core-modules/data/observable";
|
||||
import { ImageSource, fromFile as imageSourceFromFile, fromUrl as imageSourceFromUrl } from "tns-core-modules/image-source";
|
||||
|
||||
import { ItemData } from "./reddit-model";
|
||||
import { defaultThumbnailImageSource, defaultNoThumbnailImageSource, cache } from "./reddit-app-view-model";
|
||||
|
||||
var firstThumbnailImageSource = imageSourceFromFile("~/cuteness.io/res/first-image.png");
|
||||
var defaultImageSource = imageSourceFromFile("~/cuteness.io/res/reddit-logo-transparent.png");
|
||||
|
||||
var ISLOADING = "isLoading";
|
||||
var THUMBNAIL_IMAGE = "thumbnailImage";
|
||||
var IMAGE_SOURCE = "imageSource";
|
||||
|
||||
export class RedditViewModel extends Observable {
|
||||
|
||||
private _source: ItemData;
|
||||
constructor(source: ItemData) {
|
||||
super();
|
||||
|
||||
this._source = source;
|
||||
|
||||
if (this._source) {
|
||||
var property: string;
|
||||
for (property in this._source) {
|
||||
this.set(property, this._source[property]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get source(): ItemData {
|
||||
return this._source;
|
||||
}
|
||||
|
||||
private _isLoading = false;
|
||||
get isLoading(): boolean {
|
||||
return this._isLoading;
|
||||
}
|
||||
set isLoading(value: boolean) {
|
||||
if (this._isLoading !== value) {
|
||||
this._isLoading = value;
|
||||
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: ISLOADING, value: value });
|
||||
}
|
||||
}
|
||||
|
||||
get thumbnailImage(): ImageSource {
|
||||
if (!this._source) {
|
||||
return defaultThumbnailImageSource;
|
||||
}
|
||||
|
||||
if (this._source.title === "reddit 101") {
|
||||
return firstThumbnailImageSource;
|
||||
}
|
||||
|
||||
var url = this._source.thumbnail;
|
||||
|
||||
if (!_isValidImageUrl(url)) {
|
||||
return defaultNoThumbnailImageSource
|
||||
}
|
||||
|
||||
var image = cache.get(url);
|
||||
if (image) {
|
||||
return image;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
cache.push({
|
||||
key: url,
|
||||
url: url,
|
||||
completed: (image: any, key: string) => {
|
||||
if (url === key) {
|
||||
this.isLoading = false;
|
||||
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: THUMBNAIL_IMAGE, value: image });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return defaultThumbnailImageSource;
|
||||
}
|
||||
|
||||
get imageSource(): ImageSource {
|
||||
if (this._source) {
|
||||
var url;
|
||||
try {
|
||||
url = (<any>this._source).preview.images[0].source.url;
|
||||
}
|
||||
catch (e) {
|
||||
url = this._source.url;
|
||||
}
|
||||
|
||||
if (_isValidImageUrl(url)) {
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
imageSourceFromUrl(url).then(result => {
|
||||
this.isLoading = false;
|
||||
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: IMAGE_SOURCE, value: result });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return defaultImageSource;
|
||||
}
|
||||
}
|
||||
|
||||
function _isValidImageUrl(url: string): boolean {
|
||||
return url && (url.indexOf(".png") !== -1 || url.indexOf(".jpg") !== -1);
|
||||
}
|
||||
57
apps/app/cuteness.io/reddit-model.d.ts
vendored
57
apps/app/cuteness.io/reddit-model.d.ts
vendored
@@ -1,57 +0,0 @@
|
||||
export interface Data {
|
||||
kind: string;
|
||||
data: Items;
|
||||
}
|
||||
|
||||
export interface Items {
|
||||
modhash: string;
|
||||
children: Array<Item>;
|
||||
}
|
||||
|
||||
export interface Item {
|
||||
kind: string;
|
||||
data: ItemData;
|
||||
}
|
||||
|
||||
export interface ItemData {
|
||||
domain: any;
|
||||
banned_by: any;
|
||||
media_embed: any;
|
||||
subreddit: any;
|
||||
selftext_html: any;
|
||||
selftext: any;
|
||||
likes: any;
|
||||
secure_media: any;
|
||||
link_flair_text: any;
|
||||
id: string;
|
||||
gilded: any;
|
||||
secure_media_embed: any;
|
||||
clicked: boolean;
|
||||
stickied: boolean;
|
||||
author: any;
|
||||
media: any;
|
||||
score: number;
|
||||
approved_by: any;
|
||||
over_18: boolean;
|
||||
hidden: boolean;
|
||||
thumbnail: string;
|
||||
subreddit_id: any;
|
||||
edited: boolean;
|
||||
link_flair_css_class: any;
|
||||
author_flair_css_class: any;
|
||||
downs: number;
|
||||
saved: boolean;
|
||||
is_self: boolean;
|
||||
permalink: string;
|
||||
name: string;
|
||||
created: number;
|
||||
url: string;
|
||||
author_flair_text: string;
|
||||
title: string;
|
||||
created_utc: number;
|
||||
ups: number;
|
||||
num_comments: number;
|
||||
visited: boolean;
|
||||
num_reports: any;
|
||||
distinguished: any
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 990 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"name": "tns-samples-apps",
|
||||
"main": "ui-tests-app/app.js"
|
||||
"main": "perf-app/app.js"
|
||||
}
|
||||
|
||||
1
apps/app/perf-app/app-root.xml
Normal file
1
apps/app/perf-app/app-root.xml
Normal file
@@ -0,0 +1 @@
|
||||
<Frame defaultPage="perf-app/main-page" />
|
||||
@@ -1,3 +1,3 @@
|
||||
import * as application from "tns-core-modules/application";
|
||||
|
||||
application.start({ moduleName: "perf-app/main-page" });
|
||||
application.run({ moduleName: "perf-app/app-root" });
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
<ScrollView orientation="vertical" row="1">
|
||||
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
</Page>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
import * as observable from "tns-core-modules/data/observable";
|
||||
|
||||
export function navigatingTo(args: EventData) {
|
||||
let page = <Page>args.object;
|
||||
page.bindingContext = new ActionItemPostitionView();
|
||||
}
|
||||
|
||||
export class ActionItemPostitionView extends observable.Observable {
|
||||
private _values = ["-i---", "---i---", "---i-"];
|
||||
private _count: number;
|
||||
private _text: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._count = 0;
|
||||
}
|
||||
|
||||
get text(): string {
|
||||
return this._text;
|
||||
}
|
||||
|
||||
set text(value: string) {
|
||||
if (this._text !== value) {
|
||||
this._text = value;
|
||||
this.notifyPropertyChange("text", value)
|
||||
}
|
||||
}
|
||||
|
||||
public onTap() {
|
||||
this.change();
|
||||
}
|
||||
|
||||
public change() {
|
||||
let index = this._count++ % 3;
|
||||
this.text = this._values[index];
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<Page
|
||||
xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
|
||||
<Page.actionBar>
|
||||
<ActionBar>
|
||||
<ActionItem ios.position="right" tap="{{ change }}">
|
||||
<Button text="{{ text }}" backgroundColor="red" />
|
||||
</ActionItem>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Label text="Tap to change the text in the actionbar" class="title"/>
|
||||
<Button text="Tap" tap="{{ onTap }}" />
|
||||
<Label text="{{ text }}"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,5 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean-page");
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem tap="navigate">
|
||||
<ActionItem.actionView>
|
||||
<StackLayout orientation="horizontal">
|
||||
<Label text="Green" color="green" />
|
||||
<Label text="Red" color="red" />
|
||||
</StackLayout>
|
||||
</ActionItem.actionView>
|
||||
</ActionItem>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,5 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
|
||||
export function navigate() {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean-page");
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title" style="background-color: blue; color: yellow;">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,3 +0,0 @@
|
||||
.action {
|
||||
background-color: red;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean-page");
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<Page>
|
||||
<ActionBar title="This is RED" class="action" />
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,5 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
|
||||
export function navigate() {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean-page");
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title" style="background-color: green;">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate" style="background-color: green;"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,5 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().goBack();
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to previous page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,5 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
|
||||
export function navigate() {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean-page");
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page Title" style="color: green;">
|
||||
<NavigationButton text="go back"/>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem text="ITEM" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,10 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
|
||||
|
||||
<ActionBar flat="true" backgroundColor="blue">
|
||||
<Label text="flat action bar"></Label>
|
||||
</ActionBar>
|
||||
|
||||
<StackLayout backgroundColor="red">
|
||||
<Label text="lorem ipsum" backgroundColor="green"></Label>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Label } from "tns-core-modules/ui/label";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
|
||||
export function onNavigateTo(args) {
|
||||
updateText(args.object);
|
||||
}
|
||||
|
||||
export function changeFlatPropertyValue(args) {
|
||||
const page = <Page>args.object.page;
|
||||
page.actionBar.flat = !page.actionBar.flat;
|
||||
updateText(page);
|
||||
}
|
||||
|
||||
function updateText(page: Page) {
|
||||
const label = <Label>page.getViewById("flatPropertyValue");
|
||||
label.text = "Action bar flat property is set to: " + page.actionBar.flat;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<Page navigatedTo="onNavigateTo" backgroundColor="yellow">
|
||||
|
||||
<ActionBar backgroundColor="blue">
|
||||
<Label text="flat action bar"></Label>
|
||||
</ActionBar>
|
||||
|
||||
<StackLayout backgroundColor="red">
|
||||
<Button margin="30" text="change flat property" tap="changeFlatPropertyValue"/>
|
||||
<Label id="flatPropertyValue" backgroundColor="green" />
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,10 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
|
||||
|
||||
<ActionBar flat="true" backgroundColor="blue">
|
||||
<Label text="flat action bar"></Label>
|
||||
</ActionBar>
|
||||
|
||||
<ScrollView backgroundColor="red">
|
||||
<Label text="lorem ipsum" backgroundColor="green"></Label>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
@@ -1,7 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { TabView } from "tns-core-modules/ui/tab-view";
|
||||
|
||||
export function onLoaded(args: EventData) {
|
||||
const tabView = <TabView>args.object;
|
||||
tabView.ios.tabBar.translucent = false;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<Page backgroundColor="yellow">
|
||||
<ActionBar flat="true" backgroundColor="blue">
|
||||
<Label text="flat action bar"></Label>
|
||||
</ActionBar>
|
||||
|
||||
<TabView androidTabsPosition="bottom" loaded="onLoaded">
|
||||
<TabViewItem title="First">
|
||||
<StackLayout backgroundColor="red">
|
||||
<Label text="First View" backgroundColor="green"/>
|
||||
</StackLayout>
|
||||
</TabViewItem>
|
||||
</TabView>
|
||||
</Page>
|
||||
@@ -1,14 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
|
||||
|
||||
<ActionBar flat="true" backgroundColor="blue">
|
||||
<Label text="flat action bar"></Label>
|
||||
</ActionBar>
|
||||
|
||||
<TabView selectedTabTextColor="green">
|
||||
<TabViewItem title="First">
|
||||
<GridLayout backgroundColor="green">
|
||||
<Button text="test" backgroundColor="red"></Button>
|
||||
</GridLayout>
|
||||
</TabViewItem>
|
||||
</TabView>
|
||||
</Page>
|
||||
@@ -1,17 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import { EventData } from "tns-core-modules/ui/frame";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { ActionBar } from "tns-core-modules/ui/action-bar";
|
||||
|
||||
const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean");
|
||||
}
|
||||
|
||||
export function onChangeRenderingMode(args: EventData) {
|
||||
const button = <Button>args.object;
|
||||
const actionBar = <ActionBar>button.page.actionBar
|
||||
actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
|
||||
button.text = "" + actionBar.iosIconRenderingMode;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem icon="res://icon" tap="navigate"/>
|
||||
<ActionItem icon="res://add_to_fav" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" automationText="goToClearedPage" tap="navigate"/>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,17 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import { EventData } from "tns-core-modules/ui/frame";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { ActionBar } from "tns-core-modules/ui/action-bar";
|
||||
|
||||
const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
|
||||
|
||||
export function navigate() {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean-page");
|
||||
}
|
||||
|
||||
export function onChangeRenderingMode(args: EventData) {
|
||||
const button = <Button>args.object;
|
||||
const actionBar = <ActionBar>button.page.actionBar
|
||||
actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
|
||||
button.text = "" + actionBar.iosIconRenderingMode;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem icon="~/ui-tests-app/resources/images/icon.png" tap="navigate"/>
|
||||
<ActionItem icon="~/ui-tests-app/resources/images/add_to_fav@3x.png" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" automationText="goToClearedPage" tap="navigate"/>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,33 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { SubMainPageViewModel } from "../sub-main-page-view-model";
|
||||
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
|
||||
export function pageLoaded(args: EventData) {
|
||||
const page = <Page>args.object;
|
||||
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
|
||||
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
|
||||
}
|
||||
|
||||
export function loadExamples() {
|
||||
const examples = new Map<string, string>();
|
||||
examples.set("actColor", "action-bar/color-page");
|
||||
examples.set("actBG", "action-bar/background-page");
|
||||
examples.set("actStyle", "action-bar/all-page");
|
||||
examples.set("actIcons", "action-bar/system-icons-page");
|
||||
examples.set("actLocalIcons", "action-bar/local-icons-page");
|
||||
examples.set("actResIcons", "action-bar/icons-page");
|
||||
examples.set("actView", "action-bar/action-view-page");
|
||||
examples.set("actionItemPosition", "action-bar/action-item-position-page");
|
||||
examples.set("actBGCss", "action-bar/background-css-page");
|
||||
examples.set("actTransparentBgCss", "action-bar/transparent-bg-css-page");
|
||||
examples.set("modalHiddenActBar", "action-bar/modal-test-hidden-action-bar-page");
|
||||
examples.set("modalShownActBar", "action-bar/modal-test-with-action-bar-page");
|
||||
examples.set("flat", "action-bar/flat-page");
|
||||
examples.set("flat-tab", "action-bar/flat-tab-page");
|
||||
examples.set("flat-tab-opaque-bar", "action-bar/flat-tab-opaque-bar-page");
|
||||
examples.set("flat-layout", "action-bar/flat-layout-page");
|
||||
examples.set("flat-scrollview", "action-bar/flat-scrollview-page");
|
||||
|
||||
return examples;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<ScrollView orientation="vertical" row="1">
|
||||
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
@@ -1,11 +0,0 @@
|
||||
import { ShownModallyData } from "tns-core-modules/ui/page";
|
||||
|
||||
let closeCallback: Function;
|
||||
|
||||
export function onShownModally(args: ShownModallyData) {
|
||||
closeCallback = args.closeCallback;
|
||||
}
|
||||
|
||||
export function onTap() {
|
||||
closeCallback("sample text\n");
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
<Page showingModally="onShownModally" actionBarHidden="true">
|
||||
<StackLayout id="layout" >
|
||||
<Button text="Close" tap="onTap" />
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,28 +0,0 @@
|
||||
import { ShownModallyData } from "tns-core-modules/ui/page";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { Label } from "tns-core-modules/ui/label"
|
||||
import { Page } from "tns-core-modules/ui/page"
|
||||
|
||||
let closeCallback: Function;
|
||||
|
||||
export function onShownModally(args: ShownModallyData) {
|
||||
closeCallback = args.closeCallback;
|
||||
}
|
||||
|
||||
export function onTap() {
|
||||
closeCallback("sample text\n");
|
||||
}
|
||||
|
||||
export function change(args) {
|
||||
var button: Button = <Button>args.object;
|
||||
|
||||
var page: Page = <Page>button.parent;
|
||||
|
||||
console.log("---------------------page-------------------------")
|
||||
console.log(page)
|
||||
var label: Label = <Label>page.getViewById("label1");
|
||||
label.text = "fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
|
||||
|
||||
var label2: Label = <Label>page.getViewById("label2");
|
||||
label2.text = "foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
<Page showingModally="onShownModally">
|
||||
<StackLayout id="layout" >
|
||||
<Label backgroundColor="green" id="label1" text="short" textWrap="true" />
|
||||
<Label backgroundColor="red" id="label2" text="" textWrap="true" />
|
||||
<Button text="Change text" tap="change" />
|
||||
<Button text="Close" tap="onTap" />
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,13 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
import { topmost } from "tns-core-modules/ui/frame";
|
||||
|
||||
export function btnClick(args: EventData) {
|
||||
(<Page>args.object).page.showModal("ui-tests-app/action-bar/modal-page", "", function (arg: string) {
|
||||
console.log("Callback args: " + arg);
|
||||
}, true);
|
||||
}
|
||||
|
||||
export function btnBack(args: EventData) {
|
||||
topmost().goBack();
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
|
||||
<StackLayout>
|
||||
<button text="Open Modal" tap="btnClick" />
|
||||
<button text="Go Back" tap="btnBack" />
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,14 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
import { topmost } from "tns-core-modules/ui/frame";
|
||||
|
||||
export function btnClick(args: EventData) {
|
||||
(<Page>args.object).page.showModal("ui-tests-app/action-bar/modal-page-hidden-action-bar-page", "", function (arg: string) {
|
||||
// ...
|
||||
console.log("Callback args: " + arg);
|
||||
}, true);
|
||||
}
|
||||
|
||||
export function btnBack(args: EventData) {
|
||||
topmost().goBack();
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
|
||||
<Page.actionBar>
|
||||
<ActionBar backgroundColor="green" title="Main View" icon="">
|
||||
<NavigationButton text="Back" icon="" tap="" />
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem icon="" text="Left" tap="" ios.position="left" />
|
||||
<ActionItem icon="" text="Right" tap="" ios.position="right" />
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<button text="Open Modal" tap="btnClick" />
|
||||
<button text="Go Back" tap="btnBack" />
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,5 +0,0 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean/page");
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem ios.systemIcon="12" android.systemIcon="ic_menu_search" tap="navigate"/>
|
||||
<ActionItem ios.systemIcon="15" android.systemIcon="ic_menu_camera" tap="navigate"/>
|
||||
<ActionItem ios.systemIcon="16" android.systemIcon="ic_menu_delete" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,7 +0,0 @@
|
||||
.action {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
Page {
|
||||
background-color: green;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import frame = require("tns-core-modules/ui/frame");
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean-page");
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<Page>
|
||||
<ActionBar title="This is transparent" class="action" />
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,114 +0,0 @@
|
||||
import * as view from "tns-core-modules/ui/core/view";
|
||||
import { View } from "tns-core-modules/ui/core/view";
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { SegmentedBar, SegmentedBarItem } from "tns-core-modules/ui/segmented-bar";
|
||||
import { Label } from "tns-core-modules/ui/label";
|
||||
import { Animation, AnimationDefinition } from "tns-core-modules/ui/animation";
|
||||
import * as fpsMeter from "tns-core-modules/fps-meter";
|
||||
|
||||
let fpsCallbackId;
|
||||
export function onLoaded(args) {
|
||||
const page = args.object;
|
||||
const fpsLabel = view.getViewById(page, "fps") as Label;
|
||||
fpsCallbackId = fpsMeter.addCallback((fps: number, minFps: number) => {
|
||||
fpsLabel.text = `${fps.toFixed(2)}/${minFps.toFixed(2)}`;
|
||||
});
|
||||
fpsMeter.start();
|
||||
}
|
||||
|
||||
export function onUnloaded() {
|
||||
fpsMeter.removeCallback(fpsCallbackId);
|
||||
fpsMeter.stop();
|
||||
}
|
||||
|
||||
export function getBoxPropertyAnimationData(property: string,
|
||||
animateEase: string,
|
||||
target: View,
|
||||
extentX: number = 128,
|
||||
extentY: number = 128) {
|
||||
let animateKey;
|
||||
let animateValueTo;
|
||||
let animateValueFrom;
|
||||
let animateDuration = animateEase === "spring" ? 800 : 500;
|
||||
let animateReturnDelay = animateEase === "spring" ? 0 : 200;
|
||||
|
||||
// Determine the full animation property name (some are shortened in UI), and the demo to/from values
|
||||
switch (property) {
|
||||
case "height":
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = "height";
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extentY;
|
||||
break;
|
||||
case "width":
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = "width";
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extentX;
|
||||
break;
|
||||
case "opacity":
|
||||
animateKey = "opacity";
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = 1;
|
||||
break;
|
||||
case "color":
|
||||
animateKey = "backgroundColor";
|
||||
animateValueTo = "blue";
|
||||
animateValueFrom = "purple";
|
||||
break;
|
||||
case "rotate":
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = "rotate";
|
||||
animateValueTo = 180;
|
||||
animateValueFrom = 0;
|
||||
break;
|
||||
case "scale":
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = "scale";
|
||||
animateValueTo = {x: 0.1, y: 0.1};
|
||||
animateValueFrom = {x: 1, y: 1};
|
||||
break;
|
||||
default:
|
||||
throw new Error(`demo animation for "${property}" is not implemented`);
|
||||
}
|
||||
|
||||
return {
|
||||
animateEase,
|
||||
animateKey,
|
||||
animateValueTo,
|
||||
animateValueFrom,
|
||||
animateReturnDelay,
|
||||
animateDuration
|
||||
};
|
||||
}
|
||||
|
||||
export function easeAnimate(args) {
|
||||
const clicked = args.object as Button;
|
||||
const page: pages.Page = clicked.page;
|
||||
const select = view.getViewById(page, "select") as SegmentedBar;
|
||||
const item: SegmentedBarItem = select.items[select.selectedIndex];
|
||||
const animsIn: AnimationDefinition[] = [];
|
||||
const animsOut: AnimationDefinition[] = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const box = view.getViewById(page, "el-" + i) as Label;
|
||||
const prop = getBoxPropertyAnimationData(item.title, clicked.text, box, 32, 24);
|
||||
animsIn.push({
|
||||
[prop.animateKey]: prop.animateValueTo,
|
||||
delay: 15 * i,
|
||||
target: box,
|
||||
duration: prop.animateDuration,
|
||||
curve: prop.animateEase
|
||||
});
|
||||
animsOut.push({
|
||||
[prop.animateKey]: prop.animateValueFrom,
|
||||
target: box,
|
||||
delay: prop.animateReturnDelay + (5 * (Math.abs(i - 100))),
|
||||
duration: prop.animateDuration,
|
||||
curve: prop.animateEase
|
||||
});
|
||||
}
|
||||
new Animation(animsIn, false).play()
|
||||
.then(() => new Animation(animsOut, false).play())
|
||||
.catch((e) => console.log(e));
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
<Page loaded="onLoaded" unloaded="onUnloaded">
|
||||
<AbsoluteLayout>
|
||||
<GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
|
||||
|
||||
<Label row="0" colSpan="3" text="Animate"/>
|
||||
<SegmentedBar row="1" colSpan="3" id="select">
|
||||
<SegmentedBar.items>
|
||||
<SegmentedBarItem title="height"/>
|
||||
<SegmentedBarItem title="width"/>
|
||||
<SegmentedBarItem title="opacity"/>
|
||||
<SegmentedBarItem title="color"/>
|
||||
<SegmentedBarItem title="rotate"/>
|
||||
<SegmentedBarItem title="scale"/>
|
||||
</SegmentedBar.items>
|
||||
</SegmentedBar>
|
||||
|
||||
<Label row="2" colSpan="3" text="Easing"/>
|
||||
<Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
|
||||
<Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
|
||||
<Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
|
||||
<Button row="4" col="0" text="spring" tap="easeAnimate"/>
|
||||
<Button row="4" col="1" text="linear" tap="easeAnimate"/>
|
||||
<Button row="4" col="2" text="ease" tap="easeAnimate"/>
|
||||
</GridLayout>
|
||||
|
||||
<StackLayout top="20" left="200" orientation="horizontal">
|
||||
<Label text="FPS: "></Label>
|
||||
<Label id="fps"></Label>
|
||||
</StackLayout>
|
||||
|
||||
<GridLayout top="256" left="20" width="100%"
|
||||
rows="24,24,24,24,24,24,24,24,24,24"
|
||||
columns="32,32,32,32,32,32,32,32,32,32">
|
||||
<!-- 0 -->
|
||||
<Label row="0" col="0" height="24" width="32" id="el-0" backgroundColor="purple"/>
|
||||
<Label row="0" col="1" height="24" width="32" id="el-1" backgroundColor="purple"/>
|
||||
<Label row="0" col="2" height="24" width="32" id="el-2" backgroundColor="purple"/>
|
||||
<Label row="0" col="3" height="24" width="32" id="el-3" backgroundColor="purple"/>
|
||||
<Label row="0" col="4" height="24" width="32" id="el-4" backgroundColor="purple"/>
|
||||
<Label row="0" col="5" height="24" width="32" id="el-5" backgroundColor="purple"/>
|
||||
<Label row="0" col="6" height="24" width="32" id="el-6" backgroundColor="purple"/>
|
||||
<Label row="0" col="7" height="24" width="32" id="el-7" backgroundColor="purple"/>
|
||||
<Label row="0" col="8" height="24" width="32" id="el-8" backgroundColor="purple"/>
|
||||
<Label row="0" col="9" height="24" width="32" id="el-9" backgroundColor="purple"/>
|
||||
|
||||
<!-- 1 -->
|
||||
<Label row="1" col="0" height="24" width="32" id="el-10" backgroundColor="purple"/>
|
||||
<Label row="1" col="1" height="24" width="32" id="el-11" backgroundColor="purple"/>
|
||||
<Label row="1" col="2" height="24" width="32" id="el-12" backgroundColor="purple"/>
|
||||
<Label row="1" col="3" height="24" width="32" id="el-13" backgroundColor="purple"/>
|
||||
<Label row="1" col="4" height="24" width="32" id="el-14" backgroundColor="purple"/>
|
||||
<Label row="1" col="5" height="24" width="32" id="el-15" backgroundColor="purple"/>
|
||||
<Label row="1" col="6" height="24" width="32" id="el-16" backgroundColor="purple"/>
|
||||
<Label row="1" col="7" height="24" width="32" id="el-17" backgroundColor="purple"/>
|
||||
<Label row="1" col="8" height="24" width="32" id="el-18" backgroundColor="purple"/>
|
||||
<Label row="1" col="9" height="24" width="32" id="el-19" backgroundColor="purple"/>
|
||||
|
||||
<!-- 2 -->
|
||||
<Label row="2" col="0" height="24" width="32" id="el-20" backgroundColor="purple"/>
|
||||
<Label row="2" col="1" height="24" width="32" id="el-21" backgroundColor="purple"/>
|
||||
<Label row="2" col="2" height="24" width="32" id="el-22" backgroundColor="purple"/>
|
||||
<Label row="2" col="3" height="24" width="32" id="el-23" backgroundColor="purple"/>
|
||||
<Label row="2" col="4" height="24" width="32" id="el-24" backgroundColor="purple"/>
|
||||
<Label row="2" col="5" height="24" width="32" id="el-25" backgroundColor="purple"/>
|
||||
<Label row="2" col="6" height="24" width="32" id="el-26" backgroundColor="purple"/>
|
||||
<Label row="2" col="7" height="24" width="32" id="el-27" backgroundColor="purple"/>
|
||||
<Label row="2" col="8" height="24" width="32" id="el-28" backgroundColor="purple"/>
|
||||
<Label row="2" col="9" height="24" width="32" id="el-29" backgroundColor="purple"/>
|
||||
|
||||
<!-- 3 -->
|
||||
<Label row="3" col="0" height="24" width="32" id="el-30" backgroundColor="purple"/>
|
||||
<Label row="3" col="1" height="24" width="32" id="el-31" backgroundColor="purple"/>
|
||||
<Label row="3" col="2" height="24" width="32" id="el-32" backgroundColor="purple"/>
|
||||
<Label row="3" col="3" height="24" width="32" id="el-33" backgroundColor="purple"/>
|
||||
<Label row="3" col="4" height="24" width="32" id="el-34" backgroundColor="purple"/>
|
||||
<Label row="3" col="5" height="24" width="32" id="el-35" backgroundColor="purple"/>
|
||||
<Label row="3" col="6" height="24" width="32" id="el-36" backgroundColor="purple"/>
|
||||
<Label row="3" col="7" height="24" width="32" id="el-37" backgroundColor="purple"/>
|
||||
<Label row="3" col="8" height="24" width="32" id="el-38" backgroundColor="purple"/>
|
||||
<Label row="3" col="9" height="24" width="32" id="el-39" backgroundColor="purple"/>
|
||||
|
||||
<!-- 4 -->
|
||||
<Label row="4" col="0" height="24" width="32" id="el-40" backgroundColor="purple"/>
|
||||
<Label row="4" col="1" height="24" width="32" id="el-41" backgroundColor="purple"/>
|
||||
<Label row="4" col="2" height="24" width="32" id="el-42" backgroundColor="purple"/>
|
||||
<Label row="4" col="3" height="24" width="32" id="el-43" backgroundColor="purple"/>
|
||||
<Label row="4" col="4" height="24" width="32" id="el-44" backgroundColor="purple"/>
|
||||
<Label row="4" col="5" height="24" width="32" id="el-45" backgroundColor="purple"/>
|
||||
<Label row="4" col="6" height="24" width="32" id="el-46" backgroundColor="purple"/>
|
||||
<Label row="4" col="7" height="24" width="32" id="el-47" backgroundColor="purple"/>
|
||||
<Label row="4" col="8" height="24" width="32" id="el-48" backgroundColor="purple"/>
|
||||
<Label row="4" col="9" height="24" width="32" id="el-49" backgroundColor="purple"/>
|
||||
|
||||
<!-- 5 -->
|
||||
<Label row="5" col="0" height="24" width="32" id="el-50" backgroundColor="purple"/>
|
||||
<Label row="5" col="1" height="24" width="32" id="el-51" backgroundColor="purple"/>
|
||||
<Label row="5" col="2" height="24" width="32" id="el-52" backgroundColor="purple"/>
|
||||
<Label row="5" col="3" height="24" width="32" id="el-53" backgroundColor="purple"/>
|
||||
<Label row="5" col="4" height="24" width="32" id="el-54" backgroundColor="purple"/>
|
||||
<Label row="5" col="5" height="24" width="32" id="el-55" backgroundColor="purple"/>
|
||||
<Label row="5" col="6" height="24" width="32" id="el-56" backgroundColor="purple"/>
|
||||
<Label row="5" col="7" height="24" width="32" id="el-57" backgroundColor="purple"/>
|
||||
<Label row="5" col="8" height="24" width="32" id="el-58" backgroundColor="purple"/>
|
||||
<Label row="5" col="9" height="24" width="32" id="el-59" backgroundColor="purple"/>
|
||||
|
||||
<!-- 6 -->
|
||||
<Label row="6" col="0" height="24" width="32" id="el-60" backgroundColor="purple"/>
|
||||
<Label row="6" col="1" height="24" width="32" id="el-61" backgroundColor="purple"/>
|
||||
<Label row="6" col="2" height="24" width="32" id="el-62" backgroundColor="purple"/>
|
||||
<Label row="6" col="3" height="24" width="32" id="el-63" backgroundColor="purple"/>
|
||||
<Label row="6" col="4" height="24" width="32" id="el-64" backgroundColor="purple"/>
|
||||
<Label row="6" col="5" height="24" width="32" id="el-65" backgroundColor="purple"/>
|
||||
<Label row="6" col="6" height="24" width="32" id="el-66" backgroundColor="purple"/>
|
||||
<Label row="6" col="7" height="24" width="32" id="el-67" backgroundColor="purple"/>
|
||||
<Label row="6" col="8" height="24" width="32" id="el-68" backgroundColor="purple"/>
|
||||
<Label row="6" col="9" height="24" width="32" id="el-69" backgroundColor="purple"/>
|
||||
|
||||
<!-- 7 -->
|
||||
<Label row="7" col="0" height="24" width="32" id="el-70" backgroundColor="purple"/>
|
||||
<Label row="7" col="1" height="24" width="32" id="el-71" backgroundColor="purple"/>
|
||||
<Label row="7" col="2" height="24" width="32" id="el-72" backgroundColor="purple"/>
|
||||
<Label row="7" col="3" height="24" width="32" id="el-73" backgroundColor="purple"/>
|
||||
<Label row="7" col="4" height="24" width="32" id="el-74" backgroundColor="purple"/>
|
||||
<Label row="7" col="5" height="24" width="32" id="el-75" backgroundColor="purple"/>
|
||||
<Label row="7" col="6" height="24" width="32" id="el-76" backgroundColor="purple"/>
|
||||
<Label row="7" col="7" height="24" width="32" id="el-77" backgroundColor="purple"/>
|
||||
<Label row="7" col="8" height="24" width="32" id="el-78" backgroundColor="purple"/>
|
||||
<Label row="7" col="9" height="24" width="32" id="el-79" backgroundColor="purple"/>
|
||||
|
||||
<!-- 8 -->
|
||||
<Label row="8" col="0" height="24" width="32" id="el-80" backgroundColor="purple"/>
|
||||
<Label row="8" col="1" height="24" width="32" id="el-81" backgroundColor="purple"/>
|
||||
<Label row="8" col="2" height="24" width="32" id="el-82" backgroundColor="purple"/>
|
||||
<Label row="8" col="3" height="24" width="32" id="el-83" backgroundColor="purple"/>
|
||||
<Label row="8" col="4" height="24" width="32" id="el-84" backgroundColor="purple"/>
|
||||
<Label row="8" col="5" height="24" width="32" id="el-85" backgroundColor="purple"/>
|
||||
<Label row="8" col="6" height="24" width="32" id="el-86" backgroundColor="purple"/>
|
||||
<Label row="8" col="7" height="24" width="32" id="el-87" backgroundColor="purple"/>
|
||||
<Label row="8" col="8" height="24" width="32" id="el-88" backgroundColor="purple"/>
|
||||
<Label row="8" col="9" height="24" width="32" id="el-89" backgroundColor="purple"/>
|
||||
|
||||
<!-- 9 -->
|
||||
<Label row="9" col="0" height="24" width="32" id="el-90" backgroundColor="purple"/>
|
||||
<Label row="9" col="1" height="24" width="32" id="el-91" backgroundColor="purple"/>
|
||||
<Label row="9" col="2" height="24" width="32" id="el-92" backgroundColor="purple"/>
|
||||
<Label row="9" col="3" height="24" width="32" id="el-93" backgroundColor="purple"/>
|
||||
<Label row="9" col="4" height="24" width="32" id="el-94" backgroundColor="purple"/>
|
||||
<Label row="9" col="5" height="24" width="32" id="el-95" backgroundColor="purple"/>
|
||||
<Label row="9" col="6" height="24" width="32" id="el-96" backgroundColor="purple"/>
|
||||
<Label row="9" col="7" height="24" width="32" id="el-97" backgroundColor="purple"/>
|
||||
<Label row="9" col="8" height="24" width="32" id="el-98" backgroundColor="purple"/>
|
||||
<Label row="9" col="9" height="24" width="32" id="el-99" backgroundColor="purple"/>
|
||||
|
||||
</GridLayout>
|
||||
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
@@ -1,72 +0,0 @@
|
||||
import * as view from "tns-core-modules/ui/core/view";
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { SegmentedBar, SegmentedBarItem } from "tns-core-modules/ui/segmented-bar";
|
||||
import { Label } from "tns-core-modules/ui/label";
|
||||
|
||||
export function easeAnimate(args) {
|
||||
const clicked = args.object as Button;
|
||||
const page: pages.Page = clicked.page;
|
||||
const target = view.getViewById(page, "target") as Label;
|
||||
const select = view.getViewById(page, "select") as SegmentedBar;
|
||||
const item: SegmentedBarItem = select.items[select.selectedIndex];
|
||||
const easeType: string = clicked.text;
|
||||
const extent = 128;
|
||||
let duration = easeType === "spring" ? 800 : 500;
|
||||
let delay = easeType === "spring" ? 0 : 200;
|
||||
let animateKey: string = null;
|
||||
let animateValueTo: any = null;
|
||||
let animateValueFrom: any = null;
|
||||
|
||||
switch (item.title) {
|
||||
case "height":
|
||||
animateKey = "height";
|
||||
target.originX = target.originY = 0;
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extent;
|
||||
break;
|
||||
case "width":
|
||||
animateKey = "width";
|
||||
target.originX = target.originY = 0;
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extent;
|
||||
break;
|
||||
case "opacity":
|
||||
animateKey = "opacity";
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = 1;
|
||||
break;
|
||||
case "color":
|
||||
animateKey = "backgroundColor";
|
||||
animateValueTo = "blue";
|
||||
animateValueFrom = "purple";
|
||||
break;
|
||||
case "rotate":
|
||||
animateKey = "rotate";
|
||||
target.originX = target.originY = 0.5;
|
||||
animateValueTo = 180;
|
||||
animateValueFrom = 0;
|
||||
break;
|
||||
case "scale":
|
||||
animateKey = "scale";
|
||||
target.originX = target.originY = 0.5;
|
||||
animateValueTo = {x: 1.5, y: 1.5};
|
||||
animateValueFrom = {x: 1, y: 1};
|
||||
break;
|
||||
}
|
||||
target
|
||||
.animate({
|
||||
[animateKey]: animateValueTo,
|
||||
duration,
|
||||
curve: easeType
|
||||
})
|
||||
.then(() => {
|
||||
return target.animate({
|
||||
[animateKey]: animateValueFrom,
|
||||
delay,
|
||||
duration,
|
||||
curve: easeType
|
||||
});
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
<Page>
|
||||
<AbsoluteLayout>
|
||||
<GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
|
||||
|
||||
<Label row="0" colSpan="3" text="Animate"/>
|
||||
<SegmentedBar row="1" colSpan="3" id="select">
|
||||
<SegmentedBar.items>
|
||||
<SegmentedBarItem title="height"/>
|
||||
<SegmentedBarItem title="width"/>
|
||||
<SegmentedBarItem title="opacity"/>
|
||||
<SegmentedBarItem title="color"/>
|
||||
<SegmentedBarItem title="rotate"/>
|
||||
<SegmentedBarItem title="scale"/>
|
||||
</SegmentedBar.items>
|
||||
</SegmentedBar>
|
||||
|
||||
<Label row="2" colSpan="3" text="Easing"/>
|
||||
<Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
|
||||
<Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
|
||||
<Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
|
||||
<Button row="4" col="0" text="spring" tap="easeAnimate"/>
|
||||
<Button row="4" col="1" text="linear" tap="easeAnimate"/>
|
||||
<Button row="4" col="2" text="ease" tap="easeAnimate"/>
|
||||
</GridLayout>
|
||||
|
||||
<Label top="300" left="96" height="128" width="128"
|
||||
borderColor="purple" borderWidth="1"/>
|
||||
<Label top="300" left="96" height="128" width="128"
|
||||
id="target" backgroundColor="purple"/>
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
@@ -1,79 +0,0 @@
|
||||
import * as view from "tns-core-modules/ui/core/view";
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as platform from "tns-core-modules/platform";
|
||||
import { Animation } from "tns-core-modules/ui/animation";
|
||||
import { TextView } from "tns-core-modules/ui/text-view";
|
||||
import { isIOS } from "tns-core-modules/platform";
|
||||
import * as uiUtils from "tns-core-modules/ui/utils";
|
||||
|
||||
let toggle = false;
|
||||
|
||||
export function pageLoaded(args) {
|
||||
const page = args.object;
|
||||
const screenHeight = platform.screen.mainScreen.heightDIPs;
|
||||
const screenYCenter = (screenHeight / 2);
|
||||
page.bindingContext = {
|
||||
screenHeight,
|
||||
screenYCenter,
|
||||
detailsHeight: 96,
|
||||
summary: "Space! 🌌",
|
||||
ipsum: `Houston, Tranquillity Base here. The Eagle has landed.
|
||||
|
||||
For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.
|
||||
|
||||
As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.
|
||||
|
||||
What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.
|
||||
|
||||
Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.
|
||||
|
||||
NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.
|
||||
|
||||
Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next 10.
|
||||
|
||||
Science cuts two ways, of course; its products can be used for both good and evil. But there"s no turning back from science. The early warnings about technological dangers also come from science.
|
||||
|
||||
Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind.
|
||||
|
||||
When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!
|
||||
|
||||
http://spaceipsum.com`
|
||||
};
|
||||
}
|
||||
|
||||
export function theFinalFrontier(args) {
|
||||
const clicked = args.object as view.View;
|
||||
const page: pages.Page = clicked.page;
|
||||
const details = view.getViewById(page, "details") as TextView;
|
||||
const ctx = page.bindingContext;
|
||||
const detailHeaderHeight: number = ctx.detailsHeight;
|
||||
|
||||
let statusBar = 0;
|
||||
if (isIOS) {
|
||||
statusBar = uiUtils.ios.getStatusBarHeight();
|
||||
}
|
||||
|
||||
const textViewHeight: number = ctx.screenHeight - statusBar - detailHeaderHeight;
|
||||
const transitions = [
|
||||
{
|
||||
target: clicked,
|
||||
height: toggle ? "100%" : detailHeaderHeight,
|
||||
duration: 200,
|
||||
curve: "ease"
|
||||
},
|
||||
{
|
||||
target: details,
|
||||
opacity: toggle ? 0 : 1,
|
||||
height: textViewHeight,
|
||||
translate: {
|
||||
x: 0,
|
||||
y: toggle ? 50 : 0,
|
||||
},
|
||||
duration: 200,
|
||||
curve: "easeIn"
|
||||
}
|
||||
];
|
||||
const animationSet = new Animation(transitions, false);
|
||||
animationSet.play();
|
||||
toggle = !toggle;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<Page loaded="pageLoaded" backgroundColor="skyblue">
|
||||
<AbsoluteLayout height="100%" backgroundColor="gold">
|
||||
<TextView id="details"
|
||||
padding="12" paddingBottom="24"
|
||||
top="{{ detailsHeight }}" width="100%"
|
||||
text="{{ ipsum }}" fontSize="20"
|
||||
opacity="0" translateY="50" editable="false" backgroundColor="olive"/>
|
||||
<Label originY="0" height="100%" width="100%" fontSize="42"
|
||||
backgroundColor="MidnightBlue" color="white"
|
||||
textAlignment="center" verticalAlignment="center"
|
||||
tap="theFinalFrontier" text="{{ summary }}"/>
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Label } from "tns-core-modules/ui/label";
|
||||
|
||||
let toggle = false;
|
||||
|
||||
export function animateHeight(args) {
|
||||
const clicked = args.object as Label;
|
||||
clicked
|
||||
.animate({
|
||||
height: toggle ? 128 : "100%",
|
||||
duration: 200,
|
||||
curve: "easeInOut"
|
||||
})
|
||||
.then(() => {
|
||||
clicked.text = toggle ? "Cool." : "Tap here";
|
||||
});
|
||||
toggle = !toggle;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
<Page backgroundColor="skyblue">
|
||||
<AbsoluteLayout backgroundColor="gold">
|
||||
<Label originX="0" originY="0" top="0" left="0"
|
||||
height="128" fontSize="64px" color="white"
|
||||
textAlignment="center"
|
||||
text="Tap here"
|
||||
width="100%" backgroundColor="purple"
|
||||
tap="animateHeight"/>
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
@@ -1,12 +0,0 @@
|
||||
import * as view from "tns-core-modules/ui/core/view";
|
||||
|
||||
export function tapLabel(args) {
|
||||
const clicked: view.View = args.object;
|
||||
const graffiti = clicked as any;
|
||||
clicked.animate({
|
||||
height: graffiti.toggle ? 64 : 128,
|
||||
duration: 200,
|
||||
curve: "easeOut"
|
||||
});
|
||||
graffiti.toggle = !graffiti.toggle;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<Page backgroundColor="skyblue">
|
||||
<StackLayout row="1" verticalAlignment="top" backgroundColor="gold">
|
||||
<Label backgroundColor="darkblue" originY="0"
|
||||
tap="tapLabel"
|
||||
height="64" fontSize="32" color="skyblue" textAlignment="center"
|
||||
text="Click here"/>
|
||||
<Label backgroundColor="darkgreen" originY="0"
|
||||
tap="tapLabel"
|
||||
height="64" fontSize="32" color="lime" textAlignment="center"
|
||||
text="Or here"/>
|
||||
<Label backgroundColor="darkred" originY="0"
|
||||
tap="tapLabel"
|
||||
height="64" fontSize="32" color="pink" textAlignment="center"
|
||||
text="But NOT here"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,20 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { SubMainPageViewModel } from "../sub-main-page-view-model";
|
||||
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
|
||||
export function pageLoaded(args: EventData) {
|
||||
const page = <Page>args.object;
|
||||
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
|
||||
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
|
||||
}
|
||||
|
||||
export function loadExamples() {
|
||||
const examples = new Map<string, string>();
|
||||
examples.set("animation-curves", "animation/animation-curves-page");
|
||||
examples.set("animation-army-100", "animation/animation-army-100-page");
|
||||
examples.set("height-basic", "animation/height-basic-page");
|
||||
examples.set("layout-stack-height", "animation/layout-stack-height-page");
|
||||
examples.set("effect-summary-details", "animation/effect-summary-details-page");
|
||||
return examples;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<ScrollView orientation="vertical" row="1">
|
||||
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
@@ -1 +0,0 @@
|
||||
<Frame defaultPage="ui-tests-app/main-page" />
|
||||
@@ -1,23 +0,0 @@
|
||||
#app {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.ui-tests-app-issue-1639-red {
|
||||
color: red;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ui-tests-app-issue-1639-green {
|
||||
color: green;
|
||||
margin-left: 10;
|
||||
}
|
||||
|
||||
.ui-tests-app-issue-1639-blue {
|
||||
color: blue;
|
||||
margin-left: 20;
|
||||
}
|
||||
|
||||
.ui-tests-app-issue-1639-yellow {
|
||||
color: yellow;
|
||||
margin-left: 30;
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
console.log("####### ------ APP MODULES START ");
|
||||
|
||||
import * as application from "tns-core-modules/application";
|
||||
import * as trace from "tns-core-modules/trace";
|
||||
trace.addCategories(trace.categories.NativeLifecycle);
|
||||
trace.addCategories(trace.categories.Navigation);
|
||||
trace.addCategories(trace.categories.Transition);
|
||||
|
||||
trace.enable();
|
||||
|
||||
var countResume = 0;
|
||||
var countSuspend = 0;
|
||||
|
||||
application.on("displayed", args => {
|
||||
const uptime = global.android ? (<any>org).nativescript.Process.getUpTime : (<any>global).__tns_uptime;
|
||||
console.log("Startup time: " + uptime() + "ms.");
|
||||
});
|
||||
|
||||
application.on("uncaughtError", args => {
|
||||
const error = args.error;
|
||||
console.warn(error.message);
|
||||
if (error.nativeError) {
|
||||
console.warn("native error: " + error.nativeError);
|
||||
}
|
||||
});
|
||||
|
||||
application.on(application.launchEvent, function (args: application.LaunchEventData) {
|
||||
if (args.android) {
|
||||
// For Android applications, args.android is an android.content.Intent class.
|
||||
console.log("### Launched application with: " + args.android + ".");
|
||||
} else if (args.ios !== undefined) {
|
||||
// For iOS applications, args.ios is NSDictionary (launchOptions).
|
||||
console.log("### Launched application with: " + args.ios);
|
||||
}
|
||||
});
|
||||
|
||||
application.on(application.suspendEvent, function (args: application.ApplicationEventData) {
|
||||
if (args.android) {
|
||||
// For Android applications, args.android is an android activity class.
|
||||
console.log("#" + ++countSuspend + "# SuspendEvent Activity: " + args.android);
|
||||
} else if (args.ios) {
|
||||
// For iOS applications, args.ios is UIApplication.
|
||||
console.log("#" + ++countSuspend + "# SuspendEvent UIApplication: " + args.ios);
|
||||
}
|
||||
});
|
||||
|
||||
application.on(application.resumeEvent, function (args: application.ApplicationEventData) {
|
||||
if (args.android) {
|
||||
// For Android applications, args.android is an android activity class.
|
||||
console.log("#" + ++countResume + "# ResumeEvent Activity: " + args.android);
|
||||
} else if (args.ios) {
|
||||
// For iOS applications, args.ios is UIApplication.
|
||||
console.log("#" + ++countResume + "# ResumeEvent UIApplication: " + args.ios);
|
||||
}
|
||||
});
|
||||
|
||||
application.on(application.exitEvent, function (args: application.ApplicationEventData) {
|
||||
if (args.android) {
|
||||
// For Android applications, args.android is an android activity class.
|
||||
console.log("### ExitEvent Activity: " + args.android);
|
||||
} else if (args.ios) {
|
||||
// For iOS applications, args.ios is UIApplication.
|
||||
console.log("### ExitEvent UIApplication: " + args.ios);
|
||||
}
|
||||
});
|
||||
|
||||
application.on(application.lowMemoryEvent, function (args: application.ApplicationEventData) {
|
||||
if (args.android) {
|
||||
// For Android applications, args.android is an android activity class.
|
||||
console.log("### LowMemoryEvent Activity: " + args.android);
|
||||
} else if (args.ios) {
|
||||
// For iOS applications, args.ios is UIApplication.
|
||||
console.log("### LowMemoryEvent UIApplication: " + args.ios);
|
||||
}
|
||||
});
|
||||
|
||||
application.on(application.uncaughtErrorEvent, function (args: application.UnhandledErrorEventData) {
|
||||
console.log("### NativeScriptError: " + args.error);
|
||||
console.log("### nativeException: " + (<any>args.error).nativeException);
|
||||
console.log("### stackTrace: " + (<any>args.error).stackTrace);
|
||||
console.log("### stack: " + args.error.stack);
|
||||
});
|
||||
|
||||
application.on(application.discardedErrorEvent, function (args: application.DiscardedErrorEventData) {
|
||||
console.log("### [Discarded] NativeScriptError: " + args.error);
|
||||
console.log("### [Discarded] nativeException: " + (<any>args.error).nativeException);
|
||||
console.log("### [Discarded] stackTrace: " + (<any>args.error).stackTrace);
|
||||
console.log("### [Discarded] stack: " + args.error.stack);
|
||||
});
|
||||
|
||||
global.registerModule("ui-tests-app/app.css", () => require("~/ui-tests-app/app.css"));
|
||||
application.setCssFileName("ui-tests-app/app.css");
|
||||
application.run({ moduleName: "ui-tests-app/app-root" });
|
||||
@@ -1,80 +0,0 @@
|
||||
import * as buttonModule from "tns-core-modules/ui/button";
|
||||
import * as pageModule from "tns-core-modules/ui/page";
|
||||
import * as textFieldModule from "tns-core-modules/ui/text-field";
|
||||
import * as stackLayoutModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as observableModule from "tns-core-modules/data/observable";
|
||||
|
||||
export function createPage() {
|
||||
|
||||
var page = new pageModule.Page();
|
||||
var stack = new stackLayoutModule.StackLayout();
|
||||
var sourceOneWay = new observableModule.Observable();
|
||||
var sourceTwoWay = new observableModule.Observable();
|
||||
var targetOneWay = new textFieldModule.TextField();
|
||||
var targetTwoWay = new textFieldModule.TextField();
|
||||
var buttonOneWay = new buttonModule.Button();
|
||||
var buttonTwoWay = new buttonModule.Button();
|
||||
var buttonSetText = new buttonModule.Button();
|
||||
|
||||
targetOneWay.id = "textFieldOneWay";
|
||||
targetTwoWay.id = "textFieldTwoWay";
|
||||
buttonOneWay.id = "buttonOneWay";
|
||||
buttonTwoWay.id = "buttonTwoWay";
|
||||
buttonSetText.id = "buttonSetText";
|
||||
|
||||
targetOneWay.automationText = "textFieldOneWay";
|
||||
targetTwoWay.automationText = "textFieldTwoWay";
|
||||
buttonSetText.automationText = "buttonSetText";
|
||||
//buttonOneWay.automationText = "buttonOneWay";
|
||||
//buttonTwoWay.automationText = "buttonTwoWay";
|
||||
|
||||
buttonSetText.text = "SetText";
|
||||
buttonSetText.on(buttonModule.Button.tapEvent, function () {
|
||||
targetOneWay.text = "Test";
|
||||
targetTwoWay.text = "Test";
|
||||
});
|
||||
stack.addChild(buttonSetText);
|
||||
|
||||
// OneWay Binding
|
||||
var bindingOptionOneWay = {
|
||||
sourceProperty: "textSource",
|
||||
targetProperty: "text",
|
||||
twoWay: false
|
||||
};
|
||||
|
||||
targetOneWay.bind(bindingOptionOneWay, sourceOneWay);
|
||||
sourceOneWay.set("textSource", "OneWay");
|
||||
|
||||
buttonOneWay.on(buttonModule.Button.loadedEvent, function () {
|
||||
buttonOneWay.text = sourceOneWay.get("textSource");
|
||||
});
|
||||
buttonOneWay.on(buttonModule.Button.tapEvent, function () {
|
||||
buttonOneWay.text = sourceOneWay.get("textSource");
|
||||
});
|
||||
|
||||
stack.addChild(targetOneWay);
|
||||
stack.addChild(buttonOneWay);
|
||||
|
||||
// TwoWay Binding
|
||||
var bindingOptionTwoWay = {
|
||||
sourceProperty: "textSource",
|
||||
targetProperty: "text",
|
||||
twoWay: true
|
||||
};
|
||||
|
||||
targetTwoWay.bind(bindingOptionTwoWay, sourceTwoWay);
|
||||
sourceTwoWay.set("textSource", "TwoWay");
|
||||
|
||||
buttonTwoWay.on(buttonModule.Button.loadedEvent, function () {
|
||||
buttonTwoWay.text = sourceTwoWay.get("textSource");
|
||||
});
|
||||
buttonTwoWay.on(buttonModule.Button.tapEvent, function () {
|
||||
buttonTwoWay.text = sourceTwoWay.get("textSource");
|
||||
});
|
||||
|
||||
stack.addChild(targetTwoWay);
|
||||
stack.addChild(buttonTwoWay);
|
||||
|
||||
page.content = stack;
|
||||
return page;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { SubMainPageViewModel } from "../sub-main-page-view-model";
|
||||
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
|
||||
export function pageLoaded(args: EventData) {
|
||||
const page = <Page>args.object;
|
||||
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
|
||||
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
|
||||
}
|
||||
|
||||
export function loadExamples() {
|
||||
const examples = new Map<string, string>();
|
||||
examples.set("basics", "bindings/basics-page");
|
||||
examples.set("xmlbasics", "bindings/xmlbasics-page");
|
||||
|
||||
return examples;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<ScrollView orientation="vertical" row="1">
|
||||
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
@@ -1,42 +0,0 @@
|
||||
import * as buttonModule from "tns-core-modules/ui/button";
|
||||
import * as stackLayoutModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as textFieldModule from "tns-core-modules/ui/text-field";
|
||||
import * as observable from "tns-core-modules/data/observable";
|
||||
|
||||
export function stack0Loaded(args: observable.EventData) {
|
||||
var source = new observable.Observable();
|
||||
var stack0 = <stackLayoutModule.StackLayout>args.object;
|
||||
var target = stack0.getViewById<textFieldModule.TextField>("tf");
|
||||
var button = stack0.getViewById<textFieldModule.TextField>("btn");
|
||||
var bindingOptions = {
|
||||
sourceProperty: "textSource",
|
||||
targetProperty: "text"// ,
|
||||
// twoWay: true
|
||||
};
|
||||
target.bind(bindingOptions, source);
|
||||
source.set("textSource", "Text");
|
||||
|
||||
button.on(buttonModule.Button.tapEvent, function () {
|
||||
button.text = source.get("textSource");
|
||||
});
|
||||
}
|
||||
|
||||
export function stack1Loaded(args: observable.EventData) {
|
||||
var stack1 = <stackLayoutModule.StackLayout>args.object;
|
||||
stack1.bindingContext = { text: "Label" };
|
||||
}
|
||||
|
||||
export function stack2Loaded(args: observable.EventData) {
|
||||
var stack2 = <stackLayoutModule.StackLayout>args.object;
|
||||
stack2.bindingContext = {
|
||||
myProperty: "Button",
|
||||
myFunction: () => {
|
||||
console.log("### onTap event ###");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function stack3Loaded(args: observable.EventData) {
|
||||
var stack3 = <stackLayoutModule.StackLayout>args.object;
|
||||
stack3.bindingContext = { myItems: [{ text: "Label1" }, { text: "Label2" }] };
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
<Page>
|
||||
<StackLayout>
|
||||
<StackLayout loaded="stack0Loaded" orientation="horizontal">
|
||||
<TextField id="tf" automationText="tf" text="{{ textSource }}" width="150" />
|
||||
<Button id="btn" width="150" />
|
||||
</StackLayout>
|
||||
<StackLayout loaded="stack1Loaded">
|
||||
<Label id="label" automationText="label" text="{{ text }}" />
|
||||
</StackLayout>
|
||||
<StackLayout loaded="stack2Loaded">
|
||||
<Button id="button" automationText="button" text="{{ myProperty }}" tap="{{ myFunction }}" />
|
||||
</StackLayout>
|
||||
<StackLayout loaded="stack3Loaded">
|
||||
<ListView id="listView" automationText="listView" items="{{ myItems }}">
|
||||
<ListView.itemTemplate>
|
||||
<Label id="item" text="{{ text }}"/>
|
||||
</ListView.itemTemplate>
|
||||
</ListView>
|
||||
</StackLayout>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -1,24 +0,0 @@
|
||||
<Page class="page">
|
||||
|
||||
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<BottomNavigation style="background-color: green;">
|
||||
<TabStrip>
|
||||
<TabStripItem title="First"></TabStripItem>
|
||||
<TabStripItem title="Second"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation>
|
||||
</Page>
|
||||
@@ -1,19 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { SubMainPageViewModel } from "../sub-main-page-view-model";
|
||||
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
|
||||
|
||||
export function goToFirst(args: EventData) {
|
||||
const page = <Page>(<any>args.object).page;
|
||||
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
|
||||
|
||||
bottomNav.selectedIndex = 0;
|
||||
}
|
||||
|
||||
export function goToSecond(args: EventData) {
|
||||
const page = <Page>(<any>args.object).page;
|
||||
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
|
||||
|
||||
bottomNav.selectedIndex = 1;
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
<Page>
|
||||
|
||||
<ActionBar title="BottomNavigation" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<!-- w/o TabStrip -->
|
||||
<!-- <BottomNavigation>
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="First View"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Second View"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation> -->
|
||||
|
||||
<!-- w/ TabStrip -->
|
||||
<BottomNavigation id="bottomNav">
|
||||
<TabStrip>
|
||||
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem>
|
||||
<!-- <Image src="res://icon" /> -->
|
||||
<Label text="News" />
|
||||
</TabStripItem>
|
||||
<TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem>
|
||||
<!-- <Image src="res://icon" /> -->
|
||||
<Label text="Places" />
|
||||
</TabStripItem>
|
||||
<TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<StackLayout>
|
||||
<Label text="First View"/>
|
||||
<Button tap="goToSecond" text="go to second" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<StackLayout>
|
||||
<Label text="Second View"/>
|
||||
<Button tap="goToFirst" text="go to first" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<StackLayout>
|
||||
<Label text="First View"/>
|
||||
<Button tap="goToSecond" text="go to second" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<StackLayout>
|
||||
<Label text="Second View"/>
|
||||
<Button tap="goToFirst" text="go to first" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<StackLayout>
|
||||
<Label text="First View"/>
|
||||
<Button tap="goToSecond" text="go to second" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation>
|
||||
|
||||
<!-- =============================================================================================== -->
|
||||
|
||||
<!-- Bottom Bar with TabStrip -->
|
||||
<!-- <BottomNavigationBar>
|
||||
<TabStrip>
|
||||
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem>
|
||||
<Image src="res://icon" />
|
||||
<Label text="Second Tab" />
|
||||
</TabStripItem>
|
||||
</TabStrip>
|
||||
</BottomNavigationBar> -->
|
||||
|
||||
<!-- Bottom Bar w/o TabStrip -->
|
||||
<!-- <BottomNavigationBar>
|
||||
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem>
|
||||
<Image src="res://icon" />
|
||||
<Label text="Second Tab" />
|
||||
</TabStripItem>
|
||||
</BottomNavigationBar> -->
|
||||
</Page>
|
||||
@@ -1,23 +0,0 @@
|
||||
<Page class="page">
|
||||
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<BottomNavigation style="color: green;">
|
||||
<TabStrip>
|
||||
<TabStripItem title="First"></TabStripItem>
|
||||
<TabStripItem title="Second"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation>
|
||||
</Page>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
|
||||
|
||||
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
|
||||
const bottomNav = args.object as BottomNavigation;
|
||||
|
||||
const newItem = bottomNav.tabStrip.items[args.newIndex];
|
||||
if (newItem) {
|
||||
newItem.iconSource = "res://icon";
|
||||
}
|
||||
|
||||
const oldItem = bottomNav.tabStrip.items[args.oldIndex];
|
||||
if (oldItem) {
|
||||
oldItem.iconSource = "res://testlogo";
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
|
||||
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
|
||||
<TabStrip>
|
||||
<TabStripItem iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem iconSource="res://testlogo"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="first tab"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="second tab"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation>
|
||||
</Page>
|
||||
@@ -1,30 +0,0 @@
|
||||
<Page class="page">
|
||||
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<BottomNavigation>
|
||||
<TabStrip>
|
||||
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
|
||||
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
|
||||
<TabStripItem title="Title"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation>
|
||||
</Page>
|
||||
@@ -1,27 +0,0 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
|
||||
|
||||
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<BottomNavigation>
|
||||
<TabStrip>
|
||||
<TabStripItem title="Tab1"></TabStripItem>
|
||||
<TabStripItem title="Tab2"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout rows="*, auto" columns="*">
|
||||
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
|
||||
<StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout rows="*, auto" columns="*">
|
||||
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
|
||||
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation>
|
||||
|
||||
</Page>
|
||||
@@ -1,22 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { SubMainPageViewModel } from "../sub-main-page-view-model";
|
||||
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
|
||||
export function pageLoaded(args: EventData) {
|
||||
const page = <Page>args.object;
|
||||
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
|
||||
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
|
||||
}
|
||||
|
||||
export function loadExamples() {
|
||||
const examples = new Map<string, string>();
|
||||
examples.set("bottom-navigation", "bottom-navigation/bottom-navigation");
|
||||
examples.set("issue-5470", "bottom-navigation/issue-5470");
|
||||
examples.set("background-color", "bottom-navigation/background-color");
|
||||
examples.set("color", "bottom-navigation/color");
|
||||
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement");
|
||||
examples.set("icon-change", "bottom-navigation/icon-change");
|
||||
|
||||
return examples;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<ScrollView orientation="vertical" row="1">
|
||||
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
@@ -1,13 +0,0 @@
|
||||
import * as view from "tns-core-modules/ui/core/view";
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
|
||||
export function applyTap(args) {
|
||||
var page = <pages.Page>(<view.View>args.object).page;
|
||||
var css = "#test-element { " + args.object.tag + " }";
|
||||
page.css = css;
|
||||
}
|
||||
|
||||
export function resetTap(args) {
|
||||
var page = <pages.Page>(<view.View>args.object).page;
|
||||
page.css = "";
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
<Page>
|
||||
<GridLayout rows="240, *">
|
||||
<GridLayout automationText="test-element" id="test-element" width="290" iosOverflowSafeArea="false"></GridLayout>
|
||||
<WrapLayout row="1">
|
||||
<Button width="40" height="40" text="r" tap="resetTap"/>
|
||||
|
||||
<!-- Background and Border -->
|
||||
<Button width="40" height="40" text="1" tap="applyTap" tag="margin: 20; background-color: lightgreen;"/>
|
||||
<Button width="40" height="40" text="21" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 20; border-width: 40;"/>
|
||||
<Button width="40" height="40" text="22" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 40;"/>
|
||||
<Button width="40" height="40" text="23" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 20;"/>
|
||||
|
||||
<!-- Repeat -->
|
||||
<Button width="40" height="40" text="31" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png');"/>
|
||||
<Button width="40" height="40" text="32" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:repeat-y;"/>
|
||||
<Button width="40" height="40" text="33" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:repeat-x;"/>
|
||||
|
||||
<!-- Position -->
|
||||
<Button width="40" height="40" text="41" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat;"/>
|
||||
<Button width="40" height="40" text="42" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: right top;"/>
|
||||
<Button width="40" height="40" text="43" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
|
||||
<Button width="40" height="40" text="44" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: left bottom;"/>
|
||||
<Button width="40" height="40" text="45" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
|
||||
<Button width="40" height="40" text="46" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: 20 80;"/>
|
||||
<Button width="40" height="40" text="47" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: -10 20;"/>
|
||||
<Button width="40" height="40" text="48" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: 10 -20;"/>
|
||||
<Button width="40" height="40" text="49" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: -10 -20;"/>
|
||||
<Button width="40" height="40" text="50" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: center;"/>
|
||||
<Button width="40" height="40" text="51" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: left;"/>
|
||||
<Button width="40" height="40" text="52" tap="applyTap" tag="margin: 20; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: bottom;"/>
|
||||
|
||||
<!-- Size -->
|
||||
<Button width="40" height="40" text="61" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100px 100px;"/>
|
||||
<Button width="40" height="40" text="62" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
|
||||
<Button width="40" height="40" text="63" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
|
||||
<Button width="40" height="40" text="64" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
|
||||
|
||||
<!-- All -->
|
||||
<Button width="40" height="40" text="71" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: lightpink;"/>
|
||||
<Button width="40" height="40" text="72" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:repeat-y; background-position: 80 20; background-size: 50 25; border-radius: 20; border-width: 4; border-color: lightpink; opacity: 0.5;"/>
|
||||
|
||||
<!-- Antialiasing -->
|
||||
<Button width="40" height="40" text="73" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:repeat-x; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
|
||||
<Button width="40" height="40" text="74" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:repeat-y; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
|
||||
<Button width="40" height="40" text="75" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:repeat; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
|
||||
<Button width="40" height="40" text="76" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
|
||||
<Button width="40" height="40" text="77" tap="applyTap" tag="margin: 20; background-color: #FF00FF00; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: -15% -15%; background-size: 50% 50%; border-radius: 20; border-width: 10; border-color: #66FF0000;"/>
|
||||
<Button width="40" height="40" text="78" tap="applyTap" tag="margin: 20; background-color: #FF00FF00; background-image: url('~/ui-tests-app/resources/images/test2.png'); background-repeat:no-repeat; background-position: -15% -15%; background-size: 50% 50%; border-width: 10; border-color: #66FF0000;"/>
|
||||
</WrapLayout>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
@@ -1,13 +0,0 @@
|
||||
StackLayout {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
Button {
|
||||
font-size: 8;
|
||||
width: 70;
|
||||
height: 40;
|
||||
}
|
||||
|
||||
TextView {
|
||||
font-size: 8;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { View } from "tns-core-modules/ui/core/view";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { Color } from "tns-core-modules/color";
|
||||
import { TextView } from "tns-core-modules/ui/text-view";
|
||||
import { ScrollView } from "tns-core-modules/ui/scroll-view";
|
||||
|
||||
let red = new Color("red");
|
||||
let green = new Color("green");
|
||||
|
||||
export function onToggle(args: EventData) {
|
||||
let button = <Button>args.object;
|
||||
let target = button.page.getViewById<View>("target");
|
||||
let debugConsole = button.page.getViewById<TextView>("debugConsole");
|
||||
let scrollView = button.page.getViewById<ScrollView>("scrollView");
|
||||
|
||||
if (button.text === "Color") {
|
||||
target[button.id] = target[button.id] ? undefined : red;
|
||||
debugConsole.text += `> border-color: ${target.borderColor}\n`;
|
||||
}
|
||||
else if (button.text === "Width") {
|
||||
target[button.id] = target[button.id] ? 0 : 10;
|
||||
debugConsole.text += `> border-width: ${target.borderWidth}\n`;
|
||||
}
|
||||
else if (button.text === "Radius") {
|
||||
target[button.id] = target[button.id] ? 0 : 10;
|
||||
debugConsole.text += `> border-radius: ${target.borderRadius}\n`;
|
||||
}
|
||||
else if (button.text === "BGColor") {
|
||||
target.backgroundColor = target.backgroundColor ? undefined : green;
|
||||
debugConsole.text += `> background-color: ${target.backgroundColor}\n`;
|
||||
}
|
||||
else if (button.text === "BGImage") {
|
||||
target.backgroundImage = target.backgroundImage ? undefined : `~/ui-tests-app/resources/images/test2.png`;
|
||||
debugConsole.text += `> background-image: ${target.backgroundImage}\n`;
|
||||
}
|
||||
else if (button.text === "BGGradient") {
|
||||
const gradient = "linear-gradient(to right, purple, red)";
|
||||
target.backgroundImage = typeof target.backgroundImage === "object" ? undefined : gradient;
|
||||
debugConsole.text += `> background-image: ${gradient} \n`;
|
||||
}
|
||||
|
||||
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
<Page>
|
||||
<GridLayout rows="*,*,*,auto" columns="*,*,*">
|
||||
<StackLayout id="top-left" class="button-container" row="0" col="0">
|
||||
<Button text="Radius" id="borderTopLeftRadius" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="top" class="button-container" row="0" col="1">
|
||||
<Button text="Color" id="borderTopColor" tap="onToggle"/>
|
||||
<Button text="Width" id="borderTopWidth" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="top-right" class="button-container" row="0" col="2">
|
||||
<Button text="Radius" id="borderTopRightRadius" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="left" class="button-container" row="1" col="0">
|
||||
<Button text="Color" id="borderLeftColor" tap="onToggle"/>
|
||||
<Button text="Width" id="borderLeftWidth" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="target" row="1" col="1">
|
||||
<Button text="BGColor" tap="onToggle"/>
|
||||
<Button text="BGImage" tap="onToggle"/>
|
||||
<Button text="BGGradient" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="right" class="button-container" row="1" col="2">
|
||||
<Button text="Color" id="borderRightColor" tap="onToggle"/>
|
||||
<Button text="Width" id="borderRightWidth" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="bottom-left" class="button-container" row="2" col="0">
|
||||
<Button text="Radius" id="borderBottomLeftRadius" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="bottom" class="button-container" row="2" col="1">
|
||||
<Button text="Color" id="borderBottomColor" tap="onToggle"/>
|
||||
<Button text="Width" id="borderBottomWidth" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<StackLayout id="bottom-right" class="button-container" row="2" col="2">
|
||||
<Button text="Radius" id="borderBottomRightRadius" tap="onToggle"/>
|
||||
</StackLayout>
|
||||
<ScrollView id="scrollView" row="3" col="0" colSpan="3" height="200">
|
||||
<TextView id="debugConsole" text=""/>
|
||||
</ScrollView>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
@@ -1,13 +0,0 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar title="{{ exampleName }}">
|
||||
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<GridLayout rows="*,*,*,*">
|
||||
<Button text="This a test of a wrapping button [CENTER]" textWrap="true" style="text-align:center; width:100" />
|
||||
<Button row="1" text="This a test of a wrapping button [RIGHT]" textWrap="true" style="text-align:right;width:100" />
|
||||
<Button row="2" text="This a test of a wrapping button [LEFT]" textWrap="true" style="text-align:left;width:100" />
|
||||
<Button row="3" text=" This a test of a wrapping button [CENTER ICON]" textWrap="true" style="text-align:center;width:100" />
|
||||
</GridLayout>
|
||||
</Page>
|
||||
@@ -1,78 +0,0 @@
|
||||
Button {
|
||||
font-size: 6;
|
||||
width: 80;
|
||||
height: 80;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#s0 {
|
||||
border-width: 5;
|
||||
}
|
||||
|
||||
#s1 {
|
||||
border-width: 5; border-color: red;
|
||||
}
|
||||
|
||||
#s2 {
|
||||
border-width: 5; border-color: red red red green;
|
||||
}
|
||||
|
||||
#s3 {
|
||||
border-width: 5; border-color: red; border-radius: 5;
|
||||
}
|
||||
|
||||
#s4 {
|
||||
border-width: 5; border-color: red; border-radius: 50;
|
||||
}
|
||||
|
||||
#s5 {
|
||||
border-width: 5 10 15 20; border-color: red;
|
||||
}
|
||||
|
||||
#s6 {
|
||||
border-width: 5; border-color: red green blue yellow;
|
||||
}
|
||||
|
||||
#s7 {
|
||||
border-width: 5 10 15 20; border-color: red green blue yellow;
|
||||
}
|
||||
|
||||
#s8 {
|
||||
border-width: 5 10; border-color: red green;
|
||||
}
|
||||
|
||||
#s9 {
|
||||
border-width: 15 10 5; border-color: red green blue;
|
||||
}
|
||||
|
||||
#s10 {
|
||||
android-elevation: 0; border-width: 5 0; border-color: black;
|
||||
}
|
||||
|
||||
#s11 {
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
#s12 {
|
||||
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
|
||||
}
|
||||
|
||||
#s13 {
|
||||
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
|
||||
}
|
||||
|
||||
#s14 {
|
||||
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
|
||||
}
|
||||
|
||||
#s15 {
|
||||
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/resources/images/test2.png');
|
||||
}
|
||||
|
||||
#s16 {
|
||||
border-width: 5; border-color: red; padding: 5;
|
||||
}
|
||||
|
||||
#s17 {
|
||||
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
<Page>
|
||||
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
|
||||
<Button id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
|
||||
<Button id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
|
||||
<Button id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
|
||||
<Button id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
|
||||
<Button id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
|
||||
<Button id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
|
||||
<Button id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
|
||||
<Button id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
|
||||
<Button id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
|
||||
<Button id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
|
||||
<Button id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
|
||||
<Button id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
|
||||
<Button id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
|
||||
<Button id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
|
||||
<Button id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
|
||||
<Button id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/resources/images/test2.png');"/>
|
||||
<Button id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
|
||||
<Button id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
@@ -1,7 +0,0 @@
|
||||
.btn {
|
||||
font-size: 18;
|
||||
}
|
||||
|
||||
.btn:highlighted {
|
||||
background-color: red
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user