From df1de11a63cfbb7aa5663c5b7476cb6e9b80d138 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Mon, 10 Oct 2011 13:24:27 +1300 Subject: [PATCH] BUGFIX: renaming "triangle" to "flyout-indicator" and fixing bug when switching between pages in the CMS after collapsing left-hand side menu --- admin/css/screen.css | 4 +-- admin/javascript/LeftAndMain.Panel.js | 51 +++++++++++++++++---------- admin/scss/_style.scss | 4 +-- 3 files changed, 37 insertions(+), 22 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 818b340dc..69c008d9c 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -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; } diff --git a/admin/javascript/LeftAndMain.Panel.js b/admin/javascript/LeftAndMain.Panel.js index c9c61f588..6bba60c4e 100644 --- a/admin/javascript/LeftAndMain.Panel.js +++ b/admin/javascript/LeftAndMain.Panel.js @@ -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('').fadeIn(); - par.children('.child-triangle').fadeIn(); + if (par.children('.child-flyout-indicator').length == 0) par.append('').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(); diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 3ff4f8983..9f387d2dc 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -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;