From ab09042fdce0b95eeb4c24ca6a23f77adab3bc51 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 24 Oct 2017 15:00:14 +0200 Subject: [PATCH] add options to prevent click in backdrop highlighted area --- .../components/application/umbbackdrop.directive.js | 7 +++++++ .../components/application/umbtour.directive.js | 4 ++-- .../src/common/services/backdrop.service.js | 4 +++- .../src/common/services/tour.service.js | 6 ++++++ .../src/less/components/application/umb-backdrop.less | 10 ++++++++++ .../src/views/components/application/umb-backdrop.html | 10 +++++++--- src/Umbraco.Web.UI/umbraco/Views/Default.cshtml | 1 + 7 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js index 35d2d1b87e..e45074d003 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js @@ -53,6 +53,12 @@ rectBottom.css({ "height": "100%", "y": topAndHeight, "x": leftDistance }); rectLeft.css({ "width": leftDistance }); + // Prevent interaction in the highlighted area + if(scope.highlightPreventClick) { + var preventClickElement = el.find(".umb-backdrop__highlight-prevent-click"); + preventClickElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); + } + } }); @@ -92,6 +98,7 @@ scope: { backdropOpacity: "=?", highlightElement: "=?", + highlightPreventClick: "=?", disableEventsOnClick: "=?", } }; 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 5d542f0913..b6b40492be 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 @@ -128,11 +128,11 @@ }, function () { // Animation complete. setPopoverPosition(element); - backdropService.setHighlight(scope.model.currentStep.element); + backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick); }); } else { setPopoverPosition(element); - backdropService.setHighlight(scope.model.currentStep.element); + backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick); } }); diff --git a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js index 3368ea3bf9..b0053dc4bb 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js @@ -6,6 +6,7 @@ var args = { opacity: null, element: null, + elementPreventClick: false, disableEventsOnClick: false, show: false }; @@ -36,8 +37,9 @@ eventsService.emit("appState.backdrop", args); } - function setHighlight(element) { + function setHighlight(element, preventClick) { args.element = element; + args.elementPreventClick = preventClick; eventsService.emit("appState.backdrop", args); } diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js index a63f18206d..db7e6b425c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js @@ -18,12 +18,14 @@ }, { element: "#applications", + elementPreventClick: true, title: "Sections", content: "These are the Sections and allows you to navigate the different areas of Umbraco.", backdropOpacity: 0.6 }, { element: "#tree", + elementPreventClick: true, title: "The Tree", content: "This is the Tree and will contain all the content of your website." }, @@ -41,6 +43,7 @@ }, { element: "[data-element~='overlay-user']", + elementPreventClick: true, title: "User profile", content: "

This is where you can see details about your user, change your password and log out of Umbraco.

In the User section you will be able to do more advaned user management.

" }, @@ -59,6 +62,7 @@ }, { element: "[data-element='drawer']", + elementPreventClick: true, title: "Help", content: "

In the help drawer you will find articles and videos related to the section you are using.

This is also where you will find the next tour on how to get started with Umbraco.

", backdropOpacity: 0.6 @@ -142,6 +146,7 @@ }, { element: "[data-element~='overlay-editor-picker']", + elementPreventClick: true, title: "Editor picker", content: "

In the editor picker dialog we can pick one of the many build in editor.

" }, @@ -153,6 +158,7 @@ }, { element: "[data-element~='overlay-editor-settings']", + elementPreventClick: true, title: "Editor settings", content: "Each property editor can have individual settings. We don't want to change any of these now." }, diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less index b291355261..438f82859e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less @@ -6,6 +6,11 @@ top: 0; left: 0; pointer-events: none; +} + +.umb-backdrop__backdrop { + height: 100%; + width: 100%; fill-opacity: 0.4; } @@ -13,4 +18,9 @@ position: absolute; pointer-events: all; margin: 0; +} + +.umb-backdrop__highlight-prevent-click { + position: absolute; + pointer-events: all; } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html index 16b453294d..14f7aca83e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html @@ -1,6 +1,7 @@ -
+
+ - + @@ -8,8 +9,11 @@ - + + +
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml index 5773a918c5..388ffcf6ba 100644 --- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml +++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml @@ -81,6 +81,7 @@ ng-if="backdrop.show" backdrop-opacity="backdrop.opacity" highlight-element="backdrop.element" + highlight-prevent-click="backdrop.elementPreventClick" disable-events-on-click="backdrop.disableEventsOnClick">