Implement list sections for Harmattan
[quandoparte] / application / resources / harmattan / qml / StationListPage.qml
index 3acff5d..7a90001 100644 (file)
 import QtQuick 1.0
 import QtMobility.location 1.1
 import com.nokia.meego 1.0
+import net.cirulla.quandoparte 1.0
+import "uiconstants.js" as UiConstants
+import "StationListPage.js" as Private
 
 Page {
     property variant stationView
     id: stationListPage
     tools: ToolBarLayout {
         id: toolBar
-        ToolIcon { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); }
-        ToolIcon { iconId: "icon-m-toolbar-settings"; onClicked: settingsSheet.open(); }
-        ToolIcon { iconId: "icon-m-toolbar-view-menu"; }
-    }
-
-    function loadStation()
-    {
-        var component = Qt.createComponent("StationPage.qml");
-        if (component.status == Component.Ready) {
-            var view = component.createObject(stationListPage)
-            stationListPage.stationView = view
-            pageStack.push(view)
-            view.html = "<h1>Hello World</h1><p>Lorem ipsum</p>"
+        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()
         }
-        else
-            console.log('Cannot load component: ' + component.errorString());
-    }
-
-    function highlightSearch(s)
-    {
-        return s.replace(searchField.text,
-                         '<span style="text-decoration:underline">' +
-                         searchField.text + '</span>')
     }
-
-    Column {
-        width: parent.width
-        height: parent.height
-        TextField {
-            id: searchField
-            width: parent.width
-            placeholderText: "Search..."
-            platformStyle: TextFieldStyle { paddingRight: clearButton.width }
-            onTextChanged: {
+    Menu {
+        id: menu
+        content: MenuLayout {
+            MenuItem {
+                text: qsTr("Update Periodically")
+                Switch {
+                    id: periodicCheckSwitch
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: UiConstants.DefaultMargin
+                    }
+                    checked: settings.autoUpdate
+                    onCheckedChanged: settings.autoUpdate = checked
+                }
             }
-            Image {
-                id: clearButton
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                source: "image://theme/icon-m-input-clear"
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        inputContext.reset()
-                        searchField.text = ""
+            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
                     }
                 }
             }
+            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: [
+            qsTr("Stations by Name"),
+            qsTr("Stations by Distance"),
+            qsTr("Stations Recently Seen")
+        ]
+    }
+    SearchBar {
+        id: searchField
+        anchors.top: header.bottom
+        open: false
+    }
+    Binding {
+        target: stationListProxyModel
+        property: "searchPattern"
+        value: searchField.text
+    }
+    Binding {
+        target: stationListProxyModel
+        property: "sortingMode"
+        value: header.selectedIndex
+    }
+    Binding {
+        target: stationListView
+        property: "section.property"
+        value: header.selectedIndex === 0 ? "name" : ""
+    }
+    Item {
+        id: mainView
+        anchors {
+            top: searchField.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
         }
-        Rectangle {
-            height: 16
+        DroppedShadow {
+            id: shadow
+            anchors.top: mainView.top
         }
         ListView {
             id: stationListView
             clip: true
             width: parent.width
-            height: parent.height
+            cacheBuffer: 10
+            anchors {
+                top: shadow.top
+                bottom: parent.bottom
+            }
             model:  stationListProxyModel
-            /*
-            model: ListModel {
-                id: model
-                ListElement {
-                    name: "Genova Voltri"
-                }
-                ListElement {
-                    name: "Genova Sestri Ponente"
-                }
-                ListElement {
-                    name: "Genova Cornigliano"
-                }
-                ListElement {
-                    name: "Genova Sampierdarena"
-                }
-                ListElement {
-                    name: "Genova Via di Francia"
-                }
-                ListElement {
-                    name: "Genova Piazza Principe"
-                }
-                ListElement {
-                    name: "Genova Brignole"
-                }
-                ListElement {
-                    name: "Genova Sturla"
-                }
-                ListElement {
-                    name: "Genova Quinto"
-                }
-                ListElement {
-                    name: "Genova Nervi"
+            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: 48
+                height: UiConstants.ListItemHeightSmall
                 width: parent.width
                 BorderImage {
                     id: background
                     anchors.fill: parent
                     // Fill page borders
                     visible: mouseArea.pressed
-                    source: "image://theme/meegotouch-list-background-pressed-center"
+                    source: "image://theme/meegotouch-list-fullwidth-" + (theme.inverted ? "inverted-" : "") + "background-pressed"
                 }
                 Row {
                     anchors.fill: parent
-
+                    Item {
+                        width: UiConstants.DefaultMargin
+                        height: UiConstants.DefaultMargin
+                    }
                     Column {
                         anchors.verticalCenter: parent.verticalCenter
 
                         Label {
                             id: mainText
-                            text: highlightSearch(model.display)
+                            text: Private.highlightSearch(model.name, UiConstants.AccentColor)
                             font.bold: true
                         }
                     }
                 }
+                Image {
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    //source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
+                }
                 MouseArea {
                     id: mouseArea
                     anchors.fill: background
                     onClicked: {
-                        stationListPage.loadStation(model.display)
+                        Private.loadStation(model.name, model.code)
                     }
                 }
             }
         }
-    }
-
-    Sheet {
-        id: settingsSheet
-        acceptButtonText: "Save"
-        rejectButtonText: "Cancel"
-        content: Item {
-            x: 16
-            y: 16
-            width: parent.width - 32
-            height: parent.height - 32
-            Column {
-                spacing: 16
-                anchors.fill: parent
-                Row {
-                    height: 40
-                    spacing: 16
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    Label {
-                        font.bold: true
-                        text: "Show Last Station on Startup"
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    Switch {
-                        anchors.verticalCenter: parent.verticalCenter
-                        id: showLastStationSwitch
-                        anchors.right: parent.right
-                    }
-                }
-                Row {
-                    height: 40
-                    spacing: 16
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    Label {
-                        font.bold: true
-                        text: "Update Display Periodically"
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    Switch {
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.right: parent.right
-                        id: periodicCheckSwitch
-                    }
-                }
-            }
+        ScrollDecorator {
+            id: decorator
+            flickableItem: stationListView
         }
     }
 }
-