Sidebox calendar changes

- Move Today button, add Month button
- Calendar header no longer immediately changes main view

calendar/js/app.js

@@ -2736,36 +2736,21 @@ app.classes.calendar = AppJS.extend(
 	_setup_sidebox_filters: function()
 	{
 		// Further date customizations
-		var date = this.sidebox_et2.getWidgetById('date');
+		var date_widget = this.sidebox_et2.getWidgetById('date');
-		if(date)
+		if(date_widget)
 		{
-			var datepicker = date.input_date.datepicker("option", {
+			var datepicker = date_widget.input_date.datepicker("option", {
 				showButtonPanel:	false,
 				onChangeMonthYear:	function(year, month, inst)
 				{
-					// Switch to month view for that month
+					// Update month button label
-					var date = new Date(app.calendar.state.date);
+					var month_button = date_widget.getRoot().getWidgetById('header_month');
-					date.setUTCDate(1);
+					if(month_button)
-					date.setFullYear(year);
-					date.setUTCMonth(month-1);
-					// Use toJSON() to get UTC, not browser timezone
-					var state = {date: date.toJSON()};
-					if(app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view) >= 0)
 					{
-						state.view = 'month';
+						var temp_date = new Date(year, month-1, 1);
+						//temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset());
+						month_button.set_label(egw.lang(date('F',temp_date)));
 					}
-					else if (app.calendar.state.view == 'planner')
-					{
-						state.planner_days = 0;
-						state.last = false;
-					}
-					else if (app.calendar.state.view == 'listview')
-					{
-						var d = app.calendar.View.end_date.call(this,state);
-						d = new Date(d.getFullYear(),d.getUTCMonth() + 1, 0);
-						state.end_date = d;
-					}
-					app.calendar.update_state(state);
 				},
 				// Mark holidays
 				beforeShowDay: function (date)
@@ -2802,7 +2787,7 @@ app.classes.calendar = AppJS.extend(
 			});
 
 			// Clickable week numbers
-			date.input_date.on('mouseenter','.ui-datepicker-week-col', function() {
+			date_widget.input_date.on('mouseenter','.ui-datepicker-week-col', function() {
 					$j(this).siblings().find('a').addClass('ui-state-hover');
 				})
 				.on('mouseleave','.ui-datepicker-week-col', function() {
@@ -2833,36 +2818,23 @@ app.classes.calendar = AppJS.extend(
 					}
 				});
 				
-			// Today
+			// Set month button label
-			var today = et2_createWidget('buttononly', {image: 'calendar/today', label: 'Today', id: 'today'},date);
+			var month_button = date_widget.getRoot().getWidgetById('header_month');
-			today.set_image('calendar/today');
+			if(month_button)
-			today.set_label(egw.lang('Today'));
+			{
-			var today_button = $j(today.getDOMNode());
+				var temp_date = new Date(date_widget.get_value());
-			today_button
+				temp_date.setUTCMinutes(temp_date.getUTCMinutes() + temp_date.getTimezoneOffset());
-				.prependTo(date.getDOMNode())
+				month_button.set_label(egw.lang(date('F',temp_date)));
-				.addClass('et2_clickable')
+			}
-				.on('click', function() {
-					var tempDate = new Date();
-					var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
-					app.calendar.update_state({date: today.toJSON()});
-				});
-			var position_today = function() {
-				var week_col = $j('#calendar-sidebox_date th.ui-datepicker-week-col');
-				today_button.position({my: 'left top', at: 'left top', of: week_col,collision:'none'})
-					.outerHeight(week_col.outerHeight());
-			};
 			
 			// Dynamic resize to fill sidebox
 			var preferred_width = $j('#calendar-sidebox_date .ui-datepicker-inline').outerWidth();
-			var temp = $j('<div></div>').appendTo(today_button);
+			var font_ratio = parseFloat(month_button.btn.css('font-size')) / parseFloat($j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size'));
-			var font_ratio = parseFloat(temp.css('font-size')) / parseFloat($j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size'));
-			temp.remove();
 
 			$j(window).on('resize.calendar'+date.dom_id, function() {
-				var percent = 1+(($j(date.getDOMNode()).width() - preferred_width) / preferred_width);
+				var percent = 1+(($j(date_widget.getDOMNode()).width() - preferred_width) / preferred_width);
 				percent *= font_ratio;
 				$j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size',(percent*100)+'%');
-				position_today();
 			}).trigger('resize');
 			
 		}

calendar/templates/default/app.css

@@ -33,16 +33,15 @@
 #calendar-sidebox_buttons tbody {
 	width: 100%;
 }
+#calendar-sidebox_date_header > button {
+	width: 45%;
+}
 #calendar-sidebox_weekend {
 	/* Special css styling goes here */
 }
 #calendar-sidebox_date td.ui-datepicker-week-col {
 	cursor: pointer;
 }
-#calendar-sidebox_date img.et2_button {
-	position: absolute;
-	padding: 4px;
-}
 #calendar-sidebox_date .calendar_calHoliday {
 	background: inherit;
 }

calendar/templates/default/sidebox.xet

@@ -39,6 +39,12 @@ Egroupware
 			</grid>
 			<select id="view" class="et2_fullWidth" onchange="app.calendar.update_state(JSON.parse(widget.getValue()));"/>
 			<textbox id="keywords" class="et2_fullWidth" blur="Search" onchange="app.calendar.update_state({view: 'listview',keywords: widget.getValue()});"/>
+			<hbox id="date_header" class="et2_fullWidth">
+				<buttononly id="header_today" label="Today" onclick="var tempDate = new Date();
+					var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
+					app.calendar.update_state({date: today.toJSON()});return false;"/>
+				<buttononly id="header_month" label="Month" onclick="app.calendar.update_state({view:'month'});" />
+			</hbox>
 			<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]}; app.calendar.update_state(update);"/>

calendar/templates/pixelegg/app.css

@@ -1,3 +1,4 @@
+@import "../default/app.css";
 /**
  * EGroupware: CSS with less preprocessor
  *
@@ -11,7 +12,6 @@
  * @package calendar
  * @version $Id$
  */
-@import "../default/app.css";
 /*generell*/
 .egw_fw_content_browser_iframe img[src$="svg"] {
   background-color: #828282 !important;

calendar/templates/pixelegg/app.less

@@ -17,7 +17,6 @@
 @import (reference) "../default/app.css";
 
 
-
 /*generell*/
 
 // makes svg visible