diff --git a/calendar/inc/class.calendar_ui.inc.php b/calendar/inc/class.calendar_ui.inc.php index ad6252875c..0b4b1ec94e 100644 --- a/calendar/inc/class.calendar_ui.inc.php +++ b/calendar/inc/class.calendar_ui.inc.php @@ -317,7 +317,11 @@ class calendar_ui else // change only the owners of the given type { $res_type = is_numeric($set_owners[0]) ? false : $set_owners[0][0]; - $owners = explode(',',$states['owner'] ? $states['owner'] : $default); + $owners = $states['owner'] ? $states['owner'] : $default; + if(!is_array($owners)) + { + $owners = explode(',',$owners); + } foreach($owners as $key => $owner) { if (!$res_type && is_numeric($owner) || $res_type && $owner[0] == $res_type) diff --git a/calendar/js/app.js b/calendar/js/app.js index 7336701eb6..4a4a7fd30d 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -1304,19 +1304,20 @@ app.classes.calendar = AppJS.extend( { for(var s in _set) { - if(cachable_changes.indexOf(s) === -1) - { - // Expire daywise cache - var daywise = egw.dataKnownUIDs(app.classes.calendar.DAYWISE_CACHE_ID); - for(var i = 0; i < daywise.length; i++) - { - egw.dataDeleteUID(app.classes.calendar.DAYWISE_CACHE_ID + '::' + daywise[i]); - } - } if (new_state[s] !== _set[s]) { changed.push(s + ': ' + new_state[s] + ' -> ' + _set[s]); new_state[s] = _set[s]; + + if(cachable_changes.indexOf(s) === -1) + { + // Expire daywise cache + var daywise = egw.dataKnownUIDs(app.classes.calendar.DAYWISE_CACHE_ID); + for(var i = 0; i < daywise.length; i++) + { + egw.dataDeleteUID(app.classes.calendar.DAYWISE_CACHE_ID + '::' + daywise[i]); + } + } } } } @@ -2599,7 +2600,7 @@ jQuery.extend(app.classes.calendar,{ views: { day: app.classes.calendar.prototype.View.extend({ header: function(state) { - return egw.lang('Day view') + ': ' + app.calendar.View.header.call(this, state); + return app.calendar.egw.lang('Dayview') + ': ' + app.calendar.View.header.call(this, state); }, etemplates: ['calendar.view','calendar.todo'], start_date: function(state) { @@ -2621,7 +2622,7 @@ jQuery.extend(app.classes.calendar,{ }), day4: app.classes.calendar.prototype.View.extend({ header: function(state) { - return egw.lang('Four days view') + ': ' + app.calendar.View.header.call(this, state); + return app.calendar.egw.lang('Four days view') + ': ' + app.calendar.View.header.call(this, state); }, end_date: function(state) { var d = app.calendar.View.end_date.call(this,state); @@ -2645,7 +2646,7 @@ jQuery.extend(app.classes.calendar,{ week: app.classes.calendar.prototype.View.extend({ header: function(state) { var formatDate = new Date(state.first); - return egw.lang('Week view') + ': ' + egw.lang('Week') + ' ' + + return app.calendar.egw.lang('Weekview') + ': ' + app.calendar.egw.lang('Week') + ' ' + app.calendar.date.week_number(state.first) + ': ' + app.calendar.date.long_date(state.first, state.last) }, @@ -2669,7 +2670,7 @@ jQuery.extend(app.classes.calendar,{ }), weekN: app.classes.calendar.prototype.View.extend({ header: function(state) { - return egw.lang('Week') + ' ' + + return app.calendar.egw.lang('Week') + ' ' + app.calendar.date.week_number(state.first) + ' - ' + app.calendar.date.week_number(state.last) + ': ' + app.calendar.date.long_date(state.first, state.last) @@ -2694,7 +2695,7 @@ jQuery.extend(app.classes.calendar,{ { var formatDate = new Date(state.date); formatDate = new Date(formatDate.valueOf() + formatDate.getTimezoneOffset() * 60 * 1000); - return egw.lang('Month view') + ':' + egw.lang(date('F',formatDate)) + ' ' + date('Y',formatDate); + return app.calendar.egw.lang('Monthview') + ':' + app.calendar.egw.lang(date('F',formatDate)) + ' ' + date('Y',formatDate); }, start_date: function(state) { var d = app.calendar.View.start_date.call(this,state); @@ -2732,7 +2733,8 @@ jQuery.extend(app.classes.calendar,{ var endDate = new Date(state.last); endDate = new Date(endDate.valueOf() + endDate.getTimezoneOffset() * 60 * 1000); - return egw.lang('Planner view') + ': ' + date(egw.preference('dateformat'),startDate) + + var title = state.sortby == 'user' ? 'planner by user' : state.sortby=='month' ? 'yearly planner' : 'planner by category'; + return app.calendar.egw.lang(title) + ': ' + date(egw.preference('dateformat'),startDate) + (startDate == endDate ? '' : ' - ' + date(egw.preference('dateformat'),endDate)); }, etemplates: ['calendar.planner'], @@ -2820,7 +2822,7 @@ jQuery.extend(app.classes.calendar,{ }), listview: app.classes.calendar.prototype.View.extend({ - header: function() {return egw.lang('List view');}, + header: function() {return app.calendar.egw.lang('Listview');}, etemplates: ['calendar.list'] }) }} diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index 290c321ec7..57a23144a1 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -65,8 +65,11 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea this.div = $j(document.createElement("div")) .addClass("calendar_calDayCol") .css('width',this.options.width); - this.title = $j(document.createElement('div')) + this.header = $j(document.createElement('div')) + .addClass("calendar_calDayColHeader") .appendTo(this.div); + this.title = $j(document.createElement('div')) + .appendTo(this.header); this.setDOMNode(this.div[0]); @@ -80,7 +83,6 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea wd_start: 60*9, wd_end: 60*17, granularity: 30, - extraRows: 2, rowsToDisplay: 10, rowHeight: 20, // Percentage; not yet available @@ -105,8 +107,10 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea destroy: function() { this._super.apply(this, arguments); this.div.off(); + this.header.off().remove(); this.title.off(); this.div = null; + this.header = null; this.title = null; // date_helper has no parent, so we must explicitly remove it @@ -129,15 +133,16 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea this.display_settings.wd_start = 60*this._parent.options.day_start; this.display_settings.wd_end = 60*this._parent.options.day_end; this.display_settings.granularity = this._parent.options.granularity; - this.display_settings.extraRows = this._parent.options.extra_rows; + this._parent.dayHeader.append(this.header); } - this.display_settings.rowsToDisplay = ((this.display_settings.wd_end - this.display_settings.wd_start)/this.display_settings.granularity)+2+2*this.display_settings.extraRows; + this.header.css('left', this.div.css('left')); + this.display_settings.rowsToDisplay = ((this.display_settings.wd_end - this.display_settings.wd_start)/this.display_settings.granularity); this.display_settings.rowHeight= (100/this.display_settings.rowsToDisplay).toFixed(1); this.display_settings.titleHeight = (this.title.height()/this.div.height())*100; // adding divs to click on for each row / time-span - for(var t =this.display_settings.wd_start,i = 1+this.display_settings.extraRows; t <= this.display_settings.wd_end; t += this.display_settings.granularity,++i) + for(var t = 0,i = 1; t < 1440; t += this.display_settings.granularity,++i) { var linkData = { 'menuaction':'calendar.calendar_uiforms.edit', @@ -150,7 +155,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea var droppableDateTime = linkData['date'] + "T" + linkData['hour'] + linkData['minute']; var droppableID='drop_'+droppableDateTime+'_O'+(this.options.owner<0?'group'+Math.abs(this.options.owner):this.options.owner); - var hour = jQuery('
') + var hour = jQuery('
') .attr('data-date',linkData.date) .attr('data-hour',linkData.hour) .attr('data-minute',linkData.minute) @@ -206,7 +211,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea var date_string = this._parent._children.length === 1 ? app.calendar.date.long_date(formatDate,false, false, true) : jQuery.datepicker.formatDate('DD dd',formatDate); - this.title.text(date_string); + this.title.text(date_string) + .attr("data-date", new_date); // Avoid redrawing if date is the same if(new_date === this.options.date && !force_redraw) @@ -221,8 +227,6 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea this.options.date = new_date; - this.div.attr("data-date", this.options.date); - // Set holiday and today classes this.day_class_holiday(); @@ -290,6 +294,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea },this,this.getInstanceManager().execId,this.id); }, + set_left: function(left) { + this.div.css('left',left); + this.header.css('left',left); + }, + set_width: function(width) { + this._super.apply(this, arguments); + this.header.width(width); + }, + /** * Applies class for today, and any holidays for current day */ @@ -297,12 +310,13 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea // Remove all classes this.title.removeClass() // Except this one... - .addClass("et2_clickable calendar_calDayColHeader et2_link"); + .addClass("et2_clickable et2_link"); + this.header.removeClass('calendar_calBirthday calendar_calHoliday'); // Set today class - note +1 when dealing with today, as months in JS are 0-11 var today = new Date(); - this.title.toggleClass("calendar_calToday", this.options.date === ''+today.getUTCFullYear()+ + this.header.toggleClass("calendar_calToday", this.options.date === ''+today.getUTCFullYear()+ sprintf("%02d",today.getUTCMonth()+1)+ sprintf("%02d",today.getUTCDate()) ); @@ -317,7 +331,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea { if (typeof holidays[i]['birthyear'] !== 'undefined') { - this.title.addClass('calendar_calBirthday'); + this.header.addClass('calendar_calBirthday'); //If the birthdays are already displayed as event, don't //show them in the caption @@ -328,8 +342,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea } else { - this.title.addClass('calendar_calHoliday'); - this.title.attr('data-holiday', holidays[i]['name']); + this.header.addClass('calendar_calHoliday'); + this.header.attr('data-holiday', holidays[i]['name']); //If the birthdays are already displayed as event, don't //show them in the caption @@ -340,7 +354,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea } } } - this.title.attr('title', holiday_list.join(',')); + this.header.attr('title', holiday_list.join(',')); }, /** @@ -509,8 +523,10 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea var height = 0; if(columns[c][i].options.value.whole_day_on_top) { - top = this.display_settings.titleHeight + this.display_settings.rowHeight*whole_day_counter++; - height = this.display_settings.rowHeight; + columns[c][i].div + .appendTo(this.header) + .css('position', 'relative'); + continue; } else { @@ -539,7 +555,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea /** * Calculates the vertical position based on the time * - * workday start- and end-time, is taken into account, as well as timeGrids px_m - minutes per pixel param + * This calculation is a percentage from 00:00 to 23:59 * * @param {int} time in minutes from midnight * @param {int} [row_offset=0] Add extra spacing for additional rows @@ -553,21 +569,9 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea row_offset = 0; } - // time before workday => condensed in the first $this->extraRows rows - if (this.display_settings.wd_start > 0 && time < this.display_settings.wd_start) - { - pos = this.display_settings.titleHeight + (row_offset + (time / this.display_settings.wd_start )) * this.display_settings.rowHeight; - } - // time after workday => condensed in the last row - else if (this.display_settings.wd_end < 24*60 && time > this.display_settings.wd_end+1*this.display_settings.granularity) - { - pos = 100 - (row_offset * this.display_settings.rowHeight * (1 - (time - this.display_settings.wd_end) / (24*60 - this.display_settings.wd_end))); - } - // time during the workday => 2. row on (= + granularity) - else - { - pos = this.display_settings.rowHeight * (1+this.display_settings.extraRows+(time-this.display_settings.wd_start)/this.display_settings.granularity); - } + // 24h + pos = ((time / 60) / 24) * 100 + pos = pos.toFixed(1) return pos; @@ -600,9 +604,10 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea * @param {Event} _ev * @returns {boolean} */ - click: function(_ev) { - - if($j(_ev.target).hasClass('calendar_calDayColHeader')) + click: function(_ev) + { + // Click on the title + if(this.title.is(_ev.target)) { this._parent.set_start_date(this.date); this._parent.set_end_date(this.date); diff --git a/calendar/js/et2_widget_planner.js b/calendar/js/et2_widget_planner.js index e281620539..9f2d472f3d 100644 --- a/calendar/js/et2_widget_planner.js +++ b/calendar/js/et2_widget_planner.js @@ -418,7 +418,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize for(var i = 0; i < 12; i++) { // Not using UTC because we corrected for timezone offset - labels.push({id: d.getFullYear() +'-'+d.getMonth(), label:egw.lang(date('F',d))+' '+d.getFullYear()}); + labels.push({id: d.getFullYear() +'-'+d.getMonth(), label:app.calendar.egw.lang(date('F',d))+' '+d.getFullYear()}); d.setMonth(d.getMonth()+1); } return labels; @@ -461,6 +461,10 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize if(labels[i].id == key) { label_index = i; + if(typeof rows[label_index] === 'undefined') + { + rows[label_index] = []; + } break; } } @@ -725,8 +729,8 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize var end = new Date(this.options.end_date); end = new Date(end.valueOf() + end.getTimezoneOffset() * 60 * 1000); - var title = egw.lang(date('F',start))+' '+date('Y',start)+' - '+ - egw.lang(date('F',end))+' '+date('Y',end); + var title = app.calendar.egw.lang(date('F',start))+' '+date('Y',start)+' - '+ + app.calendar.egw.lang(date('F',end))+' '+date('Y',end); // calculate date for navigation links var time = new Date(start); @@ -790,7 +794,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize } if (days_in_month > 5) { - var title = 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) { @@ -857,7 +861,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize var t = new Date(start); for(var left = 0,i = 0; i < days; t.setUTCDate(t.getUTCDate() + 7),left += week_width,i += 7) { - var title = egw.lang('Week')+' '+app.calendar.date.week_number(t); + var title = app.calendar.egw.lang('Week')+' '+app.calendar.date.week_number(t); state = new Date(t.valueOf() - start.getTimezoneOffset() * 60 * 1000).toJSON(); if (days <= 7) @@ -907,15 +911,15 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize if (days <= 3) { - title = egw.lang(date('l',t))+', '+date('j',t)+'. '+egw.lang(date('F',t)); + title = app.calendar.egw.lang(date('l',t))+', '+date('j',t)+'. '+app.calendar.egw.lang(date('F',t)); } else if (days <= 7) { - title = egw.lang(date('l',t))+' '+date('j',t); + title = app.calendar.egw.lang(date('l',t))+' '+date('j',t); } else { - title = egw.lang(date('D',t)).substr(0,2)+'
'+date('j',t); + title = app.calendar.egw.lang(date('D',t)).substr(0,2)+'
'+date('j',t); } state = new Date(t.valueOf() - start.getTimezoneOffset() * 60 * 1000).toJSON(); if (days < 5) diff --git a/calendar/js/et2_widget_timegrid.js b/calendar/js/et2_widget_timegrid.js index af078aa05d..5706aa959b 100644 --- a/calendar/js/et2_widget_timegrid.js +++ b/calendar/js/et2_widget_timegrid.js @@ -65,12 +65,6 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz default: parseInt(egw.preference('interval','calendar')) || 30, description: "How many minutes per row" }, - extra_rows: { - name: "Extra rows", - type: "integer", - default: 2, - description: "Extra rows above and below the workday" - }, owner: { name: "Owner", type: "any", // Integer, or array of integers @@ -107,15 +101,22 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz .addClass("calendar_calTimeGrid") .addClass("calendar_TimeGridNoLabel"); - // Contains times / rows + // Headers this.gridHeader = $j(document.createElement("div")) .addClass("calendar_calGridHeader et2_link") .appendTo(this.div); + this.dayHeader = $j(document.createElement("div")) + .appendTo(this.gridHeader); + // Contains times / rows + this.scrolling = $j(document.createElement('div')) + .addClass("calendar_calTimeGridScroll") + .appendTo(this.div); + // Contains days / columns this.days = $j(document.createElement("div")) .addClass("calendar_calDayCols") - .appendTo(this.div); + .appendTo(this.scrolling); // Used for its date calculations this.date_helper = et2_createWidget('date',{},null); @@ -157,7 +158,9 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz this.div.off(); this.div = null; this.gridHeader = null; + this.dayHeader = null; this.days = null; + this.scrolling = null; this._labelContainer = null; // date_helper has no parent, so we must explicitly remove it @@ -173,6 +176,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz doLoadingFinished: function() { this._super.apply(this, arguments); + + // Need to get the correct internal sizing + this.resize(); + this._drawGrid(); // Actions may be set on a parent, so we need to explicitly get in here @@ -198,7 +205,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz $j(this).resizable ({ distance: 10, - grid: [10000,10], + // Grid matching preference + grid: [10000,timegrid.rowHeight], autoHide: false, handles: 's,se', containment:'parent', @@ -252,6 +260,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz { event_widget._parent.position_event(event_widget); } + timegrid.div.children('.drop-hover').removeClass('.drop-hover'); }, /** @@ -263,7 +272,11 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz resize:function(event, ui) { // Add 5px to make sure it doesn't land right on the edge of a div - timegrid._drag_helper(this,ui.element[0],ui.helper.outerHeight()+5); + var drop = timegrid._drag_helper(this,ui.element[0],ui.helper.outerHeight()+5); + if(drop && !drop.is(':visible')) + { + drop.get(0).scrollIntoView(false); + } } }); }); @@ -294,6 +307,17 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz if (typeof element.dropEnd != 'undefined' && element.dropEnd.length) { element.dropEnd.addClass("drop-hover"); + + // Make sure the target is visible in the scrollable day + var scrollto = element.dropEnd.next() ? element.dropEnd.next() : element.dropEnd; + if(this.scrolling.height() + this.scrolling.scrollTop() < scrollto[0].offsetTop+scrollto.height() ) + { + scrollto.get(0).scrollIntoView(false); + } + else if(element.dropEnd[0].offsetTop < this.scrolling[0].scrollTop) + { + element.dropEnd.get(0).scrollIntoView(true); + } var time = jQuery.datepicker.formatTime( egw.preference("timeformat") == 12 ? "h:mmtt" : "HH:mm", { @@ -463,7 +487,6 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz this._drawTimes(); // Draw in the vertical - the days - this.div.append(this.days); this.invalidate(); }, @@ -478,24 +501,28 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz var wd_end = 60*this.options.day_end; var granularity = this.options.granularity; var totalDisplayMinutes = wd_end - wd_start; - var rowsToDisplay = (totalDisplayMinutes/granularity)+2+2*this.options.extra_rows; + var rowsToDisplay = (totalDisplayMinutes/granularity); + // Percent var rowHeight = (100/rowsToDisplay).toFixed(1); + // Pixels this.rowHeight = this.div.height() / rowsToDisplay; - // ensure a minimum height of each row - if (this.options.height < (rowsToDisplay+1) * 12) - { - this.options.height = (rowsToDisplay+1) * 12; - } - this.gridHeader - .css('height', rowHeight+'%') - .text(this.options.label) + .empty() + .css('height', this.rowHeight+'px') .attr('data-date', this.options.start_date) .attr('data-owner', this.options.owner) + .append(this.options.label) .append(this.owner.getDOMNode()) + .append(this.dayHeader) .appendTo(this.div); + this.scrolling + .css('top', this.rowHeight+'px') + .css('height', (this.options.height - this.rowHeight)+'px') + .appendTo(this.div) + .empty(); + // the hour rows var show = { 5 : [0,15,30,45], @@ -504,9 +531,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz 45 : [0,15,30,45] }; var html = ''; - for(var t = wd_start,i = 1+this.options.extra_rows; t <= wd_end; t += granularity,++i) + this._top_time = 0 + for(var t = 0,i = 0; t < 1440; t += granularity,++i) { - html += '
'; + html += '
'; // show time for full hours, always for 45min interval and at least on every 3 row var time = jQuery.datepicker.formatTime( egw.preference("timeformat") == 12 ? "h:mmtt" : "HH:mm", @@ -518,11 +546,22 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz }, {"ampm": (egw.preference("timeformat") == "12")} ); + if(t <= wd_start && t + granularity > wd_start) + { + this._top_time = this.rowHeight * (i+1+(wd_start - (t+granularity))/granularity) + } var time_label = (typeof show[granularity] === 'undefined' ? t % 60 === 0 : show[granularity].indexOf(t % 60) !== -1) ? time : ''; html += '
'+time_label+"
\n"; } - this.div.append(html); + + // Set heights in pixels for scrolling + this.scrolling + .append('
' + html + '
'); + this.days.css('height', (this.rowHeight*i)+'px'); + + // Scroll to start of day + this.scrolling.scrollTop(this._top_time); }, /** @@ -531,6 +570,8 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz * widgets. Existing widgets are recycled rather than discarded. */ _drawDays: function() { + this.scrolling.append(this.days); + // If day list is still empty, recalculate it from start & end date if(this.day_list.length === 0) { @@ -568,37 +609,22 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz for(var i = 0; i < this.day_list.length; i++) { day = this.day_widgets[i]; - // Set the date, and pass any data we have - /* Not needed due to registered callbacks (?) - if(typeof this.value[this.day_list[i]] === 'undefined') - { - var ids = (egw.dataGetUIDdata(app.classes.calendar._daywise_cache_id(this.day_list[i],this.options.owner))||{data:[]}); - if(ids.data.length > 0) - { - this.value[this.day_list[i]] = []; - } - for(var j = 0; j < ids.data.length; j++) - { - if(egw.dataHasUID('calendar::'+ids.data[j])) - { - this.value[this.day_list[i]].push(egw.dataGetUIDdata('calendar::'+ids.data[j]).data); - } - } - } - */ - + + // Position + day.set_left(((100/this.day_list.length).toFixed(2) * i) + '%'); + day.set_date(this.day_list[i], this.value[this.day_list[i]] || false); day.set_owner(this.options.owner); day.set_id(this.day_list[i]); day.set_width((100/this.day_list.length).toFixed(2) + '%'); - - // Position - $j(day.getDOMNode()).css('left', ((100/this.day_list.length).toFixed(2) * i) + '%'); } // Don't hold on to value any longer, use the data cache for best info this.value = {}; + // Scroll to start of day + this.scrolling.scrollTop(this._top_time); + // TODO: Figure out how to do this with detached nodes /* var nodes = this.day_col.getDetachedNodes(); @@ -1089,7 +1115,10 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz set_label: function(label) { this.options.label = label; - this.gridHeader.text(label); + this.gridHeader.contents().filter(function() { + return (this.nodeType == 3); + }).remove(); + this.gridHeader.append(label); // If it's a short label (eg week number), don't give it an extra line // but is empty, but give extra space for a single owner name @@ -1203,7 +1232,7 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz var result = true; // Is this click in the event stuff, or in the header? - if(this.days.has(_ev.target).length) + if($j(_ev.target).hasClass('.calendar_calEvent') || $j(_ev.target).parents('.calendar_calEvent').length) { // Event came from inside, maybe a calendar event var event = this._get_event_info(_ev.originalEvent.target); @@ -1228,6 +1257,18 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz { app.calendar.update_state(jQuery.extend({view: 'week'},_ev.target.dataset)); } + else if (this.dayHeader.has(_ev.target).length) + { + // Click on a day header - let day deal with it + // First child is a selectAccount + for(var i = 1; i < this._children.length; i++) + { + if(this._children[i].header && this._children[i].header.has(_ev.target).length) + { + return this._children[i].click(_ev); + } + } + } else if (_ev.target.dataset.date) { // Default handler to open a new event at the selected time @@ -1304,10 +1345,31 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz }, // Resizable interface - resize: function (_height) + resize: function () { - this.options.height = _height; - this.div.css('height', this.options.height); + // We expect the timegrid to be in a table with 0 or more other timegrids, + // 1 per row. We want each timegrid to be as large as possible, but space + // shared equally. Height can't be set to a percentage on the rows, because + // that doesn't work. + + // Find the table + var table = this.div.parentsUntil('table').parent(); + + // How many rows? + var rowCount = table.children('tr').length; + + // Take the whole tab height + this.options.height = Math.floor(Math.min($j(this.getInstanceManager().DOMContainer).height(),$j(this.getInstanceManager().DOMContainer).parent().innerHeight()) / rowCount); + this.options.height = Math.floor((egw.getHiddenDimensions(this.getInstanceManager().DOMContainer).h ) / rowCount); + this.options.height -= 2*((this.div.outerWidth(true) - this.div.innerWidth()) + parseInt(this.div.parent().css('padding-top'))); + + if(this.options.height+"px" != this.div.css('height')) + { + this.div.css('height', this.options.height); + + // Re-do time grid + this._drawGrid() + } } }); et2_register_widget(et2_calendar_timegrid, ["calendar-timegrid"]); \ No newline at end of file diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index fdf7b2e2e2..8e38c4378a 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -136,12 +136,19 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget -moz-user-select: none; -ms-user-select: none; user-select: none; - width: 99%; + overflow: hidden; /* set via inline style on runtime: * height: */ } +.calendar_calTimeGrid .calendar_calTimeGridScroll { + position: absolute; + bottom: 0px; + width: 100%; + overflow-y: auto; + overflow-x: hidden; +} .calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calDayCols { top: 0em; } @@ -150,10 +157,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget top: 0em; } -/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can +/* single row in the time-line you dont need to set a bgcolor, but you can */ .calendar_calTimeRow { - position: absolute; width: 100%; /* set via inline style on runtime: * height: @@ -178,8 +184,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget */ .calendar_calDayCols,.calendar_calDayCols12h,.calendar_calDayColsNoGrid{ position: absolute; - top: 2em; -/* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ + top: 0px; + /* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ height: 100%; left: 45px; right: 0px; @@ -200,14 +206,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calDayCol{ position: absolute; top: 0px; - height: 100%; -/* set via inline style on runtime: + height: 100%;/* set via inline style on runtime: * left: * width: */ - border-left: 1px solid silver; - - /* Nice transition when changing days in a week */ + border-left: 1px solid silver;/* Nice transition when changing days in a week */ -webkit-transition: 0.1s ease-in-out; } /* Calendar Id # @@ -217,7 +220,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /* header for the dayCol */ -.calendar_calDayColHeader,.calendar_calGridHeader{ +.calendar_calDayColHeader,.calendar_calGridHeader,.calendar_calGridHeader > div { position: absolute; top: 0px; left: 0px; @@ -234,6 +237,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calDayColHeader { z-index:30; } +.calendar_calGridHeader > div { + left: 45px; + right: 15px; + width: initial; +} .calendar_calDayColHeader img { vertical-align: middle; } @@ -395,7 +403,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget } .calendar_calAddEvent{ - position: absolute; width: 100%; z-index: 10; } diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index c8733afa56..957f35e5f8 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -1,3 +1,4 @@ +@import "../default/app.css"; /** * EGroupware: CSS with less preprocessor * @@ -11,794 +12,6 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 53642 2015-09-14 15:31:58Z nathangray $ */ -/*Media print classes*/ -@media print { - .th td, - .row_on td, - .row_off td { - border: none !important; - } - img.calendar_print_button { - display: none !important; - } - tr.calendar_print_cat { - border-bottom: 1px solid gray; - } -} -/** - * Sidebox - */ -#calendar-sidebox_owner { - width: 82%; -} -#calendar-sidebox_cat_id { - width: 86%; -} -#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%; -} -/* Header classes */ -tr.dialogHeader td, -tr.dialogHeader2 td, -tr.dialogHeader3 td, -tr.dialogHeader4 td, -tr.dialogOperators td, -.dialogFooterToolbar { - padding: 5px 0 5px 0; - vertical-align: middle; -} -.calendar_inputFullWidth input { - width: 100%; -} -/****************************************************************** - * CSS settings for the day, week and month view (timeGridWidget) * - ******************************************************************/ -/* -Names used in the "graphic" are the css classes from this file. -The function names in class uiviews have the leading cal removed and a trailing Widget added: -e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget method of uiviews. - -+++ calendar_calTimeGrid +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -+ #### calendar_calDayCols[12h|NoGrip] ########################################################### -+ #... calendar_calDayCol ............................. ... calendar_calDayCol .......................... -+ #.+- calendar_calDayColHeader ---------------------+. .+- calendar_calDayColHeader ------------------+. -+ #.| |. .| |. -+ #.+---------------------------------------+. .+------------------------------------+. -+.calendar_calTimeRowTime.#.** calendar_calEventCol ***** ** calendar_calEventCol *****. .** calendar_calEventCol ***********************. -+. .#.* * * *. .* *. -+. .#.* * * *. .* *. -+................#.*+- calendar_calEvent -----+* * *. .* *. -+.calendar_calTimeRowTime.#.*| |* * *. .*+- calendar_calEvent[Private] --------------+*. -+. .#.*| |* *+- calendar_calEvent -----+*. .*| |*. -+. .#.*+----------------+* *| |*. .*| |*. -+................#.* * *| |*. .*| |*. -+.calendar_calTimeRowTime.#.* * *+----------------+*. .*| |*. -+. .#.* * * *. .*+----------------------------------+*. - -*/ -/* custom ui-tooltip style for calendar -*/ -.calendar_uitooltip { - padding: 0px; - position: absolute; - border: none; - max-height: 400px; - z-index: 9999; - max-width: 300px; - -webkit-box-shadow: 0 0 5px; - -moz-box-shadow: 0 0 5px; - box-shadow: 0 0 5px; -} -.calendar_size120b { - font-size: 120%; - font-weight: bold; -} -/* marks a day in the colum-header as today - */ -.calendar_calToday { - background: #ffffcc; -} -.calendar_calWeek { - background: #ffffcc; - width: auto; - margin: 0 auto; - text-align: center; -} -.calendar_calMonth { - background: #ffffcc; - width: auto; - margin: 0 auto; - text-align: center; -} -/* marks a day in the colum-header as holiday - */ -.calendar_calHoliday { - background: #dac0c0; -} -/* marks a day in the column-header additionaly as birthday of some contact, - * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off - */ -.calendar_calBirthday, -.calendar_calBirthday a { - color: black; - font-weight: bold; - font-style: italic; -} -/* timeGridWidget, contains timeRow's and dayCol's - */ -.calendar_calTimeGrid { - position: relative; - top: 0px; - left: 0px; - border: 1px solid silver; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: 99%; - /* set via inline style on runtime: - * height: - */ -} -.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calDayCols { - top: 0em; -} -.calendar_calTimeGrid.calendar_TimeGridNoLabel > .calendar_calGridHeader { - top: 0em; -} -/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can - */ -.calendar_calTimeRow { - position: absolute; - width: 100%; - /* set via inline style on runtime: - * height: - * top: - */ -} -.calendar_calTimeRow:nth-child(odd) { - background-color: rgba(0, 0, 0, 0.01); -} -/* time in a timeRow - */ -.calendar_calTimeRowTime { - padding-left: 5px; - height: 100%; - line-height: 14px; - font-size: 8pt; - text-align: left; -} -/* contains (multiple) dayCol's - */ -.calendar_calDayCols, -.calendar_calDayCols12h, -.calendar_calDayColsNoGrid { - position: absolute; - top: 2em; - /* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ - height: 100%; - left: 45px; - right: 0px; -} -/* 12h timeformat with am/pm - */ -.calendar_calDayCols12h { - left: 65px; -} -/* no time grid --> no time column - */ -.calendar_calDayColsNoTime { - left: 0px; -} -/* contains (multiple) eventCol's - */ -.calendar_calDayCol { - position: absolute; - top: 0px; - height: 100%; - /* set via inline style on runtime: - * left: - * width: - */ - border-left: 1px solid silver; - /* Nice transition when changing days in a week */ - -webkit-transition: 0.1s ease-in-out; -} -/* Calendar Id # -*/ -#calendar-edit_id:before { - content: "#"; -} -/* header for the dayCol - */ -.calendar_calDayColHeader, -.calendar_calGridHeader { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - right: 0px; - /* does not work in IE, but looks better in other browsers then width:100% */ - text-align: center; - font-size: 100%; - white-space: nowrap; - border-bottom: 1px solid silver; - border-right: 1px solid silver; - height: 16px; - line-height: 16px; -} -.calendar_calDayColHeader { - z-index: 30; -} -.calendar_calDayColHeader img { - vertical-align: middle; -} -.calendar_calWeekNavHeader, -.calendar_calMonthNavHeader { - top: 0px; - left: 0px; - width: 100%; - right: 0px; - /* does not work in IE, but looks better in other browsers then width:100% */ - text-align: center; - font-size: 100%; - white-space: nowrap; - border-bottom: 1px solid silver; - border-right: 1px solid silver; - height: 16px; - line-height: 12px; - z-index: 30; -} -.calendar_calWeekNavHeader, -.calendar_calMonthNavHeader img { - vertical-align: middle; -} -.calendar_calViewUserNameBox { - position: absolute; - top: -1px; - width: 95%; - text-align: left; - font-size: 120%; - white-space: nowrap; - border: 1px solid gray; - height: 17px; - left: -1px; - padding-top: 0px; - padding-left: 10px; - background: #dac0c0; -} -.calendar_calViewUserName { - font-weight: normal; -} -.calendar_calViewUserName:first-letter { - text-transform: uppercase; -} -.calendar_calViewUserNameFirst:after { - content: ", "; -} -/* alarm_date widget disabled class -*/ -.calendar_alarm_date_display { - display: none; -} -/*overwirte margin applied by egwGridView*/ -.calendar_alarm_grid { - margin-left: 0 !important; -} -/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) - */ -.calendar_calGridHeader { - text-align: left; - padding-left: 3px; - z-index: 29; -} -#calendar-view_view tbody.ui-sortable { - cursor: default; -} -#calendar-view_view tbody.ui-sortable .calendar_calGridHeader { - cursor: ns-resize; -} -#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader { - cursor: pointer; -} -/* contains (multiple) events's - */ -.calendar_calEventCol { - position: absolute; - top: 0px; - /* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ - height: 100%; - /* set via inline style on runtime: - * left: - * width: - */ -} -/* contains one event: header-row & -body - */ -.calendar_calEvent, -.calendar_calEventPrivate { - position: absolute; - left: 0px; - right: 0px; - overflow: hidden; - z-index: 20; - border-width: 1px; - border-radius: 6px; - border-style: solid; - min-height: 1.2em; - min-width: 5px; - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - /* It is important there are no CSS transitions, it breaks resize */ - -webkit-transition: none; - -moz-transition: none !important; - -o-transition: none !important; - -ms-transition: none !important; - transition: none !important; - /* set via inline style on runtime: - * top: depending on startime - * height: depending on length - * border-color: depending on category - * background: depending on category (shade) - * - * These are defaults: - */ - background-color: #808080; - border-color: #808080; -} -.calendar_calEvent:hover { - cursor: pointer; -} -/** - * User has not accepted the invitation - */ -.calendar_calEventUnknown { - background-color: white !important; -} -/** - * All participants accepted the invitation - */ -.calendar_calEventAllAccepted { - border-style: solid; - border-width: 1px; -} -/** - * All participants answered the invitation, but not all accepted - */ -.calendar_calEventAllAnswered { - border-style: dotted; - border-width: 2px; -} -/** - * Some participants did NOT answer the invitation - */ -.calendar_calEventSomeUnknown { - border-style: dashed; - border-width: 1px; -} -.calendar_calEventTooltip { - border-radius: 6px; - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - max-height: 400px; - overflow: auto; -} -.calendar_calAddEvent { - position: absolute; - width: 100%; - z-index: 10; -} -.calendar_calAddEvent:hover { - background-color: #D2D7FF; - cursor: pointer; -} -/* header-row of the event - */ -.calendar_calEventHeader, -.calendar_calEventHeaderSmall { - position: relative; - /* as the calendar_calEventIcons use postion: absolute! */ - font-weight: bold; - font-size: 9pt; - text-align: left; - left: 0px; - right: 0px; - padding-left: 2px; - min-height: 1em; - /* set via inline style on runtime - * background-color: depending on category - * color: white || black depending on cat; - */ - background-color: #808080; -} -.calendar_calEventHeaderSmall { - font-size: 8pt; - line-height: 10pt; -} -.calendar_calEventIcons { - position: absolute; - right: 0px; - top: 0px; -} -.calendar_calEventIcons img { - height: 16px; -} -.calendar_calEventHeaderSmall .calendar_calEventIcons img { - height: 13px; -} -/* body of the event - */ -.calendar_calEventBody, -.calendar_calEventBodySmall { - padding: 0px 3px 0px; - left: 2px; - right: 2px; - height: 99%; - /* Gradient */ - background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 60%); - background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 60%); - background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 60%); - background-position: 50% 50%; - -webkit-background-origin: padding-box; - background-origin: padding-box; - -webkit-background-clip: border-box; - background-clip: border-box; - -webkit-background-size: auto auto; - background-size: auto auto; -} -.calendar_calEventBodySmall { - font-size: 95%; -} -.calendar_calEventLabel { - font-weight: bold; - font-size: 90%; -} -.calendar_calEventTitle { - font-weight: bold; - font-size: 110%; -} -/* table of the dayView containing 2 cols: 1) day-view, 2) todos -*/ -.calendar_calDayView { - width: 100%; -} -/* calDayTods is the day-view's todo column, containing the calDayTodoHeader and the calDayTodoTable - */ -.calendar_calDayTodos .calendar_calDayTodosHeader { - margin: 0px; - padding: 2px; - font-weight: bold; -} -.calendar_calDayTodos .calendar_calDayTodosTable { - overflow: auto; - max-height: 400px; -} -.calendar_calDayTodos { - width: 98%; - margin-left: 10px; - border: 1px solid silver; -} -.calendar_calDayTodosHeader { - text-align: center; -} -/****************************************************** - * CSS settings for the planner views (calendar_plannerWidget) * - ******************************************************/ -/* calendar_plannerWidget represents the whole planner, consiting of the calendar_plannerHeader and multiple plannerRowWidgets - */ -.calendar_plannerWidget { - position: relative; - top: 0px; - left: 0px; - width: 99.5%; - border: 1px solid gray; - padding-right: 3px; -} -.calendar_plannerWidget:nth-child(odd) { - background-color: #ffffff; -} -.calendar_plannerWidget:nth-child(even) { - background-color: #f2f2f2; -} -/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows - */ -.calendar_plannerHeader { - position: relative; - top: 0px; - left: 0px; - width: 100%; - background-color: #e0e0e0; -} -/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows - */ -.calendar_plannerRowWidget { - position: relative; - top: 0px; - left: 0px; - width: 100%; - min-height: 20px; -} -/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales - */ -.calendar_plannerScale, -.calendar_plannerScaleDay { - position: relative; - top: 0px; - left: 0%; - width: 100%; - height: 20px; - line-height: 20px; -} -.calendar_plannerScaleDay { - height: 28px; - line-height: 14px; -} -.calendar_plannerDayScale, -.calendar_plannerMonthScale, -.calendar_plannerWeekScale, -.calendar_plannerHourScale, -.calendar_plannerDayOfMonthScale { - position: absolute; - top: 0px; - /* left+width: is set by the code on runtime */ - text-align: center; - height: 100%; - border: 1px solid white; - /* set via inline style on runtime: - * left: - * width: - */ -} -.calendar_plannerHourScale { - font-size: 90%; -} -.calendar_plannerDayScale { - font-size: 90%; -} -.calendar_plannerWeekScale { - line-height: 20px; -} -.calendar_plannerMonthScale { - font-weight: bold; -} -.calendar_plannerDayScale img, -.calendar_plannerWeekScale img, -.calendar_plannerMonthScale img, -.calendar_plannerDayOfMonthScale img { - vertical-align: middle; -} -/* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget - */ -.calendar_plannerRowHeader, -.calendar_plannerHeaderTitle { - position: absolute; - top: 0px; - left: 0%; - width: 15%; - /* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */ - height: 100%; - line-height: 20px; - border: 1px solid white; -} -/* calendar_eventRows contain multiple eventRowWidgets - */ -.calendar_eventRows, -.calendar_plannerHeaderRows { - position: relative; - top: 0px; - left: 15%; - /* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */ - width: 85%; - min-height: 20px; - height: 100%; -} -/** - * Filler for month with less then 31 days in yearly planner - */ -.calendar_eventRowsFiller { - position: absolute; - top: 0px; - height: 93%; - background-color: white; - border: 1px dashed gray; - border-right: none; -} -/** - * Weekend or other special days in yearly planner - */ -.calendar_eventRowsMarkedDay { - position: absolute; - top: 0px; - height: 100%; - z-index: 10; -} -.calendar_eventRowsMarkedDay.calendar_weekend { - background-color: #e0e0e0; -} -/* calendar_eventRowWidget contains non-overlapping events - */ -.calendar_eventRowWidget { - position: relative; - top: 0px; - left: 0px; - width: 100%; - height: 20px; - border: 1px solid white; -} -.calendar_plannerEvent, -.calendar_plannerEventPrivate { - position: absolute; - top: 0px; - height: 100%; - overflow: hidden; - z-index: 20; - border: 1px solid black; - min-width: 5px; - /* set via inline style on runtime: - * left: depending on startime - * width: depending on length - * background-color: depending on category - */ -} -.calendar_plannerEvent img, -.calendar_plannerEventPrivate img { - padding-top: 2px; -} -.calendar_plannerEvent:hover { - cursor: pointer; -} -/* Special colors for the year view */ -.calendar_cal_year_legend_weekend { - background-color: #CCCCCC; -} -.calendar_cal_year_legend { - background-color: #EFEFEF; -} -.calendar_cal_year_legend { - background-color: #FFFFCC; - z-index: 0; -} -.calendar_cal_year_weekend { - background-color: #F9F9CC; - z-index: 0; -} -.calendar_cal_year_today { - border-color: #EE0000; - border-width: 2px; -} -/** - * edit series or exception popup used in eventWidget and - * delete series and exceptions popup used in edit event - */ -#dialog-content { - display: block; - height: 100px; - padding: 6px; - color: #666666; - font-size: 13px; - margin: -2px -1px 0px -2px; - width: 410px; -} -/** - * Calendar Drag and Drop - * Class for div to show forbiden drop - */ -.calendar_d-n-d_timeCounter > span { - position: absolute; - background-color: #808080; - color: white; - left: 0; - width: 100% !important; - align: center; - border: dashed white 1px; - border-radius: 1px; -} -.calendar_timeDemo { - position: absolute; - bottom: 0; - left: 0; - background-color: #808080; - color: white; - width: 100%; - min-width: 5em; - align: center; - border: dashed white 1px; - border-radius: 1px; -} -.calendar_d-n-d_forbiden { - background-color: red; - height: 100%; - width: 100%; - text-align: center; -} -/*Class for div to demonstrate dragging time*/ -.calendar_d-n-d_timeCounter { - font-size: 1.1em; - font-weight: bold; - text-align: center; -} -.calendar_d-n-d_timeCounter .loading { - width: 16px; - height: 16px; - position: absolute; - bottom: 0px; - right: 0px; -} -#calendar-edit_action { - width: 10em; - padding-left: 10px; - margin-left: 5px; -} -#calendar-list_undelete_popup, -#calendar-list_delete_popup { - display: none; -} -.calendar_freetime_header { - font-size: 120%; - font-weight: bold; -} -.calendar_freetime_timeframe { - position: relative; -} -.calendar_freetime_dow { - position: absolute; -} -img.calendar_print_button, -img.calendar_print_appicon { - height: 24px; - width: 24px; -} -/*Sortable views*/ -.srotable_cal_wk_ph { - border: 2px dashed gray; - height: 230px; - width: 99%; - background-color: #ece2f7; -} -.srotable_cal_day_ph { - position: relative; - width: 33.333333%; - height: 99%; - border: 2px dashed gray; - background-color: #ece2f7; - display: inline-block; -} -/** - * Home page portlets - */ -.calendar_favorite_portlet .calendar_calMonthNavHeader a img, -.calendar_favorite_portlet .calendar_calWeekNavHeader a img, -.calendar_favorite_portlet .calendar_calDayColHeader a img, -.calendar_favorite_portlet .calendar_plannerScale a img { - display: none; -} -#calendar-edit select#calendar-edit_duration { - width: 133px; -} -#calendar-edit_category { - max-width: 230px; -} -#calendar_sidebox_content .ui-datepicker div.ui-datepicker-buttonpane { - border-top: 0; - margin: 0; - padding-right: 3px; -} /*generell*/ .egw_fw_content_browser_iframe img[src$="svg"] { background-color: #828282 !important; @@ -1480,27 +693,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /* timeGridWidget, contains timeRow's and dayCol's */ .calendar_calTimeGrid { - position: relative; - top: 0px; - left: 0px; border: 1px solid silver; - width: 99%; background-color: #f0f0f0; /* set via inline style on runtime: * height: */ } -/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can - */ -.calendar_calTimeRow, -.calendar_calTimeRowOff { - position: absolute; - width: 100%; - /* set via inline style on runtime: - * height: - * top: - */ -} .calendar_calTimeRow { /* background-color: silver; */ background-color: #fafafa; @@ -1668,7 +866,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget overflow: auto; } .calendar_calAddEvent { - position: absolute; width: 100%; z-index: 10; } diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 4060384e65..3c759b42c1 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -14,7 +14,7 @@ @import (reference) "../../../pixelegg/less/definitions.less"; -@import (less) "../default/app.css"; +@import (reference) "../default/app.css"; @@ -800,30 +800,17 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget font-style: italic; } + /* timeGridWidget, contains timeRow's and dayCol's */ .calendar_calTimeGrid{ - position: relative; - top: 0px; - left: 0px; border:1px solid silver; - width: 99%; .background_color_10_gray; /* set via inline style on runtime: * height: */ } -/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can - */ -.calendar_calTimeRow,.calendar_calTimeRowOff{ - position: absolute; - width: 100%; - /* set via inline style on runtime: - * height: - * top: - */ -} .calendar_calTimeRow{ /* background-color: silver; */ .background_color_5_gray;