Commit a0b0765f authored by webchick's avatar webchick

Issue #766170 by aspilicious, casey, tsi, xjm: Fixed Overlay lacks rtl styling.

parent eeb5bbe4
......@@ -17,7 +17,7 @@ html.js body {
min-width: 700px;
position: relative;
padding: .2em;
padding-right: 26px;
padding-right: 26px; /* LTR */
width: 88%;
}
#overlay-titlebar {
......@@ -39,7 +39,7 @@ html.js body {
}
#overlay-title {
color: #fff;
float: left;
float: left; /* LTR */
font-size: 20px;
margin: 0;
padding: 0.3em 0;
......@@ -58,14 +58,14 @@ html.js body {
#overlay-close-wrapper {
position: absolute;
right: 0;
right: 0; /* LTR */
}
#overlay-close,
#overlay-close:hover {
background: transparent url(images/close.png) no-repeat;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
background: transparent url(images/close.png) no-repeat; /* LTR */
-moz-border-radius-topleft: 0; /* LTR */
-webkit-border-top-left-radius: 0; /* LTR */
border-top-left-radius: 0; /* LTR */
display: block;
height: 26px;
margin: 0;
......@@ -82,13 +82,13 @@ html.js body {
line-height: 27px;
margin: -28px 0 0 0;
position: absolute;
right: 20px;
right: 20px; /* LTR */
text-transform: uppercase;
}
#overlay-tabs li {
display: inline;
list-style: none;
margin: 0 0 0 -3px;
margin: 0 0 0 -3px; /* LTR */
padding: 0;
}
#overlay-tabs li a,
......
......@@ -431,6 +431,27 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) {
// IE6 doesn't support maxWidth, use width instead.
var maxWidthName = (typeof document.body.style.maxWidth == 'string') ? 'maxWidth' : 'width';
if (Drupal.overlay.leftSidedScrollbarOffset === undefined && $(document.documentElement).attr('dir') === 'rtl') {
// We can't use element.clientLeft to detect whether scrollbars are placed
// on the left side of the element when direction is set to "rtl" as most
// browsers dont't support it correctly.
// http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html
// There seems to be absolutely no way to detect whether the scrollbar
// is on the left side in Opera; always expect scrollbar to be on the left.
if ($.browser.opera) {
Drupal.overlay.leftSidedScrollbarOffset = document.documentElement.clientWidth - this.iframeWindow.document.documentElement.clientWidth + this.iframeWindow.document.documentElement.clientLeft;
}
else if (this.iframeWindow.document.documentElement.clientLeft) {
Drupal.overlay.leftSidedScrollbarOffset = this.iframeWindow.document.documentElement.clientLeft;
}
else {
var el1 = $('<div style="direction: rtl; overflow: scroll;"></div>').appendTo(document.body);
var el2 = $('<div></div>').appendTo(el1);
Drupal.overlay.leftSidedScrollbarOffset = parseInt(el2[0].offsetLeft - el1[0].offsetLeft);
el1.remove();
}
}
// Consider any element that should be visible above the overlay (such as
// a toolbar).
$('.overlay-displace-top, .overlay-displace-bottom').each(function () {
......@@ -441,6 +462,10 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) {
maxWidth -= 1;
}
if (Drupal.overlay.leftSidedScrollbarOffset) {
$(this).css('left', Drupal.overlay.leftSidedScrollbarOffset);
}
// Prevent displaced elements overlapping window's scrollbar.
var currentMaxWidth = parseInt($(this).css(maxWidthName));
if ((data.drupalOverlay && data.drupalOverlay.maxWidth) || isNaN(currentMaxWidth) || currentMaxWidth > maxWidth || currentMaxWidth <= 0) {
......@@ -453,7 +478,12 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) {
var offset = $(this).offset();
var offsetRight = offset.left + $(this).outerWidth();
if ((data.drupalOverlay && data.drupalOverlay.clip) || offsetRight > maxWidth) {
$(this).css('clip', 'rect(auto, ' + (maxWidth - offset.left) + 'px, ' + (documentHeight - offset.top) + 'px, auto)');
if (Drupal.overlay.leftSidedScrollbarOffset) {
$(this).css('clip', 'rect(auto, auto, ' + (documentHeight - offset.top) + 'px, ' + (Drupal.overlay.leftSidedScrollbarOffset + 2) + 'px)');
}
else {
$(this).css('clip', 'rect(auto, ' + (maxWidth - offset.left) + 'px, ' + (documentHeight - offset.top) + 'px, auto)');
}
(data.drupalOverlay = data.drupalOverlay || {}).clip = true;
}
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment