Permalink
Browse files

BUGFIX Stability improvements on CMS layout logic

- Changed application order
- Fixed layout trigger after preview toggle
- Replaced button row dimension approximation with double application of jQuery.layout() - once before sizing the action panel height to set correct width on container, then again for the height
  • Loading branch information...
chillu committed Jun 6, 2012
1 parent 803aa6b commit d4baf2d19d738f7cedb1269357632a6c058ffc94
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -16,7 +16,6 @@
// Force initialization of certain UI elements to avoid layout glitches
this.find('.cms-tabset').redrawTabs();
this.find('.ss-ui-tabs-nav').redraw();
- this.find('.Actions').redraw();
this._super();
},
@@ -27,10 +26,12 @@
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
- // Force initialization of tabsets to avoid layout glitches
+ // Force initialization of certain UI elements to avoid layout glitches
+ this.layout();
this.add(this.find('.cms-tabset')).redrawTabs();
this.find('.cms-content-header').redraw();
- this.layout({resize: false});
+ this.find('.cms-content-actions').redraw();
+ this.layout();
}
});
@@ -85,11 +86,14 @@
}
});
- $('.cms-content .cms-content-header').entwine({
+ $('.cms-content .cms-content-fields').entwine({
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
- // Fix height to actual extents, in preparation for a relayout via jslayout.
+ this.layout();
+ }
+ });
+
$('.cms-content .cms-content-header, .cms-content .cms-content-actions').entwine({
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
@@ -111,12 +111,11 @@
},
redraw: function() {
+ if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
+
// Force initialization of tabsets to avoid layout glitches
this.add(this.find('.cms-tabset')).redrawTabs();
this.find('.cms-content-header').redraw();
-
- var approxWidth = $('.cms-container').width() - $('.cms-menu').width();
- this.find('.cms-content-actions').width(approxWidth).height('auto');
this.layout();
},
@@ -147,6 +147,7 @@
expand: function(inclMenu) {
var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
+ this.show();
this.removeClass('east').addClass('center').removeClass('is-collapsed');
// this.css('overflow', 'auto');
contentEl.removeClass('center').hide();
@@ -158,8 +159,7 @@
containerEl.find('.cms-menu').collapsePanel();
}
- // Already triggered through panel toggle above
- // containerEl.redraw();
+ containerEl.redraw();
},
collapse: function() {
@@ -175,8 +175,7 @@
containerEl.find('.cms-menu').expandPanel();
}
- // Already triggered through panel toggle above
- // containerEl.redraw();
+ containerEl.redraw();
},
block: function() {
@@ -197,7 +196,7 @@
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
- this.layout();
+ this.layout({resize: false});
}
});
@@ -126,19 +126,14 @@ jQuery.noConflict();
// Move from inner to outer layouts. Some of the elements might not exist.
// Not all edit forms are layouted, so qualify by their data value.
+
+ this.layout({resize: false});
+ this.find('.cms-panel-layout').redraw();
this.find('.cms-content-fields[data-layout-type]').redraw();
this.find('.cms-edit-form[data-layout-type]').redraw();
-
- // Only redraw preview if its visible
this.find('.cms-preview').redraw();
-
- // Only redraw the content area if its not the same as the edit form
- var contentEl = this.find('.cms-content');
- if(!contentEl.is('.cms-edit-form')) contentEl.redraw();
-
+ this.find('.cms-content').redraw();
this.layout({resize: false});
-
- this.find('.cms-panel-layout').redraw(); // sidebar panels.
},
/**
@@ -432,14 +427,6 @@ jQuery.noConflict();
}
});
- $('.cms-content-fields').entwine({
- redraw: function() {
- if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
-
- this.layout();
- }
- });
-
/**
* Add loading overlay to selected regions in the CMS automatically.
* Not applied to all "*.loading" elements to avoid secondary regions
@@ -579,7 +566,7 @@ jQuery.noConflict();
/**
* Add styling to all contained buttons, and create buttonsets if required.
*/
- $('.cms .Actions').entwine({
+ $('.cms-content .Actions').entwine({
onmatch: function() {
this.find('.ss-ui-button').click(function() {
var form = this.form;
@@ -682,9 +669,7 @@ jQuery.noConflict();
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
- this.layout({
- resize: false
- });
+ this.layout({resize: false});
}
});
View
@@ -263,10 +263,7 @@ form.small .field, .field.small {
.Actions {
min-height: 30px;
-
- & > div {
- overflow: auto;
- }
+ overflow: auto;
}
input.loading, button.loading,
View
@@ -374,7 +374,6 @@ body.cms {
.cms-content-actions {
margin: 0;
padding: $grid-y*1.5 $grid-y*2;
- height: $grid-y*4;
z-index: 0;
border-top: 1px solid $color-light-separator;
border-top: 1px solid #FAFAFA;
@@ -810,6 +809,7 @@ body.cms {
}
}
.cms-preview {
+ display: none;
width: 1px; // collapsed by default
z-index: 100;

0 comments on commit d4baf2d

Please sign in to comment.