Use the constants, improve layout

diff --git a/application/resources/harmattan/qml/PageHeader.qml b/application/resources/harmattan/qml/PageHeader.qml
new file mode 100644 (file)
index 0000000..1e9bb8d
--- /dev/null
+++ b/application/resources/harmattan/qml/PageHeader.qml
@@ -0,0 +1,11 @@
+import QtQuick 1.0
+import com.nokia.meego 1.0
+import "uiconstants.js" as UiConstants
+
+Rectangle {
+    width: parent.width
+    height: screen.currentOrientation == Screen.Landscape ?
+                UiConstants.HeaderDefaultHeightLandscape :
+                UiConstants.HeaderDefaultHeightPortrait
+    color: "#071"
+}

diff --git a/application/resources/harmattan/qml/SearchBar.qml b/application/resources/harmattan/qml/SearchBar.qml
index a3f583d..980db75 100644 (file)
--- a/application/resources/harmattan/qml/SearchBar.qml
+++ b/application/resources/harmattan/qml/SearchBar.qml
@@ -1,16 +1,44 @@
 import QtQuick 1.0
 import com.nokia.meego 1.0
+import "uiconstants.js" as UiConstants
 
-Item {
+
+BorderImage {
     property alias text: searchField.text
     width: parent.width
-    height: 48
+    border.left: 10
+    border.right: 10
+    border.top: 10
+    border.bottom: 10
+    height:  UiConstants.SearchBarDefaultHeight
+    source: style.background
+
+    ToolBarStyle {
+        id: style
+    }
+    Item {
+        id: spacerTop
+        width: parent.width
+        height: UiConstants.DefaultMargins
+    }
+    Item {
+        id: spacerLeft
+        anchors.left: parent.left
+        width: UiConstants.DefaultMargins
+        height: searchField.height
+    }
+    Item {
+        id: spacerRight
+        anchors.right: parent.right
+        width: UiConstants.DefaultMargins
+        height: searchField.height
+    }
 
     TextField {
         id: searchField
-        width: parent.width
-        anchors.margins: 16
-        anchors.centerIn: parent
+        anchors.top: spacerTop.bottom
+        anchors.left: spacerLeft.right
+        anchors.right: spacerRight.left
         placeholderText: qsTr("Search")
         inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase
         platformStyle: TextFieldStyle { paddingRight: clearButton.width }
@@ -46,4 +74,10 @@ Item {
             }
         }
     }
+    Item {
+        id: spacerBottom
+        width: parent.width
+        anchors.top: searchField.bottom
+        height: UiConstants.DefaultMargins
+    }
 }

diff --git a/application/resources/harmattan/qml/StationListPage.qml b/application/resources/harmattan/qml/StationListPage.qml
index 255f891..57cb63e 100644 (file)
--- a/application/resources/harmattan/qml/StationListPage.qml
+++ b/application/resources/harmattan/qml/StationListPage.qml
@@ -43,20 +43,26 @@ Page {
         }
     }
 
+    PageHeader {
+        id: header
+        anchors.top: parent.top
+    }
+    SearchBar {
+        id: searchField
+        anchors.top: header.bottom
+    }
+    Binding {
+        target: stationListProxyModel
+        property: "searchPattern"
+        value: searchField.text
+    }
     Column {
         x: 16
         y: 16
+        anchors.top: searchField.bottom
         width: parent.width - 32
         height: parent.height
         spacing: 16
-        SearchBar {
-            id: searchField
-        }
-        Binding {
-            target: stationListProxyModel
-            property: "searchPattern"
-            value: searchField.text
-        }
         ListView {
             id: stationListView
             clip: true