Multi-line ellipsis on event bodies that are longer than their space can show

This commit is contained in:
Nathan Gray 2016-02-01 23:35:38 +00:00
parent 98bf388da7
commit e271a56753
4 changed files with 55 additions and 7 deletions

View File

@ -76,6 +76,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
.addClass("calendar_calDayColAllDay")
.appendTo(this.header);
this.event_wrapper = $j(document.createElement('div'))
.addClass("event_wrapper")
.appendTo(this.div);
this.setDOMNode(this.div[0]);

View File

@ -343,8 +343,12 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
this.body
.html('<span class="calendar_calEventTitle">'+title+'</span>')
.append('<span class="calendar_calTimespan">'+start_time + '</span>')
.append('<p>'+this.options.value.description+'</p>');
.append('<span class="calendar_calTimespan">'+start_time + '</span>');
if(this.options.value.description.trim())
{
this.body
.append('<p>'+this.options.value.description+'</p>');
}
}
},
@ -358,19 +362,34 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
* > 4 - Show description as well, truncated to fit
*/
_small_size: function() {
// Pre-calculation reset
this.div.removeClass('calendar_calEventSmall');
this.body.css('height', 'auto');
if(this.options.value.whole_day_on_top) return;
var visible_lines = Math.floor(this.div.innerHeight() / this.title.height());
var line_height = parseFloat(this.div.css('line-height'));
var visible_lines = Math.floor(this.div.innerHeight() / line_height);
if(!this.title.height())
{
// Handle sizing while hidden, such as when calendar is not the active tab
visible_lines = Math.floor(egw.getHiddenDimensions(this.div).h / egw.getHiddenDimensions(this.title).h);
}
visible_lines = Math.max(1,visible_lines);
this.div.toggleClass('calendar_calEventSmall',visible_lines < 4);
this.div
.attr('data-visible_lines', visible_lines < 4 ? Math.max(1,visible_lines) : '');
.attr('data-visible_lines', visible_lines);
if(this.body.height() > this.div.height() - this.title.height() && visible_lines >= 4)
{
this.body.css('height', Math.floor((visible_lines-1)*line_height - this.title.height()) + 'px');
}
else
{
this.body.css('height', '');
}
},
/**

View File

@ -556,6 +556,20 @@ Hide subsequent headers in week view with non-consolidated owners
cursor: pointer;
}
/** Multi-line ellipsis */
.calendar_calEvent .calendar_calEventBody {
overflow: hidden;
}
.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEvent::after {
width: 100%;
background-color: rgba(255,255,255,0.9);
height: 0.9em;
content: "\02026";
left: 0px;
float: right;
padding-bottom: 2em;
text-indent: 5px;
}
/**
* User has not accepted the invitation
*/
@ -745,7 +759,7 @@ Hide subsequent headers in week view with non-consolidated owners
.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
border: none;
}
.calendar_calTimeGridList .calendar_calDayCol > div:first-child
.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper
{
position: absolute;
top: 0px;

View File

@ -11,7 +11,7 @@
* @package calendar
* @version $Id$
*/
/* $Id: app.css 54876 2016-01-28 22:08:15Z nathangray $ */
/* $Id: app.css 54892 2016-02-01 20:52:53Z nathangray $ */
/*Media print classes*/
@media print {
.th td,
@ -559,6 +559,20 @@ Hide subsequent headers in week view with non-consolidated owners
.calendar_calEvent:hover {
cursor: pointer;
}
/** Multi-line ellipsis */
.calendar_calEvent .calendar_calEventBody {
overflow: hidden;
}
.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEvent::after {
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
height: 0.9em;
content: "\02026";
left: 0px;
float: right;
padding-bottom: 2em;
text-indent: 5px;
}
/**
* User has not accepted the invitation
*/
@ -732,7 +746,7 @@ Hide subsequent headers in week view with non-consolidated owners
.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
border: none;
}
.calendar_calTimeGridList .calendar_calDayCol > div:first-child {
.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper {
position: absolute;
top: 0px;
bottom: 3em;