tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

MINOR Hiding collapsed panel views by CSS to avoid FOUC, and initialising component without triggering events to avoid redrawing the whole CMS layout twice due to it listening for panel changes

Browse Source
This commit is contained in:
Ingo Schommer 2012-02-16 11:45:07 +01:00
parent 07f4cd4a78
commit d41f37f771
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/css/screen.css
View File

@ -388,7 +388,7 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
.cms-panel.collapsed .cms-panel-header * { display: none; }
.cms-panel.collapsed .cms-panel-content { display: none; }
.cms-panel .cms-panel-header { width: 100%; }
.cms-panel .cms-panel-content-collapsed { width: 40px; }
.cms-panel .cms-panel-content-collapsed { width: 40px; display: none; }
.cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { border-bottom: 0; margin-left: 8px; -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.cms-panel .child-flyout-indicator { width: 0; height: 0; border-right: 3px dashed #1f1f1f; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px dashed #1f1f1f; position: absolute; right: 1px; margin-top: -8px; display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ }
.cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; }

19
admin/javascript/LeftAndMain.Panel.js
View File

@ -56,7 +56,7 @@
if(typeof cookieCollapsed != 'undefined' && cookieCollapsed != null) collapsed = (cookieCollapsed == 'true');
}
if(typeof collapsed == 'undefined') collapsed = jQuery(this).hasClass('collapsed');
this.togglePanel(!collapsed);
this.togglePanel(!collapsed, true);
this._super();
},
@ -70,11 +70,14 @@
},
/**
* @param Boolean TRUE to expand, FALSE to collapse.
* @param {Boolean} TRUE to expand, FALSE to collapse.
* @param {Boolean} TRUE means that events won't be fired, which is useful for the component initialization phase.
*/
togglePanel: function(bool) {
this.trigger('beforetoggle.sspanel', bool);
this.trigger(bool ? 'beforeexpand' : 'beforecollapse');
togglePanel: function(bool, silent) {
if(!silent) {
this.trigger('beforetoggle.sspanel', bool);
this.trigger(bool ? 'beforeexpand' : 'beforecollapse');
}
this.toggleClass('collapsed', !bool);
var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed();
@ -93,8 +96,10 @@
// Save collapsed state in cookie
if($.cookie && this.attr('id')) $.cookie('cms-panel-collapsed-' + this.attr('id'), !bool, {path: '/', expires: 31});
this.trigger('toggle', bool);
this.trigger(bool ? 'expand' : 'collapse');
if(!silent) {
this.trigger('toggle', bool);
this.trigger(bool ? 'expand' : 'collapse');
}
},
expandPanel: function(force) {

1
admin/scss/_style.scss
View File

@ -918,6 +918,7 @@ form.member-profile-form {
.cms-panel-content-collapsed {
width: 40px;
display: none; // Avoids FOUC
h2, h3 {
border-bottom: 0;