Dark Overview UI style (for N900)

diff --git a/ui/Overview.qml b/ui/Overview.qml
index 888d146..cfdc638 100644 (file)
--- a/ui/Overview.qml
+++ b/ui/Overview.qml
@@ -1,71 +1,80 @@
 
 import Qt 4.7
 
-ListView {
-    id: lv
+Rectangle {
     width: 800
     height: 400
-    delegate: OverviewItem {
-        onShowDetails: lv.showDetails(details)
-    }
+    color: 'black'
 
-    states: [
-        State {
-            name: 'overview'
-        },
-        State {
-            name: 'details'
-            PropertyChanges {
-                target: detailsRect
-                opacity: 1
-                scale: 1
-            }
-        }
-    ]
-
-    Rectangle {
-        id: detailsRect
-        width: parent.width - 50
-        height: parent.height - 50
-        anchors.centerIn: parent
-        scale: 0
-        opacity: 0
-        color: '#aaa'
-
-        border {
-            color: '#888'
-            width: 10
+    property alias model: lv.model
+
+
+    ListView {
+        id: lv
+        anchors.fill: parent
+
+        delegate: OverviewItem {
+            onShowDetails: lv.showDetails(details)
         }
 
-        Behavior on opacity { PropertyAnimation { duration: 250 }}
+        states: [
+            State {
+                name: 'overview'
+            },
+            State {
+                name: 'details'
+                PropertyChanges {
+                    target: detailsRect
+                    opacity: 1
+                    scale: 1
+                }
+            }
+        ]
+
+        Rectangle {
+            id: detailsRect
+            width: parent.width - 50
+            height: parent.height - 50
+            anchors.centerIn: parent
+            scale: 0
+            opacity: 0
+            color: '#aaa'
 
-        Behavior on scale {
-            PropertyAnimation {
-                duration: 500
-                easing.type: Easing.InCubic
+            border {
+                color: '#888'
+                width: 10
             }
-        }
 
-        Text {
-            id: detailsTitle
+            Behavior on opacity { PropertyAnimation { duration: 250 }}
 
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            horizontalAlignment: Text.AlignHCenter
-            anchors.topMargin: 20
-            font.pixelSize: 30
-        }
+            Behavior on scale {
+                PropertyAnimation {
+                    duration: 500
+                    easing.type: Easing.InCubic
+                }
+            }
+
+            Text {
+                id: detailsTitle
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                horizontalAlignment: Text.AlignHCenter
+                anchors.topMargin: 20
+                font.pixelSize: 30
+            }
 
-        MouseArea {
-            anchors.fill: parent
-            onClicked: lv.state = 'overview'
+            MouseArea {
+                anchors.fill: parent
+                onClicked: lv.state = 'overview'
+            }
         }
-    }
 
-    function showDetails(details) {
-        detailsTitle.text = 'FIXME - show details for ' + details.time_from
-        lv.state = 'details'
+        function showDetails(details) {
+            detailsTitle.text = 'FIXME - show details for ' + details.time_from
+            lv.state = 'details'
+        }
     }
 }
 

diff --git a/ui/OverviewItem.qml b/ui/OverviewItem.qml
index 945eadd..b0baf29 100644 (file)
--- a/ui/OverviewItem.qml
+++ b/ui/OverviewItem.qml
@@ -1,10 +1,24 @@
 import Qt 4.7
 
 Rectangle {
+    id: row
+    property color textColor: 'white'
+
     anchors.left: parent.left
     anchors.right: parent.right
     height: 70
-    color: (index%2)?'#eee':'#ddd'
+
+    Image {
+        source: 'bg.png'
+        anchors.fill: parent
+    }
+
+    Rectangle {
+        color: '#267'
+        opacity: mouse.pressed?.4:0
+        anchors.fill: parent
+        Behavior on opacity { PropertyAnimation { duration: 200 } }
+    }
 
     signal showDetails(variant details)
 
@@ -19,10 +33,12 @@ Rectangle {
         anchors.leftMargin: 30
         anchors.rightMargin: 30
         width: parent.width * .2
+        color: row.textColor
     }
 
     Text {
         id: time_from
+        color: row.textColor
         anchors.left: datum.right
         anchors.bottom: parent.verticalCenter
         text: 'von ' + modelData.time_from
@@ -33,6 +49,7 @@ Rectangle {
 
     Text {
         id: time_to
+        color: row.textColor
         anchors.left: datum.right
         anchors.top: parent.verticalCenter
         text: 'bis ' + modelData.time_to
@@ -44,6 +61,7 @@ Rectangle {
 
     Text {
         id: dauer
+        color: row.textColor
         text: 'Dauer: ' + modelData.duration + ' (' + modelData.change + ' x umsteigen)'
         font.pixelSize: 17
         anchors.left: time_from.right
@@ -55,6 +73,7 @@ Rectangle {
 
     Text {
         id: price
+        color: row.textColor
         text: 'EUR ' + modelData.price
         anchors.right: parent.right
         anchors.top: parent.top
@@ -66,6 +85,7 @@ Rectangle {
     }
 
     MouseArea {
+        id: mouse
         anchors.fill: parent
         onClicked: parent.showDetails(modelData)
     }

diff --git a/ui/bg.png b/ui/bg.png
new file mode 100644 (file)
index 0000000..57aed9c
Binary files /dev/null and b/ui/bg.png differ