tonyair/silverstripe-cms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-cms synced 2024-10-22 06:05:56 +00:00
Code Issues Projects Releases Wiki Activity

BUGFIX Allowing overflowing "insert link/image/flash" panel in CMS to scroll (AIR-17)

Browse Source
This commit is contained in:
Ingo Schommer 2011-09-05 15:04:28 +02:00
parent d81f882b4f
commit 6c922bd32b
2 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/layout.css
View File

@ -518,8 +518,7 @@ ul.tree li.Root span.Root span.c a {
iframe { iframe {
border: none; border: none;
} }
/* Content Panel Design /* Panel for inserting images and links etc
* This is our new right hand pane for inserting images and links etc
*/ */
#contentPanel { #contentPanel {
background-color: #fff; background-color: #fff;
@ -528,17 +527,22 @@ iframe {
border: 1px solid #ACBBCC; border: 1px solid #ACBBCC;
top: 45px; top: 45px;
padding: 0; padding: 0;
margin-right: 10px; overflow: auto;
overflow: hidden; overflow-x: hidden;
font-size: 12px; font-size: 12px;
} }
#contentPanel form {
width: 100%;
background: url("../images/textures/obar-18.gif") repeat-x top left;
}
#contentPanel div, #contentPanel div,
#contentPanel p#TargetBlank { #contentPanel p#TargetBlank {
margin-left: 0; margin-left: 0;
} }
#contentPanel div.TreeDropdownField { #contentPanel div.TreeDropdownField {
width: 180px; width: 181px;
} }
#contentPanel div.TreeDropdownField span.items { #contentPanel div.TreeDropdownField span.items {
width: 155px; width: 155px;
@ -570,10 +574,11 @@ iframe {
} }
#contentPanel fieldset { #contentPanel fieldset {
padding: 5px; padding: 0 5px;
} }
#contentPanel h2 { #contentPanel h2 {
margin: -5px -5px 0 -5px; margin: 0 0 5px 0;
background: none; /* See '#contentPanel > form' */
} }
#contentPanel .thumbnailstrip h2 { #contentPanel .thumbnailstrip h2 {
font-size: 1.1em; font-size: 1.1em;
@ -594,7 +599,6 @@ iframe {
background:#E9E9E9 none repeat scroll 0%; background:#E9E9E9 none repeat scroll 0%;
display:block; display:block;
padding:3px; padding:3px;
width:98%;
} }
#contentPanel input.text { #contentPanel input.text {
border:1px solid #A7A7A7; border:1px solid #A7A7A7;
@ -682,7 +686,7 @@ iframe {
border: 2px solid #e4e3e3; border: 2px solid #e4e3e3;
} }
#contentPanel div.Actions { #contentPanel div.Actions {
margin: 2px 5px 0 0; padding: 10px 5px 10px 0;
text-align: right; text-align: right;
} }
#contentPanel #FolderImages a.selectedImage img, #contentPanel #FolderImages a.selectedImage img,

50
javascript/LeftAndMain.js
View File

@ -52,6 +52,8 @@ DraggableSeparator.prototype = {
function fixRightWidth() { function fixRightWidth() {
if(!$('right')) return; if(!$('right')) return;
var contentPanel = jQuery('#contentPanel');
// Absolutely position all the elements // Absolutely position all the elements
var sep = getDimension($('left'),'width') + getDimension($('left'),'left'); var sep = getDimension($('left'),'width') + getDimension($('left'),'left');
$('separator').style.left = (sep + 2) + 'px'; $('separator').style.left = (sep + 2) + 'px';
@ -62,10 +64,21 @@ function fixRightWidth() {
var leftWidth = parseInt($('left').offsetWidth); var leftWidth = parseInt($('left').offsetWidth);
var sepWidth = parseInt($('separator').offsetWidth - 8); var sepWidth = parseInt($('separator').offsetWidth - 8);
var rightWidth = bodyWidth - leftWidth - sepWidth -18; var rightWidth = bodyWidth - leftWidth - sepWidth -18;
// hardcoded to avoid confusion when flipping between scrollbar widths
var contentPanelDefaultWidth = 205;
// Extra pane in right for insert image/flash/link things // Extra pane in right for insert image/flash/link things
if($('contentPanel') && $('contentPanel').style.display != "none") { if(contentPanel.is(':visible')) {
rightWidth -= 210; rightWidth -= contentPanelDefaultWidth - sepWidth;
if(contentPanel.hasScrollbar()) {
rightWidth -= jQuery.getScrollbarWidth();
contentPanel.width(contentPanelDefaultWidth + jQuery.getScrollbarWidth());
} else {
contentPanel.width(contentPanelDefaultWidth);
}
// Always set the contained element to the original width (excluding potential scrollbar widths)
contentPanel.children('form:visible').width(contentPanelDefaultWidth);
$('contentPanel').style.left = leftWidth + sepWidth + rightWidth + sepWidth + 23 + 'px'; $('contentPanel').style.left = leftWidth + sepWidth + rightWidth + sepWidth + 23 + 'px';
} }
@ -190,26 +203,6 @@ window.onresize = function(init) {
if(typeof fitToParent == 'function') { if(typeof fitToParent == 'function') {
if($('Form_EditForm')) fitToParent('Form_EditForm', 4); if($('Form_EditForm')) fitToParent('Form_EditForm', 4);
if($('Form_AddForm')) fitToParent('Form_AddForm', 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 fixHeight_left == 'function') fixHeight_left();
if(typeof fixRightWidth == 'function') fixRightWidth(); if(typeof fixRightWidth == 'function') fixRightWidth();
@ -899,6 +892,17 @@ function nullConverter(url) {
return url; return url;
} }
(function($) {
$.fn.hasScrollbar = function(dir) {
var fn = (dir == 'x') ? 'scrollLeft' : 'scrollTop';
var origScroll = this[fn]();
this[fn](1); // do a fake scroll
var hasScrollbar = (this[fn]() !== 0); // did it have any effect?
this[fn](origScroll); // scroll back
return hasScrollbar;
};
})(jQuery);
Behaviour.register({ Behaviour.register({
'textarea.htmleditor' : { 'textarea.htmleditor' : {
initialize : function() { initialize : function() {
@ -914,4 +918,4 @@ Behaviour.register({
} }
} }
} }
}) });