Merge lp:~nik90/unav/revamp-grid-view-code into lp:unav

[Nekhelesh Ramananthan]

- Converted Grid and GridDelegate into generic reuseable components
- Made grid text translatable

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.

[lp:~nik90/unav/revamp-grid-view-code]

29. By Nekhelesh Ramananthan on 2016-04-01

Small tweak based on phone testing

30. By Nekhelesh Ramananthan on 2016-04-01

Fixed missing Popup import in Share page

[costales (costales)]

Working perfect for me.

@Joerg? :)

review: Approve

[JkB (joergberroth)]

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

[costales (costales)]

Merged then! :)

review: Approve

=== added file 'qml/CustomGridView.qml'
--- qml/CustomGridView.qml	1970-01-01 00:00:00 +0000
+++ qml/CustomGridView.qml	2016-04-01 11:46:32 +0000
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2016 Canonical Ltd.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 3, as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranties of
+ * MERCHANTABILITY, SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR
+ * PURPOSE.  See the GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+/*
+ This component provide a grid view similar to the ubuntu settings app. It was adapted from the ubuntu-settings-app found at
+ http://bazaar.launchpad.net/~system-settings-touch/ubuntu-system-settings/trunk/view/head:/src/qml/CategoryGrid.qml
+*/
+
+Grid {
+    id: gridView
+
+    // Public APIs
+    property alias model: repeater.model
+    property alias delegate: repeater.delegate
+
+    //from system-settings (lp:ubuntu-system-settings)
+    property int itemWidth: units.gu(12)
+
+    // The amount of whitespace, including column spacing
+    property int space: Math.min(units.gu(5), parent.width - columns * itemWidth)
+
+    // The column spacing is 1/n of the left/right margins
+    property int n: 1
+
+    rowSpacing: units.gu(6)
+    columnSpacing: space / ((2 * n) + (columns - 1))
+    width: (columns * itemWidth) + columnSpacing * (columns - 1)
+
+    columns: {
+        var items = Math.floor(parent.width / itemWidth)
+        var count = repeater.count
+        return count < items ? count : items
+    }
+    
+    Repeater {
+        id: repeater
+    }
+}

=== modified file 'qml/Nearby.qml'
--- qml/Nearby.qml	2016-04-01 11:46:32 +0000
+++ qml/Nearby.qml	2016-04-01 11:46:32 +0000
@@ -17,8 +17,7 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.Popups 1.3
-import Ubuntu.Components.ListItems 1.3 as ListItem
+import "components"
 
 Page {
     id: nearbyPage
@@ -31,7 +30,6 @@
             iconName: "back"
             text: i18n.tr("Back")
             shortcut: "Escape"
-            enabled: header === standardHeader
             onTriggered: {
                 mainPageStack.pop(nearbyPage)
                 mainPageStack.push(Qt.resolvedUrl("RoutePage.qml"))
@@ -41,98 +39,44 @@
 
     Flickable {
         id: flickable
-        anchors.fill: parent
-        anchors.topMargin: units.gu(6)
+
+        anchors { fill: parent; topMargin: units.gu(4); margins: units.gu(2) }
         height: contentItem.childrenRect.height
         boundsBehavior: (contentHeight > nearbyPage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds
 
         ListModel {
             id: nearbyPageModel
-            ListElement {section: 0 ; text: "Current"; source: "../nav/img/pages/share/current.svg" }
-            ListElement {section: 1 ; text: "Destination"; source: "../nav/img/pages/share/destination.svg"}
-            ListElement {section: 2 ; text: "From Map"; source: "../nav/img/pages/share/fromMap.svg" }
+
+            Component.onCompleted: initialize()
+
+            function initialize() {
+                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") })
+                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") })
+                nearbyPageModel.append({mode: "MAP", text: i18n.tr("From Map"), source: "../nav/img/pages/share/fromMap.svg", visible: true })
+            }
         }
 
-        Grid {
+        CustomGridView {
             id: nearbyPageGrid
-            //from system-settings (lp:ubuntu-system-settings)
-            property int itemWidth: units.gu(14)
-            // The amount of whitespace, including column spacing
-            property int space: parent.width - columns * itemWidth
-            // The column spacing is 1/n of the left/right margins
-            property int n: 1
-
-            columnSpacing: space / ((2 * n) + (columns - 1))
-            rowSpacing: units.gu(6)
-            width: (columns * itemWidth) + columnSpacing * (columns - 1)
-            anchors.horizontalCenter: parent.horizontalCenter
-            columns: {
-                var items = Math.floor(parent.width / itemWidth)
-                var count = repeater.count
-                return count < items ? count : items
-            }
-
-            Repeater {
-                id: repeater
-                model: nearbyPageModel
-                delegate: Component {
-                    id: buttonComponent
-                    AbstractButton {
-                        id: button
-                        width: col.width
-                        visible: ((model.section === 0 && (mainPageStack.center_onpos !== 0 && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null")) ||
-                                  (model.section === 1 && (mainPageStack.routeState !== 'no' && mainPageStack.endLat !== "null" && mainPageStack.endLng !== "null")) ||
-                                  (model.section === 2))
-                        onClicked: {
-                            mainPageStack.pop(nearbyPage);
-                            if (model.text === "Current") {
-                                mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.currentLat, "lng": mainPageStack.currentLng})
-                            } else if (model.text === "Destination") {
-                                mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.endLat, "lng": mainPageStack.endLng})
-                            }
-                        }
-
-                        height: col.height
-
-                        Column {
-                            id: col
-                            width: units.gu (14)
-                            height: units.gu (8)
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-
-                            Icon {
-                                id: icon
-                                anchors.horizontalCenter: parent.horizontalCenter
-                                width: height
-                                height: units.gu(4)
-                                source: model.source
-                            }
-
-                            Label {
-                                anchors.horizontalCenter: parent.horizontalCenter
-                                anchors.bottom: parent.bottom
-                                text: i18n.tr(model.text)
-                                width: col.width
-                                horizontalAlignment: Text.AlignHCenter
-                                fontSize: "small"
-                                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                            }
-                        }
-
-                        UbuntuShape {
-                            z: -1
-                            visible: button.pressed
-                            anchors{
-                                fill: col
-                                margins: -units.gu(0.25)
-                            }
-                            backgroundColor: UbuntuColors.darkGrey
-                            opacity: 0.15
-                        }
+
+            model: nearbyPageModel
+            delegate: GridDelegate {
+                id: delegate
+
+                visible: model.visible
+                title: model.text
+                icon: model.source
+
+                onClicked: {
+                    mainPageStack.pop(nearbyPage);
+                    if (model.mode === "CURRENT") {
+                        mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.currentLat, "lng": mainPageStack.currentLng})
+                    } else if (model.mode === "DESTINATION") {
+                        mainPageStack.push(Qt.resolvedUrl("./PoiPage.qml"), {"fromPage": "Nearby.qml", "lat": mainPageStack.endLat, "lng": mainPageStack.endLng})
                     }
                 }
             }
         }
     }
 }
+

=== modified file 'qml/RoutePage.qml'
--- qml/RoutePage.qml	2016-04-01 11:46:32 +0000
+++ qml/RoutePage.qml	2016-04-01 11:46:32 +0000
@@ -17,6 +17,7 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
+import "components"
 
 Page {
     id: routePage
@@ -31,97 +32,50 @@
     Flickable {
         id: flickable
 
-        anchors { fill: parent; margins: units.gu(2); topMargin: units.gu(6) }
+        anchors { fill: parent; margins: units.gu(2); topMargin: units.gu(4) }
         height: contentItem.childrenRect.height
         boundsBehavior: (contentHeight > routePage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds
 
         ListModel {
             id: routePageModel
-            ListElement {section: 0 ; text: "Search"; iconName: "../nav/img/pages/route/search.svg" }
-            ListElement {section: 0 ; text: "Favorites"; iconName: "../nav/img/pages/route/favorites.svg" }
-            ListElement {section: 0 ; text: "Nearby"; iconName: "../nav/img/pages/route/nearby.svg"}
-            ListElement {section: 0 ; text: "Coordinates"; iconName: "../nav/img/pages/route/coordinates.svg"}
-            ListElement {section: 0 ; text: "Share"; iconName: "../nav/img/pages/route/share.svg"}
-            ListElement {section: 1 ; text: "Cancel Route"; iconName: "../nav/img/pages/route/cancel.svg" }
+            Component.onCompleted: initialize()
+
+            function initialize() {
+                routePageModel.append({mode: "SEARCH", text: i18n.tr("Search"), source: "../nav/img/pages/route/search.svg", visible: true})
+                routePageModel.append({mode: "FAVORITES", text: i18n.tr("Favorites"), source: "../nav/img/pages/route/favorites.svg", visible: true})
+                routePageModel.append({mode: "NEARBY", text: i18n.tr("Nearby"), source: "../nav/img/pages/route/nearby.svg", visible: true})
+                routePageModel.append({mode: "COORDINATES", text: i18n.tr("Coordinates"), source: "../nav/img/pages/route/coordinates.svg", visible: true})
+                routePageModel.append({mode: "SHARE", text: i18n.tr("Share"), source: "../nav/img/pages/route/share.svg", visible: true})
+                routePageModel.append({mode: "CANCEL", text: i18n.tr("Cancel Route"), source: "../nav/img/pages/route/cancel.svg", visible: mainPageStack.routeState !== 'no'})
+            }
         }
 
-        Grid {
+        CustomGridView {
             id: routePageGrid
-            //from system-settings (lp:ubuntu-system-settings)
-            property int itemWidth: units.gu(14)
-            // The amount of whitespace, including column spacing
-            property int space: parent.width - columns * itemWidth
-            // The column spacing is 1/n of the left/right margins
-            property int n: 1
-
-            columnSpacing: space / ((2 * n) + (columns - 1))
-            rowSpacing: units.gu(6)
-            width: (columns * itemWidth) + columnSpacing * (columns - 1)
-            anchors.horizontalCenter: parent.horizontalCenter
-            columns: {
-                var items = Math.floor(parent.width / itemWidth)
-                var count = repeater.count
-                return count < items ? count : items
-            }
-
-            Repeater {
-                id: repeater
-
-                model: routePageModel
-
-                delegate: AbstractButton {
-                    id: button
-
-                    width: col.width
-                    height: col.height
-                    visible: (model.section === 0 || (model.section === 1 && mainPageStack.routeState !== 'no'))
-
-                    UbuntuShape {
-                        opacity: 0.15
-                        visible: button.pressed
-                        anchors { fill: col; margins: -units.gu(1) }
-                        backgroundColor: UbuntuColors.darkGrey
-                    }
-
-                    Column {
-                        id: col
-
-                        spacing: units.gu(2)
-                        width: units.gu (14)
-
-                        Icon {
-                            width: height
-                            height: units.gu(4)
-                            source: model.iconName
-                            anchors.horizontalCenter: parent.horizontalCenter
-                        }
-
-                        Label {
-                            width: col.width
-                            fontSize: "small"
-                            text: i18n.tr(model.text)
-                            horizontalAlignment: Text.AlignHCenter
-                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                            anchors.horizontalCenter: parent.horizontalCenter
-                        }
-                    }
-
-                    onClicked: {
-                        mainPageStack.pop(routePage)
-                        if (model.text === "Favorites") {
-                            mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml"))
-                        } else if (model.text === "Search") {
-                            mainPageStack.push(Qt.resolvedUrl("SearchPage.qml"))
-                        } else if (model.text === "Nearby") {
-                            mainPageStack.push(Qt.resolvedUrl("Nearby.qml"))
-                        } else if (model.text === "Coordinates") {
-                            mainPageStack.push(Qt.resolvedUrl("Coordinate.qml"))
-                        } else if (model.text === "Share") {
-                            mainPageStack.push(Qt.resolvedUrl("SharePage.qml"))
-                        } else if (model.text === "Cancel Route") {
-                            mainPageStack.routeState = 'no';
-                            mainPageStack.executeJavaScript("click_cancel_route();")
-                        }
+
+            model: routePageModel
+            delegate: GridDelegate {
+                id: delegate
+
+                title: model.text
+                icon: model.source
+                visible: model.visible
+
+                onClicked: {
+                    mainPageStack.pop(routePage)
+                    if (model.mode === "FAVORITES") {
+                        mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml"))
+                    } else if (model.mode === "SEARCH") {
+                        mainPageStack.push(Qt.resolvedUrl("SearchPage.qml"))
+                    } else if (model.mode === "NEARBY") {
+                        mainPageStack.push(Qt.resolvedUrl("Nearby.qml"))
+                    } else if (model.mode === "COORDINATES") {
+                        mainPageStack.push(Qt.resolvedUrl("Coordinate.qml"))
+                    } else if (model.mode === "SHARE") {
+                        mainPageStack.push(Qt.resolvedUrl("SharePage.qml"))
+                    } else if (model.mode === "CANCEL") {
+                        mainPageStack.routeState = 'no';
+                        mainPageStack.executeJavaScript("click_cancel_route();")
                     }
                 }
             }

=== modified file 'qml/SharePage.qml'
--- qml/SharePage.qml	2016-04-01 11:46:32 +0000
+++ qml/SharePage.qml	2016-04-01 11:46:32 +0000
@@ -18,7 +18,7 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
 import Ubuntu.Components.Popups 1.3
-import Ubuntu.Components.ListItems 1.3 as ListItem
+import "components"
 
 Page {
     id: sharePage
@@ -31,7 +31,6 @@
             iconName: "back"
             text: i18n.tr("Back")
             shortcut: "Escape"
-            enabled: header === standardHeader
             onTriggered: {
                 mainPageStack.pop(sharePage)
                 mainPageStack.push(Qt.resolvedUrl("RoutePage.qml"))
@@ -41,96 +40,41 @@
 
     Flickable {
         id: flickable
-        anchors.fill: parent
-        anchors.topMargin: units.gu(6)
+
+        anchors { fill: parent; topMargin: units.gu(4); margins: units.gu(2) }
         height: contentItem.childrenRect.height
         boundsBehavior: (contentHeight > sharePage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds
 
         ListModel {
             id: sharePageModel
-            ListElement {section: 0 ; text: "Current"; source: "../nav/img/pages/share/current.svg" }
-            ListElement {section: 1 ; text: "Destination"; source: "../nav/img/pages/share/destination.svg"}
-            ListElement {section: 2 ; text: "From Map"; source: "../nav/img/pages/share/fromMap.svg" }
+
+            Component.onCompleted: initialize()
+
+            function initialize() {
+                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") })
+                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") })
+                sharePageModel.append({mode: "MAP", text: i18n.tr("From Map"), source: "../nav/img/pages/share/fromMap.svg", visible: true })
+            }
         }
 
-        Grid {
+        CustomGridView {
             id: sharePageGrid
-            //from system-settings (lp:ubuntu-system-settings)
-            property int itemWidth: units.gu(14)
-            // The amount of whitespace, including column spacing
-            property int space: parent.width - columns * itemWidth
-            // The column spacing is 1/n of the left/right margins
-            property int n: 1
-
-            columnSpacing: space / ((2 * n) + (columns - 1))
-            rowSpacing: units.gu(6)
-            width: (columns * itemWidth) + columnSpacing * (columns - 1)
-            anchors.horizontalCenter: parent.horizontalCenter
-            columns: {
-                var items = Math.floor(parent.width / itemWidth)
-                var count = repeater.count
-                return count < items ? count : items
-            }
-
-            Repeater {
-                id: repeater
-                model: sharePageModel
-                delegate: Component {
-                    id: buttonComponent
-                    AbstractButton {
-                        id: button
-                        width: col.width
-                        visible: ((model.section === 0 && (mainPageStack.center_onpos !== 0 && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null")) ||
-                                  (model.section === 1 && (mainPageStack.routeState !== 'no' && mainPageStack.endLat !== "null" && mainPageStack.endLng !== "null")) ||
-                                  (model.section === 2))
-                        onClicked: {
-                            if (model.text === "Current") {
-                                PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.currentLat, "lon": mainPageStack.currentLng})
-                            } else if (model.text === "Destination") {
-                                PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.endLat, "lon": mainPageStack.endLng})
-                            } else if (model.text === "From Map") {
-                                mainPageStack.pop(sharePage); // Show map
-                            }
-                        }
-
-                        height: col.height
-
-                        Column {
-                            id: col
-                            width: units.gu (14)
-                            height: units.gu (8)
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-
-                            Icon {
-                                id: icon
-                                anchors.horizontalCenter: parent.horizontalCenter
-                                width: height
-                                height: units.gu(4)
-                                source: model.source
-                            }
-
-                            Label {
-                                anchors.horizontalCenter: parent.horizontalCenter
-                                anchors.bottom: parent.bottom
-                                text: i18n.tr(model.text)
-                                width: col.width
-                                horizontalAlignment: Text.AlignHCenter
-                                fontSize: "small"
-                                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                            }
-                        }
-
-                        UbuntuShape {
-                            z: -1
-                            visible: button.pressed
-                            anchors{
-                                fill: col
-                                margins: -units.gu(0.25)
-                            }
-                            backgroundColor: UbuntuColors.darkGrey
-                            opacity: 0.15
-                        }
+
+            model: sharePageModel
+            delegate: GridDelegate {
+                id: delegate
+
+                title: model.text
+                icon: model.source
+                visible: model.visible
+
+                onClicked: {
+                    if (model.mode === "CURRENT") {
+                        PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.currentLat, "lon": mainPageStack.currentLng})
+                    } else if (model.model === "DESTINATION") {
+                        PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": mainPageStack.endLat, "lon": mainPageStack.endLng})
+                    } else if (model.mode === "MAP") {
+                        mainPageStack.pop(sharePage); // Show map
                     }
                 }
             }

=== added file 'qml/components/GridDelegate.qml'
--- qml/components/GridDelegate.qml	1970-01-01 00:00:00 +0000
+++ qml/components/GridDelegate.qml	2016-04-01 11:46:32 +0000
@@ -0,0 +1,63 @@
+/*
+ * uNav http://launchpad.net/unav
+ * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90
+ *
+ * uNav is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * uNav is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+AbstractButton {
+    id: gridDelegate
+
+    // Public APIs
+    property string title
+    property alias icon: _icon.source
+
+    width: delegateColumn.width
+    height: delegateColumn.height
+    
+    Loader {
+        sourceComponent: gridDelegate.pressed ? backgroundComponent : undefined
+        anchors { fill: delegateColumn; margins: -units.gu(1) }
+    }
+
+    Component {
+        id: backgroundComponent
+        UbuntuShape {
+            opacity: 0.15
+            backgroundColor: UbuntuColors.darkGrey
+        }
+    }
+    
+    Column {
+        id: delegateColumn
+        
+        width: units.gu(12)
+        spacing: units.gu(2)
+
+        Icon {
+            id: _icon
+            width: height
+            height: units.gu(4)
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        Label {
+            width: parent.width
+            textSize: Label.Small
+            text: title
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+    }
+}