mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 11:42:04 +08:00
Remove gallery app and include new tests in uitests app (#4679)
This commit is contained in:
SvetoslavTsenov
Binary file not shown.
|
Before Width: | Height: | Size: 311 B |
@ -1,58 +0,0 @@
|
|||||||
@keyframes intro {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-100, 0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes outro {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-100, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro {
|
|
||||||
animation-name: intro;
|
|
||||||
animation-duration: 3.0;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-iteration-count: 1;
|
|
||||||
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
||||||
}
|
|
||||||
.outro {
|
|
||||||
animation-name: outro;
|
|
||||||
animation-duration: 3.0;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-iteration-count: 1;
|
|
||||||
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gone {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-100, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes play {
|
|
||||||
0% { transform: translate(0, 0); }
|
|
||||||
33% { transform: translate(100, 0); }
|
|
||||||
66% { transform: translate(100, 100); }
|
|
||||||
100% { transform: translate(0, 100); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.idle {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
.play {
|
|
||||||
animation-name: play;
|
|
||||||
animation-duration: 3.0;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-iteration-count: 1;
|
|
||||||
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { View, EventData } from "tns-core-modules/ui/core/view";
|
|
||||||
|
|
||||||
export function setClass(args: EventData) {
|
|
||||||
const btn = (<View & { tag: any }>args.object);
|
|
||||||
const img = btn.page.getViewById<View>("img");
|
|
||||||
img.className = btn.tag;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setImg2Class(args: EventData) {
|
|
||||||
const btn = (<View & { tag: any }>args.object);
|
|
||||||
const img2 = btn.page.getViewById<View>("img2");
|
|
||||||
img2.className = btn.tag;
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
|
|
||||||
<StackLayout orientation="vertical">
|
|
||||||
<Button text="class: gone" tag="gone" tap="setClass" />
|
|
||||||
<Button text="class: intro" tag="intro" tap="setClass" />
|
|
||||||
<Button text="class: outro" tag="outro" tap="setClass" />
|
|
||||||
<Button text="clear class" tag="none" tap="setClass" />
|
|
||||||
|
|
||||||
<GridLayout horizontalAlignment="center" verticalAlignment="middle" backgroundColor="blue" width="150" height="50">
|
|
||||||
<GridLayout id="img" class="gone" backgroundColor="green" width="50" height="50" horizontalAlignment="right" />
|
|
||||||
</GridLayout>
|
|
||||||
|
|
||||||
<Button text="class: idle" tag="idle" tap="setImg2Class" />
|
|
||||||
<Button text="class: play" tag="play" tap="setImg2Class" />
|
|
||||||
<GridLayout horizontalAlignment="center" verticalAlignment="middle" backgroundColor="gray" width="150" height="150">
|
|
||||||
<GridLayout id="img2" class="idle" backgroundColor="green" width="50" height="50" horizontalAlignment="left" verticalAlignment="top" />
|
|
||||||
</GridLayout>
|
|
||||||
</StackLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,208 +0,0 @@
|
|||||||
import * as observable from "tns-core-modules/data/observable";
|
|
||||||
import * as pages from "tns-core-modules/ui/page";
|
|
||||||
import * as buttonModule from "tns-core-modules/ui/button";
|
|
||||||
import * as abs from "tns-core-modules/ui/layouts/absolute-layout";
|
|
||||||
import * as animationModule from "tns-core-modules/ui/animation";
|
|
||||||
import * as colorModule from "tns-core-modules/color";
|
|
||||||
import * as enums from "tns-core-modules/ui/enums";
|
|
||||||
import * as frame from "tns-core-modules/ui/frame";
|
|
||||||
|
|
||||||
export class ViewModel extends observable.Observable {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
this._duration = 3000;
|
|
||||||
this._iterations = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
private _playSequentially: boolean;
|
|
||||||
get playSequentially(): boolean {
|
|
||||||
return this._playSequentially;
|
|
||||||
}
|
|
||||||
set playSequentially(value: boolean) {
|
|
||||||
this._playSequentially = value;
|
|
||||||
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "playSequentially", value: value });
|
|
||||||
}
|
|
||||||
|
|
||||||
private _duration: number;
|
|
||||||
get duration(): number {
|
|
||||||
return this._duration;
|
|
||||||
}
|
|
||||||
set duration(value: number) {
|
|
||||||
this._duration = value;
|
|
||||||
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "duration", value: value });
|
|
||||||
}
|
|
||||||
|
|
||||||
private _iterations: number;
|
|
||||||
get iterations(): number {
|
|
||||||
return this._iterations;
|
|
||||||
}
|
|
||||||
set iterations(value: number) {
|
|
||||||
this._iterations = value;
|
|
||||||
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "iterations", value: value });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var vm = new ViewModel();
|
|
||||||
|
|
||||||
var page: pages.Page;
|
|
||||||
var panel: abs.AbsoluteLayout;
|
|
||||||
var button1: buttonModule.Button;
|
|
||||||
var button2: buttonModule.Button;
|
|
||||||
var button3: buttonModule.Button;
|
|
||||||
var buttonAnimation: animationModule.Animation;
|
|
||||||
var panelAnimation: animationModule.Animation;
|
|
||||||
|
|
||||||
export function pageLoaded(args: observable.EventData) {
|
|
||||||
page = <pages.Page>args.object;
|
|
||||||
page.bindingContext = vm;
|
|
||||||
panel = page.getViewById<abs.AbsoluteLayout>("panel1");
|
|
||||||
button1 = page.getViewById<buttonModule.Button>("button1");
|
|
||||||
button2 = page.getViewById<buttonModule.Button>("button2");
|
|
||||||
button3 = page.getViewById<buttonModule.Button>("button3");
|
|
||||||
|
|
||||||
// trace.enable();
|
|
||||||
// trace.addCategories(trace.categories.concat(trace.categories.Animation));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onSlideOut(args: observable.EventData) {
|
|
||||||
console.log("onSlideOut");
|
|
||||||
var curve = enums.AnimationCurve.easeOut;
|
|
||||||
|
|
||||||
var buttonAnimations = [
|
|
||||||
{ target: button1, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
|
|
||||||
{ target: button2, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: vm.duration, iterations: vm.iterations, curve: curve },
|
|
||||||
{ target: button3, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: vm.duration * 2, iterations: vm.iterations, curve: curve },
|
|
||||||
]
|
|
||||||
buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
|
|
||||||
|
|
||||||
panelAnimation = panel.createAnimation({ opacity: 0, scale: { x: 0.5, y: 0.5 }, rotate: -360, backgroundColor: new colorModule.Color("red"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
|
|
||||||
|
|
||||||
buttonAnimation.play()
|
|
||||||
.then(() => panelAnimation.play())
|
|
||||||
.catch((e) => console.log(e.message));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onSlideIn(args: observable.EventData) {
|
|
||||||
console.log("onSlideIn");
|
|
||||||
var curve = enums.AnimationCurve.easeIn;
|
|
||||||
|
|
||||||
panelAnimation = panel.createAnimation({ opacity: 1, scale: { x: 1, y: 1 }, rotate: 0, backgroundColor: new colorModule.Color("yellow"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
|
|
||||||
|
|
||||||
var buttonAnimations = [
|
|
||||||
{ target: button3, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
|
|
||||||
{ target: button2, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: vm.duration, iterations: vm.iterations, curve: curve },
|
|
||||||
{ target: button1, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: vm.duration * 2, iterations: vm.iterations, curve: curve },
|
|
||||||
]
|
|
||||||
buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
|
|
||||||
|
|
||||||
panelAnimation.play()
|
|
||||||
.then(() => buttonAnimation.play())
|
|
||||||
.catch((e) => console.log(e.message));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onCancel(args: observable.EventData) {
|
|
||||||
console.log("onCancel");
|
|
||||||
if (panelAnimation && panelAnimation.isPlaying) {
|
|
||||||
panelAnimation.cancel();
|
|
||||||
}
|
|
||||||
if (buttonAnimation && buttonAnimation.isPlaying) {
|
|
||||||
buttonAnimation.cancel();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onTap(args: observable.EventData) {
|
|
||||||
console.log((<any>args.object).text);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onSingle(args: observable.EventData) {
|
|
||||||
console.log("onSingle");
|
|
||||||
button1.animate({
|
|
||||||
opacity: 0.75,
|
|
||||||
backgroundColor: new colorModule.Color("Red"),
|
|
||||||
translate: { x: 100, y: 100 },
|
|
||||||
scale: { x: 2, y: 2 },
|
|
||||||
rotate: 180,
|
|
||||||
duration: vm.duration,
|
|
||||||
delay: 0,
|
|
||||||
iterations: vm.iterations,
|
|
||||||
curve: enums.AnimationCurve.linear,
|
|
||||||
})
|
|
||||||
.then(() => console.log("Animation finished"))
|
|
||||||
.catch((e) => console.log(e.message));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onSequence(args: observable.EventData) {
|
|
||||||
console.log("onSequence");
|
|
||||||
|
|
||||||
button3.animate({
|
|
||||||
translate: { x: 80, y: -40 },
|
|
||||||
scale: { x: 0.9, y: 0.3 },
|
|
||||||
rotate: 25,
|
|
||||||
duration: 1000
|
|
||||||
})
|
|
||||||
.then(() => button3.animate({
|
|
||||||
translate: { x: 0, y: -80 },
|
|
||||||
scale: { x: 0.5, y: 0.5 },
|
|
||||||
rotate: -25,
|
|
||||||
duration: 1000
|
|
||||||
}))
|
|
||||||
.then(() => button3.animate({
|
|
||||||
translate: { x: -80, y: -40 },
|
|
||||||
scale: { x: 0.5, y: 0.9 },
|
|
||||||
rotate: 45,
|
|
||||||
duration: 1000
|
|
||||||
}))
|
|
||||||
.then(() => button3.animate({
|
|
||||||
translate: { x: 0, y: 0 },
|
|
||||||
scale: { x: 1, y: 1 },
|
|
||||||
rotate: 0,
|
|
||||||
duration: 1000
|
|
||||||
}))
|
|
||||||
.then(() => console.log("Animation finished"))
|
|
||||||
.catch((e) => console.log(e.message));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onInterrupted(args: observable.EventData) {
|
|
||||||
console.log("onInterrupt");
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
button3.animate({
|
|
||||||
translate: { x: 80, y: -40 },
|
|
||||||
scale: { x: 0.9, y: 0.3 },
|
|
||||||
rotate: 25,
|
|
||||||
duration: 1000
|
|
||||||
});
|
|
||||||
}, 700 * 0);
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
button3.animate({
|
|
||||||
translate: { x: 0, y: -80 },
|
|
||||||
scale: { x: 0.5, y: 0.5 },
|
|
||||||
rotate: -25,
|
|
||||||
duration: 1000
|
|
||||||
})
|
|
||||||
}, 700 * 1);
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
button3.animate({
|
|
||||||
translate: { x: -80, y: -40 },
|
|
||||||
scale: { x: 0.5, y: 0.9 },
|
|
||||||
rotate: 45,
|
|
||||||
duration: 1000
|
|
||||||
})
|
|
||||||
}, 700 * 2);
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
button3.animate({
|
|
||||||
translate: { x: 0, y: 0 },
|
|
||||||
scale: { x: 1, y: 1 },
|
|
||||||
rotate: 0,
|
|
||||||
duration: 1000
|
|
||||||
})
|
|
||||||
}, 700 * 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onOpacity(args: observable.EventData) {
|
|
||||||
frame.topmost().navigate("./opacity");
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
|
|
||||||
<StackLayout orientation="vertical">
|
|
||||||
<StackLayout orientation="vertical" backgroundColor="LightGray" paddingTop="5" paddingBottom="5">
|
|
||||||
|
|
||||||
<Label text="{{ duration, 'Duration: ' + duration + ' ms' }}" width="180" />
|
|
||||||
<Slider minValue="0" maxValue="10000" value="{{ duration }}" margin="0 15" />
|
|
||||||
|
|
||||||
<Label text="{{ iterations, 'Iterations: ' + iterations + ' times' }}" width="180" />
|
|
||||||
<Slider minValue="0" maxValue="10" value="{{ iterations }}" margin="0 15" />
|
|
||||||
|
|
||||||
<StackLayout orientation="horizontal" horizontalAlignment="center">
|
|
||||||
<Label text="Play Sequentially?"/>
|
|
||||||
<Switch marginLeft="10" checked="{{ playSequentially }}"/>
|
|
||||||
</StackLayout>
|
|
||||||
|
|
||||||
<StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">
|
|
||||||
<Button text="Out" tap="onSlideOut" width="40" marginLeft="5" marginRight="5" />
|
|
||||||
<Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
|
|
||||||
<Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
|
|
||||||
<Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
|
|
||||||
</StackLayout>
|
|
||||||
|
|
||||||
<StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>
|
|
||||||
<Button text="Sequence" width="80" marginLeft="5" marginRight="5" tap="onSequence" />
|
|
||||||
<Button text="Interrupted" width="80" marginLeft="5" marginRight="5" tap="onInterrupted" />
|
|
||||||
</StackLayout>
|
|
||||||
|
|
||||||
</StackLayout>
|
|
||||||
<AbsoluteLayout id="panel1" backgroundColor="Yellow" width="300" height="190" clipToBounds="true" marginTop="10">
|
|
||||||
<Button id="button1" text="Button 1" backgroundColor="White" width="180" height="50" left="60" top="10" tap="onTap" borderWidth="1" borderColor="red" />
|
|
||||||
<Button id="button2" text="Button 2" backgroundColor="White" width="180" height="50" left="60" top="70" tap="onTap" borderWidth="1" borderColor="red" />
|
|
||||||
<Button id="button3" text="Button 3" backgroundColor="White" width="180" height="50" left="60" top="130" tap="onTap" borderWidth="1" borderColor="red" />
|
|
||||||
</AbsoluteLayout>
|
|
||||||
</StackLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
.complex {
|
|
||||||
width: 45;
|
|
||||||
height: 45;
|
|
||||||
margin: 1;
|
|
||||||
background-image: url('~/gallery-app/animations/bkg.png');
|
|
||||||
background-repeat:repeat-x;
|
|
||||||
background-position: 20% 80%;
|
|
||||||
background-color: lightyellow;
|
|
||||||
background-size: 25% 50%;
|
|
||||||
border-radius: 20;
|
|
||||||
border-width: 4;
|
|
||||||
border-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple {
|
|
||||||
width: 45;
|
|
||||||
height: 45;
|
|
||||||
margin: 1;
|
|
||||||
border-radius: 20;
|
|
||||||
background-color: lightgreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
.none {
|
|
||||||
width: 45;
|
|
||||||
height: 45;
|
|
||||||
margin: 1;
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import observable = require("tns-core-modules/data/observable");
|
|
||||||
import pages = require("tns-core-modules/ui/page");
|
|
||||||
import view = require("tns-core-modules/ui/core/view");
|
|
||||||
import animationModule = require("tns-core-modules/ui/animation");
|
|
||||||
import slider = require("tns-core-modules/ui/slider");
|
|
||||||
import wrapLayout = require("tns-core-modules/ui/layouts/wrap-layout");
|
|
||||||
|
|
||||||
var page: pages.Page;
|
|
||||||
var opacitySlider: slider.Slider;
|
|
||||||
var container: wrapLayout.WrapLayout;
|
|
||||||
|
|
||||||
export function pageLoaded(args: observable.EventData) {
|
|
||||||
page = <pages.Page>args.object;
|
|
||||||
opacitySlider = page.getViewById<slider.Slider>("opacitySlider");
|
|
||||||
container = page.getViewById<wrapLayout.WrapLayout>("container");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onSetOpacity(args: observable.EventData) {
|
|
||||||
var newOpacity = opacitySlider.value / 100;
|
|
||||||
container.eachChildView((view: view.View) => {
|
|
||||||
view.opacity = newOpacity;
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var animationSet: animationModule.Animation;
|
|
||||||
export function onAnimateOpacity(args: observable.EventData) {
|
|
||||||
var newOpacity = opacitySlider.value / 100;
|
|
||||||
var animationDefinitions = new Array<animationModule.AnimationDefinition>();
|
|
||||||
container.eachChildView((view: view.View) => {
|
|
||||||
animationDefinitions.push({
|
|
||||||
target: view,
|
|
||||||
opacity: newOpacity,
|
|
||||||
duration: 5000
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
animationSet = new animationModule.Animation(animationDefinitions);
|
|
||||||
animationSet.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onReset(args: observable.EventData) {
|
|
||||||
if (animationSet.isPlaying) {
|
|
||||||
animationSet.cancel();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="opacityPage">
|
|
||||||
<StackLayout orientation="vertical">
|
|
||||||
<StackLayout orientation="vertical">
|
|
||||||
<Label text="opacity" width="180" />
|
|
||||||
<Slider id="opacitySlider" minValue="0" maxValue="100" width="180" />
|
|
||||||
<Button text="Set" tap="onSetOpacity"/>
|
|
||||||
<Button text="Animate" tap="onAnimateOpacity"/>
|
|
||||||
<Button text="Reset" tap="onReset"/>
|
|
||||||
</StackLayout>
|
|
||||||
<WrapLayout orientation="horizontal" id="container">
|
|
||||||
|
|
||||||
<StackLayout class="complex"/>
|
|
||||||
<Button text="Button" class="complex"/>
|
|
||||||
<Label text="Label" class="complex"/>
|
|
||||||
<Image src="~/test-icon.png" class="complex"/>
|
|
||||||
<TextField text="TextField" class="complex"/>
|
|
||||||
<TextView text="TextView" class="complex"/>
|
|
||||||
|
|
||||||
<StackLayout class="simple"/>
|
|
||||||
<Button text="Button" class="simple"/>
|
|
||||||
<Label text="Label" class="simple"/>
|
|
||||||
<Image src="~/test-icon.png" class="simple"/>
|
|
||||||
<TextField text="TextField" class="simple"/>
|
|
||||||
<TextView text="TextView" class="simple"/>
|
|
||||||
|
|
||||||
<StackLayout class="none"/>
|
|
||||||
<Button text="Button" class="none"/>
|
|
||||||
<Label text="Label" class="none"/>
|
|
||||||
<Image src="~/test-icon.png" class="none"/>
|
|
||||||
<TextField text="TextField" class="none"/>
|
|
||||||
<TextView text="TextView" class="none"/>
|
|
||||||
|
|
||||||
</WrapLayout>
|
|
||||||
</StackLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
{ "name" : "animations",
|
|
||||||
"main" : "app.js" }
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1,27 +0,0 @@
|
|||||||
Page {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
ScrollView {
|
|
||||||
margin: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
horizontal-align: center;
|
|
||||||
font-size: 24;
|
|
||||||
margin: 6 0;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
ActionBar, TabView, ActivityIndicator, Label, Button, TextView, TextField, SearchBar, ListPicker, DatePicker, TimePicker {
|
|
||||||
color: mediumaquamarine;
|
|
||||||
}
|
|
||||||
|
|
||||||
Switch, Progress, Slider, SegmentedBar {
|
|
||||||
color: mediumaquamarine;
|
|
||||||
background-color: aquamarine;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
TextView, TextField, Label, Button {
|
|
||||||
text-decoration: underline;
|
|
||||||
}*/
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import * as application from "tns-core-modules/application";
|
|
||||||
|
|
||||||
// Needed only for build infrastructure
|
|
||||||
application.setCssFileName("gallery-app/app.css");
|
|
||||||
|
|
||||||
application.start({ moduleName: "gallery-app/main-page" });
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<Border cornerRadius="20" borderWidth="4" borderColor="darkgray"
|
|
||||||
style="background-color: lightblue; margin:20;">
|
|
||||||
<Label verticalAlignment="center" horizontalAlignment="center" text="Content" />
|
|
||||||
</Border>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<HtmlView margin="10" html="<span><font color='#ff0000'>Test</font></span>"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<ScrollView>
|
|
||||||
<Label textWrap="true" text="Lorem ipsum dolor sit amet, qui ex sonet alterum epicurei, autem ponderum theophrastus vix no. Eros dolores at vim, quo euismod necessitatibus at. Cu magna dolorem ceteros his. Eos ei atomorum voluptatibus. Nec omnis solum persecuti ei, at mei dicta senserit. Et posse accusam eum, eam ignota alienum antiopam an, at sit labore tritani. Ei choro atomorum qui, veniam ornatus in pri.
|
|
||||||
|
|
||||||
Tantas delenit facilis usu ei, eum eu eius menandri appellantur, qui elitr philosophia id. Eos et mazim tamquam facilis, ex sit vituperata interpretaris, nihil insolens antiopam vel ne. Munere putant instructior in qui. Cetero fuisset te eum, cu mentitum oporteat senserit vis, quod nobis option ex sit.
|
|
||||||
|
|
||||||
Option consulatu id ius, fabulas inimicus eloquentiam usu no. An mel virtute minimum iracundia, oratio feugiat id usu. Te modus tation laoreet eum. Gubergren concludaturque eum cu. Ex epicuri quaestio vel.
|
|
||||||
|
|
||||||
Ut mei nonumes definitiones, quo at recusabo adversarium. Iusto scaevola mea no, ei albucius platonem assueverit his. Iudico impetus deterruisset id per, at nec tollit graeci mentitum. Pro quod erat et. Eam error eruditi vocibus at, eos ea tale mazim, in gubergren splendide pro. No oblique democritum mel, malis dicat dissentias id mel. Congue senserit nam at.
|
|
||||||
|
|
||||||
Id altera labore labores mel, invenire posidonium suscipiantur duo ad. Nibh populo ne vim, vidisse convenire intellegat mea no, legere placerat democritum sea ne. Et mei virtute sapientem. Ut eam saperet deterruisset. Est ex harum omnium complectitur, quidam postulant constituto sed in, soleat quaeque ei sea. Vix dicit equidem vivendum ea, mea natum graecis civibus cu, summo persecuti te sed. Ne mei vocibus perfecto referrentur, quo ei legere civibus lucilius.
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, qui ex sonet alterum epicurei, autem ponderum theophrastus vix no. Eros dolores at vim, quo euismod necessitatibus at. Cu magna dolorem ceteros his. Eos ei atomorum voluptatibus. Nec omnis solum persecuti ei, at mei dicta senserit. Et posse accusam eum, eam ignota alienum antiopam an, at sit labore tritani. Ei choro atomorum qui, veniam ornatus in pri.
|
|
||||||
|
|
||||||
Tantas delenit facilis usu ei, eum eu eius menandri appellantur, qui elitr philosophia id. Eos et mazim tamquam facilis, ex sit vituperata interpretaris, nihil insolens antiopam vel ne. Munere putant instructior in qui. Cetero fuisset te eum, cu mentitum oporteat senserit vis, quod nobis option ex sit.
|
|
||||||
|
|
||||||
Option consulatu id ius, fabulas inimicus eloquentiam usu no. An mel virtute minimum iracundia, oratio feugiat id usu. Te modus tation laoreet eum. Gubergren concludaturque eum cu. Ex epicuri quaestio vel.
|
|
||||||
|
|
||||||
Ut mei nonumes definitiones, quo at recusabo adversarium. Iusto scaevola mea no, ei albucius platonem assueverit his. Iudico impetus deterruisset id per, at nec tollit graeci mentitum. Pro quod erat et. Eam error eruditi vocibus at, eos ea tale mazim, in gubergren splendide pro. No oblique democritum mel, malis dicat dissentias id mel. Congue senserit nam at.
|
|
||||||
|
|
||||||
Id altera labore labores mel, invenire posidonium suscipiantur duo ad. Nibh populo ne vim, vidisse convenire intellegat mea no, legere placerat democritum sea ne. Et mei virtute sapientem. Ut eam saperet deterruisset. Est ex harum omnium complectitur, quidam postulant constituto sed in, soleat quaeque ei sea. Vix dicit equidem vivendum ea, mea natum graecis civibus cu, summo persecuti te sed. Ne mei vocibus perfecto referrentur, quo ei legere civibus lucilius." />
|
|
||||||
</ScrollView>
|
|
||||||
</Page>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<TabView>
|
|
||||||
<TabView.items>
|
|
||||||
<TabViewItem title="First">
|
|
||||||
<TabViewItem.view>
|
|
||||||
<GridLayout>
|
|
||||||
<Label text="First Tab" verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</GridLayout>
|
|
||||||
</TabViewItem.view>
|
|
||||||
</TabViewItem>
|
|
||||||
<TabViewItem title="Second">
|
|
||||||
<TabViewItem.view>
|
|
||||||
<GridLayout>
|
|
||||||
<Label text="Second Tab" verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</GridLayout>
|
|
||||||
</TabViewItem.view>
|
|
||||||
</TabViewItem>
|
|
||||||
</TabView.items>
|
|
||||||
</TabView>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<WebView margin="10" src="http://docs.nativescript.org/"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<AbsoluteLayout>
|
|
||||||
<Button text="1" left="50" top="50" width="100" height="100" style="background-color: red;"/>
|
|
||||||
<Button text="2" left="200" top="100" width="100" height="300" style="background-color: lightblue;"/>
|
|
||||||
<Button text="3" left="50" top="280" width="200" height="100" style="background-color: lightgreen;"/>
|
|
||||||
</AbsoluteLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<DockLayout stretchLastChild="true">
|
|
||||||
<Button dock="left" text="left" style="background-color: red; margin: 5;"/>/>
|
|
||||||
<Button dock="top" text="top" style="background-color: lightblue; margin: 5;"/>
|
|
||||||
<Button dock="right" text="right" style="background-color: lightgreen; margin: 5;"/>
|
|
||||||
<Button dock="bottom" text="bottom" style="background-color: lightpink; margin: 5;"/>
|
|
||||||
<Button text="fill" style="background-color: wheat; margin: 5;"/>
|
|
||||||
</DockLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<GridLayout columns="*,*,*" rows="*,*,*">
|
|
||||||
<Button text="1" style="background-color: red; margin: 5;"/>
|
|
||||||
<Button text="2" col="1" style="background-color: lightblue; margin: 5;"/>
|
|
||||||
<Button text="3" col="2" rowSpan="2" style="background-color: lightgreen; margin: 5;"/>
|
|
||||||
<Button text="4" row="1" rowSpan="2" colSpan="2" style="background-color: lightpink; margin: 5;"/>
|
|
||||||
<Button text="5" row="2" col="2" style="background-color: wheat; margin: 5;"/>
|
|
||||||
</GridLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<StackLayout>
|
|
||||||
<Button text="button 1" style="background-color: red; margin: 5;"/>
|
|
||||||
<Button text="button 2" style="background-color: lightblue; margin: 5;"/>
|
|
||||||
<Button text="button 3" style="background-color: lightgreen; margin: 5;"/>
|
|
||||||
</StackLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<WrapLayout>
|
|
||||||
<Button text="1" width="150" height="100" style="background-color: red; margin: 5;"/>
|
|
||||||
<Button text="2" width="100" height="150" style="background-color: lightblue; margin: 5;"/>
|
|
||||||
<Button text="3" width="200" height="120" style="background-color: lightgreen; margin: 5;"/>
|
|
||||||
<Button text="4" width="100" height="50" style="background-color: lightpink; margin: 5;"/>
|
|
||||||
<Button text="5" width="250" height="100" style="background-color: wheat; margin: 5;"/>
|
|
||||||
</WrapLayout>
|
|
||||||
</Page>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import * as observable from "tns-core-modules/data/observable";
|
|
||||||
import * as frame from "tns-core-modules/ui/frame";
|
|
||||||
|
|
||||||
export function itemTap(args: observable.EventData) {
|
|
||||||
frame.topmost().navigate({
|
|
||||||
moduleName: "gallery-app/" + args.object.get("tag"),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<ScrollView>
|
|
||||||
<StackLayout>
|
|
||||||
<Label class="title" text="Layouts" />
|
|
||||||
<StackLayout>
|
|
||||||
<Button tag="layouts/stack-layout" text="StackLayout" tap="itemTap" />
|
|
||||||
<Button tag="layouts/grid-layout" text="GridLayout" tap="itemTap" />
|
|
||||||
<Button tag="layouts/wrap-layout" text="WrapLayout" tap="itemTap" />
|
|
||||||
<Button tag="layouts/dock-layout" text="DockLayout" tap="itemTap" />
|
|
||||||
<Button tag="layouts/absolute-layout" text="AbsoluteLayout" tap="itemTap" />
|
|
||||||
</StackLayout>
|
|
||||||
|
|
||||||
<Label class="title" text="Content" />
|
|
||||||
<StackLayout>
|
|
||||||
<Button tag="content/tab-view" text="TabView" tap="itemTap" />
|
|
||||||
<Button tag="content/web-view" text="WebView" tap="itemTap" />
|
|
||||||
<Button tag="content/html-view" text="HtmlView" tap="itemTap" />
|
|
||||||
<Button tag="content/scroll-view" text="ScrollView" tap="itemTap" />
|
|
||||||
<Button tag="content/border" text="Border" tap="itemTap" />
|
|
||||||
</StackLayout>
|
|
||||||
|
|
||||||
<Label class="title" text="Views" />
|
|
||||||
<StackLayout>
|
|
||||||
<Button tag="views/button" text="Button" tap="itemTap" />
|
|
||||||
<Button tag="views/label" text="Label" tap="itemTap" />
|
|
||||||
<Button tag="views/text-field" text="TextField" tap="itemTap" />
|
|
||||||
<Button tag="views/text-view" text="TextView" tap="itemTap" />
|
|
||||||
<Button tag="views/switch" text="Switch" tap="itemTap" />
|
|
||||||
<Button tag="views/slider" text="Slider" tap="itemTap" />
|
|
||||||
<Button tag="views/progress" text="Progress" tap="itemTap" />
|
|
||||||
<Button tag="views/activity-indicator" text="ActivityIndicator" tap="itemTap" />
|
|
||||||
<Button tag="views/image" text="Image" tap="itemTap" />
|
|
||||||
<Button tag="views/search-bar" text="SearchBar" tap="itemTap" />
|
|
||||||
<Button tag="views/list-view" text="ListView" tap="itemTap" />
|
|
||||||
<Button tag="views/repeater" text="Repeater" tap="itemTap" />
|
|
||||||
<Button tag="views/dialogs" text="Dialogs" tap="itemTap" />
|
|
||||||
<Button tag="views/date-picker" text="DatePicker" tap="itemTap" />
|
|
||||||
<Button tag="views/time-picker" text="TimePicker" tap="itemTap" />
|
|
||||||
<Button tag="views/list-picker" text="ListPicker" tap="itemTap" />
|
|
||||||
<Button tag="views/segmented-bar" text="SegmentedBar" tap="itemTap" />
|
|
||||||
</StackLayout>
|
|
||||||
|
|
||||||
<Label class="title" text="Animations" />
|
|
||||||
<StackLayout>
|
|
||||||
<Button tag="animations/js-configurable" text="js-configurable" tap="itemTap" />
|
|
||||||
<Button tag="animations/js-opacity" text="js-opacity" tap="itemTap" />
|
|
||||||
<Button tag="animations/css-keyframes" text="css-keyframes" tap="itemTap" />
|
|
||||||
</StackLayout>
|
|
||||||
</StackLayout>
|
|
||||||
</ScrollView>
|
|
||||||
</Page>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<Button text="button" verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
import * as dialogs from "tns-core-modules/ui/dialogs";
|
|
||||||
|
|
||||||
export function alertTapped(args) {
|
|
||||||
dialogs.alert("Hi there!");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function alertWithOptionsTapped(args) {
|
|
||||||
dialogs.alert({
|
|
||||||
title: "Alert Title",
|
|
||||||
message: "Hi there!",
|
|
||||||
okButtonText: "Close"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function alertWithNullTapped(args) {
|
|
||||||
dialogs.alert(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function alertWithUndefinedTapped(args) {
|
|
||||||
dialogs.alert(undefined);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function alertWithNumberTapped(args) {
|
|
||||||
dialogs.alert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function alertWithBooleanTapped(args) {
|
|
||||||
dialogs.alert(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function alertWithFunctionTapped(args) {
|
|
||||||
dialogs.alert(function () {
|
|
||||||
//
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function alertWithObjectTapped(args) {
|
|
||||||
dialogs.alert({});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function confirmTapped(args) {
|
|
||||||
dialogs.confirm("Are you sure?").then(r=> console.log(`Confirm result: ${r}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function confirmWithOptionsTapped(args) {
|
|
||||||
dialogs.confirm({
|
|
||||||
title: "Confirm Title",
|
|
||||||
message: "Are you sure?",
|
|
||||||
okButtonText: "OK",
|
|
||||||
cancelButtonText: "Cancel",
|
|
||||||
neutralButtonText: "Ignore"
|
|
||||||
}).then(r=> console.log(`Confirm result: ${r}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function promptTapped(args) {
|
|
||||||
dialogs.prompt("Enter name:", "John Doe");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function promptWithOptionsTapped(args) {
|
|
||||||
dialogs.prompt({
|
|
||||||
title: "Prompt Title",
|
|
||||||
message: "Enter name:",
|
|
||||||
okButtonText: "OK",
|
|
||||||
cancelButtonText: "Cancel",
|
|
||||||
neutralButtonText: "Ignore",
|
|
||||||
defaultText: "John Doe",
|
|
||||||
inputType: dialogs.inputType.text
|
|
||||||
}).then(r=> console.log(`Prompt result: ${r.result}, text: ${r.text}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function promptWithOptionsPasswordTapped(args) {
|
|
||||||
dialogs.prompt({
|
|
||||||
title: "Prompt Title",
|
|
||||||
message: "Enter name:",
|
|
||||||
okButtonText: "OK",
|
|
||||||
cancelButtonText: "Cancel",
|
|
||||||
neutralButtonText: "Ignore",
|
|
||||||
defaultText: "John Doe",
|
|
||||||
inputType: dialogs.inputType.password
|
|
||||||
}).then(r=> console.log(`Prompt result: ${r.result}, text: ${r.text}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function loginTapped(args) {
|
|
||||||
dialogs.login("Enter user/pass:", "username", "password").then(r=> console.log(`Login result: ${r.result}, user: ${r.userName}, pwd: ${r.password}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function loginWithOptionsTapped(args) {
|
|
||||||
dialogs.login({
|
|
||||||
title: "Login Title",
|
|
||||||
message: "Enter user/pass:",
|
|
||||||
okButtonText: "OK",
|
|
||||||
cancelButtonText: "Cancel",
|
|
||||||
neutralButtonText: "Ignore",
|
|
||||||
userName: "username",
|
|
||||||
password: "password"
|
|
||||||
}).then(r=> console.log(`Login result: ${r.result}, user: ${r.userName}, pwd: ${r.password}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function actionTapped(args) {
|
|
||||||
dialogs.action("Action", "Close", ["One", "Two", "Three"]).then(r=> console.log(`Action result: ${r}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function actionWithOptionsTapped(args) {
|
|
||||||
dialogs.action({
|
|
||||||
title: "Action Title",
|
|
||||||
message: "Action Message",
|
|
||||||
cancelButtonText: "Close",
|
|
||||||
actions: ["One", "Two", "Three"]
|
|
||||||
}).then(r=> console.log(`Action result: ${r}`));
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<ScrollView>
|
|
||||||
<StackLayout>
|
|
||||||
<Button text="alert" tap="alertTapped"/>
|
|
||||||
<Button text="alert with options" tap="alertWithOptionsTapped"/>
|
|
||||||
<Button text="alert with null" tap="alertWithNullTapped"/>
|
|
||||||
<Button text="alert with undefined" tap="alertWithUndefinedTapped"/>
|
|
||||||
<Button text="alert with number" tap="alertWithNumberTapped"/>
|
|
||||||
<Button text="alert with boolean" tap="alertWithBooleanTapped"/>
|
|
||||||
<Button text="alert with function" tap="alertWithFunctionTapped"/>
|
|
||||||
<Button text="alert with object" tap="alertWithObjectTapped"/>
|
|
||||||
<Button text="confirm" tap="confirmTapped"/>
|
|
||||||
<Button text="confirm with options" tap="confirmWithOptionsTapped"/>
|
|
||||||
<Button text="prompt" tap="promptTapped"/>
|
|
||||||
<Button text="prompt with options" tap="promptWithOptionsTapped"/>
|
|
||||||
<Button text="prompt with options password" tap="promptWithOptionsPasswordTapped"/>
|
|
||||||
<Button text="login" tap="loginTapped"/>
|
|
||||||
<Button text="login with options" tap="loginWithOptionsTapped"/>
|
|
||||||
<Button text="action" tap="actionTapped"/>
|
|
||||||
<Button text="action with options" tap="actionWithOptionsTapped"/>
|
|
||||||
</StackLayout>
|
|
||||||
</ScrollView>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<Image margin="10" src="~/gallery-app/res/telerik-logo.png" verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<Label text="The quick brown fox jumps over the lazy dog." verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import * as pages from "tns-core-modules/ui/page";
|
|
||||||
import * as observableModule from "tns-core-modules/data/observable";
|
|
||||||
|
|
||||||
export function onPageLoaded(args: observableModule.EventData) {
|
|
||||||
var page = <pages.Page>args.object;
|
|
||||||
page.bindingContext = {
|
|
||||||
items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
|
|
||||||
selectedIndex: 2
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page loaded="onPageLoaded">
|
|
||||||
<ListPicker items="{{ items }}" selectedIndex="{{ selectedIndex }}"
|
|
||||||
verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
export function pageLoaded(args) {
|
|
||||||
var page = args.object;
|
|
||||||
|
|
||||||
var itemsArr = [];
|
|
||||||
for (var i = 1; i <= 64; i++) {
|
|
||||||
itemsArr.push({ title: "List item " + i });
|
|
||||||
}
|
|
||||||
|
|
||||||
page.bindingContext = { items: itemsArr };
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page loaded="pageLoaded">
|
|
||||||
<ListView items="{{ items }}">
|
|
||||||
<ListView.itemTemplate>
|
|
||||||
<StackLayout>
|
|
||||||
<Label text="{{ title }}" margin="5 10" horizontalAlignment="center"/>
|
|
||||||
</StackLayout>
|
|
||||||
</ListView.itemTemplate>
|
|
||||||
</ListView>
|
|
||||||
</Page>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
export function pageLoaded(args) {
|
|
||||||
var page = args.object;
|
|
||||||
|
|
||||||
var itemsArr = [];
|
|
||||||
for (var i = 1; i <= 64; i++) {
|
|
||||||
itemsArr.push({ title: "List item " + i });
|
|
||||||
}
|
|
||||||
|
|
||||||
page.bindingContext = { items: itemsArr };
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page loaded="pageLoaded">
|
|
||||||
<ScrollView>
|
|
||||||
<Repeater items="{{ items }}">
|
|
||||||
<Repeater.itemsLayout>
|
|
||||||
<WrapLayout />
|
|
||||||
</Repeater.itemsLayout>
|
|
||||||
<Repeater.itemTemplate>
|
|
||||||
<Label text="{{ title }}" margin="10" />
|
|
||||||
</Repeater.itemTemplate>
|
|
||||||
</Repeater>
|
|
||||||
</ScrollView>
|
|
||||||
</Page>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<SegmentedBar style="vertical-align: center; margin: 20;">
|
|
||||||
<SegmentedBar.items>
|
|
||||||
<SegmentedBarItem title="Item 1" />
|
|
||||||
<SegmentedBarItem title="Item 2" />
|
|
||||||
<SegmentedBarItem title="Item 3" />
|
|
||||||
</SegmentedBar.items>
|
|
||||||
</SegmentedBar>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<Slider verticalAlignment="center" value="60" maxValue="100" margin="10"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<Switch checked="true" verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<TextField verticalAlignment="center" horizontalAlignment="center" width="300" hint="Enter text..."/>
|
|
||||||
</Page>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<TextView verticalAlignment="center" horizontalAlignment="center"
|
|
||||||
width="300" height="300"
|
|
||||||
text="The quick brown fox jumps over the lazy dog."/>
|
|
||||||
</Page>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<Page>
|
|
||||||
<TimePicker hour="18" minute="30" verticalAlignment="center" horizontalAlignment="center"/>
|
|
||||||
</Page>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
.padding {
|
|
||||||
padding: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
border-width: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow {
|
|
||||||
background-color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
Label, TextField, TextView, Button {
|
|
||||||
text-align: left;
|
|
||||||
margin: 1;
|
|
||||||
}
|
|
||||||
@ -32,6 +32,8 @@ export function pageLoaded(args: EventData) {
|
|||||||
examples.set("text-field", "text-field/main-page");
|
examples.set("text-field", "text-field/main-page");
|
||||||
examples.set("text-view", "text-view/main-page");
|
examples.set("text-view", "text-view/main-page");
|
||||||
examples.set("webview", "web-view/main-page");
|
examples.set("webview", "web-view/main-page");
|
||||||
|
examples.set("progress-bar", "progress-bar/main-page");
|
||||||
|
examples.set("date-picker", "date-picker/date-picker");
|
||||||
page.bindingContext = new MainPageViewModel(wrapLayout, examples);
|
page.bindingContext = new MainPageViewModel(wrapLayout, examples);
|
||||||
|
|
||||||
const parent = page.getViewById('parentLayout');
|
const parent = page.getViewById('parentLayout');
|
||||||
|
|||||||
17
apps/app/ui-tests-app/progress-bar/main-page.ts
Normal file
17
apps/app/ui-tests-app/progress-bar/main-page.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
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("activity-indicator", "progress-bar/activity-indicator");
|
||||||
|
examples.set("progress-bar", "progress-bar/progress");
|
||||||
|
return examples;
|
||||||
|
}
|
||||||
6
apps/app/ui-tests-app/progress-bar/main-page.xml
Normal file
6
apps/app/ui-tests-app/progress-bar/main-page.xml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" ?>
|
||||||
|
<Page loaded="pageLoaded">
|
||||||
|
<ScrollView orientation="vertical" row="1">
|
||||||
|
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||||
|
</ScrollView>
|
||||||
|
</Page>
|
||||||
@ -12,5 +12,6 @@ export function pageLoaded(args: EventData) {
|
|||||||
export function loadExamples() {
|
export function loadExamples() {
|
||||||
const examples = new Map<string, string>();
|
const examples = new Map<string, string>();
|
||||||
examples.set("issue-4147", "search-bar/issue-4147");
|
examples.set("issue-4147", "search-bar/issue-4147");
|
||||||
|
examples.set("search-bar", "search-bar/search-bar");
|
||||||
return examples;
|
return examples;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user