yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add options to prevent click in backdrop highlighted area

Browse Source
This commit is contained in:
Mads Rasmussen
2017-10-24 15:00:14 +02:00
parent 041d4a4a8b
commit ab09042fdc
7 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
View File

@@ -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: "=?",
}
};

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

@@ -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);
}
});

4
src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js
View File

@@ -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);
}

6
src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
View File

@@ -18,12 +18,14 @@
},
{
element: "#applications",
elementPreventClick: true,
title: "Sections",
content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco.",
backdropOpacity: 0.6
},
{
element: "#tree",
elementPreventClick: true,
title: "The Tree",
content: "This is the <b>Tree</b> and will contain all the content of your website."
},
@@ -41,6 +43,7 @@
},
{
element: "[data-element~='overlay-user']",
elementPreventClick: true,
title: "User profile",
content: "<p>This is where you can see details about your user, change your password and log out of Umbraco.</p><p>In the <b>User section</b> you will be able to do more advaned user management.</p>"
},
@@ -59,6 +62,7 @@
},
{
element: "[data-element='drawer']",
elementPreventClick: true,
title: "Help",
content: "<p>In the help drawer you will find articles and videos related to the section you are using.</p><p>This is also where you will find the next tour on how to get started with Umbraco.</p>",
backdropOpacity: 0.6
@@ -142,6 +146,7 @@
},
{
element: "[data-element~='overlay-editor-picker']",
elementPreventClick: true,
title: "Editor picker",
content: "<p>In the editor picker dialog we can pick one of the many build in editor.</p>"
},
@@ -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."
},

10
src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
View File

@@ -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;
}

10
src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
View File

@@ -1,6 +1,7 @@
<div ng-click="clickBackdrop($event)">
<div class="umb-backdrop" ng-click="clickBackdrop($event)">
<!-- Backdrop with highlight -->
<svg ng-if="highlightElement" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
<svg ng-if="highlightElement" class="umb-backdrop__backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
<rect class="umb-backdrop__rect umb-backdrop__rect--left" height="100%" />
<rect class="umb-backdrop__rect umb-backdrop__rect--top" width="100% "/>
<rect class="umb-backdrop__rect umb-backdrop__rect--bottom" width="100%" />
@@ -8,8 +9,11 @@
</svg>
<!-- Full screen backdrop -->
<svg ng-if="!highlightElement" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
<svg ng-if="!highlightElement" class="umb-backdrop__backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
<rect class="umb-backdrop__rect" height="100%" width="100%" />
</svg>
<!-- Prevent clicks in highlighted area -->
<div ng-if="highlightPreventClick" class="umb-backdrop__highlight-prevent-click"></div>
</div>

1
src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
View File

@@ -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">
</umb-backdrop>