MINOR Hiding panel while redrawing via ajax (for repaint/reflow performance), enforcing redraw of tabs before their own onmatch() to avoid layout glitches

This commit is contained in:
Ingo Schommer 2011-12-15 20:37:20 +01:00
parent d732a78852
commit adb5acc8bb
4 changed files with 19 additions and 7 deletions

View File

@ -39,12 +39,15 @@
}); });
// Force initialization of tabsets to avoid layout glitches // Force initialization of tabsets to avoid layout glitches
this.find('.ss-tabset').redraw(); this.find('.ss-tabset').redrawTabs();
this._super(); this._super();
}, },
redraw: function() { redraw: function() {
// Force initialization of tabsets to avoid layout glitches
this.add(this.find('.ss-tabset')).redrawTabs();
this.layout(); this.layout();
}, },

View File

@ -97,6 +97,9 @@
}, },
redraw: function() { redraw: function() {
// Force initialization of tabsets to avoid layout glitches
this.add(this.find('.ss-tabset')).redrawTabs();
// TODO Manually set container height before resizing - shouldn't be necessary' // TODO Manually set container height before resizing - shouldn't be necessary'
this.find('.cms-content-actions').height(this.find('.cms-content-actions .Actions').height()); this.find('.cms-content-actions').height(this.find('.cms-content-actions .Actions').height());

View File

@ -194,13 +194,15 @@
newContentEl newContentEl
.removeClass(layoutClasses.join(' ')) .removeClass(layoutClasses.join(' '))
.addClass(origLayoutClasses.join(' ')) .addClass(origLayoutClasses.join(' '))
.attr('style', origStyle); .attr('style', origStyle)
.css('visibility', 'hidden');
// Replace panel completely (we need to override the "layout" attribute, so can't replace the child instead) // Replace panel completely (we need to override the "layout" attribute, so can't replace the child instead)
contentEl.replaceWith(newContentEl); contentEl.replaceWith(newContentEl);
// Unset loading and restore element state (to avoid breaking existing panel visibility, e.g. with preview expanded) // Unset loading and restore element state (to avoid breaking existing panel visibility, e.g. with preview expanded)
self.redraw(); self.redraw();
newContentEl.css('visibility', 'visible');
newContentEl.removeClass('loading'); newContentEl.removeClass('loading');
self.trigger('afterstatechange', {data: data, status: status, xhr: xhr, element: newContentEl}); self.trigger('afterstatechange', {data: data, status: status, xhr: xhr, element: newContentEl});

View File

@ -43,13 +43,17 @@
*/ */
$('.ss-ui-tabs-nav').entwine({ $('.ss-ui-tabs-nav').entwine({
onmatch: function() { onmatch: function() {
this.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-panel ui-corner-bottom'); this.redraw();
this.find('ul').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
this.find('li').addClass('ui-state-default ui-corner-top');
// TODO Figure out selected tab
this.find('li:first').selectIt();
this._super(); this._super();
},
redraw: function() {
this.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-panel ui-corner-bottom');
this.find('ul').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
this.find('li').addClass('ui-state-default ui-corner-top');
// TODO Figure out selected tab
this.find('li:first').selectIt();
} }
}); });