R54941 - in /trunk/calendar: js/ templates/default/ templates/pixelegg/

nathangray 2016-02-05 18:17:47 UTC #1

Author: nathangray
New Revision: 54941

URL: http://svn.stylite.de/viewvc/egroupware?rev=54941&view=rev
Log:
Add minimum height for weeks - 1/2 hour must be at least 1 line high

Modified:
trunk/calendar/js/et2_widget_daycol.js
trunk/calendar/js/et2_widget_timegrid.js
trunk/calendar/templates/default/app.css
trunk/calendar/templates/pixelegg/app.css

Modified: trunk/calendar/js/et2_widget_daycol.js
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/js/et2_widget_daycol.js?rev=54941&r1=54940&r2=54941&view=diff

— trunk/calendar/js/et2_widget_daycol.js (original)
+++ trunk/calendar/js/et2_widget_daycol.js Fri Feb 5 19:17:47 2016
@@ -531,6 +531,23 @@

/**
 * 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 @@
  }
  // 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 @@
// 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 @@
// 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,24 +668,42 @@
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)

```
  			.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;
```
```
  			});
```

```
  			.attr('data-hidden_count', 1);
```
```
  		if(!fixed_height)
```
```
  		{
```
```
  			indicator
```
```
  				.text(event.options.value.title)
```

  				.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);

  		indicator.text(day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),''));

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

@@ -675,14 +719,23 @@
// 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 @@
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 @@
{
// 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);

Modified: trunk/calendar/js/et2_widget_timegrid.js
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/js/et2_widget_timegrid.js?rev=54941&r1=54940&r2=54941&view=diff

— trunk/calendar/js/et2_widget_timegrid.js (original)
+++ trunk/calendar/js/et2_widget_timegrid.js Fri Feb 5 19:17:47 2016
@@ -1706,11 +1706,14 @@
// 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 @@
},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 @@
// 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)

```
  {
```

  	this._parent.iterateOver(function(widget) {

  		if(!widget.disabled) widget.set_granularity(0);

```
  	},this, et2_calendar_timegrid);
```

  // 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.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);

Modified: trunk/calendar/templates/default/app.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/default/app.css?rev=54941&r1=54940&r2=54941&view=diff

— trunk/calendar/templates/default/app.css (original)
+++ trunk/calendar/templates/default/app.css Fri Feb 5 19:17:47 2016
@@ -237,6 +237,10 @@
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.
@@ -389,6 +393,9 @@
margin-top: -20px;
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 */

Modified: trunk/calendar/templates/pixelegg/app.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/pixelegg/app.css?rev=54941&r1=54940&r2=54941&view=diff

— trunk/calendar/templates/pixelegg/app.css (original)
+++ trunk/calendar/templates/pixelegg/app.css Fri Feb 5 19:17:47 2016
@@ -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 @@
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
@@ -401,6 +405,9 @@
margin-top: -20px;
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 > * {

Site24x7 APM Insight: Get Deep Visibility into Application Performance
APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month
Monitor end-to-end web transactions and take corrective actions now
Troubleshoot faster and improve end-user experience. Signup Now!
http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140

eGroupWare-cvs mailing list
eGroupWare-cvs@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-cvs