From c4923848efa3903c393e4de55357187468280de5 Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Thu, 21 Jan 2016 23:07:29 +0000 Subject: [PATCH] Planner view: - Add vertical lines - Keep larger timescale header for zooming out --- calendar/js/et2_widget_planner.js | 57 +++++++++++++++++---------- calendar/js/et2_widget_planner_row.js | 2 +- calendar/templates/default/app.css | 44 ++++++++++++++++++--- calendar/templates/pixelegg/app.css | 7 ---- calendar/templates/pixelegg/app.less | 6 --- 5 files changed, 77 insertions(+), 39 deletions(-) diff --git a/calendar/js/et2_widget_planner.js b/calendar/js/et2_widget_planner.js index 8308817b51..e446e33a08 100644 --- a/calendar/js/et2_widget_planner.js +++ b/calendar/js/et2_widget_planner.js @@ -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))) - } + 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 += '
'+title+"
"; } diff --git a/calendar/js/et2_widget_planner_row.js b/calendar/js/et2_widget_planner_row.js index ef42444820..d40a29ab1f 100644 --- a/calendar/js/et2_widget_planner_row.js +++ b/calendar/js/et2_widget_planner_row.js @@ -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) diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 16239b6761..c10925f0c0 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -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 */ diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index a2065d0bf4..75dd10fdd4 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -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; diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 81dffaef48..65f0fd1603 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -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;