Merge lp:~nik90/unav/fix-unav-list-items into lp:~costales/unav/trunk

[Nekhelesh Ramananthan]

- Converts listitems to using ListItemLayouts
- Replace UbuntuListView with just ListView
- Added custom header listitem which uses the new ListItem instead of the deprecated ListItem.Header.
- Massive simplication of the about page code

This MP basically revamps all the list items shown in uNav to follow the system design. It also converts them to the new ListItemLayouts which is more performant, consistent design etc.

Also replaces UbuntuListView with ListView since we are not using any of the features offered by UbuntuListView thereby wasting memory use.

Simplified massively the about page code by using just one listmodel and one listview.

Added custom header listitem which uses the new ListItem instead of the deprecated ListItem.Header.

Note: It seems like a huge code diff in SearchPage.qml, but turns out I just aligned the code accidentally by pressing Ctrl+A and then Ctrl+I. Rest assured it just aligns the code correctly.

[lp:~nik90/unav/fix-unav-list-items]

7. By Nekhelesh Ramananthan on 2016-03-15

Massive simplication of the about page (code wise)

[costales (costales)]

Thanks a lot Nekhelesh!! Great contribution!!
I added you to the credits with your name and your LP url, if you prefer another, tell me :)
A hug!

=== modified file 'qml/AboutPage.qml'
--- qml/AboutPage.qml	2016-03-14 18:40:54 +0000
+++ qml/AboutPage.qml	2016-03-15 01:14:51 +0000
@@ -16,261 +16,151 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.3 as ListItem
 import "js/utils.js" as QmlJs
 
 Page {
-	id: aboutPage
-	title: i18n.tr("About")
-
-	Flickable {
-		id: flickable
-		anchors.fill: parent
-		contentHeight: appColumn.height + donateColumn.height + launchpadColumn.height + devColumn.height + voicesColumn.height + i18nColumn.height + poweredByColumn.height + units.gu(16)
-
-		Column {
-			id: appColumn
-			spacing: units.gu(1)
-			anchors {
-				top: parent.top; left: parent.left; right: parent.right; topMargin: units.gu(5)
-			}
-			Image {
-				id: appImage
-				source: "../nav/img/about/logo.png"
-				anchors.horizontalCenter: parent.horizontalCenter
-			}
-			Label {
-				width: parent.width
-				wrapMode: Text.WordWrap
-				horizontalAlignment: Text.AlignHCenter
-				//TRANSLATORS: %1 and %2 are links that do not have to be translated: Year + Project + License
-				text: "© uNav 2015-" + new Date().getFullYear()
-			}
-			Label {
-				width: parent.width
-				wrapMode: Text.WordWrap
-				horizontalAlignment: Text.AlignHCenter
-				//TRANSLATORS: %1 and %2 are links that do not have to be translated: Year + Project + License
-				text: i18n.tr("Version %1. Under License %2").arg(navApp.applicationVersion).arg("<a href=\"http://www.gnu.org/licenses/gpl-3.0.en.html\">GPL3</a>")
-				onLinkActivated: Qt.openUrlExternally(link)
-			}
-		}
-
-		Column {
-			id: donateColumn
-			anchors.top: appColumn.bottom
-			anchors.topMargin: units.gu(3)
-			width: parent.width
-			spacing: units.gu(1)
-			Label {
-				id: donateLabel
-				text: i18n.tr("Support its future development")
-				anchors.horizontalCenter: parent.horizontalCenter
-				wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-				horizontalAlignment: Text.AlignHCenter
-				width: parent.width - units.gu(12)
-			}
-			Button {
-				anchors.horizontalCenter: parent.horizontalCenter
-				color: UbuntuColors.green
-				text: i18n.tr("Buy Donate Version")
-				onClicked: Qt.openUrlExternally("scope://com.canonical.scopes.clickstore?q=unavdonateversion")
-			}
-		}
-
-		Column {
-			id: launchpadColumn
-			anchors.top: donateColumn.bottom
-			width: parent.width
-			ListItem.Header {
-				id: lpHeader
-				text: i18n.tr("Resources")
-			}
-
-			Repeater {
-				id: lpListView
-
-				model: lpModel
-				delegate: ListItem.Standard {
-					progression: true
-					showDivider: false
-					text: model.name
-					onClicked: Qt.openUrlExternally(model.link)
-				}
-			}
-
-			ListModel {
-				id: lpModel
-				Component.onCompleted: initialize()
-				function initialize() {
-					lpModel.append({ name: i18n.tr("Bugs"), link: "https://bugs.launchpad.net/unav" })
-					lpModel.append({ name: i18n.tr("Translations"), link: "https://translations.launchpad.net/unav" })
-					lpModel.append({ name: i18n.tr("Answers"), link: "https://answers.launchpad.net/unav" })
-					lpModel.append({ name: i18n.tr("Contact"), link: "mailto:[e-mail]" })
-				}
-			}
-		}
-
-		Column {
-			id: devColumn
-			anchors.top: launchpadColumn.bottom
-			anchors.topMargin: units.gu(2)
-			width: parent.width
-			ListItem.Header {
-				id: devHeader
-				text: i18n.tr("Developers")
-			}
-
-			Repeater {
-				id: devListView
-
-				model: devModel
-				delegate: ListItem.Standard {
-					progression: true
-					showDivider: false
-					text: model.name
-					onClicked: Qt.openUrlExternally(model.link)
-				}
-			}
-
-			ListModel {
-				id: devModel
-				Component.onCompleted: initialize()
-				function initialize() {
-					devModel.append({ name: "JkB", link: "https://launchpad.net/~joergberroth" })
-					devModel.append({ name: "Marcos Costales (" + i18n.tr("Founder") + ")", link: "https://wiki.ubuntu.com/costales" })
-				}
-			}
-		}
-
-		Column {
-			id: voicesColumn
-			anchors.top: devColumn.bottom
-			anchors.topMargin: units.gu(2)
-			width: parent.width
-
-			ListItem.Header {
-				id: voicesHeader
-				text: i18n.tr("Voice")
-			}
-
-			Repeater {
-				id: voicesListView
-				anchors.top: voicesColumn.bottom
-
-				model: voicesModel
-				delegate: ListItem.Standard {
-					progression: true
-					showDivider: false
-					text: model.name
-					onClicked: Qt.openUrlExternally(model.link)
-				}
-			}
-
-			ListModel {
-				id: voicesModel
-				Component.onCompleted: initialize()
-				function initialize() {
-					switch (Qt.locale().name.substring(0,2).toLowerCase()) {
-						case 'de':
-							voicesModel.append({name: "Ilonka Oettershagen", link: "https://plus.google.com/107664665064221547104"});
-							break;
-						case 'es':
-							voicesModel.append({name: "Fernando Lanero", link: "https://twitter.com/ferlanero"})
-							break;
-						case 'it':
-							voicesModel.append({name: "Silvia Bindelli", link: "https://twitter.com/SilviaBindelli"})
-							break;
-						case 'nl':
-							voicesModel.append({name: "Mark van den Driesche", link: "http://google.com/+Markcortbass"})
-							break;
-						case 'sl':
-							voicesModel.append({name: "Bernard Banko", link: "https://launchpad.net/~beernarrd"})
-							break;
-						default:
-							voicesModel.append({name: "Nathan Haines", link: "http://www.nhaines.com"})
-					}
-				}
-			}
-		}
-		
-		Column {
-			id: i18nColumn
-			anchors.top: voicesColumn.bottom
-			anchors.topMargin: units.gu(2)
-			width: parent.width
-
-			ListItem.Header {
-				id: i18nHeader
-				text: i18n.tr("Translators")
-			}
-
-			Repeater {
-				id: i18nListView
-
-				model: i18nModel
-				delegate: ListItem.Standard {
-					progression: true
-					showDivider: false
-					text: model.name
-					onClicked: Qt.openUrlExternally(model.link)
-				}
-			}
-
-			ListModel {
-				id: i18nModel
-				Component.onCompleted: initialize()
-				function initialize() {
-					var translators = QmlJs.getTranslators( i18n.tr("translator-credits") )
-					translators.forEach(function(translator) {
-						i18nModel.append({ name: translator['name'], link: translator['link'] });
-					});
-				}
-			}
-		}
-
-		Column {
-			id: poweredByColumn
-			anchors.top: i18nColumn.bottom
-			anchors.topMargin: units.gu(2)
-			width: parent.width
-
-			ListItem.Header {
-				id: poweredbyHeader
-				text: i18n.tr("Powered by")
-			}
-
-			Repeater {
-				id: poweredbyListView
-
-				model: poweredbyModel
-				delegate: ListItem.Standard {
-					progression: true
-					showDivider: false
-					text: model.name
-					onClicked: Qt.openUrlExternally(model.link)
-				}
-			}
-
-			ListModel {
-				id: poweredbyModel
-				Component.onCompleted: initialize()
-				function initialize() {
-					poweredbyModel.append({ name: "OpenStreetMap & Contributors", link: "http://www.openstreetmap.org" })
-					poweredbyModel.append({ name: "Mapzen", link: "https://mapzen.com/projects/valhalla" })
-					poweredbyModel.append({ name: "MapQuest", link: "http://open.mapquest.com/" })
-					poweredbyModel.append({ name: "OpenStreetMap Nominatin", link: "http://open.mapquestapi.com/nominatim" })
-					poweredbyModel.append({ name: "Overpass API", link: "http://wiki.openstreetmap.org/wiki/Overpass_API/XAPI_Compatibility_Layer" })
-					poweredbyModel.append({ name: "OpenLayers", link: "http://openlayers.org" })
-					poweredbyModel.append({ name: "Turf.js", link: "http://turfjs.org" })
-					poweredbyModel.append({ name: "JQuery", link: "https://jquery.com" })
-					poweredbyModel.append({ name: "jquery.localize.js", link: "https://github.com/coderifous/jquery-localize" })
-					poweredbyModel.append({ name: "The Noun Project", link: "https://thenounproject.com" })
-					poweredbyModel.append({ name: "Wikimedia", link: "https://commons.wikimedia.org/wiki/Category:Multi-touch_gestures" })
-					poweredbyModel.append({ name: "IconFinder", link: "https://www.iconfinder.com/icons/172062/navigation_icon" })
-					poweredbyModel.append({ name: "Leaflet Marker", link: "https://github.com/Leaflet/Leaflet" })
-				}
-			}
-		}
-	}
+    id: aboutPage
+
+    header: PageHeader {
+        title: i18n.tr("About")
+        flickable: creditsListView
+    }
+
+    ListModel {
+        id: creditsModel
+
+        Component.onCompleted: initialize()
+
+        function initialize() {
+            // Resources
+            creditsModel.append({ category: i18n.tr("Resources"), name: i18n.tr("Bugs"), link: "https://bugs.launchpad.net/unav" })
+            creditsModel.append({ category: i18n.tr("Resources"), name: i18n.tr("Translations"), link: "https://translations.launchpad.net/unav" })
+            creditsModel.append({ category: i18n.tr("Resources"), name: i18n.tr("Answers"), link: "https://answers.launchpad.net/unav" })
+            creditsModel.append({ category: i18n.tr("Resources"), name: i18n.tr("Contact"), link: "mailto:[e-mail]" })
+
+            // Developers
+            creditsModel.append({ category: i18n.tr("Developers"), name: "JkB", link: "https://launchpad.net/~joergberroth" })
+            creditsModel.append({ category: i18n.tr("Developers"), name: "Marcos Costales (" + i18n.tr("Founder") + ")", link: "https://wiki.ubuntu.com/costales" })
+
+            // Voices
+            switch (Qt.locale().name.substring(0,2).toLowerCase()) {
+            case 'de':
+                creditsModel.append({ category: i18n.tr("Voice"), name: "Ilonka Oettershagen", link: "https://plus.google.com/107664665064221547104" });
+                break;
+            case 'es':
+                creditsModel.append({ category: i18n.tr("Voice"), name: "Fernando Lanero", link: "https://twitter.com/ferlanero" })
+                break;
+            case 'it':
+                creditsModel.append({ category: i18n.tr("Voice"), name: "Silvia Bindelli", link: "https://twitter.com/SilviaBindelli" })
+                break;
+            case 'nl':
+                creditsModel.append({ category: i18n.tr("Voice"), name: "Mark van den Driesche", link: "http://google.com/+Markcortbass" })
+                break;
+            case 'sl':
+                creditsModel.append({ category: i18n.tr("Voice"), name: "Bernard Banko", link: "https://launchpad.net/~beernarrd" })
+                break;
+            default:
+                creditsModel.append({ category: i18n.tr("Voice"), name: "Nathan Haines", link: "http://www.nhaines.com" })
+            }
+
+            // Translators
+            var translators = QmlJs.getTranslators( i18n.tr("translator-credits") )
+            translators.forEach(function(translator) {
+                creditsModel.append({ category: i18n.tr("Translators"), name: translator['name'], link: translator['link'] });
+            });
+
+            // Powered By
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "OpenStreetMap & Contributors", link: "http://www.openstreetmap.org" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "Mapzen", link: "https://mapzen.com/projects/valhalla" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "MapQuest", link: "http://open.mapquest.com/" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "OpenStreetMap Nominatin", link: "http://open.mapquestapi.com/nominatim" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "Overpass API", link: "http://wiki.openstreetmap.org/wiki/Overpass_API/XAPI_Compatibility_Layer" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "OpenLayers", link: "http://openlayers.org" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "Turf.js", link: "http://turfjs.org" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "JQuery", link: "https://jquery.com" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "jquery.localize.js", link: "https://github.com/coderifous/jquery-localize" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "The Noun Project", link: "https://thenounproject.com" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "Wikimedia", link: "https://commons.wikimedia.org/wiki/Category:Multi-touch_gestures" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "IconFinder", link: "https://www.iconfinder.com/icons/172062/navigation_icon" })
+            creditsModel.append({ category: i18n.tr("Powered by"), name: "Leaflet Marker", link: "https://github.com/Leaflet/Leaflet" })
+        }
+    }
+
+    ListView {
+        id: creditsListView
+
+        model: creditsModel
+        anchors.fill: parent
+        section.property: "category"
+        section.criteria: ViewSection.FullString
+        section.delegate: HeaderListItem {
+            title: section
+        }
+
+        header: Item {
+            width: parent.width
+            height: appColumn.height + donateColumn.height + units.gu(10)
+            Column {
+                id: appColumn
+                spacing: units.gu(1)
+                anchors {
+                    top: parent.top; left: parent.left; right: parent.right; topMargin: units.gu(5)
+                }
+                Image {
+                    id: appImage
+                    source: "../nav/img/about/logo.png"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+                Label {
+                    width: parent.width
+                    wrapMode: Text.WordWrap
+                    horizontalAlignment: Text.AlignHCenter
+                    //TRANSLATORS: %1 and %2 are links that do not have to be translated: Year + Project + License
+                    text: "© uNav 2015-" + new Date().getFullYear()
+                }
+                Label {
+                    width: parent.width
+                    wrapMode: Text.WordWrap
+                    horizontalAlignment: Text.AlignHCenter
+                    //TRANSLATORS: %1 and %2 are links that do not have to be translated: Year + Project + License
+                    text: i18n.tr("Version %1. Under License %2").arg(navApp.applicationVersion).arg("<a href=\"http://www.gnu.org/licenses/gpl-3.0.en.html\">GPL3</a>")
+                    onLinkActivated: Qt.openUrlExternally(link)
+                }
+            }
+
+            Column {
+                id: donateColumn
+                anchors.top: appColumn.bottom
+                anchors.topMargin: units.gu(3)
+                width: parent.width
+                spacing: units.gu(1)
+                Label {
+                    id: donateLabel
+                    text: i18n.tr("Support its future development")
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+                    horizontalAlignment: Text.AlignHCenter
+                    width: parent.width - units.gu(12)
+                }
+                Button {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: UbuntuColors.green
+                    text: i18n.tr("Buy Donate Version")
+                    onClicked: Qt.openUrlExternally("scope://com.canonical.scopes.clickstore?q=unavdonateversion")
+                }
+            }
+        }
+
+        delegate: ListItem {
+            height: creditsDelegateLayout.height
+            divider.visible: false
+            ListItemLayout {
+                id: creditsDelegateLayout
+                title.text: model.name
+                ProgressionSlot {}
+            }
+            onClicked: Qt.openUrlExternally(model.link)
+        }
+    }
 }
+
 
=== modified file 'qml/FavoritesPage.qml'
--- qml/FavoritesPage.qml	2016-03-14 18:40:54 +0000
+++ qml/FavoritesPage.qml	2016-03-15 01:14:51 +0000
@@ -200,12 +200,16 @@
 		}
 	}
 
-	UbuntuListView {
+    ListView {
 		id: favoritesListView
+
 		model: favoritesModel
 		anchors.fill: parent
 
 		delegate: ListItem {
+            id: delegate
+
+            height: favouriteDelegateLayout.height + divider.height
 			leadingActions:  ListItemActions {
 				actions: [
 					Action {
@@ -237,33 +241,12 @@
 				]
 			}
 
-			contentItem.anchors {
-				leftMargin: units.gu(1)
-				rightMargin: units.gu(1)
-				topMargin: units.gu(0.5)
-				bottomMargin: units.gu(0.5)
-			}
-
-			Label {
-				height: parent.height
-				width: parent.width *4/5
-				text: model.name
-				elide: Text.ElideRight
-				wrapMode: Text.WordWrap
-			}
-
-			Label {
-				anchors.bottom: parent.bottom
-				width: parent.width /5
-				anchors.right: parent.right
-				horizontalAlignment: Text.AlignRight
-				visible: (mainPageStack.center_onpos !== 0)
-				text: QmlJs.formatDistance(
-					QmlJs.calcPoiDistance(mainPageStack.currentLat, mainPageStack.currentLng, model.lat, model.lng, 10),
-					navApp.settings.unit
-				)
-				fontSize: "small"
-			}
+            ListItemLayout {
+                id: favouriteDelegateLayout
+                title.text: model.name
+                subtitle.visible: mainPageStack.center_onpos !== 0
+                subtitle.text: QmlJs.formatDistance(QmlJs.calcPoiDistance(mainPageStack.currentLat, mainPageStack.currentLng, model.lat, model.lng, 10), navApp.settings.unit)
+            }
 
 			onClicked: {
 				mainPageStack.pop(favoritesPage)
 
=== added file 'qml/HeaderListItem.qml'
--- qml/HeaderListItem.qml	1970-01-01 00:00:00 +0000
+++ qml/HeaderListItem.qml	2016-03-15 01:14:51 +0000
@@ -0,0 +1,30 @@
+/*
+ * 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
+
+ListItem {
+    id: headerListItem
+
+    property string title
+
+    height: units.gu(4)
+    Label {
+        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
+        text: title
+        font.bold: true
+    }
+}
 
=== modified file 'qml/SearchPage.qml'
--- qml/SearchPage.qml	2016-03-14 18:40:54 +0000
+++ qml/SearchPage.qml	2016-03-15 01:14:51 +0000
@@ -18,428 +18,366 @@
 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.LocalStorage 2.0
 import QtQuick.XmlListModel 2.0
 import "js/utils.js" as QmlJs
 import "js/db.js" as UnavDB
 
 Page {
-	id: searchPage
-
-	title: i18n.tr("Search")
-	anchors.fill: parent
-
-	state: "search"
-	states: [
-		PageHeadState {
-			name: "search"
-			head: searchPage.head
-
-			backAction: Action {
-				iconName: "back"
-				text: i18n.tr("Back")
-				onTriggered: {
-					mainPageStack.pop(searchPage)
-				}
-			}
-
-			contents: TextField {
-				id: searchField
-				width: parent ? parent.width - units.gu(2) : undefined
-				inputMethodHints: Qt.ImhNoPredictiveText
-				hasClearButton: true
-				placeholderText: i18n.tr("Where do we go?")
-				onTriggered: {
-					if (text.length > 2) {
-						statusLabel.visible = true
-						statusLabel.text = i18n.tr("Searching…");
-						resultsListView.visible = false
-						xmlSearchModel.searchString = text;
-						xmlSearchModel.search();
-					} else {
-						searchField.text = "";
-					}
-				}
-			}
-		}
-	]
-
-	Label {
-		id: statusLabel
-		width: parent.width - units.gu(4)
-		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.verticalCenter: parent.verticalCenter
-		visible: historyModel.count === 0
-		horizontalAlignment: Text.AlignHCenter
-		wrapMode: Text.WordWrap
-		text: navApp.settings.saveHistory ? i18n.tr("No history yet…") : i18n.tr("History is disabled")
-	}
-
-	Icon {
-		id: historyIcon
-		width: units.gu(6)
-		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.bottom: statusLabel.top
-		anchors.bottomMargin: units.gu(2)
-		visible: historyModel.count === 0 && xmlSearchModel.status !== XmlListModel.Loading
-		name: "history"
-	}
-
-	// Indicator to show search activity
-	ActivityIndicator {
-		id: searchActivity
-		anchors {
-			bottom: statusLabel.top
-			bottomMargin: units.gu (1)
-			horizontalCenter: parent.horizontalCenter
-		}
-		running: xmlSearchModel.status === XmlListModel.Loading
-	}
-
-	ListModel {
-		id: historyModel
-		function initialize() {
-			historyModel.clear();
-			var res = UnavDB.getSearchHistory();
-			var len = res.rows.length;
-			for (var i = 0; i < len; ++i) {
-				historyModel.append({
-					title: i18n.tr("Search history"),
-					name:  res.rows.item(i).key,
-					lat:   res.rows.item(i).lat,
-					lng:   res.rows.item(i).lng
-				});
-			}
-			res = UnavDB.getfavHistory();
-			len = res.rows.length;
-			for (i = 0; i < len; ++i) {
-				historyModel.append({
-					title: i18n.tr("Favorite history"),
-					name:  res.rows.item(i).key,
-					lat:   res.rows.item(i).lat,
-					lng:   res.rows.item(i).lng
-				});
-			}
-			res = UnavDB.getNearByHistory();
-			len = res.rows.length;
-			for (i = 0; i < len; ++i) {
-				historyModel.append({
-					title:		i18n.tr("Nearby history"),
-					name:		i18n.tr(res.rows.item(i).type),
-					en_name:	res.rows.item(i).type,
-					clause:		res.rows.item(i).clause
-				});
-			}
-		}
-		Component.onCompleted: initialize()
-	}
-
-	//OSMTouch Model:
-	XmlListModel {
-		id: xmlSearchModel
-
-		onStatusChanged: {
-			if (status === XmlListModel.Error) {
-				statusLabel.text = i18n.tr("Time out! Please try again");
-				statusLabel.visible = true;
-				historyIcon.visible =  false;
-				resultsListView.visible = false;
-			} if (status === XmlListModel.Ready && count === 0) {
-				//TRANSLATORS: The Argument is the search input. E.G. a Town, Address....
-				statusLabel.text = i18n.tr("Sorry, no result for %1").arg(searchField.text);
-				statusLabel.visible = true;
-				historyIcon.visible =  false;
-				resultsListView.visible = false;
-			} if (status === XmlListModel.Ready && count >> 0) {
-				statusLabel.visible = false;
-				historyIcon.visible =  false;
-				sortedSearchModel.sortXmlList();
-			}
-		}
-
-		readonly property string searchUrl: "https://nominatim.openstreetmap.org/search?format=xml&email=[e-mail]&limit=50&q="
-		property string searchString
-
-		function search() {
-			xmlSearchModel.clear()
-			sortedSearchModel.clear()
-			source = (searchUrl + searchString);
-		}
-
-		function clear() {
-			source: "";
-		}
-
-		source: ""
-		query: "/searchresults/place"
-
-		XmlRole { name: "name"; query: "@display_name/string()"; isKey: true }
-		XmlRole { name: "lat"; query: "@lat/string()"; isKey: true }
-		XmlRole { name: "lng"; query: "@lon/string()"; isKey: true }
-		XmlRole { name: "icon"; query: "@icon/string()"; isKey: true }
-	}
-
-	ListModel {
-		id: sortedSearchModel
-
-		function sortXmlList (){
-			sortedSearchModel.clear()
-			var item
-			for (var i = 0; i < xmlSearchModel.count; i++) {
-				item  = {
-					"name": xmlSearchModel.get(i).name,
-					"lat": xmlSearchModel.get(i).lat,
-					"lng": xmlSearchModel.get(i).lng,
-					"icon": (xmlSearchModel.get(i).icon).replace('.p.20.png', '.p.32.png'),
-					"distance": QmlJs.calcPoiDistance(
-						mainPageStack.currentLat,
-						mainPageStack.currentLng,
-						xmlSearchModel.get(i).lat,
-						xmlSearchModel.get(i).lng,
-						10
-					)
-				}
-				if (i === 0) {
-					sortedSearchModel.append(item)
-				} else { // sort model by distance
-					var j = 0;
-					while (j <= sortedSearchModel.count) {
-						if (j === sortedSearchModel.count) {
-							sortedSearchModel.append(item)
-							break;
-						} else if (item.distance < sortedSearchModel.get(j).distance){
-							sortedSearchModel.insert(j,item)
-							break;
-						} else {
-							j++;
-						}
-					}
-				}
-				xmlSearchModel.clear();
-				historyListView.visible = false;
-				resultsListView.visible = true;
-			}
-		}
-	}
-
-	Component {
-		id: sectionHeading
-
-		Rectangle {
-			width: parent.width
-			height: childrenRect.height
-
-			ListItems.Header {
-				id: listHeader
-				text: section
-			}
-		}
-	}
-
-	UbuntuListView {
-		id: historyListView
-		model: historyModel
-		visible: !statusLabel.visible
-		anchors.fill: parent
-
-		section.property: "title"
-		section.criteria: ViewSection.FullString
-		//section.labelPositioning: ViewSection.CurrentLabelAtStart + ViewSection.InlineLabels
-		section.delegate: sectionHeading
-
-		delegate: ListItem {
-			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"
-						onTriggered: {
-							mainPageStack.pop(searchPage);
-							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})
-						}
-					}
-				]
-			}
-
-			contentItem.anchors {
-				leftMargin: units.gu(2)
-				rightMargin: units.gu(1)
-				topMargin: units.gu(0.5)
-				bottomMargin: units.gu(0.5)
-			}
-
-			Label {
-				height: parent.height
-				width: parent.width *4/5
-				text: model.name
-				elide: Text.ElideRight
-				wrapMode: Text.WordWrap
-			}
-
-			Icon {
-				id: progressionIcon
-				anchors {
-					right: parent.right
-					verticalCenter: parent.verticalCenter
-				}
-				height: units.gu(2.5)
-				name: "next"
-				visible: model.title === i18n.tr("Nearby history")
-			}
-
-			Label {
-				anchors.bottom: parent.bottom
-				width: parent.width /5
-				anchors.right: parent.right
-				horizontalAlignment: Text.AlignRight
-				visible: model.title !== i18n.tr("Nearby history") && mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null"
-				text: QmlJs.formatDistance(
-					QmlJs.calcPoiDistance(
-						mainPageStack.currentLat,
-						mainPageStack.currentLng,
-						model.lat, model.lng, 
-						10
-					),
-					navApp.settings.unit
-				)
-				fontSize: "small"
-			}
-
-			onClicked: {
-				mainPageStack.pop(searchPage)
-				if (model.title === i18n.tr("Nearby history")) {
-					mainPageStack.push(Qt.resolvedUrl("PoiListPage.qml"), 
-					{
-						lat: mainPageStack.currentLat,
-						lng: mainPageStack.currentLng,
-						poiType: model.name,
-						clause: model.clause,
-						geoDistFactor: 5
-					})
-				} else {
-					mainPageStack.executeJavaScript("ui.markers_POI_set([{	title: \"" +
-																			model.name + "\", lat: " +
-																			model.lat + ", lng: " +
-																			model.lng + "}]);");
-				}
-			}
-		}
-	}
-
-	UbuntuListView {
-		id: resultsListView
-		model: sortedSearchModel
-
-		width: parent.width
-		height: parent.height - units.gu(6)
-		anchors.top: parent.top
-		anchors.topMargin: units.gu(6)
-		visible: false
-
-		delegate: ListItem {
-			trailingActions:  ListItemActions {
-				actions: [
-					Action {
-						iconName: "send"
-						onTriggered: {
-							if (navApp.settings.saveHistory) {
-								UnavDB.saveToSearchHistory(model.name, model.lat, model.lng)
-							}
-							mainPageStack.pop(searchPage);
-							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.pop(searchPage)
-							mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml"), {state:"adding", lat: model.lat, lng: model.lng, favName: model.name})
-						}
-					}
-				]
-			}
-
-			onClicked: {
-				if (navApp.settings.saveHistory) {
-					UnavDB.saveToSearchHistory(model.name, model.lat, model.lng)
-				}
-				mainPageStack.pop(searchPage)
-				mainPageStack.executeJavaScript("ui.markers_POI_set([{title: \"" + model.name + "\", lat: " + model.lat + ", lng: " + model.lng + "}]);");
-			}
-
-			contentItem.anchors {
-				leftMargin: units.gu(1)
-				rightMargin: units.gu(1)
-				topMargin: units.gu(0.5)
-				bottomMargin: units.gu(0.5)
-			}
-
-			Label {
-				anchors.left: parent.left
-				height: parent.height
-				width: parent.width *4/5
-				text: model.name
-				elide: Text.ElideRight
-				wrapMode: Text.WordWrap
-
-			}
-
-			Icon {
-				id: resIcon
-				height: 32
-				width: height
-				visible: model.icon !== ""
-				anchors {
-					top: parent.top
-					right: parent.right
-				}
-				source: model.icon
-			}
-
-			Label {
-				anchors.bottom: parent.bottom
-				width: parent.width /5
-				anchors.right: parent.right
-				horizontalAlignment: Text.AlignRight
-				visible: mainPageStack.currentLat !== "null" && mainPageStack.currentLng !== "null"
-				text: QmlJs.formatDistance(model.distance, navApp.settings.unit)
-				fontSize: "small"
-			}
-		}
-	}
+    id: searchPage
+
+    title: i18n.tr("Search")
+
+    state: "search"
+    states: [
+        PageHeadState {
+            name: "search"
+            head: searchPage.head
+
+            backAction: Action {
+                iconName: "back"
+                text: i18n.tr("Back")
+                onTriggered: {
+                    mainPageStack.pop(searchPage)
+                }
+            }
+
+            contents: TextField {
+                id: searchField
+                width: parent ? parent.width - units.gu(2) : undefined
+                inputMethodHints: Qt.ImhNoPredictiveText
+                hasClearButton: true
+                placeholderText: i18n.tr("Where do we go?")
+                onTriggered: {
+                    if (text.length > 2) {
+                        statusLabel.visible = true
+                        statusLabel.text = i18n.tr("Searching…");
+                        resultsListView.visible = false
+                        xmlSearchModel.searchString = text;
+                        xmlSearchModel.search();
+                    } else {
+                        searchField.text = "";
+                    }
+                }
+            }
+        }
+    ]
+
+    Label {
+        id: statusLabel
+        width: parent.width - units.gu(4)
+        anchors.centerIn: parent
+        visible: historyModel.count === 0
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.WordWrap
+        text: navApp.settings.saveHistory ? i18n.tr("No history yet…")
+                                          : i18n.tr("History is disabled")
+    }
+
+    Icon {
+        id: historyIcon
+        width: units.gu(6)
+        anchors { horizontalCenter: parent.horizontalCenter; bottom: statusLabel.top; bottomMargin: units.gu(2) }
+        visible: historyModel.count === 0 && xmlSearchModel.status !== XmlListModel.Loading
+        name: "history"
+    }
+
+    // Indicator to show search activity
+    ActivityIndicator {
+        id: searchActivity
+        anchors {
+            bottom: statusLabel.top
+            bottomMargin: units.gu (1)
+            horizontalCenter: parent.horizontalCenter
+        }
+        running: xmlSearchModel.status === XmlListModel.Loading
+    }
+
+    ListModel {
+        id: historyModel
+        function initialize() {
+            historyModel.clear();
+            var res = UnavDB.getSearchHistory();
+            var len = res.rows.length;
+            for (var i = 0; i < len; ++i) {
+                historyModel.append({
+                                        title: i18n.tr("Search history"),
+                                        name:  res.rows.item(i).key,
+                                        lat:   res.rows.item(i).lat,
+                                        lng:   res.rows.item(i).lng
+                                    });
+            }
+            res = UnavDB.getfavHistory();
+            len = res.rows.length;
+            for (i = 0; i < len; ++i) {
+                historyModel.append({
+                                        title: i18n.tr("Favorite history"),
+                                        name:  res.rows.item(i).key,
+                                        lat:   res.rows.item(i).lat,
+                                        lng:   res.rows.item(i).lng
+                                    });
+            }
+            res = UnavDB.getNearByHistory();
+            len = res.rows.length;
+            for (i = 0; i < len; ++i) {
+                historyModel.append({
+                                        title:		i18n.tr("Nearby history"),
+                                        name:		i18n.tr(res.rows.item(i).type),
+                                        en_name:	res.rows.item(i).type,
+                                        clause:		res.rows.item(i).clause
+                                    });
+            }
+        }
+        Component.onCompleted: initialize()
+    }
+
+    //OSMTouch Model:
+    XmlListModel {
+        id: xmlSearchModel
+
+        onStatusChanged: {
+            if (status === XmlListModel.Error) {
+                statusLabel.text = i18n.tr("Time out! Please try again");
+                statusLabel.visible = true;
+                historyIcon.visible =  false;
+                resultsListView.visible = false;
+            } if (status === XmlListModel.Ready && count === 0) {
+                //TRANSLATORS: The Argument is the search input. E.G. a Town, Address....
+                statusLabel.text = i18n.tr("Sorry, no result for %1").arg(searchField.text);
+                statusLabel.visible = true;
+                historyIcon.visible =  false;
+                resultsListView.visible = false;
+            } if (status === XmlListModel.Ready && count >> 0) {
+                statusLabel.visible = false;
+                historyIcon.visible =  false;
+                sortedSearchModel.sortXmlList();
+            }
+        }
+
+        readonly property string searchUrl: "https://nominatim.openstreetmap.org/search?format=xml&email=[e-mail]&limit=50&q="
+        property string searchString
+
+        function search() {
+            xmlSearchModel.clear()
+            sortedSearchModel.clear()
+            source = (searchUrl + searchString);
+        }
+
+        function clear() {
+            source: "";
+        }
+
+        source: ""
+        query: "/searchresults/place"
+
+        XmlRole { name: "name"; query: "@display_name/string()"; isKey: true }
+        XmlRole { name: "lat"; query: "@lat/string()"; isKey: true }
+        XmlRole { name: "lng"; query: "@lon/string()"; isKey: true }
+        XmlRole { name: "icon"; query: "@icon/string()"; isKey: true }
+    }
+
+    ListModel {
+        id: sortedSearchModel
+
+        function sortXmlList (){
+            sortedSearchModel.clear()
+            var item
+            for (var i = 0; i < xmlSearchModel.count; i++) {
+                item  = {
+                    "name": xmlSearchModel.get(i).name,
+                    "lat": xmlSearchModel.get(i).lat,
+                    "lng": xmlSearchModel.get(i).lng,
+                    "icon": (xmlSearchModel.get(i).icon).replace('.p.20.png', '.p.32.png'),
+                    "distance": QmlJs.calcPoiDistance(
+                                    mainPageStack.currentLat,
+                                    mainPageStack.currentLng,
+                                    xmlSearchModel.get(i).lat,
+                                    xmlSearchModel.get(i).lng,
+                                    10
+                                    )
+                }
+                if (i === 0) {
+                    sortedSearchModel.append(item)
+                } else { // sort model by distance
+                    var j = 0;
+                    while (j <= sortedSearchModel.count) {
+                        if (j === sortedSearchModel.count) {
+                            sortedSearchModel.append(item)
+                            break;
+                        } else if (item.distance < sortedSearchModel.get(j).distance){
+                            sortedSearchModel.insert(j,item)
+                            break;
+                        } else {
+                            j++;
+                        }
+                    }
+                }
+                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: HeaderListItem {
+            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"
+                        onTriggered: {
+                            mainPageStack.pop(searchPage);
+                            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})
+                        }
+                    }
+                ]
+            }
+
+            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: progressionIcon
+                    height: units.gu(2.5)
+                    name: "next"
+                    visible: model.title === i18n.tr("Nearby history")
+                    SlotsLayout.position: SlotsLayout.Last
+                }
+
+            }
+
+            onClicked: {
+                mainPageStack.pop(searchPage)
+                if (model.title === i18n.tr("Nearby history")) {
+                    mainPageStack.push(Qt.resolvedUrl("PoiListPage.qml"),
+                                       {
+                                           lat: mainPageStack.currentLat,
+                                           lng: mainPageStack.currentLng,
+                                           poiType: model.name,
+                                           clause: model.clause,
+                                           geoDistFactor: 5
+                                       })
+                } else {
+                    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.pop(searchPage);
+                            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.pop(searchPage)
+                            mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml"), {state:"adding", lat: model.lat, lng: model.lng, favName: model.name})
+                        }
+                    }
+                ]
+            }
+
+            onClicked: {
+                if (navApp.settings.saveHistory) {
+                    UnavDB.saveToSearchHistory(model.name, model.lat, model.lng)
+                }
+                mainPageStack.pop(searchPage)
+                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
+                }
+            }
+        }
+    }
 }
 
=== modified file 'qml/SettingsPage.qml'
--- qml/SettingsPage.qml	2016-03-14 18:40:54 +0000
+++ qml/SettingsPage.qml	2016-03-15 01:14:51 +0000
@@ -17,7 +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 Ubuntu.Components.ListItems 1.3 as ListItems
 import QtQuick.LocalStorage 2.0
 import "js/db.js" as UnavDB
 
@@ -41,12 +41,12 @@
 				right: parent.right
 			}
 
-			ListItem.Header {
-				id: mapModeHeader
-				text: i18n.tr("Navigation")
-			}
+            HeaderListItem {
+                id: mapModeHeader
+                title: i18n.tr("Navigation")
+            }
 
-			ListItem.ItemSelector {
+            ListItems.ItemSelector {
 				id: modeList
 				text: i18n.tr("Mode:")
 				width: parent.width
@@ -63,40 +63,46 @@
 					mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no'){nav.set_route_status('waiting4signal')}; settings.set_routing_mode(" + selectedIndex +");")
 				}
 			}
-			
-			ListItem.Standard {
-				visible: navApp.settings.routingMode === 0 ? true : false
-				showDivider: true
-				text: i18n.tr("Avoid Tolls")
-				control: Switch {
-					id: tollsSwitch
-					checked: navApp.settings.avoidTolls
-					onClicked: { 
-						navApp.settings.avoidTolls = checked;
-						mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no'){nav.set_route_status('waiting4signal')}; settings.set_avoid_tolls(" + checked.toString() + ");")
-					}
-				}
-			}
-			
-			ListItem.Standard {
-				visible: navApp.settings.routingMode === 0 ? true : false
-				showDivider: true
-				text: i18n.tr("Speed Camera Alerts")
-				control: Switch {
-					id: radarsSwitch
-					checked: navApp.settings.alertRadars
-					onClicked: {
-						navApp.settings.alertRadars = checked;
-						mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no'){nav.set_route_status('waiting4signal')}; settings.set_alert_radars(" + checked.toString() + ");");
-						if (navApp.settings.legalRadarShow) {
-							navApp.settings.legalRadarShow = false;
-							PopupUtils.open(confirmEnableRadar);
-						}
-					}
-				}
-			}
-			
-			ListItem.ItemSelector {
+
+            ListItem {
+                height: tollsLayout.height + divider.height
+                ListItemLayout {
+                    id: tollsLayout
+                    title.text: i18n.tr("Avoid Tolls")
+                    Switch {
+                        id: tollsSwitch
+                        checked: navApp.settings.avoidTolls
+                        onClicked: {
+                            navApp.settings.avoidTolls = checked;
+                            mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no'){nav.set_route_status('waiting4signal')}; settings.set_avoid_tolls(" + checked.toString() + ");")
+                        }
+                        SlotsLayout.position: SlotsLayout.Last
+                    }
+                }
+            }
+			
+            ListItem {
+                height: speedCameraLayout.height + divider.height
+                ListItemLayout {
+                    id: speedCameraLayout
+                    title.text: i18n.tr("Speed Camera Alerts")
+                    Switch {
+                        id: radarsSwitch
+                        checked: navApp.settings.alertRadars
+                        onClicked: {
+                            navApp.settings.alertRadars = checked;
+                            mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no'){nav.set_route_status('waiting4signal')}; settings.set_alert_radars(" + checked.toString() + ");");
+                            if (navApp.settings.legalRadarShow) {
+                                navApp.settings.legalRadarShow = false;
+                                PopupUtils.open(confirmEnableRadar);
+                            }
+                        }
+                        SlotsLayout.position: SlotsLayout.Last
+                    }
+                }
+            }
+			
+            ListItems.ItemSelector {
 				id: soundsList
 				text: i18n.tr("Indications:")
 				width: parent.width
@@ -114,12 +120,12 @@
 				}
 			}
 
-			ListItem.Header {
+           HeaderListItem {
 				id: mapListHeader
-				text: i18n.tr("Map")
+                title: i18n.tr("Map")
 			}
 
-			ListItem.ItemSelector {
+            ListItems.ItemSelector {
 				id: unitsList
 				text: i18n.tr("Units:")
 				width: parent.width
@@ -137,30 +143,32 @@
 				}
 			}
 
-			ListItem.Header {
+            HeaderListItem {
 				id: privacyListHeader
-				text: i18n.tr("History")
-			}
-
-			ListItem.Standard {
-				showDivider: false
-				text: i18n.tr("Store new searches")
-
-				control: Switch {
-					id: saveHistorySwitch
-					checked: navApp.settings.saveHistory
-					onClicked: {
-						navApp.settings.saveHistory = checked;
-					}
-				}
-			}
-
-			ListItem.Standard {
-				showDivider: true
-				text: i18n.tr("Clear History")
-				onClicked: PopupUtils.open(confirmEraseHistory)
-			}
-			
+                title: i18n.tr("History")
+			}
+
+            ListItem {
+                height: storeSearchLayout.height + divider.height
+                ListItemLayout {
+                    id: storeSearchLayout
+                    title.text: i18n.tr("Store new searches")
+                    Switch {
+                        id: saveHistorySwitch
+                        checked: navApp.settings.saveHistory
+                        onClicked: navApp.settings.saveHistory = checked
+                        SlotsLayout.position: SlotsLayout.Last
+                    }
+                }
+            }
+
+            ListItem {
+                Label {
+                    anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
+                    text: i18n.tr("Clear History")
+                }
+                onClicked: PopupUtils.open(confirmEraseHistory)
+            }
 		}
 		
 		Component {