diff --git a/calendar/js/app.js b/calendar/js/app.js index b860a17c5e..c83bb5bf95 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -2713,7 +2713,7 @@ app.classes.calendar = AppJS.extend( this.egw.dataFetch( instance ? instance.etemplate_exec_id : this.sidebox_et2.getInstanceManager().etemplate_exec_id, - {start: start, num_rows:200}, + {start: start, num_rows:400}, query, this.id, function calendar_handleResponse(data) { diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index 338fe4d573..15cb36f506 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -737,11 +737,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea this._children.sort(function(a,b) { var start = new Date(a.options.value.start) - new Date(b.options.value.start); var end = new Date(a.options.value.end) - new Date(b.options.value.end); - // Whole day events sorted by ID, normal events by start / end time if(a.options.value.whole_day && b.options.value.whole_day) { - return (a.options.value.app_id - b.options.value.app_id); + // Longer duration comes first so we have nicer bars across the top + var duration = + (new Date(b.options.value.end) - new Date(b.options.value.start)) - + (new Date(a.options.value.end) - new Date(a.options.value.start)); + + return duration ? duration : (a.options.value.app_id - b.options.value.app_id); } else if (a.options.value.whole_day || b.options.value.whole_day) { @@ -890,7 +894,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea columns[c][i].div.css('left', left.toFixed(1)+'%'); columns[c][i].div.css('right', right.toFixed(1)+'%'); columns[c][i].div.css('z-index',parseInt(20)+c); - + columns[c][i]._small_size(); } } // Only wanted to position this event, leave the other columns alone diff --git a/calendar/js/et2_widget_event.js b/calendar/js/et2_widget_event.js index 89fa2aeb9a..a2ff87846f 100644 --- a/calendar/js/et2_widget_event.js +++ b/calendar/js/et2_widget_event.js @@ -281,6 +281,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM], .removeClass(function(index, css) { return (css.match(/calendar_calEvent\S+/g) || []).join(' '); }) + .removeClass('calendar_calEventSmall') .addClass(event.class) .toggleClass('calendar_calEventPrivate', typeof event.private !== 'undefined' && event.private); this.options.class = event.class; @@ -304,16 +305,13 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM], // Header var title = !event.is_private ? event['title'] : egw.lang('private'); - // If there isn't enough height for header + 1 line in the body, it's small - var small_height = this.div.innerHeight() <= this.title.height() * 2; - if(!this.title.height()) - { - // Handle sizing while hidden, such as when calendar is not the active tab - small_height = egw.getHiddenDimensions(this.div).h < egw.getHiddenDimensions(this.title).h * 2 - } - this.div.attr('data-title', title); - this.title.text(small_height ? title : this._get_timespan(event)); + // Height specific section + this._small_size(); + + this.title + .html(''+this._get_timespan(event) + '
') + .append(''+title+'') // Colors - don't make them transparent if there is no color if(jQuery.Color("rgba(0,0,0,0)").toRgbaString() != jQuery.Color(this.div,'background-color').toRgbaString()) @@ -350,6 +348,31 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM], } }, + /** + * Calculate display variants for when event is too short for full display + * + * Display is based on the number of visible lines, calculated off the header + * height: + * 1 - show just the event title, with ellipsis + * 2 - Show timespan and title, with ellipsis + * > 4 - Show description as well, truncated to fit + */ + _small_size: function() { + this.div.removeClass('calendar_calEventSmall'); + if(this.options.value.whole_day_on_top) return; + var visible_lines = Math.floor(this.div.innerHeight() / this.title.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); + } + + this.div.toggleClass('calendar_calEventSmall',visible_lines < 4); + this.div + .attr('data-visible_lines', visible_lines < 4 ? Math.max(1,visible_lines) : ''); + }, + /** * Examines the participants & returns CSS classname for status * @@ -424,7 +447,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM], ''+ '
'+ '

'+ - ''+this.div.attr('data-title')+'
'+ + ''+this.options.value.title+'
'+ this.options.value.description+'

'+ '

'+times+'

'+ (this.options.value.location ? '

'+this.egw().lang('Location') + ':' + this.options.value.location+'

' : '')+ diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 05e8524dc4..a8bf44c0eb 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -619,6 +619,9 @@ Hide subsequent headers in week view with non-consolidated owners */ background-color: rgba(255,255,255,0.9); } +.calendar_calEventHeader .calendar_calEventTitle { + display: none; +} .calendar_calEventHeaderSmall{ font-size: 8pt; line-height: 10pt; @@ -665,6 +668,31 @@ Hide subsequent headers in week view with non-consolidated owners font-weight: bold; } +/* Event is too small for full display */ +.calendar_calTimeGrid:not(.calendar_calTimeGridList) +.calendar_calEventSmall[data-visible_lines='1'] .calendar_calTimespan { + display: none; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) +.calendar_calEventSmall[data-visible_lines='2'] .calendar_calTimespan, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) +.calendar_calEventSmall[data-visible_lines='3'] .calendar_calTimespan { + display: inline; +} + +.calendar_calTimeGrid:not(.calendar_calTimeGridList) +.calendar_calEventSmall[data-visible_lines='1'] .calendar_calEventTitle, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) +.calendar_calEventSmall[data-visible_lines='2'] .calendar_calEventTitle, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) +.calendar_calEventSmall[data-visible_lines='3'] .calendar_calEventTitle { + display: inline; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) +.calendar_calEventSmall .calendar_calEventBody { + padding-top: 2em; +} + /* Events as displayed in a list, not sized by time */ .calendar_calTimeGridList .calendar_calTimeGridScroll { overflow-y: hidden; diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index f2a4137382..1f7cf0bb30 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -618,6 +618,9 @@ Hide subsequent headers in week view with non-consolidated owners */ background-color: rgba(255, 255, 255, 0.9); } +.calendar_calEventHeader .calendar_calEventTitle { + display: none; +} .calendar_calEventHeaderSmall { font-size: 8pt; line-height: 10pt; @@ -663,6 +666,22 @@ Hide subsequent headers in week view with non-consolidated owners .calendar_calEventTitle { font-weight: bold; } +/* Event is too small for full display */ +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='1'] .calendar_calTimespan { + display: none; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='2'] .calendar_calTimespan, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='3'] .calendar_calTimespan { + display: inline; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='1'] .calendar_calEventTitle, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='2'] .calendar_calEventTitle, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='3'] .calendar_calEventTitle { + display: inline; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall .calendar_calEventBody { + padding-top: 2em; +} /* Events as displayed in a list, not sized by time */ .calendar_calTimeGridList .calendar_calTimeGridScroll { overflow-y: hidden;