From 0c1dc2178d5bc6297868a55dd7f8eb48231ddc97 Sun, 29 May 2011 16:15:43 +0200
From: Bram Goffings <bramgoffings@gmail.com>
Date: Sun, 29 May 2011 16:15:32 +0200
Subject: [PATCH] overlay rtl style

diff --git a/modules/overlay/overlay-child-rtl.css b/modules/overlay/overlay-child-rtl.css
new file mode 100644
index 0000000..98c934e
--- /dev/null
+++ b/modules/overlay/overlay-child-rtl.css
@@ -0,0 +1,35 @@
+
+html {
+  direction: rtl;
+}
+
+#overlay-title {
+  float: right;
+  left: auto;
+}
+#overlay {
+  padding: .2em;
+  padding-left: 26px;
+}
+#overlay-close-wrapper {
+  left: 0;
+  right: auto;
+}
+#overlay-close,
+#overlay-close:hover {
+  background: transparent url(images/close-rtl.png) no-repeat;
+  -moz-border-radius-topright: 0;
+  -webkit-border-top-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+/**
+ * Tabs on the overlay.
+ */
+#overlay-tabs {
+  left: 20px;
+  right: auto;
+}
+#overlay-tabs li {
+  margin: 0 -3px 0 O;
+}
diff --git a/modules/overlay/overlay-child.css b/modules/overlay/overlay-child.css
index 5a297cb..08acdeb 100644
--- a/modules/overlay/overlay-child.css
+++ b/modules/overlay/overlay-child.css
@@ -17,7 +17,7 @@
   min-width: 700px;
   position: relative;
   padding: .2em;
-  padding-right: 26px;
+  padding-right: 26px; /* LTR */
   width: 88%;
 }
 #overlay-titlebar {
@@ -39,7 +39,7 @@
 }
 #overlay-title {
   color: #fff;
-  float: left;
+  float: left; /* LTR */
   font-size: 20px;
   margin: 0;
   padding: 0.3em 0;
@@ -51,14 +51,14 @@
 
 #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;
@@ -75,13 +75,13 @@
   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,
diff --git a/modules/overlay/overlay-parent.js b/modules/overlay/overlay-parent.js
index 8f11df6..1d567a1 100644
--- a/modules/overlay/overlay-parent.js
+++ b/modules/overlay/overlay-parent.js
@@ -413,6 +413,27 @@
   // 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 () {
@@ -421,6 +442,10 @@
     // In IE, Shadow filter makes element to overlap the scrollbar with 1px.
     if (this.filters && this.filters.length && this.filters.item('DXImageTransform.Microsoft.Shadow')) {
       maxWidth -= 1;
+    }
+
+    if (Drupal.overlay.leftSidedScrollbarOffset) {
+      $(this).css('left', Drupal.overlay.leftSidedScrollbarOffset);
     }
 
     // Prevent displaced elements overlapping window's scrollbar.
@@ -435,7 +460,12 @@
     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;
     }
   });
diff --git a/themes/seven/style-rtl.css b/themes/seven/style-rtl.css
index 1ddb693..942c5cf 100644
--- a/themes/seven/style-rtl.css
+++ b/themes/seven/style-rtl.css
@@ -227,7 +227,7 @@
   float: right;
 }
 .overlay ul.secondary {
-  margin: -2.4em 0 0.3em 0;
+  margin: -1.4em 0 0.3em 0;
 }
 
 /* Shortcut theming */
diff --git a/themes/seven/style.css b/themes/seven/style.css
index f61774b..bf73c32 100644
--- a/themes/seven/style.css
+++ b/themes/seven/style.css
@@ -907,7 +907,8 @@
 }
 .overlay ul.secondary {
   background: transparent none;
-  margin: -2.4em 0 0.3em 0; /* LTR */
+  margin: -1.4em 0 0.3em 0; /* LTR */
+  overflow: visible;
 }
 .overlay #content {
   padding: 0;