From 931a354a66dffc1f4bdb655003c1ab7979bb0e30 Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Thu, 14 Jan 2016 21:24:01 +0000 Subject: [PATCH] Style changes for gridlist view --- calendar/js/et2_widget_daycol.js | 60 ++++++++++++++++++++---------- calendar/js/et2_widget_event.js | 37 ++++++++++++------ calendar/templates/default/app.css | 53 ++++++++++++++++++++------ 3 files changed, 109 insertions(+), 41 deletions(-) diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index a3d84204e6..74cb935bca 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -471,7 +471,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea var start = new Date(a.start) - new Date(b.start); var end = new Date(a.end) - new Date(b.end); // Whole day events sorted by ID, normal events by start / end time - return a.whole_day ? (a.app_id - b.app_id) : (start ? start : end); + if(a.whole_day && b.whole_day) + { + return (a.app_id - b.app_id); + } + else if (a.whole_day || b.whole_day) + { + return a.whole_day ? -1 : 1; + } + return start ? start : end; }); for(var c = 0; c < events.length; c++) @@ -554,12 +562,18 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea event.body.css('padding-top',timegrid.scrolling.scrollTop() - event.div.position().top); } // Too many in gridlist view, show indicator - else if (this.display_settings.granularity === 0 && hidden.completely) + else if (this.display_settings.granularity === 0 && hidden) { var day = this; - this._hidden_indicator(event, false, function() { - app.calendar.update_state({view: 'day', date: day.date}); - }); + // Do the previous one too + if($j('.hiddenEventAfter',this.div).length == 0) + { + var prev_event = this._children[this._children.indexOf(event)-1]; + this._hidden_indicator(prev_event, false, function() { + app.calendar.update_state({view: 'day', date: day.date}); + }); + } + this._hidden_indicator(event, false, false); } // Completely out of view, show indicator else if (hidden.completely) @@ -607,8 +621,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea if(indicator.length === 0) { indicator = $j('
') - .text(event.options.value.title) - .attr('data-hidden_count', 1) + .attr('data-hidden_count', 0) .appendTo(this.div) .on('click', typeof onclick === 'function' ? onclick : function() { $j('.calendar_calEvent',day.div).last()[0].scrollIntoView(false); @@ -617,20 +630,19 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea return false; }); } + var count = parseInt(indicator.attr('data-hidden_count')) + 1 + indicator.attr('data-hidden_count', count); + if(this.display_settings.granularity === 0) + { + indicator.append(event.div.clone()); + indicator.attr('data-hidden_label', day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),'')); + debugger; + } else { - var count = parseInt(indicator.attr('data-hidden_count')) + 1 - indicator.attr('data-hidden_count', count); - if(this.display_settings.granularity === 0) - { - indicator.text(indicator.text() + "\n" + event.options.value.title); - } - else - { - indicator.text(day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),'')); - } - indicator.css('top',timegrid.scrolling.height() + timegrid.scrolling.scrollTop()-indicator.height()); + indicator.text(day.egw().lang('%1 event(s) %2',indicator.attr('data-hidden_count'),'')); } + indicator.css('top',timegrid.scrolling.height() + timegrid.scrolling.scrollTop()-indicator.innerHeight()); } // Match color to the event if(indicator !== '') @@ -673,7 +685,17 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea this._children.sort(function(a,b) { var start = new Date(a.options.value.start) - new Date(b.options.value.start); var end = new Date(a.options.value.end) - new Date(b.options.value.end); - return a.options.value.whole_day ? -1 : (start ? start : end); + + // Whole day events sorted by ID, normal events by start / end time + if(a.options.value.whole_day && b.options.value.whole_day) + { + return (a.options.value.app_id - b.options.value.app_id); + } + else if (a.options.value.whole_day || b.options.value.whole_day) + { + return a.options.value.whole_day ? -1 : 1; + } + return start ? start : end; }); for(var i = 0; i < this._children.length; i++) diff --git a/calendar/js/et2_widget_event.js b/calendar/js/et2_widget_event.js index 546de29e0e..352272a2b7 100644 --- a/calendar/js/et2_widget_event.js +++ b/calendar/js/et2_widget_event.js @@ -337,9 +337,20 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM], } else { + var start_time = jQuery.datepicker.formatTime( + egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm", + { + hour: event.start_m / 60, + minute: event.start_m % 60, + seconds: 0, + timezone: 0 + }, + {"ampm": (egw.preference("timeformat") === "12")} + ).trim(); + this.body .html(''+title+'') - .append(''+this._get_timespan(event) + '') + .append(''+start_time + '') .append('

'+this.options.value.description+'

'); } this.body @@ -402,18 +413,22 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM], var times = !this.options.value.multiday ? ''+this.egw().lang('Time')+':' + timespan : ''+this.egw().lang('Start') + ':' +start+ - ''+this.egw().lang('End') + ':' + end - var cat = et2_createWidget('select-cat',{'readonly':true},this); - cat.set_value(this.options.value.category); - var cat_label = this.options.value.category.indexOf(',') <= 0 ? cat.span.text() : []; - if(typeof cat_label != 'string') + ''+this.egw().lang('End') + ':' + end; + var cat_label = ''; + if(this.options.value.category) { - cat.span.children().each(function() { - cat_label.push($j(this).text()); - }); - cat_label = cat_label.join(', '); + var cat = et2_createWidget('select-cat',{'readonly':true},this); + cat.set_value(this.options.value.category); + cat_label = this.options.value.category.indexOf(',') <= 0 ? cat.span.text() : []; + if(typeof cat_label != 'string') + { + cat.span.children().each(function() { + cat_label.push($j(this).text()); + }); + cat_label = cat_label.join(', '); + } + cat.destroy(); } - cat.destroy(); return '
'+ '
'+ diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index e977f94f15..a77ec4c4b9 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -638,13 +638,15 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget border: none; } .calendar_calTimeGridList .calendar_calEvent { - min-height: 1.1em; + height: 1.1em; position: relative; + border: none; + border-bottom: none; + border-right: none; + border-radius: 0px; + padding-left: 6px; } .calendar_calTimeGridList .calendar_calEvent:not([data-full_day]) { - border-top: none; - border-left: none; - border-right: none; } .calendar_calTimeGridList .calendar_calEventHeader { display: none !important; @@ -652,30 +654,59 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calTimeGridList .calendar_calEventTitle { font-weight: normal; display: inline-block; - max-height:2.4em; white-space: nowrap; -} -.calendar_calTimeGridList .calendar_calEventBody:not(.calendar_calEventBodySmall) { + flex: 1 1; overflow: hidden; + text-overflow: ellipsis; +} +.calendar_calTimeGridList .calendar_calEventBody { + overflow: hidden; + border:none; + background: #f0f0f0 !important; + height: 100%; + padding-left: 6px; + display: flex; } .calendar_calTimeGridList .calendar_calEventBody .calendar_calTimespan { display: inline-block; - float: right; - padding-left: 1em; + text-align: right; + padding-right: 1px; opacity: 0.8; - font-size: 90% + font-size: 90%; + flex: 0 0 auto; } .calendar_calTimeGridList .calendar_calEventBody > p { display: none; } +.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter { + left: 0px; + width: 100%; + margin-top: -1.5ex; + height: 2.1ex; + border-bottom-left-radius: 0px; + overflow: visible; +} +.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before { + content: attr(data-hidden_label); + display:block; + width: 100%; + height: 100%; + min-height: 3ex; + background: #f0f0f0; + z-index: 21; +} .calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover { /* Need !important to override calculated height*/ top: initial !important; bottom: 0px; white-space: pre; + background: #f0f0f0; height: 100%; + overflow: auto; +} +.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover:before { + display:none; } - /* table of the dayView containing 2 cols: 1) day-view, 2) todos */ .calendar_calDayView{