blob: 19b4ef158be7bdf32661323c3bfad4352ed4b0a5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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 }
}
}
}
}
|
