mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-23 00:13:35 +01:00
Hide partially visible events in gridlist view, and make sure there's some free space to click so user can add events
This commit is contained in:
parent
a4d89520e4
commit
1a5d137ede
@ -75,6 +75,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
this.all_day = $j(document.createElement('div'))
|
||||
.addClass("calendar_calDayColAllDay")
|
||||
.appendTo(this.header);
|
||||
this.event_wrapper = $j(document.createElement('div'))
|
||||
.appendTo(this.div);
|
||||
|
||||
this.setDOMNode(this.div[0]);
|
||||
|
||||
@ -127,6 +129,24 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
egw.dataUnregisterUID(this.registeredUID,false,this);
|
||||
},
|
||||
|
||||
getDOMNode: function(sender)
|
||||
{
|
||||
if(!sender || sender === this) return this.div[0];
|
||||
if(sender.instanceOf && sender.instanceOf(et2_calendar_event))
|
||||
{
|
||||
if(this.display_settings.granularity === 0)
|
||||
{
|
||||
return this.event_wrapper[0];
|
||||
}
|
||||
if(sender.options.value.whole_day_on_top ||
|
||||
sender.options.value.whole_day && sender.options.value.non_blocking === true)
|
||||
{
|
||||
return this.all_day[0];
|
||||
}
|
||||
return this.event_wrapper[0];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Draw the individual divs for clicking to add an event
|
||||
*/
|
||||
@ -481,7 +501,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
}
|
||||
return start ? start : end;
|
||||
});
|
||||
|
||||
|
||||
for(var c = 0; c < events.length; c++)
|
||||
{
|
||||
// Create event
|
||||
@ -514,13 +534,18 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
// Reset
|
||||
this.header.children('.hiddenEventBefore').remove();
|
||||
this.div.children('.hiddenEventAfter').remove();
|
||||
this.event_wrapper.css('overflow','visible');
|
||||
|
||||
var timegrid = this._parent;
|
||||
|
||||
// elem is jquery div of event
|
||||
function isHidden(elem) {
|
||||
var docViewTop = timegrid.scrolling.scrollTop(),
|
||||
docViewBottom = docViewTop + timegrid.scrolling.height(),
|
||||
docViewBottom = docViewTop + (
|
||||
this.display_settings.granularity === 0 ?
|
||||
this.event_wrapper.height() :
|
||||
timegrid.scrolling.height()
|
||||
),
|
||||
elemTop = elem.position().top,
|
||||
elemBottom = elemTop + elem.outerHeight(true);
|
||||
if((elemBottom <= docViewBottom) && (elemTop >= docViewTop))
|
||||
@ -536,6 +561,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
return visible;
|
||||
}
|
||||
|
||||
// In gridlist view, we can quickly check if we need it at all
|
||||
if(this.display_settings.granularity === 0 && this._children.length)
|
||||
{
|
||||
$j('div.calendar_calEvent',this.div).show(0);
|
||||
if(Math.ceil(this.div.height() / this._children[0].div.height()) > this._children.length)
|
||||
{
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Check each event
|
||||
this.iterateOver(function(event) {
|
||||
// Skip whole day events and events missing value
|
||||
@ -565,15 +599,16 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
else if (this.display_settings.granularity === 0 && hidden)
|
||||
{
|
||||
var day = this;
|
||||
// Do the previous one too
|
||||
if($j('.hiddenEventAfter',this.div).length == 0)
|
||||
{
|
||||
var prev_event = this._children[this._children.indexOf(event)-1];
|
||||
this._hidden_indicator(prev_event, false, function() {
|
||||
app.calendar.update_state({view: 'day', date: day.date});
|
||||
});
|
||||
this.event_wrapper.css('overflow','hidden');
|
||||
}
|
||||
this._hidden_indicator(event, false, false);
|
||||
this._hidden_indicator(event, false, function() {
|
||||
app.calendar.update_state({view: 'day', date: day.date});
|
||||
});
|
||||
// Avoid partially visible events
|
||||
// We need to hide all, or the next row will be visible
|
||||
event.div.hide(0);
|
||||
}
|
||||
// Completely out of view, show indicator
|
||||
else if (hidden.completely)
|
||||
@ -788,7 +823,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
{
|
||||
if(this.all_day.has(columns[c][i].div).length)
|
||||
{
|
||||
columns[c][i].div.prependTo(this.div);
|
||||
columns[c][i].div.prependTo(this.event_wrapper);
|
||||
}
|
||||
columns[c][i].div.css('top', '');
|
||||
columns[c][i].div.css('height', '');
|
||||
@ -817,7 +852,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
{
|
||||
if(this.all_day.has(columns[c][i].div).length)
|
||||
{
|
||||
columns[c][i].div.appendTo(this.div);
|
||||
columns[c][i].div.appendTo(this.event_wrapper);
|
||||
this._parent.resizeTimes();
|
||||
}
|
||||
top = this._time_to_position(columns[c][i].options.value.start_m);
|
||||
|
@ -120,6 +120,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
|
||||
this.id
|
||||
);
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
@ -650,9 +651,9 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
|
||||
// Also check participants against owner
|
||||
if(event.participants && this._parent.options.owner)
|
||||
{
|
||||
var match = false;
|
||||
var parent_owner = this._parent.options.owner;
|
||||
for(var i = 0; i < this._parent.options.owner.length; i++ )
|
||||
var match = false;
|
||||
for(var i = 0; !match && i < this._parent.options.owner.length; i++ )
|
||||
{
|
||||
if (parseInt(this._parent.options.owner[i]) < 0)
|
||||
{
|
||||
@ -674,7 +675,9 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
|
||||
}
|
||||
if(!match)
|
||||
{
|
||||
return false;
|
||||
return(this._parent.options.owner == event.owner ||
|
||||
parent_owner.indexOf &&
|
||||
parent_owner.indexOf(event.owner) >= 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -637,6 +637,13 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
|
||||
border: none;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calDayCol > div:first-child
|
||||
{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 3em;
|
||||
width: 100%;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEvent {
|
||||
height: 1.1em;
|
||||
position: relative;
|
||||
@ -689,11 +696,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before {
|
||||
content: attr(data-hidden_label);
|
||||
display:block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 3ex;
|
||||
background: white;
|
||||
z-index: 21;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover {
|
||||
/* Need !important to override calculated height*/
|
||||
|
Loading…
Reference in New Issue
Block a user