Merge pull request #754 from adobe/jason-sanjose/issue750

Fix issue #750
adobe · Apr 27, 2012 · 29b984c · 29b984c
2 parents eadd1d3 + f1b82cd
commit 29b984c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -93,6 +93,7 @@ a, img {
 #editorHolder {
     .vbox;
     .box-flex(1);
+    position: relative;
 
     /* Placeholder shown when there is no editor open */
     #notEditor {
@@ -271,7 +272,7 @@ a, img {
     height: 25px;
     position: fixed;
 
-    z-index: 20; /* scrollerShadow appears above this triangle */
+    z-index: 10; /* scrollerShadow appears above this triangle */
 }
 
 .sidebarSelectionTriangle:before {
@@ -309,7 +310,8 @@ a, img {
 }
 
 .sidebar .scrollerShadow {
-    max-width: @sidebar-width;  /* width is clobbered by ViewUtils.updateChildrenToParentScrollwidth() */
+    min-width: @sidebar-width;  /* width is clobbered by ViewUtils.updateChildrenToParentScrollwidth() */
+    max-width: @sidebar-width;
 }
 
 #editorHolder .scrollerShadow {
@@ -321,7 +323,7 @@ a, img {
     background-repeat: no-repeat;
     height: 5px;
     position: fixed;
-    z-index: 21;
+    z-index: 11;
 
     &.top {
         #gradient.vertical(rgba(0,0,0,0.1), rgba(0,0,0,0));

diff --git a/src/utils/ViewUtils.js b/src/utils/ViewUtils.js
@@ -55,18 +55,25 @@ define(function (require, exports, module) {
 
     /** 
      * Positions shadow background elements to indicate vertical scrolling.
-     * @param {!DOMElement} displayElement the DOMElement that displays the shadow
-     * @param {!Object} scrollElement the object that is scrolled
+     * @param {!DOMElement} $displayElement the DOMElement that displays the shadow
+     * @param {!Object} $scrollElement the object that is scrolled
+     * @param {!DOMElement} $shadowTop div .scrollerShadow.top
+     * @param {!DOMElement} $shadowBottom div .scrollerShadow.bottom
+     * @param {boolean} isPositionFixed When using absolute position, top remains at 0.
      */
-    function _updateScrollerShadow($displayElement, $scrollElement, $shadowTop, $shadowBottom) {
-        var offsetTop           = $displayElement.offset().top,
+    function _updateScrollerShadow($displayElement, $scrollElement, $shadowTop, $shadowBottom, isPositionFixed) {
+        var offsetTop           = 0,
             scrollElement       = $scrollElement.get(0),
             scrollTop           = scrollElement.scrollTop,
             topShadowOffset     = Math.min(scrollTop - SCROLL_SHADOW_HEIGHT, 0);
 
         if ($shadowTop) {
             $shadowTop.css("background-position", "0px " + topShadowOffset + "px");
-            $shadowTop.css("top", offsetTop);
+
+            if (isPositionFixed) {
+                offsetTop = $displayElement.offset().top;
+                $shadowTop.css("top", offsetTop);
+            }
         }
 
         if ($shadowBottom) {
@@ -85,13 +92,19 @@ define(function (require, exports, module) {
         }
     }
 
-    function getOrCreateShadow($displayElement, position) {
+    function getOrCreateShadow($displayElement, position, isPositionFixed) {
         var $findShadow = $displayElement.find(".scrollerShadow." + position);
 
         if ($findShadow.length === 0) {
             $findShadow = $(document.createElement("div")).addClass("scrollerShadow " + position);
             $displayElement.append($findShadow);
         }
+
+        if (!isPositionFixed) {
+            // position is fixed by default
+            $findShadow.css("position", "absolute");
+            $findShadow.css(position, "0");
+        }
 
         return $findShadow;
     }
@@ -105,19 +118,23 @@ define(function (require, exports, module) {
      * @param {?boolean} showBottom optionally show the bottom shadow
      */
     function addScrollerShadow(displayElement, scrollElement, showBottom) {
+        // use fixed positioning when the display and scroll elements are the same
+        var isPositionFixed = false;
+
         if (!scrollElement) {
             scrollElement = displayElement;
+            isPositionFixed = true;
         }
 
         // update shadows when the scrolling element is scrolled
         var $displayElement = $(displayElement),
             $scrollElement = $(scrollElement);
 
-        var $shadowTop = getOrCreateShadow($displayElement, "top");
-        var $shadowBottom = (showBottom) ? getOrCreateShadow($displayElement, "bottom") : null;
+        var $shadowTop = getOrCreateShadow($displayElement, "top", isPositionFixed);
+        var $shadowBottom = (showBottom) ? getOrCreateShadow($displayElement, "bottom", isPositionFixed) : null;
 
         var doUpdate = function () {
-            _updateScrollerShadow($displayElement, $scrollElement, $shadowTop, $shadowBottom);
+            _updateScrollerShadow($displayElement, $scrollElement, $shadowTop, $shadowBottom, isPositionFixed);
         };
 
         $scrollElement.on("scroll.scrollerShadow", doUpdate);