From 7e4c284abbe25510f5fd77e0d474c76e9632d175 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 30 Oct 2017 10:45:38 +0100 Subject: [PATCH 1/4] U4-10597 Add attention to clickable element If it isn't clicked --- .../application/umbtour.directive.js | 33 +++++++++++++++++-- .../less/components/application/umb-tour.less | 22 +++++++++++++ .../components/application/umb-tour.html | 1 + 3 files changed, 54 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js index b6b40492be..0ffffb671e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js +++ b/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; @@ -28,7 +30,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(); @@ -52,8 +55,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(); @@ -128,10 +135,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); } @@ -223,6 +232,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(); + + }, 5000); + } + } + function waitForPendingRerequests() { var deferred = $q.defer(); var timer = window.setInterval(function(){ @@ -305,6 +333,7 @@ scope.$on('$destroy', function () { $(window).off('resize.umbTour'); unbindEvent(); + $timeout.cancel(pulseTimer); }); } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less index 5e405c0363..04f70e3d1c 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less +++ b/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; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html index d00c81ae70..bda3517afd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html @@ -1,6 +1,7 @@
+
From 34f811c128cfd97a2910f227b3295253d3a0f9a7 Mon Sep 17 00:00:00 2001 From: Zsolt Date: Mon, 30 Oct 2017 11:20:37 +0100 Subject: [PATCH 2/4] Small alignment bug fix --- .../src/less/components/umb-number-badge.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less index d35abff550..3c2dbbdf20 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less +++ b/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; } From d4729e14830681bf563b63f0fedf7bc9c3834430 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 31 Oct 2017 11:38:45 +0100 Subject: [PATCH 3/4] set highlight pulse timeout to 2 seconds --- .../directives/components/application/umbtour.directive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js index 0ffffb671e..11891e4bf1 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js @@ -247,7 +247,7 @@ pulseElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); pulseElement.fadeIn(); - }, 5000); + }, 2000); } } From 641e74b747691ebf10c3ca8ccdda60760d270c24 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 1 Nov 2017 10:20:14 +0100 Subject: [PATCH 4/4] Lower highlight pulse timeout to 1 sec --- .../directives/components/application/umbtour.directive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js index 11891e4bf1..e37c403e66 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js @@ -247,7 +247,7 @@ pulseElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); pulseElement.fadeIn(); - }, 2000); + }, 1000); } }