Merge pull request #4485 from adobe/nj/animate-quick-view

Animate quick view popup

Author: gruehle

src/extensions/default/QuickView/QuickView.css

@@ -1,20 +1,31 @@
 #quick-view-container {
     display: none;
-    
+
+    -webkit-transition: opacity 0.125s ease-in, -webkit-transform 0.125s;
+    transition: opacity 0.125s ease-in, transform 0.125s;
+
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
+                                            
     background: #e0e1e3;
     position: absolute;
     z-index: 5000;
-    left: 200px;
-    top: 40px;
     pointer-events: none;
 
-    padding: 15px;
+    padding: 8px;
     text-align: center;
 
-    border-radius: 5px;
+    border-radius: 4px;
     box-shadow: 0 4px 15px rgba(0,0,0,0.25), inset 0 0 0 1px #a6a6a6, inset 0 0 0 2px #ebedec;
 }
 
+#quick-view-container.active {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
 #quick-view-container .preview-content {
     background-image: url(preview_bg.png);
     border-radius: 2px;
@@ -23,8 +34,8 @@
 
 
 #quick-view-container .color-swatch {
-    width: 100px;
-    height: 100px;
+    width: 40px;
+    height: 40px;
     background-size: 100%;
 }
 
@@ -49,6 +60,10 @@
     text-shadow: 0 1px 0px #e8e8e8;
 }
 
+#quick-view-container.preview-bubble-above {
+    -webkit-transform-origin: center bottom;
+}
+
 #quick-view-container.preview-bubble-above:before {
     display: none;
 }
@@ -66,6 +81,9 @@
     display: block;
 }
 
+#quick-view-container.preview-bubble-below {
+    -webkit-transform-origin: center top;
+}
 
 #quick-view-container.preview-bubble-below:before {
     width: 24px;

src/extensions/default/QuickView/main.js

@@ -51,10 +51,7 @@ define(function (require, exports, module) {
     // Constants
     var CMD_ENABLE_QUICK_VIEW       = "view.enableQuickView",
         HOVER_DELAY                 = 350,  // Time (ms) mouse must remain over a provider's matched text before popover appears
-        POSITION_OFFSET             = 38,   // Distance between the bottom of the line and the bottom of the preview container
-        POINTER_LEFT_OFFSET         = 17,   // Half of the pointer width, used to find the center of the pointer
-        POINTER_TOP_OFFSET          =  7,   // Pointer height, used to shift popover above pointer
-        POSITION_BELOW_OFFSET       = 16,   // Amount to adjust to top position when the preview bubble is below the text
+        POINTER_HEIGHT              = 15,   // Pointer height, used to shift popover above pointer (plus a little bit of space)
         POPOVER_HORZ_MARGIN         =  5;   // Horizontal margin
 
     /**
@@ -72,7 +69,8 @@ define(function (require, exports, module) {
      *      start: !{line, ch},             - start of matched text range
      *      end: !{line, ch},               - end of matched text range
      *      content: !string,               - HTML content to display in popover
-     *      onShow: ?function():void,       - called once popover content added to the DOM (may never be called)
+     *      onShow: ?function():void,       - called once popover content added to the DOM (may never be called) 
+     *        - if specified, must call positionPreview()
      *      xpos: number,                   - x of center of popover
      *      ytop: number,                   - y of top of matched text (when popover placed above text, normally)
      *      ybot: number,                   - y of bottom of matched text (when popover moved below text, avoiding window top)
@@ -99,40 +97,39 @@ define(function (require, exports, module) {
 
             $previewContent.empty();
             $previewContainer.hide();
-            
+            $previewContainer.removeClass("active");
         } else {
             window.clearTimeout(popoverState.hoverTimer);
         }
-        
         popoverState = null;
     }
 
     function positionPreview(xpos, ypos, ybot) {
-        var previewWidth  = $previewContainer.width(),
-            top           = ypos - $previewContainer.height() - POSITION_OFFSET,
-            left          = xpos - previewWidth / 2 - POINTER_LEFT_OFFSET,
+        var previewWidth  = $previewContainer.outerWidth(),
+            top           = ypos - $previewContainer.outerHeight() - POINTER_HEIGHT,
+            left          = xpos - previewWidth / 2,
             $editorHolder = $("#editor-holder"),
             editorLeft    = $editorHolder.offset().left;
 
         left = Math.max(left, editorLeft + POPOVER_HORZ_MARGIN);
         left = Math.min(left, editorLeft + $editorHolder.width() - previewWidth - POPOVER_HORZ_MARGIN);
 
         if (top < 0) {
-            $previewContainer.removeClass("preview-bubble-above");
-            $previewContainer.addClass("preview-bubble-below");
-            top = ybot + POSITION_BELOW_OFFSET;
-            $previewContainer.offset({
-                left: left,
-                top: top
-            });
+            top = ybot + POINTER_HEIGHT;
+            $previewContainer
+                .removeClass("preview-bubble-above")
+                .addClass("preview-bubble-below");
         } else {
-            $previewContainer.removeClass("preview-bubble-below");
-            $previewContainer.addClass("preview-bubble-above");
-            $previewContainer.offset({
-                left: left,
-                top: top - POINTER_TOP_OFFSET
-            });
+            $previewContainer
+                .removeClass("preview-bubble-below")
+                .addClass("preview-bubble-above");
         }
+        $previewContainer
+            .css({
+                left: left,
+                top: top
+            })
+            .addClass("active");
     }
 
     /**
@@ -155,9 +152,9 @@ define(function (require, exports, module) {
 
         if (popoverState.onShow) {
             popoverState.onShow();
+        } else {
+            positionPreview(popoverState.xpos, popoverState.ytop, popoverState.ybot);
         }
-        
-        positionPreview(popoverState.xpos, popoverState.ytop, popoverState.ybot);
     }
 
     function divContainsMouse($div, event) {
@@ -433,10 +430,11 @@ define(function (require, exports, module) {
                     var showHandler = function () {
                         // Hide the preview container until the image is loaded.
                         $previewContainer.hide();
+                                                    
 
                         $previewContainer.find(".image-preview > img").on("load", function () {
                             $previewContent
-                                .append("<div class='img-size'>"                                            +
+                                .append("<div class='img-size'>" +
                                             this.naturalWidth + " x " + this.naturalHeight + " " + Strings.UNIT_PIXELS +
                                         "</div>"
                                     );

src/extensions/default/QuickView/unittests.js

@@ -289,18 +289,24 @@ define(function (require, exports, module) {
                 QuickView._forceShow(popoverInfo);
             }
 
-            function getBounds(object) {
+            function getBounds(object, useOffset) {
+                var left = (useOffset ? object.offset().left : parseInt(object.css("left"), 10)),
+                    top = (useOffset ? object.offset().top : parseInt(object.css("top"), 10));
                 return {
-                    left:   object.offset().left,
-                    top:    object.offset().top,
-                    right:  object.offset().left + object.width(),
-                    bottom: object.offset().top + object.height()
+                    left:   left,
+                    top:    top,
+                    right:  left + object.outerWidth(),
+                    bottom: top + object.outerHeight()
                 };
             }
 
             function boundsInsideWindow(object) {
-                var bounds = getBounds(object),
-                    editorBounds = getBounds(testWindow.$("#editor-holder"));
+                // For the popover, we can't use offset(), because jQuery gets confused by the
+                // scale factor and transform origin that the animation uses. Instead, we rely
+                // on the fact that its offset parent is body, and just test its explicit left/top 
+                // values.
+                var bounds = getBounds(object, false),
+                    editorBounds = getBounds(testWindow.$("#editor-holder"), true);
                 return bounds.left   >= editorBounds.left   &&
                        bounds.right  <= editorBounds.right  &&
                        bounds.top    >= editorBounds.top    &&

src/styles/brackets.less

@@ -565,8 +565,8 @@ a, img {
         -webkit-transform: translateZ(0);
         transform: translateZ(0);
 
-        -webkit-transition: height 0.15s ease-out;
-        transition: height 0.15s ease-out;
+        -webkit-transition: height 0.125s ease-out;
+        transition: height 0.125s ease-out;
     }
 
     .CodeMirror {