Sizing fixes for better (intitial) layout

This commit is contained in:
Nathan Gray 2015-11-12 23:10:16 +00:00
parent 6d398a346f
commit 4565bf4779
4 changed files with 54 additions and 21 deletions

View File

@ -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

View File

@ -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);
},

View File

@ -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');
}
}
});

View File

@ -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 {