Implement list sections for Harmattan
[quandoparte] / application / resources / harmattan / qml / StationListPage.qml
index a5c8be1..7a90001 100644 (file)
 import QtQuick 1.0
+import QtMobility.location 1.1
 import com.nokia.meego 1.0
-import "/usr/lib/qt4/imports/com/nokia/meego/UIConstants.js" as UiConstants
+import net.cirulla.quandoparte 1.0
+import "uiconstants.js" as UiConstants
+import "StationListPage.js" as Private
 
 Page {
+    property variant stationView
     id: stationListPage
-    tools: toolBar
-    anchors.margins: UiConstants.DEFAULT_MARGIN
-    Column {
-        TextField {
-            placeholderText: "Search..."
+    tools: ToolBarLayout {
+        id: toolBar
+        ToolIcon {
+            iconId: "icon-m-toolbar-search" + (theme.inverted ? "-white": "")
+            onClicked: searchField.open = !searchField.open
         }
-        ListView {
-            id: stationListView
-            anchors.fill: parent
-            model: ListModel {
-                ListElement {
-                    name: "Genova Sestri Ponente"
-                }
-                ListElement {
-                    name: "Genova Cornigliano"
-                }
-                ListElement {
-                    name: "Genova Sampierdarena"
-                }
-                ListElement {
-                    name: "Genova Piazza Principe"
-                }
-                ListElement {
-                    name: "Genova Brignole"
-                }
-                ListElement {
-                    name: "Genova Sturla"
+        ToolIcon {
+            iconId: "icon-m-toolbar-view-menu" + (theme.inverted ? "-white": "")
+            onClicked: menu.open()
+        }
+    }
+    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
                 }
-                ListElement {
-                    name: "Genova Quinto"
+            }
+            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
+                    }
                 }
-                ListElement {
-                    name: "Genova Nervi"
+            }
+            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
+        }
+        DroppedShadow {
+            id: shadow
+            anchors.top: mainView.top
+        }
+        ListView {
+            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: 88
+                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: model.name
-                            //font.family: UiConstants.FONT_FAMILY
-                            //font.pixelSize: UiConstants.FONT_DEFAULT
+                            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.openFile(page)
+                        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
         }
     }
-
-    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"; }
-    }
 }
-