Move flash, image and link forms to right

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@44365 467b73ca-7a2a-4603-9d3b-597d59a354a9

css/cms_right.css

@@ -432,3 +432,4 @@ div.originallang_holder.field.CompositeField.nolabel {
 .nonTranslating {
 	display: none;
 }
+

css/layout.css

@@ -177,7 +177,8 @@ body.stillLoading select {
 	border-top: 1px solid #77BBEE;
 }
 
-#left h2 {
+#left h2,
+#contentPanel h2 {
 	background-image:url(../images/textures/obar-18.gif);
 	height: 18px;
 	line-height: 18px;
@@ -380,7 +381,6 @@ div.spacer, li.spacer {
 }
 
 .thumbnailstrip {
-	height: 58px;
 	overflow: auto;
 	white-space: nowrap;
 	width: 100%;
@@ -403,4 +403,15 @@ ul.tree li.Root span.Root span.c a {
 /* Misc Styling */
 iframe {
 	border: none;
-}
+}
+
+#contentPanel {
+	background-color: #FFFFFF;
+	width: 205px;
+	float: left;
+	position: absolute;
+	border: 1px solid #ACBBCC;
+	top: 45px;
+	padding 3px;
+}
+

javascript/LeftAndMain.js

@@ -42,7 +42,16 @@ function fixRightWidth() {
 	$('right').style.left = (sep + 6) + 'px';
 
 	// Give the remaining space to right
-	var rightWidth = parseInt(document.body.offsetWidth) - parseInt($('left').offsetWidth) - $('separator').offsetWidth - 8;
+	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').style.display != "none") {
+		rightWidth -= 210;
+		$('contentPanel').style.left = leftWidth + sepWidth + rightWidth + sepWidth + 23 + 'px';
+	}
 
 	if( rightWidth >= 0 )
 		$('right').style.width = rightWidth + 'px';
@@ -144,7 +153,12 @@ window.onresize = function(init) {
 	var rightbottom = $('rightbottom');
 	if(rightbottom) rightbottom.style.display = 'none';
 
-	if(typeof fitToParent == 'function') fitToParent('right', 12);
+	if(typeof fitToParent == 'function') {
+		fitToParent('right', 12);
+		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
@@ -836,4 +850,4 @@ function showIndicator(id, container, imgSrc, insertionType, displayType) {
 
 function hideIndicator(id) {
 	Effect.Fade(id, {duration: 0.3});
-}
+}

templates/Includes/CMSMain_right.ss

@@ -1,3 +1,4 @@
+
 <% include Editor_toolbar %>
 
 <span id="Translating_Message" class="translatingMessage <% if EditingLang %><% else %>nonTranslating<% end_if %>"></span>

templates/Includes/Editor_toolbar.ss

@@ -32,10 +32,4 @@
 </table>
 </div>
 
-$LinkForm
-
-$ImageForm
-
-$FlashForm
-
-<% end_control %>
+<% end_control %>

templates/LeftAndMain.ss

@@ -33,6 +33,14 @@
 	</div>
 	<% end_if %>
 	
+	<div id="contentPanel" style="display:none;">
+		<% control EditorToolbar %>
+			$ImageForm
+			$LinkForm
+			$FlashForm
+		<% end_control %>
+	</div>
+	
 	<div id="bottom">
 		<div class="holder">
 		<div id="logInStatus">
@@ -59,4 +67,4 @@
 	</div>
 	<script type="text/javascript">Behaviour.addLoader(hideLoading)</script>
 </body>
-</html>
+</html>