extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 17:52:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add minimum height for weeks - 1/2 hour must be at least 1 line high

Browse Source
This commit is contained in:
Nathan Gray 2016-02-05 18:17:47 +00:00
parent 353847ac27
commit abdc5fc06c
4 changed files with 129 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
calendar/js/et2_widget_daycol.js
View File

@ -531,6 +531,23 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
/**
* Apply styles for out-of-view and partially hidden events
*
* There are 3 different states or modes of display:
*
* - 'Normal' - When showing events positioned by time, the indicator is just
* a bar colored by the last category color. On hover it shows either the
* title of a single event or "x event(s)" if more than one are hidden.
* Clicking adjusts the current view to show the earliest / latest hidden
* event
*
* - Fixed - When showing events positioned by time but in a fixed-height
* week (not auto-sized to fit screen) the indicator is the same as sized.
* On hover it shows the titles of the hidden events, clicking changes
* the view to the selected day.
*
* - GridList - When showing just a list, the indicator shows "x event(s)",
* and on hover shows the category color, title & time. Clicking changes
* the view to the selected day, and opens the event for editing.
*/
_out_of_view: function()
{
@ -591,8 +608,9 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
}
// Reset
event.title.css({'top':'','background-color':''});
event.body.css('padding-top','');
event.body.css({'padding-top':'','margin-top':''});
var hidden = isHidden.call(this,event.div);
var day = this;
if(!hidden)
{
return;
@ -601,16 +619,19 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
// Bottom hidden is fine
if(hidden.hidden === 'top' && !hidden.completely)
{
var title_height = event.title.outerHeight();
event.title.css({
'top': timegrid.scrolling.scrollTop() - event.div.position().top,
'background-color': 'transparent'
});
event.body.css('padding-top',timegrid.scrolling.scrollTop() - event.div.position().top);
event.body.css({
'padding-top': timegrid.scrolling.scrollTop() - event.div.position().top + title_height,
'margin-top' : -title_height
});
}
// Too many in gridlist view, show indicator
else if (this.display_settings.granularity === 0 && hidden)
{
var day = this;
if($j('.hiddenEventAfter',this.div).length == 0)
{
this.event_wrapper.css('overflow','hidden');
@ -625,7 +646,12 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
// Completely out of view, show indicator
else if (hidden.completely)
{
this._hidden_indicator(event, hidden.hidden == 'top');
this._hidden_indicator(event, hidden.hidden == 'top',
timegrid.div.hasClass('calendar_calTimeGridFixed') ? function() {
app.calendar.update_state({view: 'day', date: day.date});
return false;
} : false
);
}
}, this, et2_calendar_event);
},
@ -642,26 +668,44 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
var indicator = '';
var day = this;
var timegrid = this._parent;
var fixed_height = timegrid.div.hasClass('calendar_calTimeGridFixed');
if(top)
{
if($j('.hiddenEventBefore',this.header).length === 0)
{
indicator = $j('<div class="hiddenEventBefore"></div>')
.appendTo(this.header)
.attr('data-hidden_count', 1);
if(!fixed_height)
{
indicator
.text(event.options.value.title)
.attr('data-hidden_count', 1)
.on('click', typeof onclick === 'function' ? onclick : function() {
$j('.calendar_calEvent',day.div).first()[0].scrollIntoView();
return false;
});
}
else
{
indicator
.append("<div>"+event.options.value.title+"</div>");
}
}
else
{
indicator = $j('.hiddenEventBefore',this.header);
indicator.attr('data-hidden_count', parseInt(indicator.attr('data-hidden_count')) + 1);
if (fixed_height)
{
indicator.append("<div>"+event.options.value.title+"</div>");
}
else
{
indicator.text(day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),''));
}
}
}
else
{
indicator = $j('.hiddenEventAfter',this.div);
@ -675,14 +719,23 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
// Better re-run this to clean up
day._out_of_view();
return false;
})
.on('wheel', function(e)
{
// Avoid bubbling & triggering change in date span
e.stopPropagation();
// IE?
e.cancelBubble;
});
if(fixed_height)
{
indicator
.on('mouseover', function() {
indicator.css({
'height': (indicator.attr('data-hidden_count')*1.2) + 'em',
'margin-top': -(indicator.attr('data-hidden_count')*1.2) + 'em'
});
})
.on('mouseout', function() {
indicator.css({
'height': '',
'margin-top': ''
});
});
}
}
var count = parseInt(indicator.attr('data-hidden_count')) + 1
indicator.attr('data-hidden_count', count);
@ -691,6 +744,10 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
indicator.append(event.div.clone());
indicator.attr('data-hidden_label', day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),''));
}
else if (fixed_height)
{
indicator.append("<div>"+event.options.value.title+"</div>");
}
else
{
indicator.text(day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),''));
@ -702,8 +759,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
{
// Avoid white, which is hard to see
// Use border-bottom-color, Firefox doesn't give a value with border-color
var color = jQuery.Color(event.div.css('border-bottom-color')).toString() !== jQuery.Color('white').toString() ?
event.div.css('border-bottom-color') : event.div.css('background-color');
var color = jQuery.Color(event.div.css('background-color')).toString() !== jQuery.Color('white').toString() ?
event.div.css('background-color') : event.div.css('border-bottom-color');
if(color !== 'rgba(0, 0, 0, 0)')
{
indicator.css('border-color', color);

45
calendar/js/et2_widget_timegrid.js
View File

@ -1706,11 +1706,14 @@ var et2_calendar_timegrid = et2_calendar_view.extend([et2_IDetachedDOM, et2_IRes
// Set the max width to avoid animations screwing up the width
this.div.css('max-width',$j(this.getInstanceManager().DOMContainer).width());
// We expect the timegrid to be in a table with 0 or more other timegrids,
// 1 per row. We want each timegrid to be as large as possible, but space
// shared equally. Height can't be set to a percentage on the rows, because
// that doesn't work.
/*
We expect the timegrid to be in a table with 0 or more other timegrids,
1 per row. We want each timegrid to be as large as possible, but space
shared equally. Height can't be set to a percentage on the rows, because
that doesn't work. However, if the timegrid is too small (1/2 hour < 1 line
height), we change to showing only the working hours with no vertical
scrollbar. Each week gets as much space as it needs.
*/
// How many rows?
var rowCount = 0;
this._parent.iterateOver(function(widget) {
@ -1718,7 +1721,7 @@ var et2_calendar_timegrid = et2_calendar_view.extend([et2_IDetachedDOM, et2_IRes
},this, et2_calendar_timegrid);
// Take the whole tab height
var height = Math.min($j(this.getInstanceManager().DOMContainer).height(),$j(this.getInstanceManager().DOMContainer).parent().innerHeight());
var height = $j(this.getInstanceManager().DOMContainer).parent().innerHeight();
// Allow for toolbar
height -= $j('#calendar-toolbar',this.div.parents('.egw_fw_ui_tab_content')).outerHeight(true);
@ -1728,13 +1731,35 @@ var et2_calendar_timegrid = et2_calendar_view.extend([et2_IDetachedDOM, et2_IRes
// Allow for borders & padding
this.options.height -= 2*((this.div.outerWidth(true) - this.div.innerWidth()) + parseInt(this.div.parent().css('padding-top')));
// If too small, switch to list view automatically
// Set rather arbitrarily at 180 px.
if(this.options.granularity && rowCount > 1 && this.options.height < 180)
// Calculate how much space is needed, and
// if too small be bigger
var needed = ((this.day_end - this.day_start) /
(this.options.granularity / 60) * parseInt(this.div.css('line-height'))) +
this.gridHeader.outerHeight();
var too_small = needed > this.options.height && this.options.granularity != 0;
$j(this.getInstanceManager().DOMContainer)
.css({
'overflow-y': too_small ? 'auto' : 'hidden',
'overflow-x': 'hidden',
'height': too_small ? height : '100%'
});
if(too_small)
{
this.options.height = needed;
if(!this.div.hasClass('calendar_calTimeGridFixed'))
{
window.setTimeout(jQuery.proxy(function() {
this._parent.iterateOver(function(widget) {
if(!widget.disabled) widget.set_granularity(0);
if(!widget.disabled) widget.resize();
},this, et2_calendar_timegrid);
},this),1);
}
this.div.addClass('calendar_calTimeGridFixed');
}
else
{
this.div.removeClass('calendar_calTimeGridFixed');
}
this.div.css('height', this.options.height);

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

@ -237,6 +237,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
right: 0px;
position: absolute;
}
/* Timegrid that has hit a minimum size */
.calendar_calTimeGridFixed .calendar_calTimeGridScroll {
overflow: hidden;
}
/*
Show the day headers for single week view only once.
@ -390,6 +394,9 @@ Hide subsequent headers in week view with non-consolidated owners
height: 20px;
background-color: white;
}
.calendar_calTimeGridFixed .calendar_calDayCol .hiddenEventAfter:hover .calendar_calEvent {
position: relative;
}
/* Days in a different month, but shown to fill out the week */
.calendar_calDayColHeader.calendar_differentMonth > * {

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

@ -11,7 +11,7 @@
* @package calendar
* @version $Id$
*/
/* $Id: app.css 54927 2016-02-04 22:35:34Z nathangray $ */
/* $Id: app.css 54928 2016-02-04 23:14:54Z nathangray $ */
/*Media print classes*/
@media print {
.th td,
@ -250,6 +250,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
right: 0px;
position: absolute;
}
/* Timegrid that has hit a minimum size */
.calendar_calTimeGridFixed .calendar_calTimeGridScroll {
overflow: hidden;
}
/*
Show the day headers for single week view only once.
Hide subsequent headers in week view with non-consolidated owners
@ -402,6 +406,9 @@ Hide subsequent headers in week view with non-consolidated owners
height: 20px;
background-color: white;
}
.calendar_calTimeGridFixed .calendar_calDayCol .hiddenEventAfter:hover .calendar_calEvent {
position: relative;
}
/* Days in a different month, but shown to fill out the week */
.calendar_calDayColHeader.calendar_differentMonth > * {
color: #6a6a6a;