mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-01-08 23:19:04 +01:00
Style changes for gridlist view
This commit is contained in:
Nathan Gray
parent
6b78eb9d36
commit
931a354a66
@ -471,7 +471,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
var start = new Date(a.start) - new Date(b.start);
|
||||
var end = new Date(a.end) - new Date(b.end);
|
||||
// Whole day events sorted by ID, normal events by start / end time
|
||||
return a.whole_day ? (a.app_id - b.app_id) : (start ? start : end);
|
||||
if(a.whole_day && b.whole_day)
|
||||
{
|
||||
return (a.app_id - b.app_id);
|
||||
}
|
||||
else if (a.whole_day || b.whole_day)
|
||||
{
|
||||
return a.whole_day ? -1 : 1;
|
||||
}
|
||||
return start ? start : end;
|
||||
});
|
||||
|
||||
for(var c = 0; c < events.length; c++)
|
||||
@ -554,12 +562,18 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
event.body.css('padding-top',timegrid.scrolling.scrollTop() - event.div.position().top);
|
||||
}
|
||||
// Too many in gridlist view, show indicator
|
||||
else if (this.display_settings.granularity === 0 && hidden.completely)
|
||||
else if (this.display_settings.granularity === 0 && hidden)
|
||||
{
|
||||
var day = this;
|
||||
this._hidden_indicator(event, false, function() {
|
||||
app.calendar.update_state({view: 'day', date: day.date});
|
||||
});
|
||||
// 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._hidden_indicator(event, false, false);
|
||||
}
|
||||
// Completely out of view, show indicator
|
||||
else if (hidden.completely)
|
||||
@ -607,8 +621,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
if(indicator.length === 0)
|
||||
{
|
||||
indicator = $j('<div class="hiddenEventAfter"></div>')
|
||||
.text(event.options.value.title)
|
||||
.attr('data-hidden_count', 1)
|
||||
.attr('data-hidden_count', 0)
|
||||
.appendTo(this.div)
|
||||
.on('click', typeof onclick === 'function' ? onclick : function() {
|
||||
$j('.calendar_calEvent',day.div).last()[0].scrollIntoView(false);
|
||||
@ -617,20 +630,19 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
|
||||
return false;
|
||||
});
|
||||
}
|
||||
var count = parseInt(indicator.attr('data-hidden_count')) + 1
|
||||
indicator.attr('data-hidden_count', count);
|
||||
if(this.display_settings.granularity === 0)
|
||||
{
|
||||
indicator.append(event.div.clone());
|
||||
indicator.attr('data-hidden_label', day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),''));
|
||||
debugger;
|
||||
}
|
||||
else
|
||||
{
|
||||
var count = parseInt(indicator.attr('data-hidden_count')) + 1
|
||||
indicator.attr('data-hidden_count', count);
|
||||
if(this.display_settings.granularity === 0)
|
||||
{
|
||||
indicator.text(indicator.text() + "\n" + event.options.value.title);
|
||||
}
|
||||
else
|
||||
{
|
||||
indicator.text(day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),''));
|
||||
}
|
||||
indicator.css('top',timegrid.scrolling.height() + timegrid.scrolling.scrollTop()-indicator.height());
|
||||
indicator.text(day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),''));
|
||||
}
|
||||
indicator.css('top',timegrid.scrolling.height() + timegrid.scrolling.scrollTop()-indicator.innerHeight());
|
||||
}
|
||||
// Match color to the event
|
||||
if(indicator !== '')
|
||||
@ -673,7 +685,17 @@ 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);
|
||||
return a.options.value.whole_day ? -1 : (start ? start : 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);
|
||||
}
|
||||
else if (a.options.value.whole_day || b.options.value.whole_day)
|
||||
{
|
||||
return a.options.value.whole_day ? -1 : 1;
|
||||
}
|
||||
return start ? start : end;
|
||||
});
|
||||
|
||||
for(var i = 0; i < this._children.length; i++)
|
||||
|
||||
@ -337,9 +337,20 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
|
||||
}
|
||||
else
|
||||
{
|
||||
var start_time = jQuery.datepicker.formatTime(
|
||||
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
|
||||
{
|
||||
hour: event.start_m / 60,
|
||||
minute: event.start_m % 60,
|
||||
seconds: 0,
|
||||
timezone: 0
|
||||
},
|
||||
{"ampm": (egw.preference("timeformat") === "12")}
|
||||
).trim();
|
||||
|
||||
this.body
|
||||
.html('<span class="calendar_calEventTitle">'+title+'</span>')
|
||||
.append('<span class="calendar_calTimespan">'+this._get_timespan(event) + '</span>')
|
||||
.append('<span class="calendar_calTimespan">'+start_time + '</span>')
|
||||
.append('<p>'+this.options.value.description+'</p>');
|
||||
}
|
||||
this.body
|
||||
@ -402,18 +413,22 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
|
||||
var times = !this.options.value.multiday ?
|
||||
'<span class="calendar_calEventLabel">'+this.egw().lang('Time')+'</span>:' + timespan :
|
||||
'<span class="calendar_calEventLabel">'+this.egw().lang('Start') + '</span>:' +start+
|
||||
'<span class="calendar_calEventLabel">'+this.egw().lang('End') + '</span>:' + end
|
||||
var cat = et2_createWidget('select-cat',{'readonly':true},this);
|
||||
cat.set_value(this.options.value.category);
|
||||
var cat_label = this.options.value.category.indexOf(',') <= 0 ? cat.span.text() : [];
|
||||
if(typeof cat_label != 'string')
|
||||
'<span class="calendar_calEventLabel">'+this.egw().lang('End') + '</span>:' + end;
|
||||
var cat_label = '';
|
||||
if(this.options.value.category)
|
||||
{
|
||||
cat.span.children().each(function() {
|
||||
cat_label.push($j(this).text());
|
||||
});
|
||||
cat_label = cat_label.join(', ');
|
||||
var cat = et2_createWidget('select-cat',{'readonly':true},this);
|
||||
cat.set_value(this.options.value.category);
|
||||
cat_label = this.options.value.category.indexOf(',') <= 0 ? cat.span.text() : [];
|
||||
if(typeof cat_label != 'string')
|
||||
{
|
||||
cat.span.children().each(function() {
|
||||
cat_label.push($j(this).text());
|
||||
});
|
||||
cat_label = cat_label.join(', ');
|
||||
}
|
||||
cat.destroy();
|
||||
}
|
||||
cat.destroy();
|
||||
|
||||
return '<div class="calendar_calEventTooltip ' + this._status_class() + '" style="border-color: '+border+'; background: '+bg_color+';">'+
|
||||
'<div class="calendar_calEventHeaderSmall" style="background-color: '+this.title.css('background-color')+';">'+
|
||||
|
||||
@ -638,13 +638,15 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
border: none;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEvent {
|
||||
min-height: 1.1em;
|
||||
height: 1.1em;
|
||||
position: relative;
|
||||
border: none;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
border-radius: 0px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEvent:not([data-full_day]) {
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEventHeader {
|
||||
display: none !important;
|
||||
@ -652,30 +654,59 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
.calendar_calTimeGridList .calendar_calEventTitle {
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
max-height:2.4em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEventBody:not(.calendar_calEventBodySmall) {
|
||||
flex: 1 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEventBody {
|
||||
overflow: hidden;
|
||||
border:none;
|
||||
background: #f0f0f0 !important;
|
||||
height: 100%;
|
||||
padding-left: 6px;
|
||||
display: flex;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEventBody .calendar_calTimespan {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding-left: 1em;
|
||||
text-align: right;
|
||||
padding-right: 1px;
|
||||
opacity: 0.8;
|
||||
font-size: 90%
|
||||
font-size: 90%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calEventBody > p {
|
||||
display: none;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter {
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
margin-top: -1.5ex;
|
||||
height: 2.1ex;
|
||||
border-bottom-left-radius: 0px;
|
||||
overflow: visible;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before {
|
||||
content: attr(data-hidden_label);
|
||||
display:block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 3ex;
|
||||
background: #f0f0f0;
|
||||
z-index: 21;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover {
|
||||
/* Need !important to override calculated height*/
|
||||
top: initial !important;
|
||||
bottom: 0px;
|
||||
white-space: pre;
|
||||
background: #f0f0f0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover:before {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* table of the dayView containing 2 cols: 1) day-view, 2) todos
|
||||
*/
|
||||
.calendar_calDayView{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user