From 95fc06236a3d8dd6bd908cffce33b02d26e33571 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Tue, 11 Feb 2014 18:11:13 -0500
Subject: [PATCH] =?UTF-8?q?-=20Switch=20the=20tour=20title=20bar=20to=20th?=
 =?UTF-8?q?e=20info=20blue=20color=20-=20Move=20the=20tour=20up=20so=20it?=
 =?UTF-8?q?=20doesn=E2=80=99t=20hit=20the=20olark=20-=20Have=20the=20spotl?=
 =?UTF-8?q?ight=20use=20a=20rounded=20rect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/quay.css            |  4 ++--
 static/lib/jquery.spotlight.js | 28 ++++++++++++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 01064e0ae..d8a5898e5 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -2730,7 +2730,7 @@ p.editable:hover i {
 .angular-tour-ui-element.overlay {
   display: block;
   position: fixed;
-  bottom: 20px;
+  bottom: 50px;
   right: 20px;
   border-radius: 10px;
   z-index: 9999999;
@@ -2760,7 +2760,7 @@ p.editable:hover i {
 }
 
 .angular-tour-ui-element.overlay .tour-title {
-  background: #778EA2;
+  background-color: #5bc0de;
   color: white;
   padding: 4px;
   padding-left: 6px;
diff --git a/static/lib/jquery.spotlight.js b/static/lib/jquery.spotlight.js
index f8afe2e0b..fc98d9561 100644
--- a/static/lib/jquery.spotlight.js
+++ b/static/lib/jquery.spotlight.js
@@ -5,7 +5,7 @@
  * Original Plugin code by Gilbert Pellegrom (2009)
  * Licensed under the GPL license (http://www.gnu.org/licenses/gpl-3.0.html)
  * Version 1.1 (2011)
- * Modified by jschorr (Fix Opacity bug, fix handling of events)
+ * Modified by jschorr (Fix Opacity bug, fix handling of events, add rounded corners)
  */
 (function ($) {
   var currentOverlay;
@@ -74,6 +74,19 @@
     parent,
     context;
 
+    function roundRect(context, x, y, w, h, r) {
+      if (w < 2 * r) r = w / 2;
+      if (h < 2 * r) r = h / 2;
+      context.beginPath();
+      context.moveTo(x+r, y);
+      context.arcTo(x+w, y,   x+w, y+h, r);
+      context.arcTo(x+w, y+h, x,   y+h, r);
+      context.arcTo(x,   y+h, x,   y,   r);
+      context.arcTo(x,   y,   x+w, y,   r);
+      context.closePath();
+      return context;
+    }
+
     /**
      * Colour in the overlay and clear all element masks
      */
@@ -85,13 +98,15 @@
       elements.each(function (i, e) {
         var ej = $(e);
 
-        var currentPos = e.getBoundingClientRect();
-        context.clearRect(
-          currentPos.left - settings.paddingX,
+        var currentPos = e.getBoundingClientRect();        
+        context.save();
+        context.globalCompositeOperation = 'destination-out';
+        roundRect(context, currentPos.left - settings.paddingX,
           currentPos.top - settings.paddingY,
           ej.outerWidth() + (settings.paddingX * 2),
-          ej.outerHeight() + (settings.paddingY * 2)
-        );
+                           ej.outerHeight() + (settings.paddingY * 2),
+                           6).fill();
+        context.restore();
       });
     }
 
@@ -143,6 +158,7 @@
     $(window).resize(handleResize);
 
     context = overlay[0].getContext('2d');
+    context.globalCompositeOperation = 'source-over';
 
     fillOverlay();