Merge lp:~nik90/unav/uniform-search-pattern into lp:unav

[Nekhelesh Ramananthan]

Be consistent with the search pattern.

[costales (costales)]

Could be possible to fix the vertical align? :)
http://s14.postimg.org/y5weho1bx/Screenshot_from_2016_04_10_10_50_32.png
Thanks in advance!

review: Needs Fixing

[lp:~nik90/unav/uniform-search-pattern]

38. By Nekhelesh Ramananthan on 2016-04-10

merged lp:unav

[Nekhelesh Ramananthan (nik90)]

> Could be possible to fix the vertical align? :)
> http://s14.postimg.org/y5weho1bx/Screenshot_from_2016_04_10_10_50_32.png
> Thanks in advance!

That is an upstream bug in the Ubuntu SDK and only happens in the desktop. It is an issue that is already present in trunk and cannot be fixed in the app.

[costales (costales)]

Approve then :)
@Joerg? :)

review: Approve

[JkB (joergberroth)]

Hey, fine so far, but:

I would like to see wrapMode set to the titles.

Best Joerg

review: Needs Fixing

[lp:~nik90/unav/uniform-search-pattern]

39. By Nekhelesh Ramananthan on 2016-04-10

Set wrapmode of title

[Nekhelesh Ramananthan (nik90)]

@Joerg, Done :)

[JkB (joergberroth)]

:-)

great work!

comment: I think it is uitk, but the search icon seems to be an old one...

review: Approve

[Nekhelesh Ramananthan (nik90)]

Indeed...the designers reverted the search icon to the older one. I notice this in the unity 8 dash as well.

[JkB (joergberroth)]

Hey, just saw that the serach page header still is whit. Is that ment to be?

Am 2016-04-10 um 16:04 schrieb Nekhelesh Ramananthan:
> Indeed...the designers reverted the search icon to the older one. I notice this in the unity 8 dash as well.
>

[Nekhelesh Ramananthan (nik90)]

That's because this branch came before the change header color branch.

[Nekhelesh Ramananthan (nik90)]

In trunk everything looks good.

[JkB (joergberroth)]

Yeo,

sorry, was a rev conflict on my side :-)

perfect!

Am 2016-04-10 um 16:52 schrieb Nekhelesh Ramananthan:
> In trunk everything looks good.
>

=== modified file 'qml/SearchPage.qml'
--- qml/SearchPage.qml	2016-04-08 00:10:20 +0000
+++ qml/SearchPage.qml	2016-04-10 13:48:57 +0000
@@ -27,9 +27,13 @@
 Page {
     id: searchPage
 
-    header: PageHeader {
+    header: standardHeader
+
+    PageHeader {
+        id: standardHeader
+
         title: i18n.tr("Search")
-        flickable: statusLabel.visible ? resultsListView : historyListView
+        visible: header === standardHeader
         
         // #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,
@@ -42,8 +46,29 @@
             }
         }
 
+        trailingActionBar.actions: Action {
+            iconName: "search"
+            text: i18n.tr("Find location")
+            onTriggered: {
+                header = searchHeader
+                searchField.forceActiveFocus()
+            }
+        }
+    }
+
+    PageHeader {
+        id: searchHeader
+
+        visible: header === searchHeader
+
         contents: TextField {
             id: searchField
+
+            primaryItem: Icon {
+                height: units.gu(2)
+                name: "search"
+            }
+
             width: parent.width
             anchors.verticalCenter: parent.verticalCenter
             inputMethodHints: Qt.ImhNoPredictiveText
@@ -53,7 +78,6 @@
                 if (text.trim()) {
                     statusLabel.visible = true
                     statusLabel.text = i18n.tr("Searching…");
-                    resultsListView.visible = false
                     xmlSearchModel.searchString = text;
                     xmlSearchModel.search();
                 } else {
@@ -61,6 +85,34 @@
                 }
             }
         }
+
+        trailingActionBar {
+            anchors.rightMargin: 0
+            delegate: AbstractButton {
+                id: button
+                action: modelData
+                width: headerButtonText.implicitWidth + units.gu(2)
+                height: parent.height
+
+                Label {
+                    id: headerButtonText
+                    anchors.centerIn: parent
+                    text: action.text
+                }
+            }
+
+            actions: Action {
+                text: i18n.tr("Cancel")
+
+                onTriggered: {
+                    // Clear the search
+                    searchField.text = ""
+                    searchPage.header = standardHeader
+                    xmlSearchModel.clear();
+                    sortedSearchModel.clear();
+                }
+            }
+        }
     }
 
     Label {
@@ -139,7 +191,6 @@
                 statusLabel.text = i18n.tr("Time out! Please try again");
                 statusLabel.visible = true;
                 historyIcon.visible =  false;
-                resultsListView.visible = false;
             }
 
             else if (status === XmlListModel.Ready && count === 0) {
@@ -147,7 +198,6 @@
                 statusLabel.text = i18n.tr("Sorry, no result for %1").arg(searchField.text)
                 statusLabel.visible = true;
                 historyIcon.visible =  false;
-                resultsListView.visible = false;
             }
 
             else if (status === XmlListModel.Ready && count >> 0) {
@@ -216,190 +266,198 @@
                     }
                 }
                 xmlSearchModel.clear();
-                historyListView.visible = false;
-                resultsListView.visible = true;
-            }
-        }
-    }
-
-    ListView {
-        id: historyListView
-
-        model: historyModel
-        visible: !statusLabel.visible
-        anchors.fill: parent
-
-        section.property: "title"
-        section.criteria: ViewSection.FullString
-        section.delegate: ListItemHeader {
-            title: section
-        }
-
-        delegate: ListItem {
-            height: historyDelegateLayout.height + divider.height
-            leadingActions:  ListItemActions {
-                actions: [
-                    Action {
-                        iconName: "delete"
-                        onTriggered: {
-                            switch (model.title) {
-                            case i18n.tr("Search history"):
-                                UnavDB.removeHistorySearch(model.name);
-                                break;
-                            case i18n.tr("Nearby history"):
-                                UnavDB.removeHistoryNearby(model.en_name);
-                                break;
-                            case i18n.tr("Favorite history"):
-                                UnavDB.removeHistoryFavorite(model.name);
-                            }
-                            historyModel.initialize();
-                        }
-                    }
-                ]
-            }
-
-            trailingActions:  ListItemActions {
-                actions: [
-                    Action {
-                        iconName: "send"
-                        visible: model.title !== i18n.tr("Nearby history")
-                        onTriggered: {
-                            mainPageStack.clear();
-                            mainPageStack.center_onpos = 2;
-                            mainPageStack.routeState = 'yes';
-                            mainPageStack.executeJavaScript("calc2coord("+ model.lat + "," + model.lng + ");");
-                        }
-                    },
-                    Action {
-                        iconName: "share"
-                        visible: model.title !== i18n.tr("Nearby history")
-                        onTriggered: {
-                            PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": model.lat, "lon": model.lng});
-                        }
-                    }
-                ]
-            }
-
-            ListItemLayout {
-                id: historyDelegateLayout
-
-                title.text: model.name
-                title.maximumLineCount: 2
-                subtitle.text: QmlJs.formatDistance(QmlJs.calcPoiDistance(mainPageStack.currentLat, mainPageStack.currentLng, model.lat, model.lng, 10), navApp.settings.unit)
-                subtitle.visible: model.title !== i18n.tr("Nearby history") && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null"
-
-                Icon {
-                    id: resultTypeIcon
-                    height: units.gu(2.5)
-                    name: {
-                        if (model.title === i18n.tr("Search history"))
-                            return "history"
-                        else if (model.title === i18n.tr("Favorite history"))
-                            return "starred"
-                        else
-                            return "location"
-                    }
-
-                    SlotsLayout.position: SlotsLayout.First
-                    SlotsLayout.overrideVerticalPositioning: true
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Icon {
-                    id: progressionIcon
-                    height: units.gu(2.5)
-                    name: "next"
-                    visible: model.title === i18n.tr("Nearby history")
-                    SlotsLayout.position: SlotsLayout.Last
-                }
-
-            }
-
-            onClicked: {
-                if (model.title === i18n.tr("Nearby history")) {
-                    mainPageStack.push(Qt.resolvedUrl("PoiListPage.qml"),
-                                    {
-                                        fromPage: searchPage,
-                                        lat: mainPageStack.currentLat,
-                                        lng: mainPageStack.currentLng,
-                                        poiType: model.name,
-                                        clause: model.clause,
-                                        geoDistFactor: 5
-                                    })
-                } else {
+            }
+        }
+    }
+
+    Loader {
+        id: listViewLoader
+        anchors { top: searchPage.header.bottom; left: parent.left; right: parent.right; bottom: parent.bottom }
+        sourceComponent: searchPage.header === standardHeader ? historyListViewComponent : resultsListViewComponent
+    }
+
+    Component {
+        id: historyListViewComponent
+        ListView {
+            id: historyListView
+
+            clip: true
+            model: historyModel
+
+            section.property: "title"
+            section.criteria: ViewSection.FullString
+            section.delegate: ListItemHeader {
+                title: section
+            }
+
+            delegate: ListItem {
+                height: historyDelegateLayout.height + divider.height
+                leadingActions:  ListItemActions {
+                    actions: [
+                        Action {
+                            iconName: "delete"
+                            onTriggered: {
+                                switch (model.title) {
+                                case i18n.tr("Search history"):
+                                    UnavDB.removeHistorySearch(model.name);
+                                    break;
+                                case i18n.tr("Nearby history"):
+                                    UnavDB.removeHistoryNearby(model.en_name);
+                                    break;
+                                case i18n.tr("Favorite history"):
+                                    UnavDB.removeHistoryFavorite(model.name);
+                                }
+                                historyModel.initialize();
+                            }
+                        }
+                    ]
+                }
+
+                trailingActions:  ListItemActions {
+                    actions: [
+                        Action {
+                            iconName: "send"
+                            visible: model.title !== i18n.tr("Nearby history")
+                            onTriggered: {
+                                mainPageStack.clear();
+                                mainPageStack.center_onpos = 2;
+                                mainPageStack.routeState = 'yes';
+                                mainPageStack.executeJavaScript("calc2coord("+ model.lat + "," + model.lng + ");");
+                            }
+                        },
+                        Action {
+                            iconName: "share"
+                            visible: model.title !== i18n.tr("Nearby history")
+                            onTriggered: {
+                                PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": model.lat, "lon": model.lng});
+                            }
+                        }
+                    ]
+                }
+
+                ListItemLayout {
+                    id: historyDelegateLayout
+
+                    title.text: model.name
+                    title.wrapMode: Text.WordWrap
+                    title.maximumLineCount: 2
+                    subtitle.text: QmlJs.formatDistance(QmlJs.calcPoiDistance(mainPageStack.currentLat, mainPageStack.currentLng, model.lat, model.lng, 10), navApp.settings.unit)
+                    subtitle.visible: model.title !== i18n.tr("Nearby history") && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null"
+
+                    Icon {
+                        id: resultTypeIcon
+                        height: units.gu(2.5)
+                        name: {
+                            if (model.title === i18n.tr("Search history"))
+                                return "history"
+                            else if (model.title === i18n.tr("Favorite history"))
+                                return "starred"
+                            else
+                                return "location"
+                        }
+
+                        SlotsLayout.position: SlotsLayout.First
+                        SlotsLayout.overrideVerticalPositioning: true
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Icon {
+                        id: progressionIcon
+                        height: units.gu(2.5)
+                        name: "next"
+                        visible: model.title === i18n.tr("Nearby history")
+                        SlotsLayout.position: SlotsLayout.Last
+                    }
+
+                }
+
+                onClicked: {
+                    if (model.title === i18n.tr("Nearby history")) {
+                        mainPageStack.push(Qt.resolvedUrl("PoiListPage.qml"),
+                                           {
+                                               fromPage: searchPage,
+                                               lat: mainPageStack.currentLat,
+                                               lng: mainPageStack.currentLng,
+                                               poiType: model.name,
+                                               clause: model.clause,
+                                               geoDistFactor: 5
+                                           })
+                    } else {
+                        mainPageStack.clear();
+                        mainPageStack.executeJavaScript("ui.markers_POI_set([{ title: \"" +
+                                                        model.name + "\", lat: " +
+                                                        model.lat + ", lng: " +
+                                                        model.lng + "}]);");
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: resultsListViewComponent
+        ListView {
+            id: resultsListView
+
+            clip: true
+            model: sortedSearchModel
+
+            delegate: ListItem {
+                height: resultsDelegateLayout.height + divider.height
+                trailingActions:  ListItemActions {
+                    actions: [
+                        Action {
+                            iconName: "send"
+                            onTriggered: {
+                                if (navApp.settings.saveHistory) {
+                                    UnavDB.saveToSearchHistory(model.name, model.lat, model.lng)
+                                }
+                                mainPageStack.clear();
+                                mainPageStack.center_onpos = 2;
+                                mainPageStack.routeState = 'yes'
+                                mainPageStack.executeJavaScript("calc2coord(" + model.lat + "," + model.lng + ");")
+                            }
+                        },
+                        Action {
+                            iconName: "share"
+                            onTriggered: {
+                                PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": model.lat, "lon": model.lng})
+                            }
+                        },
+                        Action {
+                            iconName: "non-starred"
+                            onTriggered: {
+                                mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml"), {isAddedFromPopup:true, lat: model.lat, lng: model.lng, favName: model.name})
+                            }
+                        }
+                    ]
+                }
+
+                onClicked: {
+                    if (navApp.settings.saveHistory) {
+                        UnavDB.saveToSearchHistory(model.name, model.lat, model.lng);
+                    }
                     mainPageStack.clear();
-                    mainPageStack.executeJavaScript("ui.markers_POI_set([{ title: \"" +
-                                                                           model.name + "\", lat: " +
-                                                                           model.lat + ", lng: " +
-                                                                           model.lng + "}]);");
+                    mainPageStack.executeJavaScript("ui.markers_POI_set([{title: \"" + model.name + "\", lat: " + model.lat + ", lng: " + model.lng + "}]);");
                 }
-            }
-        }
-    }
-
-    ListView {
-        id: resultsListView
-
-        anchors.fill: parent
-        anchors.topMargin: units.gu(6)
-        visible: false
-
-        model: sortedSearchModel
-
-        delegate: ListItem {
-            height: resultsDelegateLayout.height + divider.height
-            trailingActions:  ListItemActions {
-                actions: [
-                    Action {
-                        iconName: "send"
-                        onTriggered: {
-                            if (navApp.settings.saveHistory) {
-                                UnavDB.saveToSearchHistory(model.name, model.lat, model.lng)
-                            }
-                            mainPageStack.clear();
-                            mainPageStack.center_onpos = 2;
-                            mainPageStack.routeState = 'yes'
-                            mainPageStack.executeJavaScript("calc2coord(" + model.lat + "," + model.lng + ");")
-                        }
-                    },
-                    Action {
-                        iconName: "share"
-                        onTriggered: {
-                            PopupUtils.open(Qt.resolvedUrl("./Share.qml"), navApp, {"lat": model.lat, "lon": model.lng})
-                        }
-                    },
-                    Action {
-                        iconName: "non-starred"
-                        onTriggered: {
-                            mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml"), {isAddedFromPopup:true, lat: model.lat, lng: model.lng, favName: model.name})
-                        }
+
+                ListItemLayout {
+                    id: resultsDelegateLayout
+
+                    title.text: model.name
+                    title.maximumLineCount: 2
+                    title.wrapMode: Text.WordWrap
+                    subtitle.text: QmlJs.formatDistance(model.distance, navApp.settings.unit)
+                    subtitle.visible: mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null"
+
+                    Icon {
+                        id: resIcon
+                        height: units.gu(2.5)
+                        width: height
+                        visible: model.icon !== ""
+                        source: model.icon
+                        SlotsLayout.position: SlotsLayout.Last
                     }
-                ]
-            }
-
-            onClicked: {
-                if (navApp.settings.saveHistory) {
-                    UnavDB.saveToSearchHistory(model.name, model.lat, model.lng);
-                }
-                mainPageStack.clear();
-                mainPageStack.executeJavaScript("ui.markers_POI_set([{title: \"" + model.name + "\", lat: " + model.lat + ", lng: " + model.lng + "}]);");
-            }
-
-            ListItemLayout {
-                id: resultsDelegateLayout
-
-                title.text: model.name
-                title.maximumLineCount: 2
-                subtitle.text: QmlJs.formatDistance(model.distance, navApp.settings.unit)
-                subtitle.visible: mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null"
-
-                Icon {
-                    id: resIcon
-                    height: units.gu(2.5)
-                    width: height
-                    visible: model.icon !== ""
-                    source: model.icon
-                    SlotsLayout.position: SlotsLayout.Last
                 }
             }
         }