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

BUGFIX: renaming "triangle" to "flyout-indicator" and fixing bug when switching between pages in the CMS after collapsing left-hand side menu

Browse Source
This commit is contained in:
Julian Seidenberg 2011-10-10 13:24:27 +13:00
parent 9fb1b32e01
commit df1de11a63
3 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin/css/screen.css
View File

@ -453,7 +453,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333;
.cms-panel .toggle-expand { width: 40px; }
.cms-panel.collapsed .cms-panel-content { display: none; }
.cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 80px; border: none; padding: 0; }
.cms-panel .child-triangle { 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 .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; }
.cms-panel .collapsed-flyout li a span { display: block !important; }
@ -482,7 +482,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333;
.ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ }
.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 38px; }
.ui-dialog label.numeric-label { font-size: 14px; font-weight: bold; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #7b8c91; padding: 4px 8px 4px 3px; text-align: right; color: #fff; position: absolute; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ }
.ui-dialog label.numeric-label .label-triangle { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; }
.ui-dialog label.numeric-label .label-flyout-indicator { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; }
.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: left !important; width: 125px; }
.ui-dialog #ParentID .middleColumn { width: 320px; }
.ui-dialog .Actions { float: right; margin: 0; }

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

@ -54,25 +54,14 @@
this.expandPanel();
}
},
togglePanel: function(bool) {
// if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return;
//apply or unapply the flyout formatting
$('.cms-panel-content ul li.link, .cms-panel-content ul li.opened').each(function(){
if (bool) { //expand
$(this).children('ul').removeClass('collapsed-flyout').addClass('collapsed');
} else { //collapse
$(this).children('ul').addClass('collapsed-flyout').removeClass('collapsed');
}
});
toggleFlyoutState: function(bool) {
if (bool) { //expand
//show the flyout
$('.collapsed').find('li').show();
//hide all the triangle
$('.cms-menu-list').find('.child-triangle').hide();
//hide all the flyout-indicator
$('.cms-menu-list').find('.child-flyout-indicator').hide();
} else { //collapse
//hide the flyout only if it is not the current section
$('.collapsed-flyout').find('li').each(function() {
@ -80,12 +69,38 @@
$(this).hide();
});
//show all the triangles
//show all the flyout-indicators
var par = $('.cms-menu-list ul.collapsed-flyout').parent();
if (par.children('.child-triangle').length == 0) par.append('<span class="child-triangle"></span>').fadeIn();
par.children('.child-triangle').fadeIn();
if (par.children('.child-flyout-indicator').length == 0) par.append('<span class="child-flyout-indicator"></span>').fadeIn();
par.children('.child-flyout-indicator').fadeIn();
}
},
togglePanel: function(bool) {
// if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return;
//apply or unapply the flyout formatting
$('.cms-menu-list').children('li').each(function(){
if (bool) { //expand
$(this).children('ul').each(function() {
$(this).removeClass('collapsed-flyout');
if ($(this).data('collapse')) {
$(this).removeData('collapse');
$(this).addClass('collapse');
}
});
} else { //collapse
$(this).children('ul').each(function() {
$(this).addClass('collapsed-flyout');
$(this).hasClass('collapse');
$(this).removeClass('collapse');
$(this).data('collapse', true);
});
}
});
this.toggleFlyoutState(bool);
this.toggleClass('collapsed', !bool);
var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed();

4
admin/scss/_style.scss
View File

@ -792,7 +792,7 @@ form.member-profile-form {
}
}
.child-triangle {
.child-flyout-indicator {
width:0;
height:0;
border-right:3px dashed $color-text-dark;
@ -942,7 +942,7 @@ $DialogLabelColor: #7B8C91;
width: 15px;
/* Numeric label icon (supports up to two-digit numbers) */
.label-triangle {
.label-flyout-indicator {
position: absolute;
left: 26px;
margin-top: -18px;