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

@@ -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');
 	}

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',
+				'cms/javascript/TinyMCEImageEnhancement.js',
-				'jsparty/SWFUpload/swfupload.js',
+				'sapphire/thirdparty/swfupload/SWFUpload.js',
 				'cms/javascript/Upload.js',
 				'cms/javascript/TinyMCEImageEnhancement.js',
 				'sapphire/javascript/TreeSelectorField.js',

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;
 }

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
  */

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,
+.ss-cms-top-menu #MainMenu .current a:link,
-#top #MainMenu .current a:visited {
+.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;
 	}

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
+	});
+
+});

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<divs.length;i++) {
-		if( ( Element.hasClassName(divs[i],'tab') || Element.hasClassName(divs[i],'tabset') ) && isVisible(divs[i]) ) {
-			if(navigator.appName == "Microsoft Internet Explorer")
-				fitToParent(divs[i], i == 0 ? 18 : 0);
-			else
-				fitToParent(divs[i], 3);
-		}
-	}*/
-	
-	if(typeof  _TAB_DIVS_ON_PAGE != 'undefined') {
-		for(i = 0; i < _TAB_DIVS_ON_PAGE.length; i++ ) {
-			fitToParent(_TAB_DIVS_ON_PAGE[i], 30);
-		}
-	}
-}
-
-window.onresize = function(init) {
-	var right = $('right');
-
-	if(typeof fitToParent == 'function') {
-		fitToParent('right', 12);
-		if($('ModelAdminPanel')) {
-			fitToParent('ModelAdminPanel',-60);
-		}
-		if($('contentPanel')) {
-			fitToParent('contentPanel', 12);
-		}
-	}
-
-	if( $('left') && $('separator') && right ) {
-		// #right has padding-bottom to make room for AJAX Action buttons so we need to add that
- 		if (navigator.appName == "Microsoft Internet Explorer") {
-			var paddingBottomOffset = 35;
-		} else {
-			var paddingBottomOffset = 20;
-		}
-		var rightH = parseInt(right.style.height) + paddingBottomOffset;
-		$('left').style.height = $('separator').style.height = rightH + 'px';
-	}
-
-	if(typeof fitToParent == 'function') {
-		if($('Form_EditForm')) fitToParent('Form_EditForm', 4);
-		if($('Form_AddForm')) fitToParent('Form_AddForm', 4);
-		
-		if($('Form_EditorToolbarImageForm') && $('Form_EditorToolbarImageForm').style.display == "block") {
-			fitToParent('Form_EditorToolbarImageForm', 5);
-			fitToParent($('Form_EditorToolbarImageForm').getElementsByTagName('fieldset')[0]);
-			if(navigator.appName == "Microsoft Internet Explorer") {
-				fitToParent('Image');
-			} else {
-				fitToParent('Image', 250);
-			}
-		}
-		if($('Form_EditorToolbarFlashForm') && $('Form_EditorToolbarFlashForm').style.display == "block") {
-			fitToParent('Form_EditorToolbarFlashForm', 5);
-			fitToParent($('Form_EditorToolbarFlashForm').getElementsByTagName('fieldset')[0]);
-			if(navigator.appName == "Microsoft Internet Explorer") {
-				fitToParent('Flash');
-			} else {
-				fitToParent('Flash', 130);
-			}
-		}
-	
-	}
-	if(typeof fixHeight_left == 'function') fixHeight_left();
-	if(typeof fixRightWidth == 'function') fixRightWidth();
-
-	window.ontabschanged();
-}
-
-appendLoader(function() {
-	document.body.style.overflow = 'hidden';
-	window.onresize(true);
-});
-
 function isVisible(el) {
 	// if(typeof el.isVisible != 'undefined') return el.isVisible;
 	if(el.tagName == "body" || el.tagName == "BODY") return (el.isVisible = true);
@@ -783,4 +609,4 @@ Behaviour.register({
             }
         }
     }
-})
+});

javascript/LeftAndMain_left.js

@@ -469,7 +469,6 @@ treeactions = {
 		if(li.selected) this.closeSelection(li, true);
 		else this.openSelection(li, true);
 
-		fixHeight_left();
 		return li.selected;
 	},
 	closeSelection : function(li, nested) {
@@ -480,8 +479,6 @@ treeactions = {
 		li.selected = false;
 		$(_HANDLER_FORMS[li.id]).notify('Close');
 		if(li.onclose) li.onclose();
-
-		if(typeof nested == 'undefined') fixHeight_left();
 	},
 	openSelection: function(li, nested) {
 		li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li;
@@ -495,20 +492,9 @@ treeactions = {
 		for(i=0;i<set.length;i++) if(li != set[i] && set[i].selected) {
 			this.closeSelection(set[i], true);
 		}
-		
-		if(typeof nested == 'undefined') fixHeight_left();
 	}
 }
 
-function fixHeight_left() {
-	if($('treepanes')) {
-		fitToParent('treepanes');
-		var st = $('treepanes');
-		if(st.resize) st.resize();
-	}
-	else fitToParent('sitetree_holder');
-}
-
 // Build the site tree
 SiteTree.applyTo('#sitetree');
 

templates/Includes/CMSMain_left.ss

@@ -1,14 +1,10 @@
-<!-- <div class="title"><div style="background-image : url(cms/images/panels/MySite.png)">My Site</div></div> -->
-
 	<div id="treepanes">
-		<h2 id="heading_sitetree" class="selected">
+		<h3>
-			<img id="sitetree_toggle_closed" src="sapphire/images/toggle-closed.gif" alt="+" style="display:none;" title="<% _t('OPENBOX','click to open this box') %>" />
+			<a href="#"><% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %></a>
-			<img id="sitetree_toggle_open" src="sapphire/images/toggle-open.gif" alt="-" title="<% _t('CLOSEBOX','click to close box') %>" />
+		</h3>
-			<% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %>
-		</h2>
 		<div id="sitetree_holder">
 			<div id="TreeTools">
-				<ul id="TreeActions">
+				 <ul id="TreeActions">
 					<li class="action" id="addpage"><button><% _t('CREATE','Create',PR_HIGH) %></button></li>
 					<li class="action" id="search"><button><% _t('SEARCH','Search',PR_HIGH) %></button></li>
 					<li class="action" id="batchactions"><button><% _t('BATCHACTIONS','Batch Actions',PR_HIGH) %></button></li>
@@ -59,19 +55,18 @@
 							<% end_control %>
 						</select>
 						<div id="searchIndicator">&nbsp;</div>
-						<input type="submit" id="SiteTreeSearchClearButton" class="action" value="<% _t('CLEAR','Clear') %>" title="<% _t('CLEARTITLE','Clear the search and view all items') %>" />
+						<input type="submit" id="SiteTreeSearchClearButton" class="action" value="<% _t('CLEAR') %>" title="<% _t('CLEARTITLE','Clear the search and view all items') %>" />
-						<input type="submit" id="SiteTreeSearchButton" class="action" value="<% _t('SEARCH','Search') %>" title="<% _t('SEARCHTITLE','Search through URL, Title, Menu Title, &amp; Content') %>" />
+						<input type="submit" id="SiteTreeSearchButton" class="action" value="<% _t('SEARCH') %>" title="<% _t('SEARCHTITLE','Search through URL, Title, Menu Title, &amp; Content') %>" />
 					</div>
 				</div>
 				</form>
-			
+
-			$BatchActionParameters
 			<div id="batchactionsforms" style="display: none">
 				<form class="actionparams" style="border:0" id="batchactions_options" action="">
 					<p><% _t('SELECTPAGESACTIONS','Select the pages that you want to change &amp; then click an action:') %></p>
 
 					<input type="hidden" name="csvIDs" />
-					<div id="actionParams"></div>
+
 					<div>
 						<select id="choose_batch_action">
 							<% control BatchActionList %>
@@ -82,14 +77,13 @@
 					</div>
 				</form>
 			</div>
-			<div class="checkboxAboveTree noBottomBorder">
+			<div class="checkboxAboveTree" style="border-bottom:none">
 				Show: <select id="siteTreeFilterList">
 					<% control SiteTreeFilters %>
 					<option value="$ClassName">$Title</option>
 					<% end_control %>
 				</select> <img id="siteTreeFilterActionIndicator" style="display:none" src="cms/images/network-save.gif">
 			</div>
-			<% if CanOrganiseSitetree %>
 			<div class="checkboxAboveTree">
 				<img id="checkboxActionIndicator" src="cms/images/network-save.gif">
 				<div>
@@ -97,7 +91,7 @@
 					<label for="sortitems"><% _t('ENABLEDRAGGING','Allow drag &amp; drop reordering', PR_HIGH) %></label>
 				</div>
 			</div>
-			<% end_if %>
+
 			<% if IsTranslatableEnabled %>
 			<div id="LangSelector_holder">
 				Language: $LangSelector
@@ -108,16 +102,16 @@
 			<div id="sitetree_ul">
 				$SiteTreeAsUL
 			</div>
-		</div>
-
-		<div id="publication_key">
-			<% _t('KEY','Key:') %>
-			<ins style="cursor: help" title="<% _t('ADDEDNOTPUB','Added to the draft site and not published yet') %>"><% _t('NEW','new') %></ins>
-			<del style="cursor: help" title="<% _t('DELETEDSTILLLIVE','Deleted from the draft site but still on the live site') %>"><% _t('DEL','deleted') %></del>
-			<span style="cursor: help" title="<% _t('EDITEDNOTPUB','Edited on the draft site and not published yet') %>" class="modified"><% _t('CHANGED','changed') %></span>
-			<span style="cursor: help" title="<% _t('NOTINMENU','Excluded from navigation menus') %>" class="notinmenu"><% _t('HIDDEN','hidden') %></span>
 			
-		</div>		
+			<div id="publication_key">
+				<% _t('KEY','Key:') %>
+				<ins style="cursor: help" title="<% _t('ADDEDNOTPUB','Added to the draft site and not published yet') %>"><% _t('NEW','new') %></ins>
+				<del style="cursor: help" title="<% _t('DELETEDSTILLLIVE','Deleted from the draft site but still on the live site') %>"><% _t('DEL','deleted') %></del>
+				<span style="cursor: help" title="<% _t('EDITEDNOTPUB','Edited on the draft site and not published yet') %>" class="modified"><% _t('CHANGED','changed') %></span>
+				<span style="cursor: help" title="<% _t('NOTINMENU','Excluded from navigation menus') %>" class="notinmenu"><% _t('HIDDEN','hidden') %></span>
+
+			</div>
+		</div>	
 		
 		<!--
 		<div id="search_holder" style="display:none">
@@ -126,12 +120,10 @@
 		</div>
 		-->
 
-		<h2 id="heading_versions">
+		<h3>
-			<img id="versions_toggle_closed" src="sapphire/images/toggle-closed.gif" alt="+" title="<% _t('OPENBOX') %>" />
+			<a href="#"><% _t('PAGEVERSIONH','Page Version History') %></a>
-			<img id="versions_toggle_open" src="sapphire/images/toggle-open.gif" alt="-" style="display:none;" title="<% _t('CLOSEBOX') %>" /> 
+		</h3>
-			<% _t('PAGEVERSIONH','Page Version History') %>
+		<div id="versions_holder">
-		</h2>
-		<div class="listpane" id="versions_holder" style="display:none">
 			<p class="pane_actions" id="versions_actions">
 				
 				<span class="versionChoice">
@@ -147,17 +139,12 @@
 			</div>
 		</div>
 
-		<h2 id="heading_reports">
+		<h3>
-			<img id="reports_toggle_closed" src="sapphire/images/toggle-closed.gif" alt="+" title="<% _t('OPENBOX') %>" />
+			<a href="#"><% _t('SITEREPORTS','Site Reports') %></a>
-			<img id="reports_toggle_open" src="sapphire/images/toggle-open.gif" alt="-" style="display:none;" title="<% _t('CLOSEBOX') %>" /> 
+		</h3>
-			<% _t('SITEREPORTS','Site Reports') %>
+		<div class="listpane" id="reports_holder">
-		</h2>
+			<p id="ReportSelector_holder">$ReportSelector <input class="action" type="submit" id="report_select_go" value="<% _t('GO','Go') %>" /></p>
-		$ReportFormParameters
+			<div class="unitBody">
-		<div class="listpane" id="reports_holder" style="display:none">
+			</div>
-			<p id="ReportSelector_holder">
-				$ReportSelector
-				<input class="action" type="submit" id="report_select_go" onclick="$('reports_holder').showreport();" value="<% _t('GO','Go') %>" />
-			</p>
-			<div class="unitBody"></div>
 		</div>
 	</div>

templates/Includes/CMSMain_right.ss

@@ -1,14 +1,17 @@
-<div id="form_actions_right" class="ajaxActions">
+<div class="ui-layout-center">
-</div>
-
 <% if EditForm %>
 	$EditForm
 <% else %>
-	<form id="Form_EditForm" action="admin?executeForm=EditForm" method="post" enctype="multipart/form-data">
+	<h1>$ApplicationName</h1>
-		<h1>$ApplicationName</h1>
+	<p>
-
+		<% _t('WELCOMETO','Welcome to') %> $ApplicationName! 
-		<p><% _t('WELCOMETO','Welcome to') %> $ApplicationName! <% _t('CHOOSEPAGE','Please choose a page from the left.') %></p>
+		<% _t('CHOOSEPAGE','Please choose a page from the left.') %>
-	</form>
+	</p>
 <% end_if %>
+</div>
 
-<p id="statusMessage" style="visibility:hidden"></p>
+<div class="ui-layout-south">
+	<div id="form_actions_right" class="ajaxActions"></div>
+</div>
+
+<!--<p id="statusMessage" style="visibility:hidden"></p>-->

templates/LeftAndMain.ss

@@ -11,23 +11,19 @@
 <body class="stillLoading $CSSClasses">
 	<div id="Loading" style="background: #FFF url($LoadingImage) 50% 50% no-repeat; position: absolute;z-index: 100000;height: 100%;width: 100%;margin: 0;padding: 0;z-index: 100000;position: absolute;"><% _t('LOADING','Loading...',PR_HIGH) %><noscript><h1><% _t('REQUIREJS','The CMS requires that you have JavaScript enabled.',PR_HIGH) %></h1></noscript></div>
 	
-	<div id="top">
+	<div class="ui-layout-north ss-cms-top-menu">
 		$CMSTopMenu
 	</div>
 	
-	<div id="left" style="float:left">
+	<div class="ui-layout-west">
 		$Left
 	</div>
-	
+		
-	<div id="separator" style="float:left">
+	<div class="ui-layout-center" id="right">
-		&nbsp;
-	</div>
-	
-	<div class="right" id="right">
 		$Right
 	</div>
 
-	<div id="contentPanel" style="display:none;">
+	<div class="ui-layout-east">
 		<% control EditorToolbar %>
 			$ImageForm
 			$LinkForm
@@ -35,7 +31,7 @@
 		<% end_control %>
 	</div>
 	
-	<div id="bottom">
+	<div class="ui-layout-south ss-cms-bottom-bar">
 		<div class="holder">
 			<div id="logInStatus">
 				<a href="$ApplicationLink" title="<% _t('SSWEB','Silverstripe Website') %>">$ApplicationName</a>&nbsp;-&nbsp;