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();