Re-add sidebox 'month' button as go button, styled to look like calendar navigation buttons

calendar/js/app.js

@@ -3107,6 +3107,21 @@ app.classes.calendar = AppJS.extend(
 		{
 			var datepicker = date_widget.input_date.datepicker("option", {
 				showButtonPanel:	false,
+				onChangeMonthYear: function(year, month, inst)
+				{
+					// Update month button label
+					var go_button = date_widget.getRoot().getWidgetById('header_go');
+					if(go_button)
+					{
+						var temp_date = new Date(year, month-1, 1,0,0,0);
+						//temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset());
+						go_button.set_statustext(egw.lang(date('F',temp_date)));
+
+						// Store current _displayed_ date in date button for clicking
+						temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset());
+						go_button.btn.attr('data-date', temp_date.toJSON());
+					}
+				},
 				// Mark holidays
 				beforeShowDay: function (date)
 				{
@@ -3176,26 +3191,48 @@ app.classes.calendar = AppJS.extend(
 					}
 				});
 
+
+			// Set today button
+			var today = $j('#calendar-sidebox_header_today');
+
+			// Set go button
+			var go_button = date_widget.getRoot().getWidgetById('header_go');
+			if(go_button && go_button.btn)
+			{
+				go_button = go_button.btn;
+				var temp_date = new Date(date_widget.get_value());
+				temp_date.setUTCDate(1);
+				temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset());
+
+				// Store current _displayed_ date in date button for clicking
+				temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset());
+				go_button.attr('data-date', temp_date.toJSON());
+			}
+
 			// Dynamic resize of sidebox calendar to fill sidebox
 			var preferred_width = $j('#calendar-sidebox_date .ui-datepicker-inline').outerWidth();
 			var font_ratio = 12 / parseFloat($j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size'));
-			$j(window).on('resize.calendar'+date.dom_id, function() {
+			$j(window).on('resize.calendar'+date_widget.dom_id, function() {
 				var percent = 1+(($j(date_widget.getDOMNode()).width() - preferred_width) / preferred_width);
 				percent *= font_ratio;
-				$j('#calendar-sidebox_date .ui-datepicker-inline,#calendar-sidebox_header_today')
+				$j('#calendar-sidebox_date .ui-datepicker-inline')
 					.css('font-size',(percent*100)+'%');
 				// Position today
 				var buttons = $j('#calendar-sidebox_date .ui-datepicker-header a');
-				var total = 0;
-				buttons.each(function()	{
-					total += $j(this).position().left;
-				});
-				// Why doesn't this work properly?
-				var today = $j('#calendar-sidebox_header_today');
 				if(today.length)
 				{
-					today.position({my: 'center left', at: 'center right',of: buttons});
+					// Why doesn't this work properly?
-					today.css('left',(total/buttons.length));
+					go_button.position({my: 'center left', at: 'center right',of: buttons[0]});
+					
+					go_button.css('left', buttons.first().position().left + buttons.first().width());
+
+					var max_width = buttons.last().position().left - (go_button.position().left + go_button.width());
+					today.css({
+						'left': go_button.position().left + go_button.outerWidth(),
+						'top': go_button.css('top'),
+						'max-width': max_width,
+						'right': buttons.last().outerWidth(true)
+					});
 				}
 			}).trigger('resize');
 			

calendar/templates/default/app.css

@@ -41,20 +41,52 @@
 }
 #calendar-sidebox_header_today {
 	position: absolute;
-	width: 2.4em;
 	height: 1.8em;
 	z-index: 1;
-	text-indent: 3em;
+	text-indent: 125%;
 	overflow: hidden;
+	text-overflow: ellipsis;
 	border: none;
+	right: 2em;
+	margin: 1px;
+	margin-top: -5px;
+
+	background-position: center center;
 	background-size: contain;
 	background-color: transparent;
     background-image: url(images/today.png);
 	background-repeat: no-repeat;
 }
+#calendar-sidebox_header_go {
+	position: absolute;
+	width: 13px;
+	height: 13px;
+	top: 0.5em;
+	right: 4.7em;
+	z-index: 1;
+	overflow: hidden;
+	margin: 0px;
+	font-size: 10px;
+	line-height: 50%;
+	text-indent: -1px;
+	color: white;
+	background-color: #d8e7f3;
+	border:none;
+	border-radius: 100%;
+}
+#calendar-sidebox_header_go:hover {
+	background-color: #0c5da5;
+}
+
+#calendar-sidebox_date .ui-datepicker-prev {
+	right: 5em;
+}
 #calendar-sidebox_weekend {
 	/* Special css styling goes here */
 }
+#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
+	max-width: 10em;
+}
 #calendar-sidebox_date td.ui-datepicker-week-col {
 	cursor: pointer;
 }

calendar/templates/default/sidebox.xet

@@ -21,6 +21,7 @@ var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDa
 var change = {date: today.toJSON()};
 if(app.calendar.state.view == 'planner') { change.planner_days = Math.ceil((new Date(app.calendar.state.last) - new Date(app.calendar.state.first)) / (24*3600000));}
 app.calendar.update_state(change);return false;"/>
+			<buttononly id="header_go" label="&#8629;" icon="nope" statustext="Go" class="ui-corner-all" onclick="var change = {date: widget.btn.attr('data-date')}; if(app.calendar.state.view == 'planner') { change.planner_days = 0;change.first=change.date;var d = new Date(change.date);d = new Date(d.getFullYear(),d.getUTCMonth() + 1, 0);change.last=d.toJSON();} else if ( app.calendar.state.view == 'listview') {change.filter='month';} else {change.view = 'month';}app.calendar.update_state(change);" />
 			<date id="date" class="et2_fullWidth" inline="true" onchange="var view_change = app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view);
 var update = {date:widget.getValue()};
 if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_change ? view_change - 1 : view_change];} else if (app.calendar.state.view == 'listview') {update.filter = 'after';} else if (app.calendar.state.view =='planner') { update.planner_days = 1; } app.calendar.update_state(update);"/>

calendar/templates/pixelegg/app.css

@@ -11,7 +11,7 @@
  * @package calendar
  * @version $Id$
  */
-/* $Id: app.css 54875 2016-01-28 21:35:22Z nathangray $ */
+/* $Id: app.css 54876 2016-01-28 22:08:15Z nathangray $ */
 /*Media print classes*/
 @media print {
   .th td,
@@ -54,20 +54,50 @@
 }
 #calendar-sidebox_header_today {
   position: absolute;
-  width: 2.4em;
   height: 1.8em;
   z-index: 1;
-  text-indent: 3em;
+  text-indent: 125%;
   overflow: hidden;
+  text-overflow: ellipsis;
   border: none;
+  right: 2em;
+  margin: 1px;
+  margin-top: -5px;
+  background-position: center center;
   background-size: contain;
   background-color: transparent;
   background-image: url(images/today.png);
   background-repeat: no-repeat;
 }
+#calendar-sidebox_header_go {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  top: 0.5em;
+  right: 4.7em;
+  z-index: 1;
+  overflow: hidden;
+  margin: 0px;
+  font-size: 10px;
+  line-height: 50%;
+  text-indent: -1px;
+  color: white;
+  background-color: #d8e7f3;
+  border: none;
+  border-radius: 100%;
+}
+#calendar-sidebox_header_go:hover {
+  background-color: #0c5da5;
+}
+#calendar-sidebox_date .ui-datepicker-prev {
+  right: 5em;
+}
 #calendar-sidebox_weekend {
   /* Special css styling goes here */
 }
+#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
+  max-width: 10em;
+}
 #calendar-sidebox_date td.ui-datepicker-week-col {
   cursor: pointer;
 }
@@ -2477,7 +2507,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
 }
 /* Sidebox calendar */
 #calendar-sidebox_date .ui-widget-header {
-  background: transparent;
+  background-color: transparent;
 }
 #calendar-sidebox_date .ui-widget-content,
 #calendar-sidebox_date .ui-state-default,
@@ -2489,13 +2519,25 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
 #calendar-sidebox_date .ui-datepicker td {
   padding: 0px;
 }
+#calendar-sidebox_date .ui-datepicker-header .ui-state-hover {
+  background-color: transparent;
+  border: none;
+  top: 2px;
+  box-shadow: none;
+}
 #calendar-sidebox_date .ui-datepicker-today {
   background-color: #ffc200;
 }
-#calendar-sidebox_date .ui-widget-content .ui-state-hover {
+#calendar-sidebox_date .ui-datepicker-calendar .ui-state-hover {
   background-color: rgba(103, 159, 210, 0.2);
 }
-#calendar-sidebox_header_today {
+#calendar-sidebox_date .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
+  right: 2px;
+}
+#calendar-sidebox_date .ui-datepicker-year {
+  padding-right: 15px !important;
+}
+#calendar-sidebox_date #calendar-sidebox_header_today {
   background-image: url(images/today.png);
 }
 #calendar_cat_id,

calendar/templates/pixelegg/app.less

@@ -1341,7 +1341,7 @@ div#calendar-container {
 #calendar-sidebox_date {
 
 	.ui-widget-header {
-		background: transparent;
+		background-color: transparent;
 	}
 	.ui-widget-content, .ui-state-default, #calendar-sidebox_date .ui-state-hover {
 		border: none;
@@ -1351,16 +1351,28 @@ div#calendar-container {
 	.ui-datepicker td {
 		padding: 0px
 	}
+	.ui-datepicker-header .ui-state-hover {
+		background-color: transparent;
+		border: none;
+		top: 2px;
+		box-shadow: none;
+	}
 	.ui-datepicker-today {
 		background-color: @egw_color_1;
 	}
-	.ui-widget-content .ui-state-hover {
+	.ui-datepicker-calendar .ui-state-hover {
 		background-color: @color_hover_row;
 	}
+	.ui-datepicker-header .ui-datepicker-next.ui-state-hover  {
+		right: 2px;
+	}
+	.ui-datepicker-year {
+		padding-right: 15px !important;
 	}
 	#calendar-sidebox_header_today {
 		background-image: url(images/today.png);
 	}	
+}
 // Select Fields in Sidemenu
 #calendar_cat_id,
 #calendar_filter,