From c5eadd81ab661f20a669a9e6e9996d15383453dd Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 21 Nov 2009 02:36:09 +0000 Subject: [PATCH] ENHANCEMENT Using jQuery UI tabs for tree tools like 'search' or 'batch actions' instead of custom JavaScript API CHANGE Removed 'treeactions' javascript global git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92603 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- css/cms_left.css | 6 +- css/layout.css | 52 +--------- javascript/CMSMain.js | 35 +++++-- javascript/LeftAndMain.js | 22 ++++- javascript/LeftAndMain_left.js | 37 -------- templates/Includes/CMSMain_TreeTools.ss | 114 ++++++++++++++++++++++ templates/Includes/CMSMain_left.ss | 121 +----------------------- 7 files changed, 173 insertions(+), 214 deletions(-) create mode 100644 templates/Includes/CMSMain_TreeTools.ss diff --git a/css/cms_left.css b/css/cms_left.css index f72264bc..6fb1035b 100644 --- a/css/cms_left.css +++ b/css/cms_left.css @@ -155,7 +155,6 @@ ul.tree .deleted { border-bottom: 1px solid #ccc; background: #eee; padding: 3px; - text-align: center; font-weight: bold; } #publication_key ins, @@ -337,6 +336,10 @@ ul.tree span.a.Root span.c { background: url(../../jsparty/tree/images/i-bottom.gif) no-repeat scroll 0 50%; } +#sitetree_ul { + overflow: auto; +} + ul#sitetree.tree ul { margin-left: 0; } @@ -430,7 +433,6 @@ ul.tree span.untranslated a:visited { padding: 5px 0 0 0; overflow: hidden; clear: left; - width: 100%; } .checkboxAboveTree div { clear: left; diff --git a/css/layout.css b/css/layout.css index 566dee93..653b49e1 100644 --- a/css/layout.css +++ b/css/layout.css @@ -113,35 +113,11 @@ body { /** * Actions/Buttons */ - -#TreeActions { - float: left; - width: 100%; - padding-bottom: 5px; -} - #TreeActions li { - float: left; - } #TreeActions button.disabled { color: #aaa; } - .ajaxActions input, - #TreeActions li.action input { - float: left; - height: 25px; - padding: 0 10px; - font-weight: bold; - } - #TreeActions li.action input { - font-weight: normal; - } - .ajaxActions input:active { - background: #F4F4F4 none repeat scroll 0%; - border-color: #999999 rgb(204, 204, 204) rgb(204, 204, 204) rgb(153, 153, 153); - } - .ajaxActions input.disabled, input.disabled { color: #666; @@ -188,7 +164,7 @@ body.stillLoading select { /** * Hidden left-hand panel */ -#left.hidden form, #left.hidden .title, #left.hidden #TreeActions { +#left.hidden form, #left.hidden .title { display: none; } @@ -352,28 +328,14 @@ body.stillLoading select { /** LEFT PANEL **/ -#sitetree_holder { - height: 80%; - width: 100%; - overflow-y: auto; - overflow-x: hidden; +#sitetree_and_tools { + overflow: auto; } - + #sitetree_holder #TreeTools { - float: left; - width: inherit; background: #EEE; } - #SearchBox { - float: left; - width: 100%; - margin: 0 0 5px 0; - padding-left: 5px; - position: relative; - } #SearchControls { - float: left; - position: relative; margin-top:2px; } #SearchControls label { @@ -387,9 +349,6 @@ body.stillLoading select { width: 16px; height: 16px; background: #EFEFEF url(../images/network-save.gif) no-repeat; - position: absolute; - left: 95px; - top: 2px; } #searchIndicator.loading { display: block; @@ -406,9 +365,6 @@ body.stillLoading select { } #sitetree_ul ul#sitetree { padding: 0; - } - #sitetree { - width: 500px; /* IE's chocking right now */ } html>body #sitetree { width: auto; diff --git a/javascript/CMSMain.js b/javascript/CMSMain.js index df71e8f7..b58ac157 100644 --- a/javascript/CMSMain.js +++ b/javascript/CMSMain.js @@ -1,11 +1,25 @@ -var outerLayout; - (function($) { $('body.CMSMain').concrete({ss:{cmsMain:{ mainLayout: null, onmatch: function() { + var $this = $(this); this.mainLayout = this.ss().cmsMain()._setupLayout(); + + // artificially delay the resize event 200ms + // to avoid overlapping height changes in different onresize() methods + $(window).resize(function () { + var timerID = "timerCMSMainResize"; + if (window[timerID]) clearTimeout(window[timerID]); + window[timerID] = setTimeout(function() {$this.ss().cmsMain()._resizeChildren();}, 200); + }); + + this.ss().cmsMain()._resizeChildren(); + }, + + _resizeChildren: function() { + $("#treepanes").accordion("resize"); + $('#sitetree_and_tools').fitHeightToParent(); }, /** @@ -17,6 +31,7 @@ var outerLayout; * - south: "Page view", "profile" and "logout" links */ _setupLayout: function() { + var $this = this; // layout containing the tree, CMS menu, the main form etc. var layout = $('body').layout({ defaults: { @@ -44,8 +59,8 @@ var outerLayout; }, west: { size: 250, - onresize: function () { $("#treepanes").accordion("resize"); }, - onopen: function () { $("#treepanes").accordion("resize"); }, + onresize: function() {$this.ss().cmsMain()._resizeChildren();}, + onopen: function() {$this.ss().cmsMain()._resizeChildren();}, fxName: "none" }, center: {} @@ -61,8 +76,10 @@ var outerLayout; return layout; } }}}); - - $('#Form_EditForm').concrete({ - - }) -})(jQuery); \ No newline at end of file + +})(jQuery); + +jQuery(document).ready(function() { + // @todo remove + jQuery.concrete.triggerMatching(); +}); \ No newline at end of file diff --git a/javascript/LeftAndMain.js b/javascript/LeftAndMain.js index 24a769bd..8b811d5a 100644 --- a/javascript/LeftAndMain.js +++ b/javascript/LeftAndMain.js @@ -64,10 +64,12 @@ // artificially delay the resize event 200ms // to avoid overlapping height changes in different onresize() methods $(window).resize(function () { - var timerID = "timerLayout_"+this.id; + var timerID = "timerLeftAndMainResize"; if (window[timerID]) clearTimeout(window[timerID]); window[timerID] = setTimeout(function() {$this.ss()._resizeChildren();}, 200); - }).trigger('resize'); + }); + + this.ss()._resizeChildren(); // trigger resize whenever new tabs are shown // @todo This is called multiple times when tabs are loaded @@ -194,12 +196,28 @@ } }}); + /** + * All buttons in the right CMS form go through here by default. + * We need this onclick overloading because we can't get to the + * clicked button from a form.onsubmit event. + */ $('#Form_EditForm .Actions :submit').concrete({ss:{ onclick: function(e) { $(this[0].form).ss().ajaxSubmit(this); return false; } }}); + + $('#TreeActions').concrete({ + onmatch: function() { + // setup "create", "search", "batch actions" layers above tree + this.tabs({ + selected: null, + collapsible: true + }); + } + }); + })(jQuery); jQuery(document).ready(function() { diff --git a/javascript/LeftAndMain_left.js b/javascript/LeftAndMain_left.js index de3957e2..7772ad78 100755 --- a/javascript/LeftAndMain_left.js +++ b/javascript/LeftAndMain_left.js @@ -458,43 +458,6 @@ SiteTreeNode.prototype = { } } -/** - * Action panel at the top of the left hand tree - */ -treeactions = { - toggleSelection : function(li) { - li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li; - - // Deselect - if(li.selected) this.closeSelection(li, true); - else this.openSelection(li, true); - - return li.selected; - }, - closeSelection : function(li, nested) { - li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li; - - Element.hide(_HANDLER_FORMS[li.id]); - removeClass(li, 'selected'); - li.selected = false; - $(_HANDLER_FORMS[li.id]).notify('Close'); - if(li.onclose) li.onclose(); - }, - openSelection: function(li, nested) { - li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li; - - addClass(li, 'selected'); - Element.show(_HANDLER_FORMS[li.id]); - li.selected = true; - - // Deselect siblings - var i, set = li.parentNode.getElementsByTagName('li'); - for(i=0;i + + + +
+ <% control AddPageOptionsForm %> +
+ <% control Fields %> + $FieldHolder + <% end_control %> +
+ +
+
+ <% end_control %> +
+ + + +
+
+

<% _t('SELECTPAGESACTIONS','Select the pages that you want to change & then click an action:') %>

+ + + +
+ + +
+
+
+ + + +
+ Show: +
+ +
+ +
+ + +
+
+ + <% if IsTranslatableEnabled %> +
+ Language: $LangSelector +
+ <% end_if %> \ No newline at end of file diff --git a/templates/Includes/CMSMain_left.ss b/templates/Includes/CMSMain_left.ss index b486af15..ad567299 100755 --- a/templates/Includes/CMSMain_left.ss +++ b/templates/Includes/CMSMain_left.ss @@ -3,117 +3,14 @@ <% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %>
-
-
    -
  • - -
    • - -
  • - -
    • -
-
- <% control AddPageOptionsForm %> - - <% end_control %> -