From d4baf2d19d738f7cedb1269357632a6c058ffc94 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Wed, 6 Jun 2012 21:02:13 +0200 Subject: [PATCH] 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 --- admin/css/screen.css | 5 ++--- admin/javascript/LeftAndMain.Content.js | 14 +++++++----- admin/javascript/LeftAndMain.EditForm.js | 5 ++--- admin/javascript/LeftAndMain.Preview.js | 9 ++++---- admin/javascript/LeftAndMain.js | 27 ++++++------------------ admin/scss/_forms.scss | 5 +---- admin/scss/_style.scss | 2 +- 7 files changed, 25 insertions(+), 42 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 44d63b90c..ab8c3df0e 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -181,8 +181,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele /** ---------------------------------------------------- Buttons ---------------------------------------------------- */ .cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; } .cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; } -.cms .Actions { min-height: 30px; } -.cms .Actions > div { overflow: auto; } +.cms .Actions { min-height: 30px; overflow: auto; } .cms input.loading, .cms button.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { color: #525252; border-color: #d5d3d3; cursor: default; } .cms input.loading .ui-icon, .cms button.loading .ui-icon, .cms input.ui-state-default.loading .ui-icon, .cms .ui-widget-content input.ui-state-default.loading .ui-icon, .cms .ui-widget-header input.ui-state-default.loading .ui-icon { background: transparent url(../../images/network-save.gif) no-repeat 0 0; } .cms input.loading.ss-ui-action-constructive .ui-icon, .cms button.loading.ss-ui-action-constructive .ui-icon { background: transparent url(../../images/network-save-constructive.gif) no-repeat 0 0; } @@ -407,7 +406,7 @@ body.cms { overflow: hidden; } /** -------------------------------------------- Preview -------------------------------------------- */ .cms-switch-view a { padding-right: 1em; } -.cms-preview { width: 1px; z-index: 100; } +.cms-preview { display: none; width: 1px; z-index: 100; } .cms-preview .cms-preview-toggle { width: 10px; cursor: pointer; } .cms-preview .cms-preview-toggle a { display: block; padding: 2px 12px 2px 6px; height: 16px; position: relative; top: 48%; background-color: #b0bec7; color: white; font-weight: bold; text-decoration: none; z-index: 2000; line-height: 16px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-box-shadow: 0 0 10px rgba(180, 180, 180, 0.4); -moz-box-shadow: 0 0 10px rgba(180, 180, 180, 0.4); box-shadow: 0 0 10px rgba(180, 180, 180, 0.4); } .cms-preview.is-collapsed .cms-preview-toggle a { left: -15px; } diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js index ec298c5ea..40a159908 100644 --- a/admin/javascript/LeftAndMain.Content.js +++ b/admin/javascript/LeftAndMain.Content.js @@ -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)); diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js index a56357c84..2b87ce83f 100644 --- a/admin/javascript/LeftAndMain.EditForm.js +++ b/admin/javascript/LeftAndMain.EditForm.js @@ -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(); }, diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js index 605490016..56e1b68e7 100644 --- a/admin/javascript/LeftAndMain.Preview.js +++ b/admin/javascript/LeftAndMain.Preview.js @@ -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}); } }); diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index 31916ae04..9a9706ef7 100644 --- a/admin/javascript/LeftAndMain.js +++ b/admin/javascript/LeftAndMain.js @@ -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}); } }); diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index fec4881b1..353ab9abe 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -263,10 +263,7 @@ form.small .field, .field.small { .Actions { min-height: 30px; - - & > div { - overflow: auto; - } + overflow: auto; } input.loading, button.loading, diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index e93ee845b..7257f3e5a 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -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;