Skip to content

Commit 12877fb

Browse files
author
vakrilov
committed
Layout snippets
1 parent 23c480d commit 12877fb

File tree

5 files changed

+230
-1
lines changed

5 files changed

+230
-1
lines changed

‎tests/app/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import {nativeScriptBootstrap} from "nativescript-angular/application";
33
import {AppComponent} from "./app.component";
44
import {GestureComponent} from "./snippets/gestures.component";
5+
import {LayoutsComponent} from "./snippets/layouts.component";
56

67
nativeScriptBootstrap(AppComponent);
78
// nativeScriptBootstrap(GestureComponent);
9+
// nativeScriptBootstrap(LayoutsComponent);

‎tests/app/snippets/layouts.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component} from "angular2/core";
2+
3+
@Component({
4+
selector: "gestures",
5+
templateUrl: "snippets/layouts.component.xml",
6+
styles:[
7+
'Image { background-color: coral }',
8+
'.title { margin: 10; horizontal-align: center; font-size: 32 }',
9+
'#main > AbsoluteLayout { margin: 10 }',
10+
'#main > DockLayout { margin: 10 }',
11+
'#main > GridLayout { margin: 10 }',
12+
'#main > StackLayout { margin: 10 }',
13+
'#main > WrapLayout { margin: 10 }'
14+
]
15+
})
16+
export class LayoutsComponent {
17+
}

‎tests/app/snippets/layouts.component.xml

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<ScrollView orientation="vertical">
2+
<StackLayout id="main">
3+
<Label text="Absolute Layout" class="title"></Label>
4+
5+
<!-- >> absolute-layout -->
6+
<AbsoluteLayout width="210" height="210" backgroundColor="lightgray">
7+
<Label text="10, 10" left="10" top="10" width="90" height="90" backgroundColor="red"></Label>
8+
<Label text="110, 10" left="110" top="10" width="90" height="90" backgroundColor="green"></Label>
9+
<Label text="110, 110" left="110" top="110" width="90" height="90" backgroundColor="blue"></Label>
10+
<Label text="10, 110" left="10" top="110" width="90" height="90" backgroundColor="yellow"></Label>
11+
</AbsoluteLayout>
12+
<!-- << absolute-layout -->
13+
14+
<!-- >> absolute-layout-margin -->
15+
<AbsoluteLayout width="210" height="210" backgroundColor="lightgray">
16+
<Label text="no margin" left="10" top="10" width="100" height="100" backgroundColor="red"></Label>
17+
<Label text="margin=`30`" left="10" top="10" margin="30" width="100" height="90" backgroundColor="green"></Label>
18+
</AbsoluteLayout>
19+
<!-- << absolute-layout-margin -->
20+
21+
<Label text="Dock Layout" class="title"></Label>
22+
23+
<!-- >> dock-layout -->
24+
<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="false">
25+
<Label text="left" dock="left" width="60" backgroundColor="red"></Label>
26+
<Label text="top" dock="top" height="60" backgroundColor="green"></Label>
27+
<Label text="right" dock="right" width="60" backgroundColor="blue"></Label>
28+
<Label text="bottom" dock="bottom" height="60" backgroundColor="yellow"></Label>
29+
</DockLayout>
30+
<!-- << dock-layout -->
31+
32+
<!-- >> dock-layout-stretch-last -->
33+
<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="true">
34+
<Label text="left" dock="left" backgroundColor="red"></Label>
35+
<Label text="top" dock="top" backgroundColor="green"></Label>
36+
<Label text="right" dock="right" backgroundColor="blue"></Label>
37+
<Label text="bottom" dock="bottom" backgroundColor="yellow"></Label>
38+
</DockLayout>
39+
<!-- << dock-layout-stretch-last -->
40+
41+
<!-- >> dock-layout-one-side -->
42+
<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="true">
43+
<Label text="left1" dock="left" backgroundColor="red"></Label>
44+
<Label text="left2" dock="left" backgroundColor="green"></Label>
45+
<Label text="left3" dock="left" backgroundColor="blue"></Label>
46+
<Label text="last child" backgroundColor="yellow"></Label>
47+
</DockLayout>
48+
<!-- << dock-layout-one-side -->
49+
50+
<Label text="Grid Layout" class="title"></Label>
51+
52+
<!-- >> grid-layout-sample -->
53+
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210" backgroundColor="lightgray" >
54+
<Label text="Label 1" row="0" col="0" backgroundColor="red"></Label>
55+
<Label text="Label 2" row="0" col="1" colSpan="2" backgroundColor="green"></Label>
56+
<Label text="Label 3" row="1" col="0" rowSpan="2" backgroundColor="blue"></Label>
57+
<Label text="Label 4" row="1" col="1" backgroundColor="yellow"></Label>
58+
<Label text="Label 5" row="1" col="2" backgroundColor="orange"></Label>
59+
<Label text="Label 6" row="2" col="1" backgroundColor="pink"></Label>
60+
<Label text="Label 7" row="2" col="2" backgroundColor="purple"></Label>
61+
</GridLayout>
62+
<!-- << grid-layout-sample -->
63+
64+
<!-- >> grid-layout-star -->
65+
<GridLayout columns="*,2*" rows="2*,3*" width="300" height="300" backgroundColor="lightgray" >
66+
<Label text="Label 1" col="0" row="0" backgroundColor="red"></Label>
67+
<Label text="Label 2" col="1" row="0" backgroundColor="green"></Label>
68+
<Label text="Label 3" col="0" row="1" backgroundColor="blue"></Label>
69+
<Label text="Label 4" col="1" row="1" backgroundColor="yellow"></Label>
70+
</GridLayout>
71+
<!-- << grid-layout-star -->
72+
73+
<!-- >> grid-layout-fexed-auto -->
74+
<GridLayout columns="100,auto" rows="100,auto" width="210" height="210" backgroundColor="lightgray" >
75+
<Label text="Label 1" col="0" row="0" backgroundColor="red"></Label>
76+
<Label text="Label 2" col="1" row="0" backgroundColor="green"></Label>
77+
<Label text="Label 3" col="0" row="1" backgroundColor="blue"></Label>
78+
<Label text="Label 4" col="1" row="1" backgroundColor="yellow"></Label>
79+
</GridLayout>
80+
<!-- << grid-layout-fexed-auto -->
81+
82+
<!-- >> grid-layout-no-width -->
83+
<StackLayout width="200" height="200" backgroundColor="palegreen">
84+
<GridLayout columns="*,2*" horizontalAlignment="left" verticalAlignment="top" backgroundColor="lightgray" >
85+
<Label text="Label 1" col="0" backgroundColor="red"></Label>
86+
<Label text="Label 2" col="1" backgroundColor="green"></Label>
87+
</GridLayout>
88+
</StackLayout>
89+
<!-- << grid-layout-no-width -->
90+
91+
<!-- >> grid-layout-column-stretch -->
92+
<GridLayout columns="auto,100" rows="auto,auto" width="300" height="300" backgroundColor="lightgray" >
93+
<Label text="Label 1" col="0" row="0" backgroundColor="red"></Label>
94+
<Label text="Label 2" col="1" row="0" backgroundColor="green"></Label>
95+
<Label text="Label 3" width="150" col="0" row="1" backgroundColor="blue"></Label>
96+
</GridLayout>
97+
<!-- << grid-layout-column-stretch -->
98+
99+
<!-- >> grid-layout-complex -->
100+
<GridLayout columns="auto, *, auto" rows="auto, 25" verticalAlignment="top" backgroundColor="lightgray">
101+
<Image src="~/cute.jpg" rowSpan="2" width="72" height="72" margin="3" verticalAlignment="top"></Image>
102+
<Label text="My cat loves the camera" textWrap="true" col="1" colSpan="2" minHeight="50" fontSize="20" margin="3"></Label>
103+
<Label text="John Smith" col="1" row="1" fontSize="14" horizontalAlignment="left" verticalAlignment="bottom" margin="3"></Label>
104+
<Label text="comments: 26" col="2" row="1" color="#10C2B0" fontSize="14" verticalAlignment="bottom" margin="3"></Label>
105+
</GridLayout>
106+
<!-- << grid-layout-complex -->
107+
108+
<Label text="Stack Layout" class="title"></Label>
109+
110+
<!-- >> stack-layout-vertical -->
111+
<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
112+
<Label text="Label 1" width="50" height="50" backgroundColor="red"></Label>
113+
<Label text="Label 2" width="50" height="50" backgroundColor="green"></Label>
114+
<Label text="Label 3" width="50" height="50" backgroundColor="blue"></Label>
115+
<Label text="Label 4" width="50" height="50" backgroundColor="yellow"></Label>
116+
</StackLayout>
117+
<!-- << stack-layout-vertical -->
118+
119+
<!-- >> stack-layout-horizontal -->
120+
<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
121+
<Label text="Label 1" width="50" height="50" backgroundColor="red"></Label>
122+
<Label text="Label 2" width="50" height="50" backgroundColor="green"></Label>
123+
<Label text="Label 3" width="50" height="50" backgroundColor="blue"></Label>
124+
<Label text="Label 4" width="50" height="50" backgroundColor="yellow"></Label>
125+
</StackLayout>
126+
<!-- << stack-layout-horizontal -->
127+
128+
<!-- >> stack-layout-vertical-align -->
129+
<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
130+
<Label text="Label 1" horizontalAlignment="left" backgroundColor="red"></Label>
131+
<Label text="Label 2" horizontalAlignment="center" backgroundColor="green"></Label>
132+
<Label text="Label 3" horizontalAlignment="right" backgroundColor="blue"></Label>
133+
<Label text="Label 4" horizontalAlignment="stretch" backgroundColor="yellow"></Label>
134+
</StackLayout>
135+
<!-- << stack-layout-vertical-align -->
136+
137+
<!-- >> stack-layout-horizontal-align -->
138+
<StackLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
139+
<Label text="Label 1" verticalAlignment="top" backgroundColor="red"></Label>
140+
<Label text="Label 2" verticalAlignment="center" backgroundColor="green"></Label>
141+
<Label text="Label 3" verticalAlignment="bottom" backgroundColor="blue"></Label>
142+
<Label text="Label 4" verticalAlignment="stretch" backgroundColor="yellow"></Label>
143+
</StackLayout>
144+
<!-- << stack-layout-horizontal-align -->
145+
146+
<Label text="Wrap Layout" class="title"></Label>
147+
148+
<!-- >> wrap-layout-horizontal -->
149+
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
150+
<Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
151+
<Label text="Label 2" width="70" height="70" backgroundColor="green"></Label>
152+
<Label text="Label 3" width="70" height="70" backgroundColor="blue"></Label>
153+
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
154+
</WrapLayout>
155+
<!-- << wrap-layout-horizontal -->
156+
157+
<!-- >> wrap-layout-vertical -->
158+
<WrapLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
159+
<Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
160+
<Label text="Label 2" width="70" height="70" backgroundColor="green"></Label>
161+
<Label text="Label 3" width="70" height="70" backgroundColor="blue"></Label>
162+
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
163+
</WrapLayout>
164+
<!-- << wrap-layout-vertical -->
165+
166+
<!-- >> wrap-layout-item -->
167+
<WrapLayout itemWidth="30" itemHeight="30" width="210" height="210" backgroundColor="lightgray">
168+
<Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
169+
<Label text="Label 2" width="70" height="70" backgroundColor="green"></Label>
170+
<Label text="Label 3" width="70" height="70" backgroundColor="blue"></Label>
171+
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
172+
</WrapLayout>
173+
<!-- << wrap-layout-item -->
174+
</StackLayout>
175+
</ScrollView>

‎tests/app/tests/renderer-tests.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
//make sure you import mocha-config before angular2/core
22
import {assert} from "./test-config";
3-
import { Component, ElementRef, Renderer } from "angular2/core";
3+
import {Component, ElementRef, Renderer} from "angular2/core";
44
import {ProxyViewContainer} from "ui/proxy-view-container";
55
import {Red} from "color/known-colors";
66
import {dumpView} from "./test-utils";

‎tests/app/tests/snippets.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//make sure you import mocha-config before angular2/core
2+
import {assert} from "./test-config";
3+
import {Component, ElementRef, Renderer} from "angular2/core";
4+
import {TestApp} from "./test-app";
5+
6+
import {GestureComponent} from "../snippets/gestures.component";
7+
import {LayoutsComponent} from "../snippets/layouts.component";
8+
9+
describe('Snippets', () => {
10+
let testApp: TestApp = null;
11+
12+
before(() => {
13+
return TestApp.create().then((app) => {
14+
testApp = app;
15+
})
16+
});
17+
18+
after(() => {
19+
testApp.dispose();
20+
});
21+
22+
it("Gesture snippets can be loaded", () => {
23+
return testApp.loadComponent(GestureComponent).then((componentRef) => {
24+
const componentInstance = componentRef.instance;
25+
assert.instanceOf(componentInstance, GestureComponent);
26+
});
27+
});
28+
29+
it("Layouts snippets can be loaded", () => {
30+
return testApp.loadComponent(LayoutsComponent).then((componentRef) => {
31+
const componentInstance = componentRef.instance;
32+
assert.instanceOf(componentInstance, LayoutsComponent);
33+
});
34+
});
35+
})

0 commit comments

Comments
 (0)