Implement list sections for Harmattan

[quandoparte] / application / resources / harmattan / qml / StationListPage.qml

diff --git a/application/resources/harmattan/qml/StationListPage.qml b/application/resources/harmattan/qml/StationListPage.qml
index 4f1244a..7a90001 100644 (file)
--- a/application/resources/harmattan/qml/StationListPage.qml
+++ b/application/resources/harmattan/qml/StationListPage.qml
@@ -10,13 +10,18 @@ Page {
     id: stationListPage
     tools: ToolBarLayout {
         id: toolBar
-        ToolIcon { iconId: "icon-m-toolbar-search"; onClicked: searchField.visible = !searchField.visible; }
-        ToolIcon { iconId: "icon-m-toolbar-view-menu"; onClicked: menu.open() }
+        ToolIcon {
+            iconId: "icon-m-toolbar-search" + (theme.inverted ? "-white": "")
+            onClicked: searchField.open = !searchField.open
+        }
+        ToolIcon {
+            iconId: "icon-m-toolbar-view-menu" + (theme.inverted ? "-white": "")
+            onClicked: menu.open()
+        }
     }
     Menu {
         id: menu
         content: MenuLayout {
-
             MenuItem {
                 text: qsTr("Update Periodically")
                 Switch {
@@ -27,36 +32,46 @@ Page {
                         rightMargin: UiConstants.DefaultMargin
                     }
                     checked: settings.autoUpdate
+                    onCheckedChanged: settings.autoUpdate = checked
+                }
+            }
+            MenuItem {
+                text: qsTr("Use Dark Theme")
+                Switch {
+                    id: darkThemeSwitchSwitch
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: UiConstants.DefaultMargin
+                    }
+                    checked: settings.darkThemePreferred
+                    onCheckedChanged: {
+                        settings.darkThemePreferred = checked
+                        theme.inverted = checked
+                    }
                 }
-                onClicked: settings.autoUpdate ^= true
             }
             MenuItem {
                 text: qsTr("About Quando Parte")
                 onClicked: Private.showAboutPage()
             }
+            Component.onCompleted: periodicCheckSwitch.checked = settings.autoUpdate
         }
     }
     PageHeader {
         id: header
         anchors.top: parent.top
         selectedIndex: stationListProxyModel.sortingMode
-        options: ListModel {
-            id: dialogOptions
-            ListElement {
-                name: QT_TR_NOOP("Stations by Name")
-            }
-            ListElement {
-                name: QT_TR_NOOP("Stations by Distance")
-            }
-            ListElement {
-                name: QT_TR_NOOP("Stations Recently Seen")
-            }
-        }
+        options: [
+            qsTr("Stations by Name"),
+            qsTr("Stations by Distance"),
+            qsTr("Stations Recently Seen")
+        ]
     }
     SearchBar {
         id: searchField
         anchors.top: header.bottom
-        visible: false
+        open: false
     }
     Binding {
         target: stationListProxyModel
@@ -68,6 +83,11 @@ Page {
         property: "sortingMode"
         value: header.selectedIndex
     }
+    Binding {
+        target: stationListView
+        property: "section.property"
+        value: header.selectedIndex === 0 ? "name" : ""
+    }
     Item {
         id: mainView
         anchors {
@@ -84,11 +104,49 @@ Page {
             id: stationListView
             clip: true
             width: parent.width
+            cacheBuffer: 10
             anchors {
                 top: shadow.top
                 bottom: parent.bottom
             }
             model:  stationListProxyModel
+            section {
+                //property: "name"
+                criteria: ViewSection.FirstCharacter
+                delegate: Item {
+                    width: parent.width
+                    height: UiConstants.SectionItemHeightSmall
+                    anchors {
+                        margins: UiConstants.DefaultMargin
+                    }
+                    Image {
+                        anchors {
+                            left: parent.left
+                            right: sectionLabel.left
+                            verticalCenter: parent.verticalCenter
+                            margins: UiConstants.DefaultMargin
+                        }
+                        source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
+                    }
+                    Label {
+                        id: sectionLabel
+                        anchors {
+                            right: sectionRightMargin.left
+                            verticalCenter: parent.verticalCenter
+                        }
+                        text: section
+                    }
+                    Item {
+                        id: sectionRightMargin
+                        anchors {
+                            right: parent.right
+                        }
+                        width: UiConstants.DefaultMargin
+                        height: UiConstants.DefaultMargin
+                    }
+                }
+            }
+
             delegate: Item {
                 id: listItem
                 height: UiConstants.ListItemHeightSmall
@@ -98,7 +156,7 @@ Page {
                     anchors.fill: parent
                     // Fill page borders
                     visible: mouseArea.pressed
-                    source: "image://theme/meegotouch-list-fullwidth-background-pressed"
+                    source: "image://theme/meegotouch-list-fullwidth-" + (theme.inverted ? "inverted-" : "") + "background-pressed"
                 }
                 Row {
                     anchors.fill: parent
@@ -111,7 +169,7 @@ Page {
 
                         Label {
                             id: mainText
-                            text: Private.highlightSearch(model.display, UiConstants.AccentColor)
+                            text: Private.highlightSearch(model.name, UiConstants.AccentColor)
                             font.bold: true
                         }
                     }
@@ -121,13 +179,13 @@ Page {
                         left: parent.left
                         right: parent.right
                     }
-                    source: "image://theme/meegotouch-separator-background-horizontal"
+                    //source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
                 }
                 MouseArea {
                     id: mouseArea
                     anchors.fill: background
                     onClicked: {
-                        Private.loadStation(model.display)
+                        Private.loadStation(model.name, model.code)
                     }
                 }
             }
@@ -138,4 +196,3 @@ Page {
         }
     }
 }
-