1 files changed, 154 insertions, 0 deletions
diff --git a/weather-qml/CityPanel.qml b/weather-qml/CityPanel.qml
new file mode 100644
index 0000000..19b4ef1
--- /dev/null
+++ b/weather-qml/CityPanel.qml
@@ -0,0 +1,154 @@
+import Qt 4.6
+
+Item {
+    id: root
+    width: window.width
+
+    property string currentMessage;
+
+    signal gotoCity(string cityId);
+
+    MouseArea {
+        id: overlay
+        anchors.fill: parent
+        visible: false
+        onClicked: root.state = ""
+    }
+
+    Image {
+        id: backPanel
+        opacity: 0.0
+        y: frontPanel.y
+        source: "images/city_panel_bg.png"
+    }
+
+    Rectangle {
+        id: cityRect
+        x: 0
+        y: 36
+        width: 360
+        height: 64
+        color: "#071217"
+        opacity: 0.0
+        anchors.topMargin: -1 // XXX workaround for internal rounding bug
+        anchors.top: backPanel.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        /// XXX: list item bg
+        height: (80 * Math.min(cityListView.count, 5)) + 17
+
+        Component {
+            id: cityDelegate
+            Item {
+                id: cityItem
+                width: background.width
+                height: background.height
+
+                ListView.onRemove: SequentialAnimation {
+                    PropertyAction { target: cityItem; property: "ListView.delayRemove"; value: true }
+                    NumberAnimation { target: cityItem; property: "opacity"; to: 0 }
+                    NumberAnimation { target: cityItem; property: "height"; to: 0; duration: 9000; }
+                    PropertyAction { target: cityItem; property: "ListView.delayRemove"; value: false }
+                }
+
+                ListView.onAdd: SequentialAnimation {
+                    PropertyAction { target: cityItem; property: "opacity"; value: 0 }
+                    NumberAnimation { target: cityItem; property: "height"; from: 0; to: background.height; duration: 9000;}
+                    NumberAnimation { target: cityItem; property: "opacity"; from: 0; to: 1 }
+                }
+
+                Image {
+                    id: background;
+                    source: "images/list_item_bg.png"
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: { root.gotoCity(cityId); }
+                    }
+                }
+
+                Text {
+                    text: cityName
+                    color: "white"
+                    font.family: "Nokia Sans"
+                    font.pixelSize: 38
+                    anchors.fill: parent
+                    anchors.leftMargin: 30
+                    anchors.rightMargin: 30
+                    verticalAlignment: "AlignVCenter"
+                }
+            }
+        }
+
+        ListView {
+            id: cityListView;
+            clip: true;
+            model: cityModel
+            opacity: 0.0
+            delegate: cityDelegate
+            anchors.fill: cityRect
+            anchors.topMargin: -17
+            anchors.bottomMargin: 35
+
+            ScrollBar {
+                id: scroll
+                pageSize: cityListView.height / cityListView.contentHeight
+                position: cityListView.contentY / cityListView.contentHeight
+                anchors.top: cityListView.top
+                anchors.bottom: cityListView.bottom
+                anchors.right: cityListView.right
+                anchors.rightMargin: 10
+                anchors.bottomMargin: 15
+                width: 8
+            }
+        }
+    }
+
+    Image {
+        id: frontPanel
+        source: "images/city_name_background_bigger.png"
+        anchors.bottom: root.bottom
+        MouseArea {
+            anchors.fill: frontPanel
+            onClicked: { root.state = "final"; }
+        }
+    }
+
+    states : State {
+        name: "final"
+        PropertyChanges { target: frontPanel; opacity: 0.0; visible: false; }
+        PropertyChanges { target: backPanel; opacity: 1.0; }
+        PropertyChanges { target: cityRect; opacity: 1.0; }
+        PropertyChanges { target: backPanel; y: root.height - cityRect.height; }
+        PropertyChanges { target: overlay; visible: true; }
+        PropertyChanges { target: cityListView; opacity: 1.0; }
+    }
+
+    transitions: Transition {
+        from: ""; to: "final"
+        SequentialAnimation {
+            ParallelAnimation {
+                NumberAnimation { target: backPanel; properties: "opacity"; duration: 300 }
+                NumberAnimation { target: cityRect; properties: "opacity"; duration: 300 }
+            }
+            NumberAnimation { target: frontPanel; properties: "opacity"; duration: 300 }
+            NumberAnimation { target: frontPanel; properties: "visible"; duration: 0 }
+            NumberAnimation { target: backPanel; properties: "y"; duration: 250 }
+            NumberAnimation { target: cityListView; properties: "opacity"; duration: 200 }
+        }
+    }
+
+    transitions: Transition {
+        from: "final"; to: ""
+        SequentialAnimation {
+            NumberAnimation { target: cityListView; properties: "opacity"; duration: 200 }
+            NumberAnimation { target: backPanel; properties: "y"; duration: 250 }
+            NumberAnimation { target: frontPanel; properties: "opacity"; duration: 300 }
+            NumberAnimation { target: frontPanel; properties: "visible"; duration: 0 }
+            ParallelAnimation {
+                NumberAnimation { target: backPanel; properties: "opacity"; duration: 300 }
+                NumberAnimation { target: cityRect; properties: "opacity"; duration: 300 }
+            }
+        }
+    }
+}