Commits

Benjamin Wong committed e4e6567

AUI-1362 removing raphael from inline-dialog and replacing with a css arrow

  • Participants
  • Parent commits 45dee24

Comments (0)

Files changed (2)

File auiplugin/src/main/resources/css/atlassian/inline-dialog.css

     top: -7px; /* matches #inline-dialog-shim */
     width: 16px;
 }
+
 #inline-dialog-shim {
     display: none;
 }
     margin-left: 0;
 }
 
+/*Inline Dialog Arrow */
+
+.aui-inline-dialog .arrow::after,
+.aui-inline-dialog .arrow::before {
+    border-color: #ccc transparent;
+    border-style: solid;
+    border-width: 0 8px 8px;
+    content: "";
+    position: absolute;
+    top: 0;
+}
+
+.aui-inline-dialog .arrow::after {
+    border-bottom-color: #fff;
+    top: 1px;
+}
+
+.aui-inline-dialog .arrow.aui-bottom-arrow::after,
+.aui-inline-dialog .arrow.aui-bottom-arrow::before {
+    border-width: 8px 8px 0;
+}
+
+.aui-inline-dialog .arrow.aui-bottom-arrow::after {
+    border-top-color: #fff;
+    top: -1px;
+}

File auiplugin/src/main/resources/js/atlassian/inline-dialog.js

-/*->
-#name>Inline-Dialog
-#javascript>yes
-#css>yes
-#description>Creates a popup dialog that is inline with content.
-#option>onHover
-#option>noBind
-#option>fadeTime 
-#option>hideDelay
-#option>showDelay
-#option>width
-#option>offsetX 
-#option>offsetY
-#option>container 
-#option>cacheContent 
-#option>preHideCallback
-#option>hideCallback
-#option>initCallback
-#option>isRelativeToMouse 
-#option>closeOthers
-#option>responseHandler
-#option>onTop
-#option>useLiveEvents 
-#func>show()
-#func>hide()
-#func>refresh()
-<-*/
-
 (function($) {
     /**
      * Creates a new inline dialog.
                         function drawPopup (popup, positions) {
                             //Position the popup using the left and right parameters
                             popup.css(positions.popupCss);
-                            //Only draw arrow if raphael exists
-                            if (window.Raphael) {
-                                if (!popup.arrowCanvas) {
-                                    popup.arrowCanvas = Raphael("arrow-"+identifier, 16, 16);  //create canvas using arrow element
-                                }
-                                var getArrowPath = opts.getArrowPath,
-                                    arrowPath = $.isFunction(getArrowPath) ?
-                                                    getArrowPath(positions) :
-                                                    getArrowPath;
-                                //draw the arrow
-                                popup.arrowCanvas
-                                        .path(arrowPath)
-                                        .attr(opts.getArrowAttributes());
+                            
+                            //flip the arrow with a class if we need to
+                            if(positions.displayAbove && !arrow.hasClass("aui-bottom-arrow")){
+                                arrow.addClass("aui-bottom-arrow")
                             }
-                            //apply positioning to arrow
+
                             arrow.css(positions.arrowCss);
                         }
 
                         unbindHideOnExternalClick();
                         opts.addActiveClass && $(items).removeClass("active");
                         popup.fadeOut(opts.fadeTime, function() { opts.hideCallback.call(popup[0].popup); });
-                        popup.arrowCanvas.remove();
-                        popup.arrowCanvas = null;
                         beingShown = false;
                         shouldShow = false;
                         AJS.$(document).trigger("hideLayer", ["inlineDialog", getHash()]);
                     top : arrowOffsetY
                 }
             }
-        },
-        getArrowPath : function (positions) {
-            return positions.displayAbove ?
-                "M0,8L8,16,16,8" :
-                "M0,8L8,0,16,8"
-        },
-        getArrowAttributes: function () {
-            return {
-                fill : "#fff",
-                stroke : "#ccc"
-            };
         }
     };
 })(AJS.$);