Merge pull request #2268 from umbraco/temp-U4-10597

U4-10597 Add attention to clickable element If it isn't clicked

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js

@@ -6,6 +6,8 @@
         function link(scope, el, attr, ctrl) {
 
             var popover;
+            var pulseElement;
+            var pulseTimer;
 
             scope.loadingStep = false;
             scope.elementNotFound = false;
@@ -34,7 +36,8 @@
 
             function onInit() {
                 popover = el.find(".umb-tour__popover");
-                popover.hide();                
+                pulseElement = el.find(".umb-tour__pulse");
+                popover.hide();
                 scope.model.currentStepIndex = 0;
                 backdropService.open({disableEventsOnClick: true});
                 startStep();
@@ -58,8 +61,12 @@
             }
 
             function nextStep() {
-                popover.hide();                
+                
+                popover.hide();
+                pulseElement.hide();
+                $timeout.cancel(pulseTimer);
                 scope.model.currentStepIndex++;
+
                 // make sure we don't go too far
                 if(scope.model.currentStepIndex !== scope.model.steps.length) {
                     startStep();
@@ -134,10 +141,12 @@
                         }, function () {
                             // Animation complete.
                             setPopoverPosition(element);
+                            setPulsePosition();
                             backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick);
                         });
                     } else {
                         setPopoverPosition(element);
+                        setPulsePosition();
                         backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick);
                     }
 
@@ -229,6 +238,25 @@
 
             }
 
+            function setPulsePosition() {
+                if(scope.model.currentStep.event) {
+
+                    pulseTimer = $timeout(function(){
+                        
+                        var clickElementSelector = scope.model.currentStep.eventElement ? scope.model.currentStep.eventElement : scope.model.currentStep.element;
+                        var clickElement = $(clickElementSelector);
+        
+                        var offset = clickElement.offset();
+                        var width = clickElement.outerWidth();
+                        var height = clickElement.outerHeight();
+        
+                        pulseElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top });
+                        pulseElement.fadeIn();
+
+                    }, 1000);
+                }
+            }
+
             function waitForPendingRerequests() {
                 var deferred = $q.defer();
                 var timer = window.setInterval(function(){
@@ -311,6 +339,7 @@
             scope.$on('$destroy', function () {
                 $(window).off('resize.umbTour');
                 unbindEvent();
+                $timeout.cancel(pulseTimer);
             });
 
         }

src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less

@@ -5,6 +5,28 @@
     height: 5px;
 }
 
+.umb-tour__pulse {
+    position: fixed;
+    z-index: 10000;
+    display: none;
+    background: transparent;
+    box-shadow: 0 0 0 @green inset;
+    animation: pulse 2s infinite;
+    pointer-events: none;
+}
+  
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 @green inset;
+    }
+    70% {
+        box-shadow: 0 0 0 5px fade(@green, 80%) inset;
+    }
+    100% {
+        box-shadow: 0 0 0 0 @green inset;
+    }
+}
+
 .umb-tour__popover {
     position: fixed;
     background: @white;

src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less

@@ -6,7 +6,6 @@
     box-sizing: border-box;
     display: flex;
     justify-content: center;
-    align-items: center;
     color: @black;
     font-size: 15px;
 }

src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html

@@ -1,6 +1,7 @@
 <div class="umb-tour">
 
     <div class="umb-loader umb-tour__loader" ng-if="loadingStep"></div>
+    <div class="umb-tour__pulse"></div>
 
     <div class="umb-tour__popover shadow-depth-2" ng-class="{'umb-tour__popover--l': model.currentStep.type === 'intro' || model.currentStepIndex === model.steps.length}">