Merge lp:~nik90/unav/revamp-grid-view-code into lp:unav
- revamp-grid-view-code
- Merge into trunk
Status: | Merged |
---|---|
Merged at revision: | 15 |
Proposed branch: | lp:~nik90/unav/revamp-grid-view-code |
Merge into: | lp:unav |
Prerequisite: | lp:~costales/unav/submenu-for-nearbypage |
Diff against target: |
564 lines (+209/-251) 5 files modified
qml/CustomGridView.qml (+53/-0) qml/Nearby.qml (+28/-84) qml/RoutePage.qml (+37/-83) qml/SharePage.qml (+28/-84) qml/components/GridDelegate.qml (+63/-0) |
To merge this branch: | bzr merge lp:~nik90/unav/revamp-grid-view-code |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
costales | Approve | ||
Review via email: mp+290704@code.launchpad.net |
This proposal supersedes a proposal from 2016-04-01.
Commit message
- Converted Grid and GridDelegate into generic reuseable components
- Made grid text translatable
Description of the change
This branch essentially refactors the grid view code. I noticed that the same code was used in SharePage.qml, RoutePage.qml and NearBy.qml. So I made it into a generic component and removed a lot of duplicate code.
The same situation applied to the grid delegate which I made into a separate reusable component.
Fixed a bug in trunk where grid view text was not translatable.
- 29. By Nekhelesh Ramananthan
-
Small tweak based on phone testing
- 30. By Nekhelesh Ramananthan
-
Fixed missing Popup import in Share page
JkB (joergberroth) wrote : | # |
Cannot test it right now, but i believe in you two.... :-)
m Freitag, 1. April 2016 15:43:16 CEST schrieb costales
<email address hidden>:
> Review: Approve
>
> Working perfect for me.
>
> @Joerg? :)
--
Versandt, mit Dekko von meinem Ubuntu-Gerät
Preview Diff
1 | === added file 'qml/CustomGridView.qml' | |||
2 | --- qml/CustomGridView.qml 1970-01-01 00:00:00 +0000 | |||
3 | +++ qml/CustomGridView.qml 2016-04-01 11:46:32 +0000 | |||
4 | @@ -0,0 +1,53 @@ | |||
5 | 1 | /* | ||
6 | 2 | * Copyright (C) 2016 Canonical Ltd. | ||
7 | 3 | * | ||
8 | 4 | * This program is free software: you can redistribute it and/or modify it | ||
9 | 5 | * under the terms of the GNU General Public License version 3, as published | ||
10 | 6 | * by the Free Software Foundation. | ||
11 | 7 | * | ||
12 | 8 | * This program is distributed in the hope that it will be useful, but | ||
13 | 9 | * WITHOUT ANY WARRANTY; without even the implied warranties of | ||
14 | 10 | * MERCHANTABILITY, SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR | ||
15 | 11 | * PURPOSE. See the GNU General Public License for more details. | ||
16 | 12 | * | ||
17 | 13 | * You should have received a copy of the GNU General Public License along | ||
18 | 14 | * with this program. If not, see <http://www.gnu.org/licenses/>. | ||
19 | 15 | */ | ||
20 | 16 | |||
21 | 17 | import QtQuick 2.4 | ||
22 | 18 | |||
23 | 19 | /* | ||
24 | 20 | This component provide a grid view similar to the ubuntu settings app. It was adapted from the ubuntu-settings-app found at | ||
25 | 21 | http://bazaar.launchpad.net/~system-settings-touch/ubuntu-system-settings/trunk/view/head:/src/qml/CategoryGrid.qml | ||
26 | 22 | */ | ||
27 | 23 | |||
28 | 24 | Grid { | ||
29 | 25 | id: gridView | ||
30 | 26 | |||
31 | 27 | // Public APIs | ||
32 | 28 | property alias model: repeater.model | ||
33 | 29 | property alias delegate: repeater.delegate | ||
34 | 30 | |||
35 | 31 | //from system-settings (lp:ubuntu-system-settings) | ||
36 | 32 | property int itemWidth: units.gu(12) | ||
37 | 33 | |||
38 | 34 | // The amount of whitespace, including column spacing | ||
39 | 35 | property int space: Math.min(units.gu(5), parent.width - columns * itemWidth) | ||
40 | 36 | |||
41 | 37 | // The column spacing is 1/n of the left/right margins | ||
42 | 38 | property int n: 1 | ||
43 | 39 | |||
44 | 40 | rowSpacing: units.gu(6) | ||
45 | 41 | columnSpacing: space / ((2 * n) + (columns - 1)) | ||
46 | 42 | width: (columns * itemWidth) + columnSpacing * (columns - 1) | ||
47 | 43 | |||
48 | 44 | columns: { | ||
49 | 45 | var items = Math.floor(parent.width / itemWidth) | ||
50 | 46 | var count = repeater.count | ||
51 | 47 | return count < items ? count : items | ||
52 | 48 | } | ||
53 | 49 | |||
54 | 50 | Repeater { | ||
55 | 51 | id: repeater | ||
56 | 52 | } | ||
57 | 53 | } | ||
58 | 0 | 54 | ||
59 | === modified file 'qml/Nearby.qml' | |||
60 | --- qml/Nearby.qml 2016-04-01 11:46:32 +0000 | |||
61 | +++ qml/Nearby.qml 2016-04-01 11:46:32 +0000 | |||
62 | @@ -17,8 +17,7 @@ | |||
63 | 17 | 17 | ||
64 | 18 | import QtQuick 2.4 | 18 | import QtQuick 2.4 |
65 | 19 | import Ubuntu.Components 1.3 | 19 | import Ubuntu.Components 1.3 |
68 | 20 | import Ubuntu.Components.Popups 1.3 | 20 | import "components" |
67 | 21 | import Ubuntu.Components.ListItems 1.3 as ListItem | ||
69 | 22 | 21 | ||
70 | 23 | Page { | 22 | Page { |
71 | 24 | id: nearbyPage | 23 | id: nearbyPage |
72 | @@ -31,7 +30,6 @@ | |||
73 | 31 | iconName: "back" | 30 | iconName: "back" |
74 | 32 | text: i18n.tr("Back") | 31 | text: i18n.tr("Back") |
75 | 33 | shortcut: "Escape" | 32 | shortcut: "Escape" |
76 | 34 | enabled: header === standardHeader | ||
77 | 35 | onTriggered: { | 33 | onTriggered: { |
78 | 36 | mainPageStack.pop(nearbyPage) | 34 | mainPageStack.pop(nearbyPage) |
79 | 37 | mainPageStack.push(Qt.resolvedUrl("RoutePage.qml")) | 35 | mainPageStack.push(Qt.resolvedUrl("RoutePage.qml")) |
80 | @@ -41,98 +39,44 @@ | |||
81 | 41 | 39 | ||
82 | 42 | Flickable { | 40 | Flickable { |
83 | 43 | id: flickable | 41 | id: flickable |
86 | 44 | anchors.fill: parent | 42 | |
87 | 45 | anchors.topMargin: units.gu(6) | 43 | anchors { fill: parent; topMargin: units.gu(4); margins: units.gu(2) } |
88 | 46 | height: contentItem.childrenRect.height | 44 | height: contentItem.childrenRect.height |
89 | 47 | boundsBehavior: (contentHeight > nearbyPage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds | 45 | boundsBehavior: (contentHeight > nearbyPage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds |
90 | 48 | 46 | ||
91 | 49 | ListModel { | 47 | ListModel { |
92 | 50 | id: nearbyPageModel | 48 | id: nearbyPageModel |
96 | 51 | ListElement {section: 0 ; text: "Current"; source: "../nav/img/pages/share/current.svg" } | 49 | |
97 | 52 | ListElement {section: 1 ; text: "Destination"; source: "../nav/img/pages/share/destination.svg"} | 50 | Component.onCompleted: initialize() |
98 | 53 | ListElement {section: 2 ; text: "From Map"; source: "../nav/img/pages/share/fromMap.svg" } | 51 | |
99 | 52 | function initialize() { | ||
100 | 53 | nearbyPageModel.append({mode: "CURRENT", text: i18n.tr("Current"), source: "../nav/img/pages/share/current.svg", visible: (mainPageStack.center_onpos !== 0 && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null") }) | ||
101 | 54 | nearbyPageModel.append({mode: "DESTINATION", text: i18n.tr("Destination"), source: "../nav/img/pages/share/destination.svg", visible: (mainPageStack.routeState !== 'no' && mainPageStack.endLat !== "null" && mainPageStack.endLng !== "null") }) | ||
102 | 55 | nearbyPageModel.append({mode: "MAP", text: i18n.tr("From Map"), source: "../nav/img/pages/share/fromMap.svg", visible: true }) | ||
103 | 56 | } | ||
104 | 54 | } | 57 | } |
105 | 55 | 58 | ||
107 | 56 | Grid { | 59 | CustomGridView { |
108 | 57 | id: nearbyPageGrid | 60 | id: nearbyPageGrid |
184 | 58 | //from system-settings (lp:ubuntu-system-settings) | 61 | |
185 | 59 | property int itemWidth: units.gu(14) | 62 | model: nearbyPageModel |
186 | 60 | // The amount of whitespace, including column spacing | 63 | delegate: GridDelegate { |
187 | 61 | property int space: parent.width - columns * itemWidth | 64 | id: delegate |
188 | 62 | // The column spacing is 1/n of the left/right margins | 65 | |
189 | 63 | property int n: 1 | 66 | visible: model.visible |
190 | 64 | 67 | title: model.text | |
191 | 65 | columnSpacing: space / ((2 * n) + (columns - 1)) | 68 | icon: model.source |
192 | 66 | rowSpacing: units.gu(6) | 69 | |
193 | 67 | width: (columns * itemWidth) + columnSpacing * (columns - 1) | 70 | onClicked: { |
194 | 68 | anchors.horizontalCenter: parent.horizontalCenter | 71 | mainPageStack.pop(nearbyPage); |
195 | 69 | columns: { | 72 | if (model.mode === "CURRENT") { |
196 | 70 | var items = Math.floor(parent.width / itemWidth) | 73 | mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.currentLat, "lng": mainPageStack.currentLng}) |
197 | 71 | var count = repeater.count | 74 | } else if (model.mode === "DESTINATION") { |
198 | 72 | return count < items ? count : items | 75 | mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.endLat, "lng": mainPageStack.endLng}) |
124 | 73 | } | ||
125 | 74 | |||
126 | 75 | Repeater { | ||
127 | 76 | id: repeater | ||
128 | 77 | model: nearbyPageModel | ||
129 | 78 | delegate: Component { | ||
130 | 79 | id: buttonComponent | ||
131 | 80 | AbstractButton { | ||
132 | 81 | id: button | ||
133 | 82 | width: col.width | ||
134 | 83 | visible: ((model.section === 0 && (mainPageStack.center_onpos !== 0 && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null")) || | ||
135 | 84 | (model.section === 1 && (mainPageStack.routeState !== 'no' && mainPageStack.endLat !== "null" && mainPageStack.endLng !== "null")) || | ||
136 | 85 | (model.section === 2)) | ||
137 | 86 | onClicked: { | ||
138 | 87 | mainPageStack.pop(nearbyPage); | ||
139 | 88 | if (model.text === "Current") { | ||
140 | 89 | mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.currentLat, "lng": mainPageStack.currentLng}) | ||
141 | 90 | } else if (model.text === "Destination") { | ||
142 | 91 | mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.endLat, "lng": mainPageStack.endLng}) | ||
143 | 92 | } | ||
144 | 93 | } | ||
145 | 94 | |||
146 | 95 | height: col.height | ||
147 | 96 | |||
148 | 97 | Column { | ||
149 | 98 | id: col | ||
150 | 99 | width: units.gu (14) | ||
151 | 100 | height: units.gu (8) | ||
152 | 101 | anchors.left: parent.left | ||
153 | 102 | anchors.right: parent.right | ||
154 | 103 | |||
155 | 104 | Icon { | ||
156 | 105 | id: icon | ||
157 | 106 | anchors.horizontalCenter: parent.horizontalCenter | ||
158 | 107 | width: height | ||
159 | 108 | height: units.gu(4) | ||
160 | 109 | source: model.source | ||
161 | 110 | } | ||
162 | 111 | |||
163 | 112 | Label { | ||
164 | 113 | anchors.horizontalCenter: parent.horizontalCenter | ||
165 | 114 | anchors.bottom: parent.bottom | ||
166 | 115 | text: i18n.tr(model.text) | ||
167 | 116 | width: col.width | ||
168 | 117 | horizontalAlignment: Text.AlignHCenter | ||
169 | 118 | fontSize: "small" | ||
170 | 119 | wrapMode: Text.WrapAtWordBoundaryOrAnywhere | ||
171 | 120 | } | ||
172 | 121 | } | ||
173 | 122 | |||
174 | 123 | UbuntuShape { | ||
175 | 124 | z: -1 | ||
176 | 125 | visible: button.pressed | ||
177 | 126 | anchors{ | ||
178 | 127 | fill: col | ||
179 | 128 | margins: -units.gu(0.25) | ||
180 | 129 | } | ||
181 | 130 | backgroundColor: UbuntuColors.darkGrey | ||
182 | 131 | opacity: 0.15 | ||
183 | 132 | } | ||
199 | 133 | } | 76 | } |
200 | 134 | } | 77 | } |
201 | 135 | } | 78 | } |
202 | 136 | } | 79 | } |
203 | 137 | } | 80 | } |
204 | 138 | } | 81 | } |
205 | 82 | |||
206 | 139 | 83 | ||
207 | === modified file 'qml/RoutePage.qml' | |||
208 | --- qml/RoutePage.qml 2016-04-01 11:46:32 +0000 | |||
209 | +++ qml/RoutePage.qml 2016-04-01 11:46:32 +0000 | |||
210 | @@ -17,6 +17,7 @@ | |||
211 | 17 | 17 | ||
212 | 18 | import QtQuick 2.4 | 18 | import QtQuick 2.4 |
213 | 19 | import Ubuntu.Components 1.3 | 19 | import Ubuntu.Components 1.3 |
214 | 20 | import "components" | ||
215 | 20 | 21 | ||
216 | 21 | Page { | 22 | Page { |
217 | 22 | id: routePage | 23 | id: routePage |
218 | @@ -31,97 +32,50 @@ | |||
219 | 31 | Flickable { | 32 | Flickable { |
220 | 32 | id: flickable | 33 | id: flickable |
221 | 33 | 34 | ||
223 | 34 | anchors { fill: parent; margins: units.gu(2); topMargin: units.gu(6) } | 35 | anchors { fill: parent; margins: units.gu(2); topMargin: units.gu(4) } |
224 | 35 | height: contentItem.childrenRect.height | 36 | height: contentItem.childrenRect.height |
225 | 36 | boundsBehavior: (contentHeight > routePage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds | 37 | boundsBehavior: (contentHeight > routePage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds |
226 | 37 | 38 | ||
227 | 38 | ListModel { | 39 | ListModel { |
228 | 39 | id: routePageModel | 40 | id: routePageModel |
235 | 40 | ListElement {section: 0 ; text: "Search"; iconName: "../nav/img/pages/route/search.svg" } | 41 | Component.onCompleted: initialize() |
236 | 41 | ListElement {section: 0 ; text: "Favorites"; iconName: "../nav/img/pages/route/favorites.svg" } | 42 | |
237 | 42 | ListElement {section: 0 ; text: "Nearby"; iconName: "../nav/img/pages/route/nearby.svg"} | 43 | function initialize() { |
238 | 43 | ListElement {section: 0 ; text: "Coordinates"; iconName: "../nav/img/pages/route/coordinates.svg"} | 44 | routePageModel.append({mode: "SEARCH", text: i18n.tr("Search"), source: "../nav/img/pages/route/search.svg", visible: true}) |
239 | 44 | ListElement {section: 0 ; text: "Share"; iconName: "../nav/img/pages/route/share.svg"} | 45 | routePageModel.append({mode: "FAVORITES", text: i18n.tr("Favorites"), source: "../nav/img/pages/route/favorites.svg", visible: true}) |
240 | 45 | ListElement {section: 1 ; text: "Cancel Route"; iconName: "../nav/img/pages/route/cancel.svg" } | 46 | routePageModel.append({mode: "NEARBY", text: i18n.tr("Nearby"), source: "../nav/img/pages/route/nearby.svg", visible: true}) |
241 | 47 | routePageModel.append({mode: "COORDINATES", text: i18n.tr("Coordinates"), source: "../nav/img/pages/route/coordinates.svg", visible: true}) | ||
242 | 48 | routePageModel.append({mode: "SHARE", text: i18n.tr("Share"), source: "../nav/img/pages/route/share.svg", visible: true}) | ||
243 | 49 | routePageModel.append({mode: "CANCEL", text: i18n.tr("Cancel Route"), source: "../nav/img/pages/route/cancel.svg", visible: mainPageStack.routeState !== 'no'}) | ||
244 | 50 | } | ||
245 | 46 | } | 51 | } |
246 | 47 | 52 | ||
248 | 48 | Grid { | 53 | CustomGridView { |
249 | 49 | id: routePageGrid | 54 | id: routePageGrid |
325 | 50 | //from system-settings (lp:ubuntu-system-settings) | 55 | |
326 | 51 | property int itemWidth: units.gu(14) | 56 | model: routePageModel |
327 | 52 | // The amount of whitespace, including column spacing | 57 | delegate: GridDelegate { |
328 | 53 | property int space: parent.width - columns * itemWidth | 58 | id: delegate |
329 | 54 | // The column spacing is 1/n of the left/right margins | 59 | |
330 | 55 | property int n: 1 | 60 | title: model.text |
331 | 56 | 61 | icon: model.source | |
332 | 57 | columnSpacing: space / ((2 * n) + (columns - 1)) | 62 | visible: model.visible |
333 | 58 | rowSpacing: units.gu(6) | 63 | |
334 | 59 | width: (columns * itemWidth) + columnSpacing * (columns - 1) | 64 | onClicked: { |
335 | 60 | anchors.horizontalCenter: parent.horizontalCenter | 65 | mainPageStack.pop(routePage) |
336 | 61 | columns: { | 66 | if (model.mode === "FAVORITES") { |
337 | 62 | var items = Math.floor(parent.width / itemWidth) | 67 | mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml")) |
338 | 63 | var count = repeater.count | 68 | } else if (model.mode === "SEARCH") { |
339 | 64 | return count < items ? count : items | 69 | mainPageStack.push(Qt.resolvedUrl("SearchPage.qml")) |
340 | 65 | } | 70 | } else if (model.mode === "NEARBY") { |
341 | 66 | 71 | mainPageStack.push(Qt.resolvedUrl("Nearby.qml")) | |
342 | 67 | Repeater { | 72 | } else if (model.mode === "COORDINATES") { |
343 | 68 | id: repeater | 73 | mainPageStack.push(Qt.resolvedUrl("Coordinate.qml")) |
344 | 69 | 74 | } else if (model.mode === "SHARE") { | |
345 | 70 | model: routePageModel | 75 | mainPageStack.push(Qt.resolvedUrl("SharePage.qml")) |
346 | 71 | 76 | } else if (model.mode === "CANCEL") { | |
347 | 72 | delegate: AbstractButton { | 77 | mainPageStack.routeState = 'no'; |
348 | 73 | id: button | 78 | mainPageStack.executeJavaScript("click_cancel_route();") |
274 | 74 | |||
275 | 75 | width: col.width | ||
276 | 76 | height: col.height | ||
277 | 77 | visible: (model.section === 0 || (model.section === 1 && mainPageStack.routeState !== 'no')) | ||
278 | 78 | |||
279 | 79 | UbuntuShape { | ||
280 | 80 | opacity: 0.15 | ||
281 | 81 | visible: button.pressed | ||
282 | 82 | anchors { fill: col; margins: -units.gu(1) } | ||
283 | 83 | backgroundColor: UbuntuColors.darkGrey | ||
284 | 84 | } | ||
285 | 85 | |||
286 | 86 | Column { | ||
287 | 87 | id: col | ||
288 | 88 | |||
289 | 89 | spacing: units.gu(2) | ||
290 | 90 | width: units.gu (14) | ||
291 | 91 | |||
292 | 92 | Icon { | ||
293 | 93 | width: height | ||
294 | 94 | height: units.gu(4) | ||
295 | 95 | source: model.iconName | ||
296 | 96 | anchors.horizontalCenter: parent.horizontalCenter | ||
297 | 97 | } | ||
298 | 98 | |||
299 | 99 | Label { | ||
300 | 100 | width: col.width | ||
301 | 101 | fontSize: "small" | ||
302 | 102 | text: i18n.tr(model.text) | ||
303 | 103 | horizontalAlignment: Text.AlignHCenter | ||
304 | 104 | wrapMode: Text.WrapAtWordBoundaryOrAnywhere | ||
305 | 105 | anchors.horizontalCenter: parent.horizontalCenter | ||
306 | 106 | } | ||
307 | 107 | } | ||
308 | 108 | |||
309 | 109 | onClicked: { | ||
310 | 110 | mainPageStack.pop(routePage) | ||
311 | 111 | if (model.text === "Favorites") { | ||
312 | 112 | mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml")) | ||
313 | 113 | } else if (model.text === "Search") { | ||
314 | 114 | mainPageStack.push(Qt.resolvedUrl("SearchPage.qml")) | ||
315 | 115 | } else if (model.text === "Nearby") { | ||
316 | 116 | mainPageStack.push(Qt.resolvedUrl("Nearby.qml")) | ||
317 | 117 | } else if (model.text === "Coordinates") { | ||
318 | 118 | mainPageStack.push(Qt.resolvedUrl("Coordinate.qml")) | ||
319 | 119 | } else if (model.text === "Share") { | ||
320 | 120 | mainPageStack.push(Qt.resolvedUrl("SharePage.qml")) | ||
321 | 121 | } else if (model.text === "Cancel Route") { | ||
322 | 122 | mainPageStack.routeState = 'no'; | ||
323 | 123 | mainPageStack.executeJavaScript("click_cancel_route();") | ||
324 | 124 | } | ||
349 | 125 | } | 79 | } |
350 | 126 | } | 80 | } |
351 | 127 | } | 81 | } |
352 | 128 | 82 | ||
353 | === modified file 'qml/SharePage.qml' | |||
354 | --- qml/SharePage.qml 2016-04-01 11:46:32 +0000 | |||
355 | +++ qml/SharePage.qml 2016-04-01 11:46:32 +0000 | |||
356 | @@ -18,7 +18,7 @@ | |||
357 | 18 | import QtQuick 2.4 | 18 | import QtQuick 2.4 |
358 | 19 | import Ubuntu.Components 1.3 | 19 | import Ubuntu.Components 1.3 |
359 | 20 | import Ubuntu.Components.Popups 1.3 | 20 | import Ubuntu.Components.Popups 1.3 |
361 | 21 | import Ubuntu.Components.ListItems 1.3 as ListItem | 21 | import "components" |
362 | 22 | 22 | ||
363 | 23 | Page { | 23 | Page { |
364 | 24 | id: sharePage | 24 | id: sharePage |
365 | @@ -31,7 +31,6 @@ | |||
366 | 31 | iconName: "back" | 31 | iconName: "back" |
367 | 32 | text: i18n.tr("Back") | 32 | text: i18n.tr("Back") |
368 | 33 | shortcut: "Escape" | 33 | shortcut: "Escape" |
369 | 34 | enabled: header === standardHeader | ||
370 | 35 | onTriggered: { | 34 | onTriggered: { |
371 | 36 | mainPageStack.pop(sharePage) | 35 | mainPageStack.pop(sharePage) |
372 | 37 | mainPageStack.push(Qt.resolvedUrl("RoutePage.qml")) | 36 | mainPageStack.push(Qt.resolvedUrl("RoutePage.qml")) |
373 | @@ -41,96 +40,41 @@ | |||
374 | 41 | 40 | ||
375 | 42 | Flickable { | 41 | Flickable { |
376 | 43 | id: flickable | 42 | id: flickable |
379 | 44 | anchors.fill: parent | 43 | |
380 | 45 | anchors.topMargin: units.gu(6) | 44 | anchors { fill: parent; topMargin: units.gu(4); margins: units.gu(2) } |
381 | 46 | height: contentItem.childrenRect.height | 45 | height: contentItem.childrenRect.height |
382 | 47 | boundsBehavior: (contentHeight > sharePage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds | 46 | boundsBehavior: (contentHeight > sharePage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds |
383 | 48 | 47 | ||
384 | 49 | ListModel { | 48 | ListModel { |
385 | 50 | id: sharePageModel | 49 | id: sharePageModel |
389 | 51 | ListElement {section: 0 ; text: "Current"; source: "../nav/img/pages/share/current.svg" } | 50 | |
390 | 52 | ListElement {section: 1 ; text: "Destination"; source: "../nav/img/pages/share/destination.svg"} | 51 | Component.onCompleted: initialize() |
391 | 53 | ListElement {section: 2 ; text: "From Map"; source: "../nav/img/pages/share/fromMap.svg" } | 52 | |
392 | 53 | function initialize() { | ||
393 | 54 | sharePageModel.append({mode: "CURRENT", text: i18n.tr("Current"), source: "../nav/img/pages/share/current.svg", visible: (mainPageStack.center_onpos !== 0 && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null") }) | ||
394 | 55 | sharePageModel.append({mode: "DESTINATION", text: i18n.tr("Destination"), source: "../nav/img/pages/share/destination.svg", visible: (mainPageStack.routeState !== 'no' && mainPageStack.endLat !== "null" && mainPageStack.endLng !== "null") }) | ||
395 | 56 | sharePageModel.append({mode: "MAP", text: i18n.tr("From Map"), source: "../nav/img/pages/share/fromMap.svg", visible: true }) | ||
396 | 57 | } | ||
397 | 54 | } | 58 | } |
398 | 55 | 59 | ||
400 | 56 | Grid { | 60 | CustomGridView { |
401 | 57 | id: sharePageGrid | 61 | id: sharePageGrid |
478 | 58 | //from system-settings (lp:ubuntu-system-settings) | 62 | |
479 | 59 | property int itemWidth: units.gu(14) | 63 | model: sharePageModel |
480 | 60 | // The amount of whitespace, including column spacing | 64 | delegate: GridDelegate { |
481 | 61 | property int space: parent.width - columns * itemWidth | 65 | id: delegate |
482 | 62 | // The column spacing is 1/n of the left/right margins | 66 | |
483 | 63 | property int n: 1 | 67 | title: model.text |
484 | 64 | 68 | icon: model.source | |
485 | 65 | columnSpacing: space / ((2 * n) + (columns - 1)) | 69 | visible: model.visible |
486 | 66 | rowSpacing: units.gu(6) | 70 | |
487 | 67 | width: (columns * itemWidth) + columnSpacing * (columns - 1) | 71 | onClicked: { |
488 | 68 | anchors.horizontalCenter: parent.horizontalCenter | 72 | if (model.mode === "CURRENT") { |
489 | 69 | columns: { | 73 | PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.currentLat, "lon": mainPageStack.currentLng}) |
490 | 70 | var items = Math.floor(parent.width / itemWidth) | 74 | } else if (model.model === "DESTINATION") { |
491 | 71 | var count = repeater.count | 75 | PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.endLat, "lon": mainPageStack.endLng}) |
492 | 72 | return count < items ? count : items | 76 | } else if (model.mode === "MAP") { |
493 | 73 | } | 77 | mainPageStack.pop(sharePage); // Show map |
418 | 74 | |||
419 | 75 | Repeater { | ||
420 | 76 | id: repeater | ||
421 | 77 | model: sharePageModel | ||
422 | 78 | delegate: Component { | ||
423 | 79 | id: buttonComponent | ||
424 | 80 | AbstractButton { | ||
425 | 81 | id: button | ||
426 | 82 | width: col.width | ||
427 | 83 | visible: ((model.section === 0 && (mainPageStack.center_onpos !== 0 && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null")) || | ||
428 | 84 | (model.section === 1 && (mainPageStack.routeState !== 'no' && mainPageStack.endLat !== "null" && mainPageStack.endLng !== "null")) || | ||
429 | 85 | (model.section === 2)) | ||
430 | 86 | onClicked: { | ||
431 | 87 | if (model.text === "Current") { | ||
432 | 88 | PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.currentLat, "lon": mainPageStack.currentLng}) | ||
433 | 89 | } else if (model.text === "Destination") { | ||
434 | 90 | PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.endLat, "lon": mainPageStack.endLng}) | ||
435 | 91 | } else if (model.text === "From Map") { | ||
436 | 92 | mainPageStack.pop(sharePage); // Show map | ||
437 | 93 | } | ||
438 | 94 | } | ||
439 | 95 | |||
440 | 96 | height: col.height | ||
441 | 97 | |||
442 | 98 | Column { | ||
443 | 99 | id: col | ||
444 | 100 | width: units.gu (14) | ||
445 | 101 | height: units.gu (8) | ||
446 | 102 | anchors.left: parent.left | ||
447 | 103 | anchors.right: parent.right | ||
448 | 104 | |||
449 | 105 | Icon { | ||
450 | 106 | id: icon | ||
451 | 107 | anchors.horizontalCenter: parent.horizontalCenter | ||
452 | 108 | width: height | ||
453 | 109 | height: units.gu(4) | ||
454 | 110 | source: model.source | ||
455 | 111 | } | ||
456 | 112 | |||
457 | 113 | Label { | ||
458 | 114 | anchors.horizontalCenter: parent.horizontalCenter | ||
459 | 115 | anchors.bottom: parent.bottom | ||
460 | 116 | text: i18n.tr(model.text) | ||
461 | 117 | width: col.width | ||
462 | 118 | horizontalAlignment: Text.AlignHCenter | ||
463 | 119 | fontSize: "small" | ||
464 | 120 | wrapMode: Text.WrapAtWordBoundaryOrAnywhere | ||
465 | 121 | } | ||
466 | 122 | } | ||
467 | 123 | |||
468 | 124 | UbuntuShape { | ||
469 | 125 | z: -1 | ||
470 | 126 | visible: button.pressed | ||
471 | 127 | anchors{ | ||
472 | 128 | fill: col | ||
473 | 129 | margins: -units.gu(0.25) | ||
474 | 130 | } | ||
475 | 131 | backgroundColor: UbuntuColors.darkGrey | ||
476 | 132 | opacity: 0.15 | ||
477 | 133 | } | ||
494 | 134 | } | 78 | } |
495 | 135 | } | 79 | } |
496 | 136 | } | 80 | } |
497 | 137 | 81 | ||
498 | === added file 'qml/components/GridDelegate.qml' | |||
499 | --- qml/components/GridDelegate.qml 1970-01-01 00:00:00 +0000 | |||
500 | +++ qml/components/GridDelegate.qml 2016-04-01 11:46:32 +0000 | |||
501 | @@ -0,0 +1,63 @@ | |||
502 | 1 | /* | ||
503 | 2 | * uNav http://launchpad.net/unav | ||
504 | 3 | * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90 | ||
505 | 4 | * | ||
506 | 5 | * uNav is free software; you can redistribute it and/or modify | ||
507 | 6 | * it under the terms of the GNU General Public License as published by | ||
508 | 7 | * the Free Software Foundation; either version 3 of the License, or | ||
509 | 8 | * (at your option) any later version. | ||
510 | 9 | * | ||
511 | 10 | * uNav is distributed in the hope that it will be useful, | ||
512 | 11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
513 | 12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
514 | 13 | * GNU General Public License for more details. | ||
515 | 14 | */ | ||
516 | 15 | |||
517 | 16 | import QtQuick 2.4 | ||
518 | 17 | import Ubuntu.Components 1.3 | ||
519 | 18 | |||
520 | 19 | AbstractButton { | ||
521 | 20 | id: gridDelegate | ||
522 | 21 | |||
523 | 22 | // Public APIs | ||
524 | 23 | property string title | ||
525 | 24 | property alias icon: _icon.source | ||
526 | 25 | |||
527 | 26 | width: delegateColumn.width | ||
528 | 27 | height: delegateColumn.height | ||
529 | 28 | |||
530 | 29 | Loader { | ||
531 | 30 | sourceComponent: gridDelegate.pressed ? backgroundComponent : undefined | ||
532 | 31 | anchors { fill: delegateColumn; margins: -units.gu(1) } | ||
533 | 32 | } | ||
534 | 33 | |||
535 | 34 | Component { | ||
536 | 35 | id: backgroundComponent | ||
537 | 36 | UbuntuShape { | ||
538 | 37 | opacity: 0.15 | ||
539 | 38 | backgroundColor: UbuntuColors.darkGrey | ||
540 | 39 | } | ||
541 | 40 | } | ||
542 | 41 | |||
543 | 42 | Column { | ||
544 | 43 | id: delegateColumn | ||
545 | 44 | |||
546 | 45 | width: units.gu(12) | ||
547 | 46 | spacing: units.gu(2) | ||
548 | 47 | |||
549 | 48 | Icon { | ||
550 | 49 | id: _icon | ||
551 | 50 | width: height | ||
552 | 51 | height: units.gu(4) | ||
553 | 52 | anchors.horizontalCenter: parent.horizontalCenter | ||
554 | 53 | } | ||
555 | 54 | |||
556 | 55 | Label { | ||
557 | 56 | width: parent.width | ||
558 | 57 | textSize: Label.Small | ||
559 | 58 | text: title | ||
560 | 59 | horizontalAlignment: Text.AlignHCenter | ||
561 | 60 | wrapMode: Text.WrapAtWordBoundaryOrAnywhere | ||
562 | 61 | } | ||
563 | 62 | } | ||
564 | 63 | } |
Working perfect for me.
@Joerg? :)