Implement list sections for Harmattan
authorLuciano Montanaro <mikelima@cirulla.net>
Sat, 26 Oct 2013 15:29:01 +0000 (17:29 +0200)
committerLuciano Montanaro <mikelima@cirulla.net>
Sat, 26 Oct 2013 15:29:01 +0000 (17:29 +0200)
application/resources/harmattan/qml/StationListPage.js
application/resources/harmattan/qml/StationListPage.qml
application/resources/harmattan/qml/StationPage.qml
application/resources/harmattan/qml/uiconstants.js

index ac4a1c6..858b36e 100644 (file)
@@ -21,7 +21,7 @@ function loadStation(name, code)
 
         /*
             XXX Ugliness ahead! Changing the name triggers the station
-            to schedule to be fetched. So any extra data (the code specifically)
+            schedule to be fetched. So any extra data (the code specifically)
             must be set before changing the name.
          */
         if (code !== undefined) view.code = code
index 04751c3..7a90001 100644 (file)
@@ -83,6 +83,11 @@ Page {
         property: "sortingMode"
         value: header.selectedIndex
     }
+    Binding {
+        target: stationListView
+        property: "section.property"
+        value: header.selectedIndex === 0 ? "name" : ""
+    }
     Item {
         id: mainView
         anchors {
@@ -105,6 +110,43 @@ Page {
                 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
@@ -137,7 +179,7 @@ Page {
                         left: parent.left
                         right: parent.right
                     }
-                    source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
+                    //source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
                 }
                 MouseArea {
                     id: mouseArea
index cce8f3e..40105f6 100644 (file)
@@ -60,7 +60,7 @@ Page {
             clip: true
             visible: false
             width: parent.width
-            cacheBuffer: 10
+            cacheBuffer: 40
             anchors {
                 top: shadow.top
                 bottom: parent.bottom
index c6c4e11..c7d42c4 100644 (file)
@@ -15,6 +15,8 @@ const HeaderDefaultBottomSpacingLandscape = 16
 
 const SearchBarDefaultHeight = 80
 
+const SectionItemHeightSmall = 32
+
 const ListItemHeightSmall = 64
 const ListItemHeightDefault = 80
 const ListItemHeightLarge = 96