Merge lp:~nik90/unav/fix-poi-page-header into lp:unav

[Nekhelesh Ramananthan]

This MP fixes few inconsistencies with POI Page Header which include,
- Page Header now scrolls when user scrolls the list view like in the rest of the app
- In search mode, the range filters are now also visible
- Added scrollbars to POI page and search page (while searching location)

@Joerg should be happy seeing this ;)

[lp:~nik90/unav/fix-poi-page-header]

78. By Nekhelesh Ramananthan on 2016-04-17

Added scrollbar to poi page, poi list page and search page

[costales (costales)]

:) Thanks

review: Approve

[JkB (joergberroth)]

Thx a lot!

review: Approve

=== modified file 'qml/Location.qml'
--- qml/Location.qml	2016-04-17 22:32:56 +0000
+++ qml/Location.qml	2016-04-17 22:32:56 +0000
@@ -208,7 +208,7 @@
                 name: "find"
             }
 
-            anchors { top: parent.top; left: parent.left; right: parent.right; margins: units.gu(2) }
+            anchors { left: parent.left; right: parent.right; margins: units.gu(2) }
             hasClearButton: true
             inputMethodHints: Qt.ImhNoPredictiveText
             placeholderText: i18n.tr("Search location")
@@ -231,6 +231,12 @@
                 }
             }
         }
+
+        Scrollbar {
+            visible: listView.model === sortedSearchModel
+            flickableItem: listView
+            align: Qt.AlignTrailing
+        }
     }
 
     Component {

=== modified file 'qml/PoiListPage.qml'
--- qml/PoiListPage.qml	2016-04-17 22:32:56 +0000
+++ qml/PoiListPage.qml	2016-04-17 22:32:56 +0000
@@ -326,5 +326,10 @@
                 }
             }
         }
+
+        Scrollbar {
+            flickableItem: resultsListView
+            align: Qt.AlignTrailing
+        }
     }
 }

=== modified file 'qml/PoiPage.qml'
--- qml/PoiPage.qml	2016-04-15 21:08:18 +0000
+++ qml/PoiPage.qml	2016-04-17 22:32:56 +0000
@@ -31,33 +31,37 @@
     property string unit: navApp.settings.unit === 0 ? "km" : "mi"
     property var factorList: ["1", "5", "15", "30", "50"]
 
-    header: standardHeader
-    anchors.fill: parent
-
     function goBackSearchMode() {
         categoryList.forceActiveFocus()
-        poiPage.header = standardHeader
-        poiSearchField.text = ""
+        poiHeader.isSearchMode = false
+    }
+
+    function goBackStandardMode() {
+        mainPageStack.pop()
     }
 
     Keys.onEscapePressed: {
-        header === standardHeader ? goBackStandardMode()
-                                  : goBackSearchMode()
+        !poiHeader.isSearchMode ? goBackStandardMode()
+                                     : goBackSearchMode()
     }
 
-    UNavHeader {
-        id: standardHeader
-        visible: poiPage.header === standardHeader
-        title: i18n.tr("Nearby")
-
-        // #FIXME: This back button is only here to allow the user to press Escape keyboard key to go back.
-        // This feature will be implemented upstream by the SDK devs when they add keyboard shortcuts to pages,
-        // at which point this back button can be removed.
+    header: UNavHeader {
+        id: poiHeader
+
+        property bool isSearchMode: false
+        property alias searchField: contentLoader.item
+
+        flickable: categoryList
+
         leadingActionBar.actions: Action {
             iconName: "back"
             text: i18n.tr("Back")
             onTriggered: {
-                mainPageStack.pop();
+                if (poiHeader.isSearchMode) {
+                    goBackSearchMode()
+                } else {
+                    goBackStandardMode()
+                }
             }
         }
 
@@ -66,12 +70,20 @@
             iconName: "find"
             text: i18n.tr("Search")
             shortcut: "Ctrl+F"
+            visible: !poiHeader.isSearchMode
             onTriggered: {
-                poiPage.header = searchHeader
-                poiSearchField.forceActiveFocus()
+                poiHeader.isSearchMode = true
+                poiHeader.searchField.forceActiveFocus()
             }
         }
 
+        contents: Loader {
+            id: contentLoader
+            width: parent.width; height: units.gu(4)
+            anchors.verticalCenter: parent.verticalCenter
+            sourceComponent: poiHeader.isSearchMode ? searchFieldComponent : pageTitleComponent
+        }
+
         extension: UNavPageSection {
             id: distanceSections
             anchors {
@@ -85,27 +97,23 @@
         }
     }
 
-    UNavHeader {
-        id: searchHeader
-        visible: poiPage.header === searchHeader
-
-        // #FIXME: This back button is only here to allow the user to press Escape keyboard key to go back.
-        // This feature will be implemented upstream by the SDK devs when they add keyboard shortcuts to pages,
-        // at which point this back button can be removed.
-        leadingActionBar.actions: Action {
-            iconName: "back"
-            text: i18n.tr("Back")
-            onTriggered: {
-                goBackSearchMode()
-            }
-        }
-
-        contents: TextField {
-            id: poiSearchField
-            width: parent.width
-            anchors.verticalCenter: parent.verticalCenter
+    Component {
+        id: searchFieldComponent
+        TextField {
+            hasClearButton: true
             inputMethodHints: Qt.ImhNoPredictiveText
-            hasClearButton: true
+            placeholderText: i18n.tr("Filter POI categories by name")
+        }
+    }
+
+    Component {
+        id: pageTitleComponent
+        Label {
+            textSize: Label.Large
+            color: "White"
+            font.weight: Font.Light
+            text: i18n.tr("Nearby")
+            verticalAlignment: Text.AlignVCenter
         }
     }
 
@@ -139,8 +147,8 @@
         id: sortedCategoryListModel
         model: categoryListModel
         filter.property: "label"
-        filter.pattern: poiPage.header === searchHeader ? RegExp(poiSearchField.text, "gi")
-                                                        : RegExp("", "gi")
+        filter.pattern: poiHeader.isSearchMode ? RegExp(poiHeader.searchField.text, "gi")
+                                               : RegExp("", "gi")
     }
 
     ListView {
@@ -148,7 +156,6 @@
 
         model: sortedCategoryListModel
         anchors.fill: parent
-        anchors.topMargin: poiPage.header.height
         clip: true
 
         section.property: "theme"
@@ -182,8 +189,7 @@
                 ProgressionSlot{}
             }
             onClicked: {
-                poiSearchField.text = ""
-                poiPage.header = standardHeader
+                goBackSearchMode()
                 mainPageStack.push(Qt.resolvedUrl("PoiListPage.qml"), {
                     lat: poiPage.lat,
                     lng: poiPage.lng,
@@ -197,5 +203,10 @@
             }
         }
     }
+
+    Scrollbar {
+        flickableItem: categoryList
+        align: Qt.AlignTrailing
+    }
 }