holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- Change all day event sorting so longer events are higher

Browse Source 
- Change short event display so 1 line shows title, 2-4 lines show timespan & title
- Increase maximum number of events loaded at once
This commit is contained in:
Nathan Gray 2016-01-28 21:35:22 +00:00
parent 222cc2db24
commit 40779b6dbf
5 changed files with 88 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
calendar/js/app.js
View File

@ -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) {

10
calendar/js/et2_widget_daycol.js
View File

@ -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

43
calendar/js/et2_widget_event.js
View File

@ -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('<span class="calendar_calTimespan">'+this._get_timespan(event) + '<br /></span>')
.append('<span class="calendar_calEventTitle">'+title+'</span>')
// 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],
'</div>'+
'<div class="calendar_calEventBody">'+
'<p style="margin: 0px;">'+
'<span class="calendar_calEventTitle">'+this.div.attr('data-title')+'</span><br>'+
'<span class="calendar_calEventTitle">'+this.options.value.title+'</span><br>'+
this.options.value.description+'</p>'+
'<p style="margin: 2px 0px;">'+times+'</p>'+
(this.options.value.location ? '<p><span class="calendar_calEventLabel">'+this.egw().lang('Location') + '</span>:' + this.options.value.location+'</p>' : '')+

28
calendar/templates/default/app.css
View File

@ -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;

19
calendar/templates/pixelegg/app.css
View File

@ -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;