« back to all changes in this revision
Viewing changes to TimeLineView.qml
- browse files at revision 34.2.3
- compare with another revision
- compare with revision 529
- download diff
- download tarball
- view history from revision 34.2.3
- Committer: David Planella
- Date: 2013-06-12 15:47:15 UTC
- mfrom: (44 trunk)
- mto: This revision was merged to the branch mainline in revision 50.
- Revision ID: david.planella@ubuntu.com-20130612154715-8g4yecfgim9dh38q
Merged from trunk, renamed autopilot tests to follow the same calendar-app naming convention
- files added:
- EventViewBase.qml
- tests
- tests/autopilot
- tests/autopilot/calendar_app
- tests/autopilot/calendar_app/emulators
- tests/autopilot/calendar_app/tests
- files modified:
- DiaryView.qml
added
removed
TimeLineView.qml
4
4
import "dateExt.js" as DateExt
5
5
import "dataService.js" as DataService
6
6
7
8
Flickable{
9
id: timeLineView
10
11
property var dayStart : new Date();
12
13
property bool expanded: false
14
property bool expanding: false
15
property bool compressing: false
16
17
signal expand()
18
signal compress()
19
signal newEvent()
20
21
function scroll() {
22
//scroll to first event or current hour
23
var hour = intern.now.getHours();
24
if(eventListModel.count > 0) {
25
hour = eventListModel.get(0).startTime.getHours();
26
}
27
28
timeLineView.contentY = hour * units.gu(10);
29
30
if(timeLineView.contentY >= timeLineView.contentHeight - timeLineView.height) {
31
timeLineView.contentY = timeLineView.contentHeight - timeLineView.height
32
}
33
}
34
35
function createEventMap() {
36
var eventMap = {};
37
for(var i = 0 ; i < eventListModel.count ; ++i) {
38
var event = eventListModel.get(i);
39
eventMap[event.startTime.getHours()] = event
40
}
41
return eventMap;
42
}
43
44
function createEvents() {
45
intern.eventMap = createEventMap();
46
47
bubbleOverLay.destroyAllChildren();
48
49
for( var i=0; i < 24; ++i ) {
50
var event = intern.eventMap[i];
51
if( event ) {
52
bubbleOverLay.createEvent(event,i);
53
} else if( i === intern.now.getHours()
54
&& intern.now.isSameDay( timeLineView.dayStart )) {
55
bubbleOverLay.createSeparator(i);
56
}
57
}
58
59
scroll();
60
}
61
62
function showEventDetails(hour) {
63
var event = intern.eventMap[hour];
64
pageStack.push(Qt.resolvedUrl("EventDetails.qml"),{"event":event});
65
}
66
67
onContentYChanged: {
68
// console.log(expanded, expanding, compressing, dragging, flicking, moving, contentY)
69
if (expanding || compressing || !dragging) return
70
71
if (expanded) {
72
if (contentY < -units.gu(0.5)) {
73
compressing = true
74
expanding = false
75
}
76
}
77
else {
78
if (contentY < -units.gu(0.5)) {
79
expanding = true
80
compressing = false
81
}
82
}
83
}
84
85
onDraggingChanged: {
86
if (dragging) return
87
88
if (expanding) {
89
expanding = false
90
expand()
91
}
92
else if (compressing) {
93
compressing = false
94
compress()
95
}
96
}
97
98
clip: true
99
100
contentHeight: timeLineColumn.height + units.gu(3)
101
contentWidth: width
102
103
QtObject {
104
id: intern
105
property var eventMap;
106
property var now : new Date();
107
property var hourHeight : units.gu(10)
108
}
109
110
EventListModel {
111
id: eventListModel
112
termStart: timeLineView.dayStart
113
termLength: Date.msPerDay
114
115
onReload: {
116
createEvents();
117
}
118
}
119
120
Rectangle{
121
id: background; anchors.fill: parent
122
color: "white"
123
}
124
125
//Time line view
126
Column{
127
id: timeLineColumn
128
anchors.top: parent.top
129
anchors.topMargin: units.gu(3)
130
width: parent.width
131
132
Repeater{
133
model: 24 // hour in a day
134
135
delegate: Item {
136
id: delegate
137
width: parent.width
138
height: intern.hourHeight
139
140
Row {
7
EventViewBase{
8
id: root
9
10
flickableChild: timeLineView
11
12
onModelRefreshed: {
13
timeLineView.createEvents();
14
}
15
16
Flickable{
17
id: timeLineView
18
anchors.fill: parent
19
20
function scroll() {
21
//scroll to first event or current hour
22
var hour = intern.now.getHours();
23
if( eventModel.count > 0) {
24
hour = eventModel.get(0).startTime.getHours();
25
}
26
27
timeLineView.contentY = hour * intern.hourHeight;
28
29
if(timeLineView.contentY >= timeLineView.contentHeight - timeLineView.height) {
30
timeLineView.contentY = timeLineView.contentHeight - timeLineView.height
31
}
32
}
33
34
function createEventMap() {
35
var eventMap = {};
36
for(var i = 0 ; i < eventModel.count ; ++i) {
37
var event = eventModel.get(i);
38
eventMap[event.startTime.getHours()] = event
39
}
40
return eventMap;
41
}
42
43
function createEvents() {
44
intern.eventMap = createEventMap();
45
46
bubbleOverLay.destroyAllChildren();
47
48
for( var i=0; i < 24; ++i ) {
49
var event = intern.eventMap[i];
50
if( event ) {
51
bubbleOverLay.createEvent(event,i);
52
} else if( i === intern.now.getHours()
53
&& intern.now.isSameDay( root.dayStart )) {
54
bubbleOverLay.createSeparator(i);
55
}
56
}
57
58
scroll();
59
}
60
61
function showEventDetails(hour) {
62
var event = intern.eventMap[hour];
63
pageStack.push(Qt.resolvedUrl("EventDetails.qml"),{"event":event});
64
}
65
66
contentHeight: timeLineColumn.height + units.gu(3)
67
contentWidth: width
68
69
QtObject {
70
id: intern
71
property var eventMap;
72
property var now : new Date();
73
property var hourHeight : units.gu(10)
74
}
75
76
Rectangle{
77
id: background; anchors.fill: parent
78
color: "white"
79
}
80
81
//Time line view
82
Column{
83
id: timeLineColumn
84
anchors.top: parent.top
85
anchors.topMargin: units.gu(3)
86
width: parent.width
87
88
Repeater{
89
model: 24 // hour in a day
90
91
delegate: Item {
92
id: delegate
141
93
width: parent.width
142
y: -timeLabel.height/2
143
Label{
144
id: timeLabel
145
// TRANSLATORS: this is a time formatting string,
146
// see http://qt-project.org/doc/qt-5.0/qtqml/qml-qtquick2-date.html#details for valid expressions
147
text: new Date(0, 0, 0, index).toLocaleTimeString(Qt.locale(), i18n.tr("HH:mm"))
148
color:"gray"
149
anchors.top: parent.top
94
height: intern.hourHeight
95
96
Row {
97
width: parent.width
98
y: -timeLabel.height/2
99
Label{
100
id: timeLabel
101
// TRANSLATORS: this is a time formatting string,
102
// see http://qt-project.org/doc/qt-5.0/qtqml/qml-qtquick2-date.html#details for valid expressions
103
text: new Date(0, 0, 0, index).toLocaleTimeString(Qt.locale(), i18n.tr("HH:mm"))
104
color:"gray"
105
anchors.top: parent.top
106
}
107
Rectangle{
108
width: parent.width -timeLabel.width
109
height:units.dp(1)
110
color:"gray"
111
anchors.verticalCenter: parent.verticalCenter
112
}
150
113
}
114
151
115
Rectangle{
152
width: parent.width -timeLabel.width
116
width: parent.width - units.gu(5)
153
117
height:units.dp(1)
154
118
color:"gray"
155
119
anchors.verticalCenter: parent.verticalCenter
156
}
157
}
158
159
Rectangle{
160
width: parent.width - units.gu(5)
161
height:units.dp(1)
162
color:"gray"
163
anchors.verticalCenter: parent.verticalCenter
164
anchors.horizontalCenter: parent.horizontalCenter
165
}
166
}
167
}
168
}
169
170
Item {
171
id: bubbleOverLay
172
173
width: timeLineColumn.width
174
height: timeLineColumn.height
175
anchors.top: parent.top
176
anchors.topMargin: units.gu(3)
177
178
function destroyAllChildren() {
179
for( var i = children.length - 1; i >= 0; --i ) {
180
children[i].destroy();
181
}
182
}
183
184
function createEvent( event ,hour) {
185
var eventBubble = infoBubbleComponent.createObject(bubbleOverLay);
186
eventBubble.title = event.title;
187
eventBubble.location = "test";
188
eventBubble.hour = hour;
189
190
var yPos = (( event.startTime.getMinutes() * intern.hourHeight) / 60) + hour * intern.hourHeight
191
eventBubble.y = yPos;
192
193
var durationMin = (event.endTime.getHours() - event.startTime.getHours()) * 60;
194
durationMin += (event.endTime.getMinutes() - event.startTime.getMinutes());
195
var height = (durationMin * intern.hourHeight )/ 60;
196
eventBubble.height = height;
197
}
198
199
function createSeparator(hour) {
200
var separator = separatorComponent.createObject(bubbleOverLay);
201
var yPos = ((intern.now.getMinutes() * intern.hourHeight) / 60) + hour * intern.hourHeight
202
separator.visible = true;
203
separator.y = yPos;
204
separator.x = (parent.width - separator.width)/2
205
}
206
}
207
208
Component{
209
id: infoBubbleComponent
210
Rectangle{
211
id: infoBubble
212
213
property string title;
214
property string location;
215
property int hour;
216
217
color:'#fffdaa';
218
width: timeLineView.width - units.gu(8)
219
x: units.gu(5)
220
221
border.color: "#f4d690"
222
223
Column{
224
id: column
225
anchors {
226
left: parent.left
227
right: parent.right
228
top: parent.top
229
230
leftMargin: units.gu(1)
231
rightMargin: units.gu(1)
232
topMargin: units.gu(1)
233
}
234
spacing: units.gu(1)
235
Label{text:infoBubble.title;fontSize:"medium";color:"black"}
236
Label{text:infoBubble.location; fontSize:"small"; color:"black"}
237
}
238
239
MouseArea{
240
anchors.fill: parent
241
onClicked: {
242
timeLineView.showEventDetails(hour);
243
}
244
}
245
}
246
}
247
248
Component {
249
id: separatorComponent
250
Rectangle {
251
id: separator
252
height: units.gu(0.5)
253
width: timeLineView.width - units.gu(2)
254
color: "#c94212"
255
visible: false
120
anchors.horizontalCenter: parent.horizontalCenter
121
}
122
}
123
}
124
}
125
126
Item {
127
id: bubbleOverLay
128
129
width: timeLineColumn.width
130
height: timeLineColumn.height
131
anchors.top: parent.top
132
anchors.topMargin: units.gu(3)
133
134
function destroyAllChildren() {
135
for( var i = children.length - 1; i >= 0; --i ) {
136
children[i].destroy();
137
}
138
}
139
140
function createEvent( event ,hour) {
141
var eventBubble = infoBubbleComponent.createObject(bubbleOverLay);
142
eventBubble.title = event.title;
143
eventBubble.location = "test";
144
eventBubble.hour = hour;
145
146
var yPos = (( event.startTime.getMinutes() * intern.hourHeight) / 60) + hour * intern.hourHeight
147
eventBubble.y = yPos;
148
149
var durationMin = (event.endTime.getHours() - event.startTime.getHours()) * 60;
150
durationMin += (event.endTime.getMinutes() - event.startTime.getMinutes());
151
var height = (durationMin * intern.hourHeight )/ 60;
152
eventBubble.height = height;
153
}
154
155
function createSeparator(hour) {
156
var w = timeLineView.width - units.gu(2);
157
var y = ((intern.now.getMinutes() * intern.hourHeight) / 60) + hour * intern.hourHeight;
158
var x = (parent.width - w)/ 2;
159
var properties = {"x": x, "y": y, "width": w}
160
161
var component = Qt.createComponent("TimeSeparator.qml");
162
var separator = component.createObject(bubbleOverLay, properties);
163
}
164
}
165
166
Component{
167
id: infoBubbleComponent
168
Rectangle{
169
id: infoBubble
170
171
property string title;
172
property string location;
173
property int hour;
174
175
color:'#fffdaa';
176
width: timeLineView.width - units.gu(8)
177
x: units.gu(5)
178
179
border.color: "#f4d690"
180
181
Column{
182
id: column
183
anchors {
184
left: parent.left
185
right: parent.right
186
top: parent.top
187
188
leftMargin: units.gu(1)
189
rightMargin: units.gu(1)
190
topMargin: units.gu(1)
191
}
192
spacing: units.gu(1)
193
Label{text:infoBubble.title;fontSize:"medium";color:"black"}
194
Label{text:infoBubble.location; fontSize:"small"; color:"black"}
195
}
196
197
MouseArea{
198
anchors.fill: parent
199
onClicked: {
200
timeLineView.showEventDetails(hour);
201
}
202
}
203
}
256
204
}
257
205
}
258
206
}
259
Loggerhead is a web-based interface for Breezy
Version: 2.0.1