7a900017d0d1ca43fafe209803d35cf0500121b5
[quandoparte] / application / resources / harmattan / qml / StationListPage.qml
1 import QtQuick 1.0
2 import QtMobility.location 1.1
3 import com.nokia.meego 1.0
4 import net.cirulla.quandoparte 1.0
5 import "uiconstants.js" as UiConstants
6 import "StationListPage.js" as Private
7
8 Page {
9     property variant stationView
10     id: stationListPage
11     tools: ToolBarLayout {
12         id: toolBar
13         ToolIcon {
14             iconId: "icon-m-toolbar-search" + (theme.inverted ? "-white": "")
15             onClicked: searchField.open = !searchField.open
16         }
17         ToolIcon {
18             iconId: "icon-m-toolbar-view-menu" + (theme.inverted ? "-white": "")
19             onClicked: menu.open()
20         }
21     }
22     Menu {
23         id: menu
24         content: MenuLayout {
25             MenuItem {
26                 text: qsTr("Update Periodically")
27                 Switch {
28                     id: periodicCheckSwitch
29                     anchors {
30                         verticalCenter: parent.verticalCenter
31                         right: parent.right
32                         rightMargin: UiConstants.DefaultMargin
33                     }
34                     checked: settings.autoUpdate
35                     onCheckedChanged: settings.autoUpdate = checked
36                 }
37             }
38             MenuItem {
39                 text: qsTr("Use Dark Theme")
40                 Switch {
41                     id: darkThemeSwitchSwitch
42                     anchors {
43                         verticalCenter: parent.verticalCenter
44                         right: parent.right
45                         rightMargin: UiConstants.DefaultMargin
46                     }
47                     checked: settings.darkThemePreferred
48                     onCheckedChanged: {
49                         settings.darkThemePreferred = checked
50                         theme.inverted = checked
51                     }
52                 }
53             }
54             MenuItem {
55                 text: qsTr("About Quando Parte")
56                 onClicked: Private.showAboutPage()
57             }
58             Component.onCompleted: periodicCheckSwitch.checked = settings.autoUpdate
59         }
60     }
61     PageHeader {
62         id: header
63         anchors.top: parent.top
64         selectedIndex: stationListProxyModel.sortingMode
65         options: [
66             qsTr("Stations by Name"),
67             qsTr("Stations by Distance"),
68             qsTr("Stations Recently Seen")
69         ]
70     }
71     SearchBar {
72         id: searchField
73         anchors.top: header.bottom
74         open: false
75     }
76     Binding {
77         target: stationListProxyModel
78         property: "searchPattern"
79         value: searchField.text
80     }
81     Binding {
82         target: stationListProxyModel
83         property: "sortingMode"
84         value: header.selectedIndex
85     }
86     Binding {
87         target: stationListView
88         property: "section.property"
89         value: header.selectedIndex === 0 ? "name" : ""
90     }
91     Item {
92         id: mainView
93         anchors {
94             top: searchField.bottom
95             bottom: parent.bottom
96             left: parent.left
97             right: parent.right
98         }
99         DroppedShadow {
100             id: shadow
101             anchors.top: mainView.top
102         }
103         ListView {
104             id: stationListView
105             clip: true
106             width: parent.width
107             cacheBuffer: 10
108             anchors {
109                 top: shadow.top
110                 bottom: parent.bottom
111             }
112             model:  stationListProxyModel
113             section {
114                 //property: "name"
115                 criteria: ViewSection.FirstCharacter
116                 delegate: Item {
117                     width: parent.width
118                     height: UiConstants.SectionItemHeightSmall
119                     anchors {
120                         margins: UiConstants.DefaultMargin
121                     }
122                     Image {
123                         anchors {
124                             left: parent.left
125                             right: sectionLabel.left
126                             verticalCenter: parent.verticalCenter
127                             margins: UiConstants.DefaultMargin
128                         }
129                         source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
130                     }
131                     Label {
132                         id: sectionLabel
133                         anchors {
134                             right: sectionRightMargin.left
135                             verticalCenter: parent.verticalCenter
136                         }
137                         text: section
138                     }
139                     Item {
140                         id: sectionRightMargin
141                         anchors {
142                             right: parent.right
143                         }
144                         width: UiConstants.DefaultMargin
145                         height: UiConstants.DefaultMargin
146                     }
147                 }
148             }
149
150             delegate: Item {
151                 id: listItem
152                 height: UiConstants.ListItemHeightSmall
153                 width: parent.width
154                 BorderImage {
155                     id: background
156                     anchors.fill: parent
157                     // Fill page borders
158                     visible: mouseArea.pressed
159                     source: "image://theme/meegotouch-list-fullwidth-" + (theme.inverted ? "inverted-" : "") + "background-pressed"
160                 }
161                 Row {
162                     anchors.fill: parent
163                     Item {
164                         width: UiConstants.DefaultMargin
165                         height: UiConstants.DefaultMargin
166                     }
167                     Column {
168                         anchors.verticalCenter: parent.verticalCenter
169
170                         Label {
171                             id: mainText
172                             text: Private.highlightSearch(model.name, UiConstants.AccentColor)
173                             font.bold: true
174                         }
175                     }
176                 }
177                 Image {
178                     anchors {
179                         left: parent.left
180                         right: parent.right
181                     }
182                     //source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
183                 }
184                 MouseArea {
185                     id: mouseArea
186                     anchors.fill: background
187                     onClicked: {
188                         Private.loadStation(model.name, model.code)
189                     }
190                 }
191             }
192         }
193         ScrollDecorator {
194             id: decorator
195             flickableItem: stationListView
196         }
197     }
198 }