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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
import QtQuick 2.0
import Ubuntu.Components 0.1
Item{
id: infoBubble
property var event;
property int type: narrowType
property int wideType: 1;
property int narrowType: 2;
property Flickable flickable;
readonly property int minimumHeight: timeLabel.height + /*top-bottom margin*/ units.gu(2)
signal clicked(var event);
UbuntuShape{
id: bg
anchors.fill: parent
color: "white"
gradientColor: "#F5F5F5"
}
onEventChanged: {
setDetails();
}
//on weekview flickable changes, so we need to setup connection on flickble change
onFlickableChanged: {
if( flickable && height > flickable.height ) {
flickable.onContentYChanged.connect(layoutBubbleDetails);
}
}
//on dayview, flickable never changed so when height changes we setup connection
onHeightChanged: {
if( flickable && height > flickable.height ) {
flickable.onContentYChanged.connect(layoutBubbleDetails);
}
}
Component.onCompleted: {
setDetails();
}
function setDetails() {
if(event === null || event === undefined) {
return;
}
// TRANSLATORS: this is a time formatting string,
// see http://qt-project.org/doc/qt-5/qml-qtqml-date.html#details for valid expressions
var timeFormat = i18n.tr("hh:mm");
var startTime = event.startDateTime.toLocaleTimeString(Qt.locale(), timeFormat)
var endTime = event.endDateTime.toLocaleTimeString(Qt.locale(), timeFormat)
// TRANSLATORS: the first argument (%1) refers to a start time for an event,
// while the second one (%2) refers to the end time
var timeString = i18n.tr("%1 - %2").arg(startTime).arg(endTime)
timeLabel.text = ""
titleLabel.text = ""
descriptionLabel.text = ""
//height is less then set only event title
if( height > minimumHeight ) {
//on wide type show all details
if( type == wideType) {
timeLabel.text = timeString
if( event.displayLabel)
titleLabel.text = event.displayLabel;
if( event.description)
{
descriptionLabel.text = event.description
//If content is too much don't display.
if( height < descriptionLabel.height + descriptionLabel.y){
descriptionLabel.text = ""
}
}
} else {
//narrow type shows only time and title
timeLabel.text = startTime
if( event.displayLabel)
titleLabel.text = event.displayLabel;
}
} else {
if( event.displayLabel)
timeLabel.text = event.displayLabel;
}
layoutBubbleDetails();
}
function layoutBubbleDetails() {
if( !flickable || flickable === undefined ) {
return;
}
if( infoBubble.y < flickable.contentY && infoBubble.height > flickable.height) {
var y = (flickable.contentY - infoBubble.y) * 1.2;
if( ( y + detailsItems.height + units.gu(2)) > infoBubble.height) {
y = infoBubble.height - detailsItems.height - units.gu(2);
}
detailsItems.y = y;
}
}
Connections{
target: detailsItems
onHeightChanged: {
layoutBubbleDetails();
}
}
Item {
id: detailsItems
width: parent.width
height: detailsColumn.height
Column{
id: detailsColumn
anchors {
top: parent.top; left: parent.left; right: parent.right; margins: units.gu(1)
}
Row{
width: parent.width
Label{
id: timeLabel
objectName: "timeLabel"
fontSize: "small"
color: "gray"
width: parent.width - rect.width
}
Rectangle{
id:rect
width: units.gu(1)
radius: width/2
height: width
color: "#715772"
}
}
Label{
id: titleLabel
objectName: "titleLabel"
fontSize: "small"
color: "black"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
width: parent.width
}
Label{
id: descriptionLabel
fontSize: "small"
color:"gray"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
width: parent.width
visible: type == wideType
}
}
}
MouseArea{
anchors.fill: parent
onClicked: {
infoBubble.clicked(event);
}
}
}
|