From 4565bf47796aa247e64c7e0ae23082a7ccf57053 Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Thu, 12 Nov 2015 23:10:16 +0000 Subject: [PATCH] Sizing fixes for better (intitial) layout --- calendar/js/app.js | 24 +++++++++++++++++++++--- calendar/js/et2_widget_daycol.js | 24 ++++++++++++------------ calendar/js/et2_widget_timegrid.js | 24 ++++++++++++++++++++---- calendar/templates/default/app.css | 3 +-- 4 files changed, 54 insertions(+), 21 deletions(-) diff --git a/calendar/js/app.js b/calendar/js/app.js index a87007255a..5e41c0eaf5 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -566,7 +566,6 @@ app.classes.calendar = AppJS.extend( var translate = direction == "down" ? "translateY(-50%)" : (direction == "right" ? "translateX(-50%)" : ""); wrapper.css({"transform": translate}); window.setTimeout(function() { - var scrollTop = $j('.calendar_calTimeGridScroll',original).scrollTop(); cloned.remove(); @@ -589,7 +588,9 @@ app.classes.calendar = AppJS.extend( }); // Re-scroll to start of day - $j('.calendar_calTimeGridScroll',original).scrollTop(scrollTop); + template.widgetContainer.iterateOver(function(w) { + w._resizeTimes(); + },this, et2_calendar_timegrid); window.setTimeout(function() { if(app.calendar) @@ -1823,19 +1824,26 @@ app.classes.calendar = AppJS.extend( for(var i = 0; i < view.etemplates.length; i++) { $j(view.etemplates[i].DOMContainer).show(); + view.etemplates[i].resize(); } // Toggle todos if(state.state.view == 'day' || this.state.view == 'day') { if(state.state.view == 'day' && state.state.owner.length === 1 && !isNaN(state.state.owner) && state.state.owner[0] > 0) { - view.etemplates[0].DOMContainer.style.width = "70%"; + if(this.state.view !== 'day') + { + view.etemplates[0].widgetContainer.iterateOver(function(w) { + w.set_width(w.div.width() * 0.7); + },this,et2_calendar_timegrid); + } $j(view.etemplates[1].DOMContainer).css("left","69%"); // TODO: Maybe some caching here this.egw.jsonq('calendar_uiviews::ajax_get_todos', [state.state.date, state.state.owner[0]], function(data) { this.getWidgetById('label').set_value(data.label||''); this.getWidgetById('todos').set_value({content:data.todos||''}); },view.etemplates[1].widgetContainer); + view.etemplates[0].resize(); } else { @@ -1845,12 +1853,22 @@ app.classes.calendar = AppJS.extend( $j(this).hide(); },app.classes.calendar.views.day.etemplates[1].DOMContainer),1000); $j(app.classes.calendar.views.day.etemplates[0].DOMContainer).css("width","100%"); + view.etemplates[0].widgetContainer.iterateOver(function(w) { + w.set_width('100%'); + },this,et2_calendar_timegrid); } } else { $j(view.etemplates[0].DOMContainer).css("width","100%"); } + + // Trigger resize to get correct sizes, as they may have sized while + // hidden + for(var i = 0; i < view.etemplates.length; i++) + { + view.etemplates[i].resize(); + } this.state = jQuery.extend({},state.state); // List view (nextmatch) has slightly different fields diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index ba8d442501..ca0b534f8b 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -323,23 +323,23 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM], set_left: function(left) { // Maybe? window.setTimeout(jQuery.proxy(function() { - if(this.div) - { - this.div.css('left',left); - // Headers are positioned relative - //this.header.css('left',left); - } + if(this.div) + { + this.div.css('left',left); + // Headers are positioned relative + //this.header.css('left',left); + } },this),1); - + }, set_width: function(width) { this.options.width = width; window.setTimeout(jQuery.proxy(function() { - if(this.div) - { - this.div.outerWidth(this.options.width); - this.header.outerWidth(this.options.width); - } + if(this.div) + { + this.div.outerWidth(this.options.width); + this.header.outerWidth(this.options.width); + } },this),1); }, diff --git a/calendar/js/et2_widget_timegrid.js b/calendar/js/et2_widget_timegrid.js index 837ce72618..cd75b360ca 100644 --- a/calendar/js/et2_widget_timegrid.js +++ b/calendar/js/et2_widget_timegrid.js @@ -639,11 +639,12 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz this.rowHeight = new_height; var rows = $j('.calendar_calTimeRow',this.scrolling).height(this.rowHeight); this.days.css('height', (this.rowHeight*rows.length)+'px'); - - // Scroll to start of day - this._top_time = (wd_start * this.rowHeight) / this.options.granularity; - this.scrolling.scrollTop(this._top_time); + + $j('.calendar_calAddEvent',this.scrolling).height(this.rowHeight); } + // Scroll to start of day + this._top_time = (wd_start * this.rowHeight) / this.options.granularity; + this.scrolling.scrollTop(this._top_time); }, /** @@ -1531,6 +1532,21 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz // Re-do time grid this._drawGrid(); + + // Just re-did everything, no need to do more + return; + } + + // Try to resize width, though animations cause problems + var day_width = ( $j(this.getInstanceManager().DOMContainer).width() - (this.div.innerWidth() - this.days.innerWidth()))/this.day_list.length; + // update day widgets + for(var i = 0; i < this.day_list.length; i++) + { + var day = this.day_widgets[i]; + + // Position + day.set_left((day_width * i) + 'px'); + day.set_width(day_width + 'px'); } } }); diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 6aee363b0d..7d15eab849 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -243,6 +243,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget transition: width 1s ease-in-out; z-index:30; white-space: initial; + padding-bottom: 2ex; } .calendar_calDayColHeader > div[data-date] { height: 16px; @@ -292,8 +293,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget flex-direction: row; align-items:flex-start; width: 100%; - height: 100%; - padding-bottom: 2ex; } .calendar_calDayColAllDay > .calendar_calEventBodySmall {