forked from extern/egroupware
Planner view:
- Add vertical lines - Keep larger timescale header for zooming out
This commit is contained in:
Nathan Gray
parent
24dea3f2d8
commit
c4923848ef
@ -85,6 +85,10 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
.appendTo(this.gridHeader);
|
||||
|
||||
this.rows = $j(document.createElement("div"))
|
||||
.addClass("calendar_plannerRows")
|
||||
.appendTo(this.div);
|
||||
this.grid = $j(document.createElement("div"))
|
||||
.addClass("calendar_plannerGrid")
|
||||
.appendTo(this.div);
|
||||
|
||||
this.vertical_bar = $j(document.createElement("div"))
|
||||
@ -296,21 +300,27 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
var start_date = new Date(start.getUTCFullYear(), start.getUTCMonth(),start.getUTCDate());
|
||||
var end_date = new Date(end.getUTCFullYear(), end.getUTCMonth(),end.getUTCDate());
|
||||
var day_count = Math.round((end_date - start_date) /(1000*3600*24))+1;
|
||||
if(day_count >= 28)
|
||||
if(day_count >= 6)
|
||||
{
|
||||
this.headers.append(this._header_months(start, day_count));
|
||||
}
|
||||
if(day_count >= 5 && day_count < 120)
|
||||
if(day_count < 120)
|
||||
{
|
||||
this.headers.append(this._header_weeks(start, day_count));
|
||||
var weeks = this._header_weeks(start, day_count);
|
||||
this.headers.append(weeks);
|
||||
this.grid.append(weeks);
|
||||
}
|
||||
if(day_count < 60)
|
||||
{
|
||||
this.headers.append(this._header_days(start, day_count));
|
||||
var days = this._header_days(start, day_count);
|
||||
this.headers.append(days);
|
||||
this.grid.append(days);
|
||||
}
|
||||
if(day_count <= 7)
|
||||
{
|
||||
this.headers.append(this._header_hours(start, day_count));
|
||||
var hours = this._header_hours(start, day_count);
|
||||
this.headers.append(hours);
|
||||
this.grid.append(hours);
|
||||
}
|
||||
},
|
||||
// Labels for the rows
|
||||
@ -542,22 +552,27 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
var end_date = new Date(end.getUTCFullYear(), end.getUTCMonth(),end.getUTCDate());
|
||||
var day_count = Math.round((end_date - start_date) /(1000*3600*24))+1;
|
||||
|
||||
if(day_count >= 28)
|
||||
if(day_count >= 6)
|
||||
{
|
||||
this.headers.append(this._header_months(start, day_count));
|
||||
}
|
||||
|
||||
if(day_count >= 5 && day_count < 120)
|
||||
if(day_count < 120)
|
||||
{
|
||||
this.headers.append(this._header_weeks(start, day_count));
|
||||
var weeks = this._header_weeks(start, day_count);
|
||||
this.headers.append(weeks);
|
||||
this.grid.append(weeks);
|
||||
}
|
||||
if(day_count < 60)
|
||||
{
|
||||
this.headers.append(this._header_days(start, day_count));
|
||||
var days = this._header_days(start, day_count);
|
||||
this.headers.append(days);
|
||||
this.grid.append(days);
|
||||
}
|
||||
if(day_count <= 7)
|
||||
{
|
||||
this.headers.append(this._header_hours(start, day_count));
|
||||
var hours = this._header_hours(start, day_count);
|
||||
this.headers.append(hours);
|
||||
this.grid.append(hours);
|
||||
}
|
||||
},
|
||||
row_labels: function() {
|
||||
@ -778,7 +793,9 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
}
|
||||
|
||||
// Clear old rows
|
||||
this.rows.empty();
|
||||
this.rows.empty()
|
||||
.append(this.grid);
|
||||
this.grid.empty();
|
||||
|
||||
var grouper = this.groupers[isNaN(this.options.group_by) ? this.options.group_by : 'category'];
|
||||
if(!grouper) return;
|
||||
@ -787,6 +804,9 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
this.headers.empty();
|
||||
this.headerTitle.text(grouper.title.apply(this));
|
||||
grouper.headers.apply(this);
|
||||
this.grid.find('*').contents().filter(function(){
|
||||
return this.nodeType === 3;
|
||||
}).remove();
|
||||
|
||||
// Get the rows / labels
|
||||
var labels = grouper.row_labels.call(this);
|
||||
@ -825,9 +845,9 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
}
|
||||
|
||||
// Adjust header if there's a scrollbar
|
||||
if(this.rows.children().first().length)
|
||||
if(this.rows.children().last().length)
|
||||
{
|
||||
this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px');
|
||||
this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().last().width()) + 'px');
|
||||
}
|
||||
this.value = [];
|
||||
},
|
||||
@ -921,15 +941,12 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
{
|
||||
days_in_month = days - i;
|
||||
}
|
||||
if (days_in_month > 5)
|
||||
{
|
||||
var title = app.calendar.egw.lang(date('F',new Date(t.valueOf() + t.getTimezoneOffset() * 60 * 1000)))
|
||||
}
|
||||
if (days_in_month > 10)
|
||||
{
|
||||
title += ' '+t.getUTCFullYear();
|
||||
}
|
||||
else
|
||||
else if (days_in_month < 5)
|
||||
{
|
||||
title = ' ';
|
||||
}
|
||||
@ -990,7 +1007,7 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
|
||||
state.setUTCMinutes(0);
|
||||
state = state.toJSON();
|
||||
|
||||
if(days_in_week > 1)
|
||||
if(days_in_week > 1 || days == 1)
|
||||
{
|
||||
content += '<div class="calendar_plannerWeekScale et2_clickable et2_link" data-date=\'' + state + '\' style="left: '+left+'%; width: '+week_width+'%;">'+title+"</div>";
|
||||
}
|
||||
|
||||
@ -272,7 +272,7 @@ var et2_calendar_planner_row = et2_valueWidget.extend([et2_IDetachedDOM],
|
||||
rows[c][i].div.css('top', top+'%');
|
||||
rows[c][i].div.css('height', (100/rows.length)+'%');
|
||||
rows[c][i].div.css('left', left.toFixed(1)+'%');
|
||||
rows[c][i].div.css('width', width.toFixed(1)+'%');
|
||||
rows[c][i].div.outerWidth(width/100 *this.rows.width() +'px');
|
||||
}
|
||||
}
|
||||
if(height)
|
||||
|
||||
@ -764,7 +764,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 99.5%;
|
||||
padding-right: 3px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.calendar_plannerWidget > div:not(.calendar_plannerHeader) {
|
||||
@ -778,7 +777,41 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.calendar_plannerRows {
|
||||
position:relative;
|
||||
}
|
||||
.calendar_plannerGrid {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 172px;
|
||||
right: 0px;
|
||||
overflow:hidden;
|
||||
height: 100%;
|
||||
border-left: 1px solid silver;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.calendar_plannerGrid > .calendar_plannerScale,
|
||||
.calendar_plannerGrid > .calendar_plannerScaleDay {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.calendar_plannerGrid .calendar_calToday, .calendar_plannerGrid .calendar_calHoliday {
|
||||
background-color: initial;
|
||||
}
|
||||
.calendar_plannerGrid > div:nth-last-child(2) > div {
|
||||
border: none;
|
||||
border-right: 1px solid silver;
|
||||
}
|
||||
.calendar_plannerGrid > div:last-child > div {
|
||||
border: none;
|
||||
}
|
||||
.calendar_plannerGrid > div:last-child > div:not(:first-child) {
|
||||
background-image: linear-gradient(0deg, rgba(192, 192, 192, 0.75) 4px, transparent 0%);
|
||||
background-position: top left;
|
||||
background-size: 1px 10px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
|
||||
*/
|
||||
.calendar_plannerRowWidget {
|
||||
@ -787,7 +820,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
background-color: white;
|
||||
}
|
||||
.calendar_plannerRowWidget:not(:first-child) {
|
||||
border-top: 1px solid silver;
|
||||
@ -854,18 +886,20 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
line-height: 20px;
|
||||
border-right: 1px solid silver;
|
||||
text-overflow: ellipsis;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
padding-left: 20px;
|
||||
padding-right: 2px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
.calendar_plannerRowHeader:hover {
|
||||
overflow:visible;
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
}
|
||||
.calendar_plannerHeaderTitle {
|
||||
border-right: 1px solid silver;
|
||||
}
|
||||
|
||||
/* calendar_eventRows contain multiple eventRowWidgets
|
||||
*/
|
||||
|
||||
@ -970,19 +970,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
*/
|
||||
.calendar_plannerWidget {
|
||||
width: 99.5%;
|
||||
border: 1px solid gray;
|
||||
padding-right: 3px;
|
||||
}
|
||||
.calendar_plannerWidget img {
|
||||
height: 16px;
|
||||
}
|
||||
/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
|
||||
*/
|
||||
.calendar_plannerScale,
|
||||
.calendar_plannerScaleDay {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.calendar_plannerScaleDay {
|
||||
height: 28px;
|
||||
line-height: 14px;
|
||||
|
||||
@ -1067,8 +1067,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
*/
|
||||
.calendar_plannerWidget {
|
||||
width: 99.5%;
|
||||
border: 1px solid gray;
|
||||
padding-right: 3px;
|
||||
|
||||
img{.dimension_height_s;}
|
||||
}
|
||||
@ -1076,10 +1074,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
|
||||
|
||||
/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
|
||||
*/
|
||||
.calendar_plannerScale,.calendar_plannerScaleDay {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.calendar_plannerScaleDay {
|
||||
height: 28px;
|
||||
line-height: 14px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user