From f05a777215043d538741f5de9d0a16a8482872ba Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Mon, 24 Aug 2015 17:28:19 +0000 Subject: [PATCH] Calendar bugs - Add loading spinner when changing (resize) an event - If user changes the month using the sidebox calendar, switch to month view for that month - Mark holidays on the sidebox calendar - Change cursor over sidebox week number to match cursor over days --- calendar/js/app.js | 83 ++++++++++++++++++++-------- calendar/templates/default/app.css | 9 +++ calendar/templates/pixelegg/app.css | 14 ++++- calendar/templates/pixelegg/app.less | 4 +- 4 files changed, 84 insertions(+), 26 deletions(-) diff --git a/calendar/js/app.js b/calendar/js/app.js index 9475e0807d..f4d7ab7014 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -558,9 +558,13 @@ app.classes.calendar = AppJS.extend( */ event_change: function(event, widget, dialog_button) { + // Add loading spinner - not visible if the body / gradient is there though + widget.div.addClass('loading'); egw().json( 'calendar.calendar_uiforms.ajax_moveEvent', - [widget.options.value.id, widget.options.value.owner, widget.options.value.start, widget.options.value.owner, widget.options.value.duration] + [widget.options.value.id, widget.options.value.owner, widget.options.value.start, widget.options.value.owner, widget.options.value.duration], + // Remove loading spinner + function() {widget.div.removeClass('loading');} ).sendRequest(true); }, @@ -2258,31 +2262,62 @@ app.classes.calendar = AppJS.extend( if(date) { date.input_date.datepicker("option", { - showButtonPanel: false - // TODO: We could include tooltips for holidays + showButtonPanel: false, + onChangeMonthYear: function(year, month, inst) + { + // Switch to month view for that month + var date = new Date(app.calendar.state.date); + date.setUTCDate(1); + date.setFullYear(year); + date.setUTCMonth(month-1); + app.calendar.update_state({ + view: 'month', + date: date + }) + }, + // Mark holidays + beforeShowDay: function (date) + { + var holidays = et2_calendar_daycol.get_holidays({day_class_holiday: function() {}}, date.getFullYear()); + var day_holidays = holidays[''+date.getUTCFullYear() + + sprintf("%02d",date.getUTCMonth()+1) + + sprintf("%02d",date.getUTCDate())]; + var css_class = ''; + var tooltip = ''; + if(typeof day_holidays !== 'undefined' && day_holidays.length) + { + for(var i = 0; i < day_holidays.length; i++) + { + if (typeof day_holidays[i]['birthyear'] !== 'undefined') + { + css_class +='calendar_calBirthday '; + } + else + { + css_class += 'calendar_calHoliday '; + } + tooltip += day_holidays[i]['name'] + "\n"; + } + } + return [true, css_class, tooltip]; + } }); + + // Clickable week numbers + date.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() { + $j(this).siblings().find('a').removeClass('ui-state-hover'); + }) + .on('click', '.ui-datepicker-week-col', function() { + // Fake a click event on the first day to get the updated date + $j(this).next().click(); + + // Set to week view + app.calendar.update_state({view: 'week', date: date.getValue()}); + }); } - // Show / Hide weekends based on preference of weekends should be shown - egw.css('#'+date.input_date.attr('id') + ' .ui-datepicker-week-end', - egw.preference('days_in_weekview', 'calendar') === "5" ? 'display: none;' : 'display: table-cell;' - ); - - - // Clickable week numbers - date.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() { - $j(this).siblings().find('a').removeClass('ui-state-hover'); - }) - .on('click', '.ui-datepicker-week-col', function() { - // Fake a click event on the first day to get the updated date - $j(this).next().click(); - - // Set to week view - app.calendar.update_state({view: 'week', date: date.getValue()}); - }); - }, /** diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index ecd8e95319..f2d79870d0 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -25,6 +25,15 @@ #calendar-sidebox_buttons tbody { width: 100%; } +#calendar-sidebox_date td.ui-datepicker-week-col { + cursor: pointer; +} +#calendar-sidebox_date .calendar_calHoliday { + background: inherit; +} +#calendar-sidebox_date .calendar_calHoliday a { + background-color: #dac0c0; +} #calendar-todo { float: right; diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 8e8fa52895..123ce35d9d 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -11,7 +11,7 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 53324 2015-08-06 17:14:20Z nathangray $ */ +/* $Id: app.css 53347 2015-08-11 15:35:54Z nathangray $ */ /*Media print classes*/ @media print { .th td, @@ -38,6 +38,15 @@ #calendar-sidebox_buttons tbody { width: 100%; } +#calendar-sidebox_date td.ui-datepicker-week-col { + cursor: pointer; +} +#calendar-sidebox_date .calendar_calHoliday { + background: inherit; +} +#calendar-sidebox_date .calendar_calHoliday a { + background-color: #dac0c0; +} #calendar-todo { float: right; width: 30%; @@ -2276,6 +2285,9 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar_merge { font-size: 11px; } +#calendar-sidebox_date .calendar_calHoliday a { + background-color: #679fd2; +} #uical_select_owner { margin: 9px 0 9px; } diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 7ca4233260..66effb8b3f 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -1531,7 +1531,9 @@ div#calendar-container { #calendar_merge{ font-size: 11px; } - +#calendar-sidebox_date .calendar_calHoliday a { + background-color: @egw_color_2_e; +} // Owner #uical_select_owner {margin: 9px 0 9px;}