Skip to content

Commit 8bbf6d4

Browse files
msaelicesmsaelices
committed
Fix all the elements, wrapping them in a <Page> component. Fix spacing.
1 parent 83799f7 commit 8bbf6d4

20 files changed

+347
-318
lines changed

Diff for: ‎app/app.js

+115-116
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,121 @@
1-
const Vue = require('nativescript-vue');
1+
const Vue = require("nativescript-vue");
22

33
new Vue({
4-
data: {
5-
elements: [
6-
{
7-
name: 'ActivityIndicator',
8-
component: () => require('./elements/components/ActivityIndicator')
9-
},
10-
{
11-
name: 'Button',
12-
component: () => require('./elements/components/Button')
13-
},
14-
{
15-
name: 'DatePicker',
16-
component: () => require('./elements/components/DatePicker')
17-
},
18-
{
19-
name: 'HtmlView',
20-
component: () => require('./elements/components/HtmlView')
21-
},
22-
{
23-
name: 'Image',
24-
component: () => require('./elements/components/Image')
25-
},
26-
{
27-
name: 'Label',
28-
component: () => require('./elements/components/Label')
29-
},
30-
{
31-
name: 'ListPicker',
32-
component: () => require('./elements/components/ListPicker')
33-
},
34-
{
35-
name: 'ListView',
36-
component: () => require('./elements/components/ListView')
37-
},
38-
{
39-
name: 'Progress',
40-
component: () => require('./elements/components/Progress')
41-
},
42-
{
43-
name: 'ScrollView',
44-
component: () => require('./elements/components/ScrollView')
45-
},
46-
{
47-
name: 'SearchBar',
48-
component: () => require('./elements/components/SearchBar')
49-
},
50-
{
51-
name: 'SegmentedBar',
52-
component: () => require('./elements/components/SegmentedBar')
53-
},
54-
{
55-
name: 'Slider',
56-
component: () => require('./elements/components/Slider')
57-
},
58-
{
59-
name: 'Switch',
60-
component: () => require('./elements/components/Switch')
61-
},
62-
{
63-
name: 'TabView',
64-
component: () => require('./elements/components/TabView')
65-
},
66-
{
67-
name: 'TextField',
68-
component: () => require('./elements/components/TextField')
69-
},
70-
{
71-
name: 'TextView',
72-
component: () => require('./elements/components/TextView')
73-
},
74-
{
75-
name: 'TimePicker',
76-
component: () => require('./elements/components/TimePicker')
77-
},
78-
{
79-
name: 'WebView',
80-
component: () => require('./elements/components/WebView')
81-
},
82-
{
83-
name: 'ActionDialog',
84-
component: () => require('./elements/dialogs/Action')
85-
},
86-
{
87-
name: 'AlertDialog',
88-
component: () => require('./elements/dialogs/Alert')
89-
},
90-
{
91-
name: 'ConfirmDialog',
92-
component: () => require('./elements/dialogs/Confirm')
93-
},
94-
{
95-
name: 'LoginDialog',
96-
component: () => require('./elements/dialogs/Login')
97-
},
98-
{
99-
name: 'PromptDialog',
100-
component: () => require('./elements/dialogs/Prompt')
101-
},
102-
]
103-
},
4+
data: {
5+
elements: [
6+
{
7+
name: "ActivityIndicator",
8+
component: () => require("./elements/components/ActivityIndicator")
9+
},
10+
{
11+
name: "Button",
12+
component: () => require("./elements/components/Button")
13+
},
14+
{
15+
name: "DatePicker",
16+
component: () => require("./elements/components/DatePicker")
17+
},
18+
{
19+
name: "HtmlView",
20+
component: () => require("./elements/components/HtmlView")
21+
},
22+
{
23+
name: "Image",
24+
component: () => require("./elements/components/Image")
25+
},
26+
{
27+
name: "Label",
28+
component: () => require("./elements/components/Label")
29+
},
30+
{
31+
name: "ListPicker",
32+
component: () => require("./elements/components/ListPicker")
33+
},
34+
{
35+
name: "ListView",
36+
component: () => require("./elements/components/ListView")
37+
},
38+
{
39+
name: "Progress",
40+
component: () => require("./elements/components/Progress")
41+
},
42+
{
43+
name: "ScrollView",
44+
component: () => require("./elements/components/ScrollView")
45+
},
46+
{
47+
name: "SearchBar",
48+
component: () => require("./elements/components/SearchBar")
49+
},
50+
{
51+
name: "SegmentedBar",
52+
component: () => require("./elements/components/SegmentedBar")
53+
},
54+
{
55+
name: "Slider",
56+
component: () => require("./elements/components/Slider")
57+
},
58+
{
59+
name: "Switch",
60+
component: () => require("./elements/components/Switch")
61+
},
62+
{
63+
name: "TabView",
64+
component: () => require("./elements/components/TabView")
65+
},
66+
{
67+
name: "TextField",
68+
component: () => require("./elements/components/TextField")
69+
},
70+
{
71+
name: "TextView",
72+
component: () => require("./elements/components/TextView")
73+
},
74+
{
75+
name: "TimePicker",
76+
component: () => require("./elements/components/TimePicker")
77+
},
78+
{
79+
name: "WebView",
80+
component: () => require("./elements/components/WebView")
81+
},
82+
{
83+
name: "ActionDialog",
84+
component: () => require("./elements/dialogs/Action")
85+
},
86+
{
87+
name: "AlertDialog",
88+
component: () => require("./elements/dialogs/Alert")
89+
},
90+
{
91+
name: "ConfirmDialog",
92+
component: () => require("./elements/dialogs/Confirm")
93+
},
94+
{
95+
name: "LoginDialog",
96+
component: () => require("./elements/dialogs/Login")
97+
},
98+
{
99+
name: "PromptDialog",
100+
component: () => require("./elements/dialogs/Prompt")
101+
}
102+
]
103+
},
104104

105+
methods: {
106+
showElement(element) {
107+
this.$navigateTo(element.component());
108+
}
109+
},
105110

106-
methods: {
107-
showElement(element) {
108-
this.$navigateTo(element.component())
109-
}
110-
},
111-
112-
template: `
111+
template: `
113112
<Frame>
114-
<Page>
115-
<ActionBar title="Home"></ActionBar>
116-
<WrapLayout class="m-5 home-list">
117-
<Button :text="el.name" v-for="el in elements" @tap="showElement(el)" />
118-
</WrapLayout>
119-
</Page>
113+
<Page>
114+
<ActionBar title="Home"></ActionBar>
115+
<WrapLayout class="m-5 home-list">
116+
<Button :text="el.name" v-for="el in elements" @tap="showElement(el)" />
117+
</WrapLayout>
118+
</Page>
120119
</Frame>
121-
`,
122-
}).$start();
120+
`
121+
}).$start();

Diff for: ‎app/elements/components/ActivityIndicator.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
module.exports = {
2-
template: `
2+
template: `
3+
<Page>
34
<StackLayout class="m-20">
45
<ActivityIndicator busy="true"/>
56
</StackLayout>
7+
</Page>
68
`
7-
};
9+
}

Diff for: ‎app/elements/components/Button.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
module.exports = {
2-
template: `
3-
<StackLayout class="m-20">
4-
<Button text="Button"/>
5-
</StackLayout>
6-
`
7-
};
2+
template: `
3+
<Page>
4+
<StackLayout class="m-20">
5+
<Button text="Button"/>
6+
</StackLayout>
7+
</Page>
8+
`
9+
};

Diff for: ‎app/elements/components/DatePicker.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
module.exports = {
2-
template: `
3-
<StackLayout class="m-20">
4-
<DatePicker/>
5-
</StackLayout>
6-
`
7-
};
2+
template: `
3+
<Page>
4+
<StackLayout class="m-20">
5+
<DatePicker/>
6+
</StackLayout>
7+
</Page>
8+
`
9+
};

Diff for: ‎app/elements/components/HtmlView.js

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
module.exports = {
2-
template: `
3-
<StackLayout class="m-20">
2+
template: `
3+
<Page>
4+
<StackLayout class="m-20">
45
<HtmlView :html="html"/>
5-
</StackLayout>
6-
`,
6+
</StackLayout>
7+
</Page>
8+
`,
79

8-
data() {
9-
return {
10-
html: `
10+
data() {
11+
return {
12+
html: `
1113
<div>
1214
<h1>HtmlView</h1>
1315
</div>
1416
`
15-
}
16-
}
17-
};
17+
};
18+
}
19+
};

Diff for: ‎app/elements/components/Image.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
module.exports = {
2-
template: `
3-
<GridLayout rows="auto" class="m-20">
4-
<Image src="res://icon" stretch="none"/>
5-
</GridLayout>
2+
template: `
3+
<Page>
4+
<GridLayout rows="auto" class="m-20">
5+
<Image src="res://icon" stretch="none"/>
6+
</GridLayout>
7+
</Page>
68
`
7-
};
9+
};

Diff for: ‎app/elements/components/Label.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
module.exports = {
2-
template: `
3-
<StackLayout class="m-20">
4-
<Label text="Label"/>
5-
</StackLayout>
2+
template: `
3+
<Page>
4+
<StackLayout class="m-20">
5+
<Label text="Label"/>
6+
</StackLayout>
7+
</Page>
68
`
7-
};
9+
};

Diff for: ‎app/elements/components/ListPicker.js

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
module.exports = {
2-
template: `
3-
<StackLayout class="m-20">
4-
<ListPicker :items="items"></ListPicker>
5-
</StackLayout>
2+
template: `
3+
<Page>
4+
<StackLayout class="m-20">
5+
<ListPicker :items="items"></ListPicker>
6+
</StackLayout>
7+
</Page>
68
`,
79

8-
data() {
9-
return {
10-
items: [
11-
'First',
12-
'Second',
13-
'Third'
14-
]
15-
}
16-
}
17-
};
10+
data() {
11+
return {
12+
items: ["First", "Second", "Third"]
13+
};
14+
}
15+
};

0 commit comments

Comments
 (0)