« back to all changes in this revision
Viewing changes to TimeLineView.qml
- browse files at revision 109
- compare with another revision
- compare with revision 529
- download diff
- download tarball
- view history from revision 109
- Committer: Tarmac
- Author(s): Kunal Parmar
- Date: 2013-09-05 14:07:36 UTC
- mfrom: (96.2.8 ubuntu-calendar-app)
- Revision ID: tarmac-20130905140736-oy4uj5uy5fpcujve
New day view and week view created,
Theme applied according to UDS presentation
Removed unused files.
Approved by Olivier Tilloy, Ubuntu Phone Apps Jenkins Bot.
Theme applied according to UDS presentation
Removed unused files.
Approved by Olivier Tilloy, Ubuntu Phone Apps Jenkins Bot.
- files added:
- EventBubble.qml
- files removed:
- DayComponent.qml
- files modified:
- DayView.qml
added
removed
TimeLineView.qml
1
import QtQuick 2.0
2
import Ubuntu.Components 0.1
3
4
import "dateExt.js" as DateExt
5
import "dataService.js" as DataService
6
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
93
width: parent.width
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"))
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
}
113
}
114
115
Rectangle{
116
width: parent.width - units.gu(5)
117
height:units.dp(1)
118
color:"gray"
119
anchors.verticalCenter: parent.verticalCenter
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
}
204
}
205
}
206
}
Loggerhead is a web-based interface for Breezy
Version: 2.0.1