mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
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
This commit is contained in:
parent
803aa6bfc5
commit
d4baf2d19d
@ -181,8 +181,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
|
|||||||
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */
|
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */
|
||||||
.cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; }
|
.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 > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
|
||||||
.cms .Actions { min-height: 30px; }
|
.cms .Actions { min-height: 30px; overflow: auto; }
|
||||||
.cms .Actions > div { 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, .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 .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; }
|
.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 -------------------------------------------- */
|
/** -------------------------------------------- Preview -------------------------------------------- */
|
||||||
.cms-switch-view a { padding-right: 1em; }
|
.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 { 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 .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; }
|
.cms-preview.is-collapsed .cms-preview-toggle a { left: -15px; }
|
||||||
|
@ -16,7 +16,6 @@
|
|||||||
// Force initialization of certain UI elements to avoid layout glitches
|
// Force initialization of certain UI elements to avoid layout glitches
|
||||||
this.find('.cms-tabset').redrawTabs();
|
this.find('.cms-tabset').redrawTabs();
|
||||||
this.find('.ss-ui-tabs-nav').redraw();
|
this.find('.ss-ui-tabs-nav').redraw();
|
||||||
this.find('.Actions').redraw();
|
|
||||||
|
|
||||||
this._super();
|
this._super();
|
||||||
},
|
},
|
||||||
@ -27,10 +26,12 @@
|
|||||||
redraw: function() {
|
redraw: function() {
|
||||||
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
|
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.add(this.find('.cms-tabset')).redrawTabs();
|
||||||
this.find('.cms-content-header').redraw();
|
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() {
|
redraw: function() {
|
||||||
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
|
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({
|
$('.cms-content .cms-content-header, .cms-content .cms-content-actions').entwine({
|
||||||
redraw: function() {
|
redraw: function() {
|
||||||
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
|
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
|
||||||
|
@ -111,12 +111,11 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
redraw: function() {
|
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 tabsets to avoid layout glitches
|
||||||
this.add(this.find('.cms-tabset')).redrawTabs();
|
this.add(this.find('.cms-tabset')).redrawTabs();
|
||||||
this.find('.cms-content-header').redraw();
|
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();
|
this.layout();
|
||||||
},
|
},
|
||||||
|
@ -147,6 +147,7 @@
|
|||||||
|
|
||||||
expand: function(inclMenu) {
|
expand: function(inclMenu) {
|
||||||
var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
|
var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
|
||||||
|
this.show();
|
||||||
this.removeClass('east').addClass('center').removeClass('is-collapsed');
|
this.removeClass('east').addClass('center').removeClass('is-collapsed');
|
||||||
// this.css('overflow', 'auto');
|
// this.css('overflow', 'auto');
|
||||||
contentEl.removeClass('center').hide();
|
contentEl.removeClass('center').hide();
|
||||||
@ -158,8 +159,7 @@
|
|||||||
containerEl.find('.cms-menu').collapsePanel();
|
containerEl.find('.cms-menu').collapsePanel();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Already triggered through panel toggle above
|
containerEl.redraw();
|
||||||
// containerEl.redraw();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
collapse: function() {
|
collapse: function() {
|
||||||
@ -175,8 +175,7 @@
|
|||||||
containerEl.find('.cms-menu').expandPanel();
|
containerEl.find('.cms-menu').expandPanel();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Already triggered through panel toggle above
|
containerEl.redraw();
|
||||||
// containerEl.redraw();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
block: function() {
|
block: function() {
|
||||||
@ -197,7 +196,7 @@
|
|||||||
redraw: function() {
|
redraw: function() {
|
||||||
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
|
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.
|
// 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.
|
// 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-content-fields[data-layout-type]').redraw();
|
||||||
this.find('.cms-edit-form[data-layout-type]').redraw();
|
this.find('.cms-edit-form[data-layout-type]').redraw();
|
||||||
|
|
||||||
// Only redraw preview if its visible
|
|
||||||
this.find('.cms-preview').redraw();
|
this.find('.cms-preview').redraw();
|
||||||
|
this.find('.cms-content').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.layout({resize: false});
|
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.
|
* Add loading overlay to selected regions in the CMS automatically.
|
||||||
* Not applied to all "*.loading" elements to avoid secondary regions
|
* 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.
|
* Add styling to all contained buttons, and create buttonsets if required.
|
||||||
*/
|
*/
|
||||||
$('.cms .Actions').entwine({
|
$('.cms-content .Actions').entwine({
|
||||||
onmatch: function() {
|
onmatch: function() {
|
||||||
this.find('.ss-ui-button').click(function() {
|
this.find('.ss-ui-button').click(function() {
|
||||||
var form = this.form;
|
var form = this.form;
|
||||||
@ -682,9 +669,7 @@ jQuery.noConflict();
|
|||||||
redraw: function() {
|
redraw: function() {
|
||||||
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
|
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
|
||||||
|
|
||||||
this.layout({
|
this.layout({resize: false});
|
||||||
resize: false
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -263,10 +263,7 @@ form.small .field, .field.small {
|
|||||||
|
|
||||||
.Actions {
|
.Actions {
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
|
overflow: auto;
|
||||||
& > div {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input.loading, button.loading,
|
input.loading, button.loading,
|
||||||
|
@ -374,7 +374,6 @@ body.cms {
|
|||||||
.cms-content-actions {
|
.cms-content-actions {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: $grid-y*1.5 $grid-y*2;
|
padding: $grid-y*1.5 $grid-y*2;
|
||||||
height: $grid-y*4;
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
border-top: 1px solid $color-light-separator;
|
border-top: 1px solid $color-light-separator;
|
||||||
border-top: 1px solid #FAFAFA;
|
border-top: 1px solid #FAFAFA;
|
||||||
@ -810,6 +809,7 @@ body.cms {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cms-preview {
|
.cms-preview {
|
||||||
|
display: none;
|
||||||
width: 1px; // collapsed by default
|
width: 1px; // collapsed by default
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user