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
|
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
signal clicked(var event);
UbuntuShape{
id: bg
anchors.fill: parent
color: "white"
}
onEventChanged: {
setDetails();
}
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+ detailsColumn.height) > infoBubble.height) {
y = infoBubble.height - detailsColumn.height;
}
detailsColumn.y = y;
}
}
Connections{
target: flickable
onContentYChanged: {
layoutBubbleDetails();
}
}
Connections{
target: detailsColumn
onHeightChanged: {
layoutBubbleDetails();
}
}
Column{
id: detailsColumn
anchors.fill: parent
anchors.topMargin: units.gu(1)
anchors.leftMargin: units.gu(1)
anchors.rightMargin: units.gu(1)
Row{
width: parent.width
Label{
id: 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
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);
}
}
}
|