From ae56eba85363c8bb90bef5f37ebbd2785af9fd69 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 21 Nov 2009 02:35:20 +0000 Subject: [PATCH] ENHANCEMENT Using jQuery layout manager plugin to size panels in main CMS interface. Removed custom javascript resizing and CSS rules. API CHANGE Removed custom resizing javascript methods: window.ontabschanged, window.onresize, fixRightWidth(), fixHeight_left() API CHANGE Removed DraggableSeparator, SideTabs, SideTabItem javascript classes API CHANGE Removed Effect.ReSize and Highlighter javascript helper classes API CHANGE Modified template structure in CMSMain_left.ss, CMSMain_right.ss and LeftAndMain.ss API CHANGE Modified markup IDs in LeftAndMain/CMSMain templates, removed "left", "right", "contentPanel", "bottom" ENHANCEMENT Using jquery-latest (currently 1.3) in CMSMain and LeftAndMain ENHANCEMENT Added jQuery UI library and "smoothness" theme to default CMS interface git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92581 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- code/CMSMain.php | 1 + code/LeftAndMain.php | 25 +++- css/cms_left.css | 9 ++ css/cms_right.css | 6 + css/layout.css | 199 +++++++++++++++++----------- javascript/CMSMain.js | 66 +++++++++ javascript/LeftAndMain.js | 176 +----------------------- javascript/LeftAndMain_left.js | 14 -- templates/Includes/CMSMain_left.ss | 73 +++++----- templates/Includes/CMSMain_right.ss | 21 +-- templates/LeftAndMain.ss | 16 +-- 11 files changed, 271 insertions(+), 335 deletions(-) create mode 100644 javascript/CMSMain.js diff --git a/code/CMSMain.php b/code/CMSMain.php index efb8770f..32a9bf24 100755 --- a/code/CMSMain.php +++ b/code/CMSMain.php @@ -101,6 +101,7 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr $langName = i18n::get_locale_name($this->Locale); HtmlEditorConfig::get('cms')->setOption('spellchecker_languages', "+{$langName}={$this->Locale}"); + Requirements::javascript(CMS_DIR . '/javascript/CMSMain.js'); Requirements::javascript(CMS_DIR . '/javascript/CMSMain_left.js'); Requirements::javascript(CMS_DIR . '/javascript/CMSMain_right.js'); } diff --git a/code/LeftAndMain.php b/code/LeftAndMain.php index 950fc8ed..fc64c55a 100644 --- a/code/LeftAndMain.php +++ b/code/LeftAndMain.php @@ -172,14 +172,26 @@ class LeftAndMain extends Controller { } Requirements::javascript(THIRDPARTY_DIR . '/prototype.js'); - Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js'); + + Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery-latest.js'); Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery_improvements.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.core.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.datepicker.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.draggable.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.droppable.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.accordion.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/effects.core.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/effects.slide.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/effects.drop.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/effects.scale.js'); + Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/layout/jquery.layout.js'); + // @todo Load separately so the CSS files can be inlined + Requirements::css(THIRDPARTY_DIR . '/jquery/themes/smoothness/ui.all.css'); + Requirements::javascript(THIRDPARTY_DIR . '/behaviour.js'); - Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/livequery/jquery.livequery.js'); Requirements::javascript(SAPPHIRE_DIR . '/javascript/core/jquery.ondemand.js'); Requirements::javascript(THIRDPARTY_DIR . '/prototype_improvements.js'); Requirements::javascript(THIRDPARTY_DIR . '/loader.js'); - Requirements::javascript(THIRDPARTY_DIR . '/layout_helpers.js'); Requirements::add_i18n_javascript(SAPPHIRE_DIR . '/javascript/lang'); Requirements::add_i18n_javascript(CMS_DIR . '/javascript/lang'); @@ -226,7 +238,7 @@ class LeftAndMain extends Controller { 'jsparty/prototype.js', 'jsparty/behaviour.js', 'jsparty/prototype_improvements.js', - 'jsparty/jquery/jquery.js', + 'jsparty/jquery/jquery-latest.js', 'jsparty/jquery/plugins/livequery/jquery.livequery.js', 'jsparty/jquery/plugins/effen/jquery.fn.js', 'sapphire/javascript/core/jquery.ondemand.js', @@ -240,7 +252,6 @@ class LeftAndMain extends Controller { 'assets/leftandmain.js', array( 'jsparty/loader.js', - 'jsparty/layout_helpers.js', 'jsparty/scriptaculous/effects.js', 'jsparty/scriptaculous/dragdrop.js', 'jsparty/scriptaculous/controls.js', @@ -250,8 +261,8 @@ class LeftAndMain extends Controller { 'cms/javascript/LeftAndMain_left.js', 'cms/javascript/LeftAndMain_right.js', 'jsparty/tree/tree.js', - 'jsparty/tabstrip/tabstrip.js', - 'jsparty/SWFUpload/swfupload.js', + 'cms/javascript/TinyMCEImageEnhancement.js', + 'sapphire/thirdparty/swfupload/SWFUpload.js', 'cms/javascript/Upload.js', 'cms/javascript/TinyMCEImageEnhancement.js', 'sapphire/javascript/TreeSelectorField.js', diff --git a/css/cms_left.css b/css/cms_left.css index 61421725..60d9fbc0 100644 --- a/css/cms_left.css +++ b/css/cms_left.css @@ -196,6 +196,15 @@ ul.tree span.a span.modified, #treepanes { background-color: #fff; } +#treepanes .ui-accordion-content { + padding: 0; +} +.ui-layout-pane-west { + /* OVERRIDE 'default styles' */ + padding: 0 !important; + overflow: hidden !important; +} + #treepanes h2 { cursor: pointer; } diff --git a/css/cms_right.css b/css/cms_right.css index 76dbef64..b132862a 100644 --- a/css/cms_right.css +++ b/css/cms_right.css @@ -233,6 +233,12 @@ clear: left; } +/* Overflow is handled by tabsets inside the panel */ +.ui-layout-center { + overflow: hidden !important; +} + + /** * RHS Action Parameters boxes */ diff --git a/css/layout.css b/css/layout.css index 8e8f67af..0d122386 100644 --- a/css/layout.css +++ b/css/layout.css @@ -5,22 +5,110 @@ font-family: Arial, Helvetica, sans-serif; } -html { - height: 100%; - overflow: hidden; -} - body { - height: 100%; background: #ccdef3; } + +/* + * Default Layout Theme + * + * Created for jquery.layout + * + * Copyright (c) 2008 + * Fabrizio Balliano (http://www.fabrizioballiano.net) + * Kevin Dalman (http://allpro.net) + * + * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html) + * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses. + * + * Last Updated: 2009-03-04 + * NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars + */ + +/* +* PANES +*/ +.ui-layout-pane { /* all 'panes' */ + background: #FFF; + /*border: 1px solid #BBB;*/ + overflow: auto; +} + +/* +* RESIZER-BARS +*/ +.ui-layout-resizer { /* all 'resizer-bars' */ + background: #DDD; + border: 1px solid #BBB; + border-width: 0; + opacity: 1; /* on-hover, show the resizer-bar normally */ + filter: alpha(opacity=100); + } + + .ui-layout-resizer-open:hover , /* hover-color to 'resize' */ + .ui-layout-resizer-dragging { /* resizer beging 'dragging' */ + background: #EEE; + } + .ui-layout-resizer-dragging { /* CLONED resizer being dragged */ + border-left: 1px solid #BBB; + border-right: 1px solid #BBB; + } + .ui-layout-resizer-drag { /* REAL resizer while resize in progress */ + } + + .ui-layout-resizer-closed:hover { /* hover-color to 'slide open' */ + background: #EEE; + } + .ui-layout-resizer-sliding { /* resizer when pane was 'slid open' */ + opacity: 0.1; /* show only a slight shadow */ + filter: alpha(opacity=10); + } + .ui-layout-resizer-sliding:hover { /* sliding resizer - hover */ + opacity: 1; /* on-hover, show the resizer-bar normally */ + filter: alpha(opacity=100); + } + /* sliding resizer - add 'outside-border' to resizer on-hover */ + .ui-layout-resizer-north-sliding:hover { border-bottom-width: 1px; } + .ui-layout-resizer-south-sliding:hover { border-top-width: 1px; } + .ui-layout-resizer-west-sliding:hover { border-right-width: 1px; } + .ui-layout-resizer-east-sliding:hover { border-left-width: 1px; } + + +/* +* TOGGLER-BUTTONS +*/ +.ui-layout-toggler { + color: #666; + /*border: 1px solid #BBB;*/ /* match pane-border */ + background-color: #999; + } + .ui-layout-toggler:hover { + background-color: #FC6; + } + .ui-layout-toggler-north , + .ui-layout-toggler-south { + border-width: 0 1px; + } + .ui-layout-toggler-west , + .ui-layout-toggler-east { + border-width: 1px 0; + } + /* hide the toggler-button when the pane is 'slid open' */ + .ui-layout-resizer-sliding ui-layout-toggler { + display: none; + } + /* + * style the text we put INSIDE the east/west togglers + */ + .ui-layout-toggler .content { + font: 30px bold Verdana, Arial, Helvetica, sans-serif; + padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */ + } + /** * Actions/Buttons */ .ajaxActions { - position: absolute; - bottom: 5px; - right: 8px; text-align: right; } @@ -121,43 +209,11 @@ body.stillLoading select { } /** 3-PANEL LAYOUT **/ -#top { +.ss-cms-top-menu { font-size: 14px; height: 33px; background: #474855 url(../images/mainmenu/top-bg.gif) top left repeat-x; color: #fff; - overflow: hidden; -} -#left { - position: absolute; - top: 45px; - left: 3px; - width: 205px; - height: 91%; - z-index: 50; - border: 1px solid #acbbcc; - background: #fff; -} -#right { - position: absolute; - left: 208px; - top: 45px; - height: 91%; - width: 600px; - overflow: auto; - z-index: 50; - border: 1px solid #acbbcc; - background: #eee; - margin-right: 3px; -} - -#separator { - position: absolute; - top: 51px; - left: 205px; - height: 92%; - width: 3px; - cursor: e-resize; } /** @@ -171,10 +227,6 @@ body.stillLoading select { width: 18px; display: block; } -#separator.hidden { - display: none; -} - #left div.title, #right div.title { border-top: 1px solid #77BBEE; @@ -204,17 +256,17 @@ body.stillLoading select { } /** TOP PANEL **/ -#top #MainMenu { +.ss-cms-top-menu #MainMenu { margin: 0 0 0 6px; } -#top #MainMenu li { +.ss-cms-top-menu #MainMenu li { margin: 0 4px; float: left; height: 33px; cursor: pointer; } -#top #MainMenu a { +.ss-cms-top-menu #MainMenu a { display: block; height: 33px; float: left; @@ -227,28 +279,28 @@ body.stillLoading select { color: #fff; text-decoration: none; } - #top #MainMenu a:hover { + .ss-cms-top-menu #MainMenu a:hover { text-decoration: none; background: #6a7580 url(../images/mainmenu/hover.gif) repeat-x left top; } -#top #MainMenu .current { +.ss-cms-top-menu #MainMenu .current { background: #ccdef3 url(../images/mainmenu/current.gif) repeat-x left top; border-bottom : none; } - #top #MainMenu .current a:hover { + .ss-cms-top-menu #MainMenu .current a:hover { background: #cddef3 url(../images/mainmenu/currentHover.gif) repeat-x left top; } -#top #MainMenu .current a:link, -#top #MainMenu .current a:visited { +.ss-cms-top-menu #MainMenu .current a:link, +.ss-cms-top-menu #MainMenu .current a:visited { color : #2f383f; } -#top #Logo { +.ss-cms-top-menu #Logo { float: right; } - #top #Logo a { + .ss-cms-top-menu #Logo a { margin: 0; display: block; font-size: 14px; @@ -262,61 +314,54 @@ body.stillLoading select { background: url(../images/mainmenu/logo.gif) right top no-repeat; color: #fff; } - html > body #top #Logo { + html > body .ss-cms-top-menu #Logo { padding-bottom: 0; } -#bottom { +.ss-cms-bottom-bar { width: 100%; - position: absolute; - bottom: 0; - left: 0; - height: 23px; - overflow: hidden; background: #4d4e5a url(../images/textures/footerBg.gif) repeat-x left top; } -#bottom .holder { +.ss-cms-bottom-bar .holder { text-align: center; - padding: 5px 6px 0 3px; font-size: 10px; color: #fff; } -#bottom #logInStatus { +.ss-cms-bottom-bar #logInStatus { float: right; } - #bottom a { + .ss-cms-bottom-bar a { color: #fff; background: none; } - #bottom a:hover { + .ss-cms-bottom-bar a:hover { text-decoration: none; color: #ccc; } - #bottom #logInStatus #LogoutLink { + .ss-cms-bottom-bar #logInStatus #LogoutLink { background: url(../images/logout.gif) no-repeat right top; padding-right: 20px; - padding-bottom: 3px; } -#bottom #switchView { +.ss-cms-bottom-bar #switchView { float: left; } - #bottom #switchView a, #bottom #switchView span { + .ss-cms-bottom-bar #switchView a, .ss-cms-bottom-bar #switchView span { background: none; padding-left: 8px; padding-right: 8px; display: inline-block; border-left: 1px solid #AAA; } - #bottom #switchView span { + .ss-cms-bottom-bar #switchView span { border-left: none; } -#bottom .bottomTabs a { +.ss-cms-bottom-bar .bottomTabs a { color: #fff; } -#bottom .bottomTabs div.blank { +.ss-cms-bottom-bar .bottomTabs div.blank { display: block; float: left; cursor: pointer; @@ -328,10 +373,10 @@ body.stillLoading select { padding-left: 2px; color: #fff; } -#bottom .bottomTabs .current { +.ss-cms-bottom-bar .bottomTabs .current { color: #ccc; } - #bottom .bottomTabs a:hover { + .ss-cms-bottom-bar .bottomTabs a:hover { color: #ccc; text-decoration: none; } diff --git a/javascript/CMSMain.js b/javascript/CMSMain.js new file mode 100644 index 00000000..0d98ad59 --- /dev/null +++ b/javascript/CMSMain.js @@ -0,0 +1,66 @@ +var outerLayout; +var innerLayout; + +jQuery(document).ready(function () { + + // layout containing the tree, CMS menu, the main form etc. + outerLayout = jQuery('body').layout({ + defaults: { + // TODO Reactivate once we have localized values + togglerTip_open: '', + togglerTip_closed: '', + resizerTip: '', + sliderTip: '' + }, + // contains CMSMenu + north: { + slidable: false, + resizable: false, + size: 35, + togglerLength_open: 0 + }, + // "Page view", "profile" and "logout" links + south: { + slidable: false, + resizable: false, + size: 20, + togglerLength_open: 0 + }, + // "Insert link" etc. + east: { + initClosed: true, + fxName: "none" + }, + // Tree, page version history + west: { + size: 250, + onresize: function () { jQuery("#treepanes").accordion("resize"); }, + onopen: function () { jQuery("#treepanes").accordion("resize"); }, + fxName: "none" + }, + // Page forms + center: { + onresize: "innerLayout.resizeAll" + } + }); + + // Layout for the form and its buttons + innerLayout = jQuery('#right').layout({ + center: {}, + south: { + slidable: false, + resizable: false, + size: 30, + togglerLength_open: 0 + } + + }) + + // Adjust tree accordion etc. in left panel to work correctly + // with jQuery.layout (see http://layout.jquery-dev.net/tips.html#Widget_Accordion) + jQuery("#treepanes").accordion({ + fillSpace: true, + animated: false + }); + +}); \ No newline at end of file diff --git a/javascript/LeftAndMain.js b/javascript/LeftAndMain.js index d11b09dd..7009acb6 100644 --- a/javascript/LeftAndMain.js +++ b/javascript/LeftAndMain.js @@ -1,92 +1,6 @@ var _AJAX_LOADING = false; -// Resize the tabs once the document is properly loaded -// @todo most of this file needs to be tidied up using jQuery -if(typeof(jQuery) != 'undefined') { - (function($) { - $(document).ready(function() { - window.onresize(true); - }); - })(jQuery); -} - -/** - * Code for the separator bar between the two panes - */ -function DraggableSeparator() { - this.onmousedown = this.onmousedown.bindAsEventListener(this); - // this.onselectstart = this.onselectstart.bindAsEventListener(this); -} -DraggableSeparator.prototype = { - onmousedown : function(event) { - this.leftBase = $('left').offsetWidth - Event.pointerX(event); - this.separatorBase = getDimension($('separator'),'left') - Event.pointerX(event); - this.rightBase = getDimension($('right'),'left') - Event.pointerX(event); - - document.onmousemove = this.document_mousemove.bindAsEventListener(this); - document.onmouseup = this.document_mouseup.bindAsEventListener(this); - - document.body.onselectstart = this.body_selectstart.bindAsEventListener(this); - }, - document_mousemove : function(event) { - $('left').style.width = (this.leftBase + Event.pointerX(event)) + 'px'; - fixRightWidth(); - }, - document_mouseup : function(e) { - document.onmousemove = null; - }, - - body_selectstart : function(event) { - Event.stop(event); - return false; - } -} - -function fixRightWidth() { - if(!$('right')) return; - - // Absolutely position all the elements - var sep = getDimension($('left'),'width') + getDimension($('left'),'left'); - $('separator').style.left = (sep + 2) + 'px'; - $('right').style.left = (sep + 6) + 'px'; - - // Give the remaining space to right - var bodyWidth = parseInt(document.body.offsetWidth); - var leftWidth = parseInt($('left').offsetWidth); - var sepWidth = parseInt($('separator').offsetWidth - 8); - var rightWidth = bodyWidth - leftWidth - sepWidth -18; - - // Extra pane in right for insert image/flash/link things - if($('contentPanel') && $('contentPanel').style.display != "none") { - rightWidth -= 210; - $('contentPanel').style.left = leftWidth + sepWidth + rightWidth + sepWidth + 23 + 'px'; - } - - if(rightWidth >= 0) $('right').style.width = rightWidth + 'px'; -} - Behaviour.register({ - '#separator' : DraggableSeparator, - - '#left' : { - hide : function() { - if(!this.hidden) { - this.hidden = true; - this.style.width = null; - Element.addClassName(this,'hidden'); - Element.addClassName('separator','hidden'); - fixRightWidth(); - } - }, - show : function() { - if(this.hidden) { - this.hidden = false; - Element.removeClassName(this,'hidden'); - Element.removeClassName('separator','hidden'); - fixRightWidth(); - } - } - }, '#MainMenu li' : { onclick : function(event) { @@ -122,94 +36,6 @@ Behaviour.register({ }); - - -window.ontabschanged = function() { - var formEl = $('Form_EditForm'); - if( !formEl ) formEl = $('Form_AddForm'); - - if( !formEl ) - return; - - var fs = formEl.getElementsByTagName('fieldset')[0]; - if(fs) fs.style.height = formEl.style.height; - - // var divs = document.getElementsBySelector('#Form_EditForm div'); - /*for(i=0;i
My Site
--> -
-

- - - - <% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %> -

+

+ <% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %> +

-
    +
      • @@ -59,19 +55,18 @@ <% end_control %>
       
      - - + +
- - $BatchActionParameters + -

- + - - <% _t('PAGEVERSIONH','Page Version History') %> -

- -

- + - - <% _t('SITEREPORTS','Site Reports') %> -

- $ReportFormParameters - diff --git a/templates/Includes/CMSMain_right.ss b/templates/Includes/CMSMain_right.ss index e69d843e..cde0810c 100755 --- a/templates/Includes/CMSMain_right.ss +++ b/templates/Includes/CMSMain_right.ss @@ -1,14 +1,17 @@ -
-
- +
<% if EditForm %> $EditForm <% else %> - -

$ApplicationName

- -

<% _t('WELCOMETO','Welcome to') %> $ApplicationName! <% _t('CHOOSEPAGE','Please choose a page from the left.') %>

- +

$ApplicationName

+

+ <% _t('WELCOMETO','Welcome to') %> $ApplicationName! + <% _t('CHOOSEPAGE','Please choose a page from the left.') %> +

<% end_if %> +
- +
+
+
+ + diff --git a/templates/LeftAndMain.ss b/templates/LeftAndMain.ss index 130a4137..2db8b763 100644 --- a/templates/LeftAndMain.ss +++ b/templates/LeftAndMain.ss @@ -11,23 +11,19 @@
<% _t('LOADING','Loading...',PR_HIGH) %>
-
+
$CMSTopMenu
-
+
$Left
- -
-   -
- -