Merge lp:~nik90/unav/code-cleanup-part2 into lp:~costales/unav/trunk

[Nekhelesh Ramananthan]

Revamped Settings Page.

[lp:~nik90/unav/code-cleanup-part2]

15. By Nekhelesh Ramananthan on 2016-03-22

Updated header

=== modified file 'qml/SettingsPage.qml'
--- qml/SettingsPage.qml	2016-03-22 14:03:11 +0000
+++ qml/SettingsPage.qml	2016-03-22 14:03:11 +0000
@@ -18,7 +18,6 @@
 import QtQuick 2.4
 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 "js/db.js" as UnavDB
 import "components"
@@ -26,190 +25,261 @@
 Page {
 	id: settingsPage
 
-	title: i18n.tr("Settings")
+    header: PageHeader {
+        title: i18n.tr("Settings")
+        flickable: flickable
+    }
+
 	signal settingsChanged()
 
-	Flickable {
-		id: flickable
-		anchors.fill: parent
-		contentHeight: settingsColumn.height + units.gu(5)
-
-		Column {
-			id: settingsColumn
-
-			anchors {
-				top: parent.top
-				left: parent.left
-				right: parent.right
-			}
-
-			HeaderListItem {
-				id: mapModeHeader
-				title: i18n.tr("Navigation")
-			}
-
-			ListItems.ItemSelector {
-				id: modeList
-				text: i18n.tr("Mode:")
-				width: parent.width
-				anchors.horizontalCenter: parent.horizontalCenter
-
-				objectName: "modeList"
-				model: [i18n.tr("Car"), 	// index: 0
-						i18n.tr("Walking"),	// index: 1
-						i18n.tr("Bicycle") 	// index: 2
-				]
-				selectedIndex: navApp.settings.routingMode
-				onSelectedIndexChanged: {
-					if (navApp.settings.routingMode !== selectedIndex) {
-						navApp.settings.routingMode = selectedIndex
-						mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no' && !nav.get_route_status().startsWith('simulate')){nav.set_route_status('waiting4signal')}; settings.set_routing_mode(" + selectedIndex +");")
-					}
-				}
-			}
-
-			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
-				anchors.horizontalCenter: parent.horizontalCenter
-
-				objectName: "soundsList"
-				model: [i18n.tr("A Voice"), // index: 0
-						i18n.tr("A Notification"), // index: 1
-						i18n.tr("None") // index: 2
-				]
-				selectedIndex: navApp.settings.soundIndications
-				onSelectedIndexChanged: {
-					navApp.settings.soundIndications = selectedIndex
-					mainPageStack.executeJavaScript("settings.set_sound(" + selectedIndex + ");")
-				}
-			}
-
-		   HeaderListItem {
-				id: mapListHeader
-				title: i18n.tr("Map")
-			}
-
-			ListItems.ItemSelector {
-				id: unitsList
-				text: i18n.tr("Units:")
-				width: parent.width
-				anchors.horizontalCenter: parent.horizontalCenter
-
-				objectName: "unitsList"
-				model: [i18n.tr("Kilometers"),	// index: 0
-						i18n.tr("Miles")		// index: 1
-				]
-				selectedIndex: navApp.settings.unit
-				onSelectedIndexChanged: {
-					navApp.settings.unit = selectedIndex
-					mainPageStack.executeJavaScript("settings.set_unit(\'" + ( selectedIndex === 0 ? "km" : "mi" ) +"\');")
-					mainPageStack.executeJavaScript("ui.set_scale_unit(\'" + ( navApp.settings.unit === 0 ? "km" : "mi" ) +"\');")
-				}
-			}
-
-			HeaderListItem {
-				id: privacyListHeader
-				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 {
-			id: confirmEraseHistory
-			Dialog {
-				id: dialogueErase
-				title: i18n.tr("Clear History")
-				text: i18n.tr("You'll delete the current history")
-				Button {
-					text: i18n.tr("Delete")
-					color: UbuntuColors.red
-					onClicked: {
-						UnavDB.dropHistoryTables();
-						PopupUtils.close(dialogueErase);
-					}
-				}
-				Button {
-					 text: i18n.tr("Cancel")
-					 onClicked: PopupUtils.close(dialogueErase)
-				}
-			}
-		}
-		
-		Component {
-			id: confirmEnableRadar
-			Dialog {
-				id: dialogueRadars
-				title: i18n.tr("Speed Camera alerts and the law")
-				text: i18n.tr("uNav is only reading the OpenStreetMap database.\nuNav will show a max speed notification and a Speed Camera marker (marker hidden for French users because of law).\n\nIn a few countries Speed Camera alerts are illegal, then enable this option only if it's legal in the country.\n\nRead more about it here:\n%1").arg("http://goo.gl/ulXvG8")
-				Button {
-					text: i18n.tr("OK")
-					color: UbuntuColors.red
-					onClicked: PopupUtils.close(dialogueRadars);
-				}
-			}
-		}
-		
-	}
+    ListModel {
+        id: navigationModeModel
+        Component.onCompleted: initialize()
+        function initialize() {
+            navigationModeModel.append({ "mode": i18n.tr("Car"), "index": 0 })
+            navigationModeModel.append({ "mode": i18n.tr("Walking"), "index": 1 })
+            navigationModeModel.append({ "mode": i18n.tr("Bicycle"), "index": 2 })
+
+            _modeList.subText.text = navigationModeModel.get(navApp.settings.routingMode).mode
+        }
+    }
+
+    ListModel {
+        id: soundModel
+        Component.onCompleted: initialize()
+        function initialize() {
+            soundModel.append({ "sound": i18n.tr("A Voice"), "index": 0 })
+            soundModel.append({ "sound": i18n.tr("A Notification"), "index": 1 })
+            soundModel.append({ "sound": i18n.tr("None"), "index": 2 })
+
+            _soundList.subText.text = soundModel.get(navApp.settings.soundIndications).sound
+        }
+    }
+
+    ListModel {
+        id: unitModel
+        Component.onCompleted: initialize()
+        function initialize() {
+            unitModel.append({ "unit": i18n.tr("Kilometres"), "index": 0 })
+            unitModel.append({ "unit": i18n.tr("Miles"), "index": 1 })
+
+            _unitList.subText.text = unitModel.get(navApp.settings.unit).unit
+        }
+    }
+
+    Flickable {
+        id: flickable
+        anchors.fill: parent
+        contentHeight: settingsColumn.height + units.gu(5)
+
+        Column {
+            id: settingsColumn
+
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+            }
+
+            ExpandableListItem {
+                id: _modeList
+
+                listViewHeight: units.gu(21)
+                titleText.text: i18n.tr("Navigation Mode")
+
+                model: navigationModeModel
+
+                delegate: ListItem {
+                    ListItemLayout {
+                        title.text: model.mode
+
+                        Icon {
+                            SlotsLayout.position: SlotsLayout.Trailing
+                            width: units.gu(2)
+                            height: width
+                            name: "tick"
+                            visible: navApp.settings.routingMode === model.index
+                        }
+                    }
+
+                    onClicked: {
+                        navApp.settings.routingMode = model.index
+                        mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no' && !nav.get_route_status().startsWith('simulate')){nav.set_route_status('waiting4signal')}; settings.set_routing_mode(" + model.index +");")
+                        _modeList.subText.text = navigationModeModel.get(navApp.settings.routingMode).mode
+                        _modeList.toggleExpansion()
+                    }
+                }
+            }
+
+            ListItem {
+                visible: navApp.settings.routingMode === 0
+                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 {
+                visible: navApp.settings.routingMode === 0
+                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
+                    }
+                }
+            }
+
+            ExpandableListItem {
+                id: _soundList
+
+                listViewHeight: units.gu(21)
+                titleText.text: i18n.tr("Guidance")
+
+                model: soundModel
+
+                delegate: ListItem {
+                    ListItemLayout {
+                        title.text: model.sound
+
+                        Icon {
+                            SlotsLayout.position: SlotsLayout.Trailing
+                            width: units.gu(2)
+                            height: width
+                            name: "tick"
+                            visible: navApp.settings.soundIndications === model.index
+                        }
+                    }
+
+                    onClicked: {
+                        navApp.settings.soundIndications = model.index
+                        mainPageStack.executeJavaScript("settings.set_sound(" + model.index + ");")
+                        _soundList.subText.text = soundModel.get(navApp.settings.soundIndications).sound
+                        _soundList.toggleExpansion()
+                    }
+                }
+            }
+
+           HeaderListItem {
+                id: mapListHeader
+                title: i18n.tr("Map")
+            }
+
+           ExpandableListItem {
+               id: _unitList
+
+               listViewHeight: units.gu(14)
+               titleText.text: i18n.tr("Units")
+
+               model: unitModel
+
+               delegate: ListItem {
+                   ListItemLayout {
+                       title.text: model.unit
+
+                       Icon {
+                           SlotsLayout.position: SlotsLayout.Trailing
+                           width: units.gu(2)
+                           height: width
+                           name: "tick"
+                           visible: navApp.settings.unit === model.index
+                       }
+                   }
+
+                   onClicked: {
+                       navApp.settings.unit = model.index
+                       mainPageStack.executeJavaScript("settings.set_unit(\'" + ( model.index === 0 ? "km" : "mi" ) +"\');")
+                       mainPageStack.executeJavaScript("ui.set_scale_unit(\'" + ( navApp.settings.unit === 0 ? "km" : "mi" ) +"\');")
+                       _unitList.subText.text = unitModel.get(navApp.settings.unit).unit
+                       _unitList.toggleExpansion()
+                   }
+               }
+           }
+
+            HeaderListItem {
+                id: privacyListHeader
+                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 {
+            id: confirmEraseHistory
+            Dialog {
+                id: dialogueErase
+                title: i18n.tr("Clear History")
+                text: i18n.tr("You'll delete the current history")
+                Button {
+                    text: i18n.tr("Delete")
+                    color: UbuntuColors.red
+                    onClicked: {
+                        UnavDB.dropHistoryTables();
+                        PopupUtils.close(dialogueErase);
+                    }
+                }
+                Button {
+                     text: i18n.tr("Cancel")
+                     onClicked: PopupUtils.close(dialogueErase)
+                }
+            }
+        }
+
+        Component {
+            id: confirmEnableRadar
+            Dialog {
+                id: dialogueRadars
+                title: i18n.tr("Speed Camera alerts and the law")
+                text: i18n.tr("uNav is only reading the OpenStreetMap database.\nuNav will show a max speed notification and a Speed Camera marker (marker hidden for French users because of law).\n\nIn a few countries Speed Camera alerts are illegal, then enable this option only if it's legal in the country.\n\nRead more about it here:\n%1").arg("http://goo.gl/ulXvG8")
+                Button {
+                    text: i18n.tr("OK")
+                    color: UbuntuColors.red
+                    onClicked: PopupUtils.close(dialogueRadars);
+                }
+            }
+        }
+
+    }
 }
 

=== added file 'qml/components/ExpandableListItem.qml'
--- qml/components/ExpandableListItem.qml	1970-01-01 00:00:00 +0000
+++ qml/components/ExpandableListItem.qml	2016-03-22 14:03:11 +0000
@@ -0,0 +1,87 @@
+/*
+ * 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 version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+/*
+ Component which extends the SDK Expandable list item and provides a easy
+ to use component where the title, subtitle and a listview can be displayed. It
+ matches the design specification provided for clock.
+*/
+
+ListItem {
+    id: expandableListItem
+
+    // Public APIs
+    property ListModel model
+    property Component delegate
+    property alias titleText: expandableHeader.title
+    property alias subText: expandableHeader.subtitle
+    property alias listViewHeight: expandableListLoader.height
+
+    height: headerListItem.height
+    expansion.height: headerListItem.height + expandableListLoader.height
+    onClicked: toggleExpansion()
+
+    function toggleExpansion() {
+        expansion.expanded = !expansion.expanded
+    }
+
+    ListItem {
+        id: headerListItem
+        height: expandableHeader.height + divider.height
+
+        ListItemLayout {
+            id: expandableHeader
+
+            subtitle.textSize: Label.Medium
+
+            Icon {
+                id: arrow
+
+                width: units.gu(2)
+                height: width
+                SlotsLayout.position: SlotsLayout.Trailing
+                name: "go-down"
+                rotation: expandableListItem.expansion.expanded ? 180 : 0
+
+                Behavior on rotation {
+                    UbuntuNumberAnimation {}
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: expandableListLoader
+        width: parent.width
+        asynchronous: true
+        anchors.top: headerListItem.bottom
+        sourceComponent: expandableListItem.expansion.expanded ? expandableListComponent : undefined
+    }
+
+    Component {
+        id: expandableListComponent
+        ListView {
+            id: expandableList
+            interactive: false
+            model: expandableListItem.model
+            delegate: expandableListItem.delegate
+        }
+    }
+}