Merge lp:~nik90/unav/revamp-poi-feature into lp:unav

[Nekhelesh Ramananthan]

- Migrated PoiPage and PoiListPage to PageHeaders and ListItemLayout and improving the visuals.
- Added POI description to the PoiListPage if available
- Added keyboard shortcuts "Ctrl+F" to search for POI types (Convergence)
- Added Esc shortcut to close the search mode and to also close the PoiPage! (Convergence)
- Removed all uses of deprecated ListItem.Standard components in the Poi pages
- Add live search in the PoiPage. The list will update as you type.
- Remember distance header between sessions

This MP adds some really nice features listed below,
- Migrated PoiPage and PoiListPage to PageHeaders and ListItemLayout and improving the visuals.
- Added POI description to the PoiListPage if available
- Added keyboard shortcuts "Ctrl+F" to search for POI types (Convergence)
- Added Esc shortcut to close the search mode and to also close the PoiPage! (Convergence)
- Removed all uses of deprecated ListItem.Standard components in the Poi pages
- Add live search in the PoiPage. The list will update as you type.

[lp:~nik90/unav/revamp-poi-feature]

7. By Marcos Costales on 2016-03-27

Remember distance header between sessions

8. By Nekhelesh Ramananthan on 2016-03-27

Enclosed section header in a rectangle to remove transparency issue

=== modified file 'qml/Main.qml'
--- qml/Main.qml	2016-03-26 18:53:17 +0000
+++ qml/Main.qml	2016-03-27 10:05:29 +0000
@@ -69,6 +69,7 @@
         property bool headerVisible: true
         property bool showTuto: true
         property bool showAGPS: true
+        property int defaultDistancePOI: 1
     }
     
     ScreenSaver {

=== modified file 'qml/PoiListPage.qml'
--- qml/PoiListPage.qml	2016-03-26 18:53:17 +0000
+++ qml/PoiListPage.qml	2016-03-27 10:05:29 +0000
@@ -2,6 +2,7 @@
  * GPS Navigation http://launchpad.net/unav
  * Copyright (C) 2015-2016 Marcos Alvarez Costales https://launchpad.net/~costales
  * Copyright (C) 2015-2016 JkB https://launchpad.net/~joergberroth
+ * Copyright (C) 2016 Nekhelesh Ramananthan http://launchpad.net/~nik90
  *
  * GPS Navigation is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -15,13 +16,10 @@
  */
 
 import QtQuick 2.4
-import QtQuick.Layouts 1.1
 import Ubuntu.Components 1.3
 import Ubuntu.Components.Popups 1.3
-import Ubuntu.Components.ListItems 1.3 as ListItems
 import QtQuick.XmlListModel 2.0
 import "js/utils.js" as QmlJs
-import QtQml 2.0
 
 Page {
     id: poiListPage
@@ -34,7 +32,24 @@
 
     property double geoDistFactor: 1.0
 
-    title: poiType
+    header: PageHeader {
+        title: poiType
+        flickable: resultsListView
+        trailingActionBar.actions: Action {
+            id: routeAction
+            iconSource: "../nav/img/header/poimap.svg"
+            text: i18n.tr("Show POIs on map")
+            visible: sortedPoiModel.count !== 0
+            onTriggered: {
+                if (mainPageStack.center_onpos === 2)
+                    mainPageStack.center_onpos = 1;
+                mainPageStack.executeJavaScript("ui.markers_POI_set(" + JSON.stringify(sortedPoiModel.allPOI()) + ");")
+                mainPageStack.pop(poiListPage.fromPage)
+                mainPageStack.pop(poiListPage)
+            }
+        }
+    }
+
     anchors.fill: parent
 
     Component.onCompleted: {
@@ -47,50 +62,6 @@
         }
     }
 
-    head.contents: Item {
-        id: headerContentsItem
-        anchors.fill: parent
-        
-        Label { // Show number of poi in header
-            id: numberLabel
-            anchors {
-                right: parent.right
-                rightMargin: units.gu(-1)
-                verticalCenter: parent.verticalCenter
-            }
-            z: 500
-            width: units.gu(2)
-            visible: sortedPoiModel.count !== 0
-            horizontalAlignment: Text.AlignRight
-            text: (sortedPoiModel.count !== 50 ? i18n.tr("%1 POIs").arg(sortedPoiModel.count) : i18n.tr("First %1 POIs").arg(sortedPoiModel.count)) + " "
-            fontSize: "small"
-            color: UbuntuColors.purple
-        }
-
-        Label {
-            id: pageTitleLabel
-            anchors {
-                verticalCenter: parent.verticalCenter
-            }
-            fontSize: "large"
-            text: poiType
-        }
-    }
-
-    head.actions: Action {
-        id: routeAction
-        iconSource: "../nav/img/header/poimap.svg"
-        text: i18n.tr("Show POIs on map")
-        visible: sortedPoiModel.count !== 0
-        onTriggered: {
-            if (mainPageStack.center_onpos === 2)
-                mainPageStack.center_onpos = 1;
-            mainPageStack.executeJavaScript("ui.markers_POI_set(" + JSON.stringify(sortedPoiModel.allPOI()) + ");")
-            mainPageStack.pop(poiListPage.fromPage)
-            mainPageStack.pop(poiListPage)
-        }
-    }
-
     Label {
         id: statusLabel
         anchors {
@@ -204,6 +175,7 @@
 
         XmlRole { name: "osm_id"; query: "@place_id/string()"; }
         XmlRole { name: "name"; query: "@display_name/string()"; }
+        XmlRole { name: "description"; query: "extratags/tag[@key='description']/@value/string()"; }
         XmlRole { name: "phone"; query: "extratags/tag[@key='phone']/@value/string()"; }
         XmlRole { name: "website"; query: "extratags/tag[@key='website']/@value/string()"; }
         // XmlRole { name: "cuisine"; query: "extratags/tag[@key='cuisine']/@value/string()"; }
@@ -235,6 +207,7 @@
             for (var i = 0; i < poiXmlModel.count; i++) {
                item  = {"osmid":        poiXmlModel.get(i).osm_id,
                         "name":             poiXmlModel.get(i).name.split(',')[0],
+                        "description":  poiXmlModel.get(i).description,
                         "phone":        poiXmlModel.get(i).phone,
                         "website":        poiXmlModel.get(i).website,
                         // "cuisine":    poiXmlModel.get(i).cuisine,
@@ -272,13 +245,15 @@
         }
     }
 
-    UbuntuListView {
+    ListView {
         id: resultsListView
+
         model: sortedPoiModel
         anchors.fill: parent
         visible: false
 
         delegate: ListItem {
+            height: poiListItemLayout.height + divider.height
             trailingActions:  ListItemActions {
                 actions: [
                     Action {
@@ -328,73 +303,39 @@
                 mainPageStack.executeJavaScript("ui.markers_POI_set([{title: \"" + model.name + "\", lat: " + model.lat + ", lng: " + model.lng + ", website: \"" + model.website + "\", phone: \"" + model.phone + "\"}]);");
             }
 
-            contentItem.anchors {
-                leftMargin: units.gu(1)
-                rightMargin: units.gu(1)
-                topMargin: units.gu(0.5)
-                bottomMargin: units.gu(0.5)
-            }
-
-            Label {
-                id: nameLabel
-                anchors {
-                    top:parent.top
-                    left: parent.left
-                    right: acessibilityIcon.left
-                }
-                text: model.name !== "" ? model.name : poiListPage.poiType
-                font.weight: Font.DemiBold
-                fontSize: "medium"
-                elide: Text.ElideRight
-            }
-
-            Label {
-                anchors.bottom: parent.bottom
-                width: parent.width *4/5
-
-                text: model.openinghours !== "" ?
-                    //TRANSLATORS: abbreviation for Monday
-                    model.openinghours.replace("Mo", Qt.locale().dayName(1, Locale.ShortFormat)).
-                    //TRANSLATORS: abbreviation for Tuesday
+            ListItemLayout {
+                id: poiListItemLayout
+
+                function getOpeningHours(openinghours) {
+                    openinghours.replace("Mo", Qt.locale().dayName(1, Locale.ShortFormat)).
                     replace("Tu", Qt.locale().dayName(2, Locale.ShortFormat)).
-                    //TRANSLATORS: abbreviation for Wednesday
                     replace("We", Qt.locale().dayName(3, Locale.ShortFormat)).
-                    //TRANSLATORS: abbreviation for Thursday
                     replace("Th", Qt.locale().dayName(4, Locale.ShortFormat)).
-                    //TRANSLATORS: abbreviation for Friday
                     replace("Fr", Qt.locale().dayName(5, Locale.ShortFormat)).
-                    //TRANSLATORS: abbreviation for Saturday
                     replace("Sa", Qt.locale().dayName(6, Locale.ShortFormat)).
-                    //TRANSLATORS: abbreviation for Sunday
                     replace("Su", Qt.locale().dayName(0, Locale.ShortFormat)).
                     //TRANSLATORS: abbreviation for Public Holiday
-                    replace("PH", i18n.tr("PH") ).
+                    replace("PH", i18n.tr("PH")).
                     //TRANSLATORS: "closed"
-                    replace("off", i18n.tr("off") ) : ""
-                fontSize: "small"
-                elide: Text.ElideRight
-                wrapMode: Text.WordWrap
-                maximumLineCount: 2
-            }
-
-            Label{
-                anchors.bottom: parent.bottom
-                width: parent.width /5
-                anchors.right: parent.right
-                horizontalAlignment: Text.AlignRight
-
-                text: QmlJs.formatDistance(model.distance, navApp.settings.unit)
-                fontSize: "small"
-            }
-
-            Icon {
-                id: acessibilityIcon
-                name: "preferences-desktop-accessibility-symbolic"
-
-                visible: model.wheelchair === "yes" || model.wheelchair === "limited" // is limited enought as criteria?
-                anchors.top: parent.top
-                anchors.right: parent.right
-                width: parent.height /2
+                    replace("off", i18n.tr("off"))
+
+                    return openinghours
+                }
+
+                title.text: model.name !== "" ? model.name : poiListPage.poiType
+                subtitle.text: model.openinghours !== "" ? "%1 | %2".arg(getOpeningHours(model.openinghours)).arg(QmlJs.formatDistance(model.distance, navApp.settings.unit))
+                                                         : QmlJs.formatDistance(model.distance, navApp.settings.unit)
+                subtitle.maximumLineCount: 2
+                summary.text: model.description
+                summary.maximumLineCount: 3
+
+                Icon {
+                    id: acessibilityIcon
+                    name: "preferences-desktop-accessibility-symbolic"
+                    visible: model.wheelchair === "yes" || model.wheelchair === "limited" // is limited enough as criteria?
+                    width: parent.height / 2
+                    SlotsLayout.position: SlotsLayout.Last
+                }
             }
         }
     }

=== modified file 'qml/PoiPage.qml'
--- qml/PoiPage.qml	2016-03-26 18:53:17 +0000
+++ qml/PoiPage.qml	2016-03-27 10:05:29 +0000
@@ -2,6 +2,7 @@
  * GPS Navigation http://launchpad.net/unav
  * Copyright (C) 2015-2016 Marcos Alvarez Costales https://launchpad.net/~costales
  * Copyright (C) 2015-2016 JkB https://launchpad.net/~joergberroth
+ * Copyright (C) 2016 Nekhelesh Ramananthan http://launchpad.net/~nik90
  *
  * GPS Navigation is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -15,96 +16,95 @@
  */
 
 import QtQuick 2.4
-import QtQuick.Layouts 1.1
 import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.3 as ListItems
 import QtQuick.XmlListModel 2.0
+import QtQuick.LocalStorage 2.0
+import "components"
 import "js/PoiCategories.js" as Categories
-import QtQuick.LocalStorage 2.0
 import "js/db.js" as UnavDB
 
 Page {
     id: poiPage
 
-    title: i18n.tr("Nearby")
-    anchors.fill: parent
-    
     property var fromPage
     property var lat
     property var lng
     property string unit: navApp.settings.unit === 0 ? "km" : "mi"
     property var factorList: ["1", "5", "15", "30", "50"]
-    state: "default"
-    states: [
-        PageHeadState {
-            name: "default"
-            head: poiPage.head
-
-            backAction: Action {
-                iconName: "back"
-                text: i18n.tr("Back")
-                onTriggered: {
-                    mainPageStack.pop(poiPage);
-                    if (poiPage.fromPage === "RoutePage.qml")
-                        mainPageStack.push(Qt.resolvedUrl("RoutePage.qml"));
-                }
-            }
-
-            actions: [
-                Action {
-                    id: searchAction
-                    iconName: "find"
-                    text: i18n.tr("Search")
-                    onTriggered: {
-                        poiPage.state = "search"
-                        poiSearchField.forceActiveFocus()
-                    }
-                }
-            ]
-        },
-
-        PageHeadState {
-            name: "search"
-            head: poiPage.head
-
-            backAction: Action {
-                iconName: "back"
-                text: i18n.tr("Back")
-                onTriggered: {
-                    mainPageStack.pop(poiPage)
-                    if (poiPage.fromPage === "RoutePage.qml")
-                        mainPageStack.push(Qt.resolvedUrl("RoutePage.qml"));
-                }
-            }
-
-            contents: TextField {
-                id: poiSearchField
-                anchors {
-                    rightMargin: units.gu(2)
-                }
-                width:  parent ? parent.width - units.gu(2) : undefined
-                inputMethodHints: Qt.ImhNoPredictiveText
-                hasClearButton: true
-                onTriggered: {
-                    if ( text.length > 0) {
-                        categoryList.searchString(text);
-                    }
-                }
-                onTextChanged: {
-                    if (text.length === 0) {
-                        categoryListModel.clear();
-                        categoryListModel.initialize();
-                        poiSearchField.forceActiveFocus();
-                    }
-                }
-            }
-        }
-    ]
-
-    head {
-        sections {
+
+    header: standardHeader
+    anchors.fill: parent
+
+    function goBackStandardMode() {
+        mainPageStack.pop(poiPage);
+        if (poiPage.fromPage === "RoutePage.qml")
+            mainPageStack.push(Qt.resolvedUrl("RoutePage.qml"));
+    }
+
+    function goBackSearchMode() {
+        categoryList.forceActiveFocus()
+        poiPage.header = standardHeader
+        poiSearchField.text = ""
+    }
+
+    Keys.onEscapePressed: {
+        header === standardHeader ? goBackStandardMode()
+                                  : goBackSearchMode()
+    }
+
+    PageHeader {
+        id: standardHeader
+        visible: poiPage.header === standardHeader
+        title: i18n.tr("Nearby")
+        leadingActionBar.actions: Action {
+            iconName: "back"
+            text: i18n.tr("Back")
+            onTriggered: {
+                goBackStandardMode()
+            }
+        }
+
+        trailingActionBar.actions: Action {
+            id: searchAction
+            iconName: "find"
+            text: i18n.tr("Search")
+            shortcut: "Ctrl+F"
+            onTriggered: {
+                poiPage.header = searchHeader
+                poiSearchField.forceActiveFocus()
+            }
+        }
+
+        extension: Sections {
+            id: distanceSections
+            anchors {
+                left: parent.left
+                bottom: parent.bottom
+            }
+
             model: [factorList[0]+unit, factorList[1]+unit, factorList[2]+unit, factorList[3]+unit, factorList[4]+unit]
-            selectedIndex: 1
+            selectedIndex: navApp.settings.defaultDistancePOI
+            onSelectedIndexChanged: navApp.settings.defaultDistancePOI = distanceSections.selectedIndex;
+        }
+    }
+
+    PageHeader {
+        id: searchHeader
+        visible: poiPage.header === searchHeader
+        leadingActionBar.actions: Action {
+            iconName: "back"
+            text: i18n.tr("Back")
+            onTriggered: {
+                goBackSearchMode()
+            }
+        }
+
+        contents: TextField {
+            id: poiSearchField
+            width: parent.width
+            anchors.verticalCenter: parent.verticalCenter
+            inputMethodHints: Qt.ImhNoPredictiveText
+            hasClearButton: true
         }
     }
 
@@ -133,54 +133,55 @@
         Component.onCompleted: initialize()
     }
 
-    Component {
-        id: sectionHeading
-
-        Rectangle {
-            width: parent.width
-            height: childrenRect.height
-
-            ListItems.Header {
-                id: listHeader
-                text: section
-            }
-        }
+
+    SortFilterModel {
+        id: sortedCategoryListModel
+        model: categoryListModel
+        filter.property: "label"
+        filter.pattern: poiPage.header === searchHeader ? RegExp(poiSearchField.text, "gi")
+                                                        : RegExp("", "gi")
     }
 
-    UbuntuListView {
+    ListView {
         id: categoryList
-        model: categoryListModel
 
+        model: sortedCategoryListModel
         anchors.fill: parent
+        anchors.topMargin: poiPage.header.height
         clip: true
 
-        function searchString( string) {
-            categoryListModel.initialize();
-            for( var i = 0; i < categoryListModel.count; i++){
-                if (model.get(i).label.toLowerCase().indexOf(string.toLowerCase()) === -1) {
-                    model.remove(i); i--;
-                }
-            }
-        }
-
         section.property: "theme"
         section.criteria: ViewSection.FullString
         section.labelPositioning: ViewSection.CurrentLabelAtStart + ViewSection.InlineLabels
-        section.delegate: sectionHeading
-        delegate: ListItems.Standard {
+        section.delegate: Rectangle {
+            width: parent.width
+            height: sectionHeader.height
+
+            HeaderListItem {
+                id: sectionHeader
+                title: section
+            }
+        }
+
+        delegate: ListItem {
             id: poiItem
-            showDivider: false
-            text: label
-            progression: true
+            divider.visible: false
+            height: poiItemLayout.height
+            ListItemLayout {
+                id: poiItemLayout
+                title.text: label
+                ProgressionSlot{}
+            }
             onClicked: {
-                //mainPageStack.pop(poiPage);
+                poiSearchField.text = ""
+                poiPage.header = standardHeader
                 mainPageStack.push(Qt.resolvedUrl("PoiListPage.qml"), {
                     fromPage: poiPage,
                     lat: poiPage.lat,
                     lng: poiPage.lng,
                     poiType: model.label,
                     clause: model.clause,
-                    geoDistFactor: Number(factorList[poiPage.head.sections.selectedIndex])
+                    geoDistFactor: Number(factorList[distanceSections.selectedIndex])
                 });
                 if (navApp.settings.saveHistory) {
                     UnavDB.saveToNearByHistory(model.en_label, model.clause);