Merge pull request #1820 from jbalsas/jbalsas/resizing-styles

Fix for mouse cursor overrides while resizing panels
adobe · Oct 12, 2012 · 9f3237f · 9f3237f
2 parents ec7a30c + 9adf432
commit 9f3237f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -65,9 +65,21 @@ body {
     &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines {
         cursor: col-resize;   
     }
+}
+
+.resizing-container {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: @z-index-brackets-panel-resizer;
+
+    &.horz-resizing {
+        cursor: col-resize;
+    }
 
-    &.vert-resizing a, &.vert-resizing #projects a, &.vert-resizing .main-view, &.vert-resizing .CodeMirror-lines {
-        cursor: row-resize;   
+    &.vert-resizing {
+        cursor: row-resize;
     }
 }
 

diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
@@ -99,13 +99,16 @@ define(function (require, exports, module) {
         $element.prepend($resizer);
 
         $resizer.on("mousedown", function (e) {
-            var startPosition   = e[directionProperty],
+            var $resizeCont     = $("<div class='resizing-container " + direction + "-resizing' />"),
+                startPosition   = e[directionProperty],
                 startSize       = elementSizeFunction.apply($element),
                 newSize         = startSize,
                 baseSize        = 0,
                 doResize        = true,
                 isMouseDown     = true;
-
+
+            $body.append($resizeCont);
+
             if ($resizableElement !== undefined) {
                 $element.children().not(".horz-resizer, .vert-resizer, .resizable-content").each(function (index, child) {
                     if (direction === DIRECTION_HORIZONTAL) {
@@ -117,9 +120,7 @@ define(function (require, exports, module) {
 
                 contentSizeFunction = direction === DIRECTION_HORIZONTAL ? $resizableElement.width : $resizableElement.height;
             }
-
-            $body.toggleClass(direction + "-resizing");
-
+
             animationRequest = window.webkitRequestAnimationFrame(function doRedraw() {
                 // only run this if the mouse is down so we don't constantly loop even 
                 // after we're done resizing.
@@ -143,7 +144,7 @@ define(function (require, exports, module) {
                 animationRequest = window.webkitRequestAnimationFrame(doRedraw);
             });
 
-            $mainView.on("mousemove", function (e) {
+            $resizeCont.on("mousemove", function (e) {
                 // calculate newSize adding to startSize the difference
                 // between starting and current position, capped at minSize
                 newSize = Math.max(startSize + (startPosition - e[directionProperty]), minSize);
@@ -153,14 +154,14 @@ define(function (require, exports, module) {
             function endResize(e) {
                 if (isMouseDown) {
                     isMouseDown = false;
-                    $mainView.off("mousemove");
-                    $body.toggleClass(direction + "-resizing");
+                    $resizeCont.off("mousemove");
+                    $resizeCont.remove();
                     $element.trigger("panelResizeEnd", [elementSizeFunction.apply($element)]);
                 }
             }
 
-            $mainView.one("mouseup", endResize);
-            $mainView.mouseleave(endResize);
+            $resizeCont.one("mouseup", endResize);
+            $resizeCont.mouseleave(endResize);
 
             e.preventDefault();
         });