Planner view:

- Add vertical lines - Keep larger timescale header for zooming out
2016-01-21 23:07:29 +00:00 · 2016-01-21 23:07:29 +00:00 · c4923848ef
commit c4923848ef
parent 24dea3f2d8
5 changed files with 77 additions and 39 deletions
--- 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 = '&nbsp;';
 			}
@ -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>";
 			}
--- 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)
--- 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
 */
--- 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;
--- 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;