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

fixes: U4-10542 Fix SVG backdrop bugs in Firefox (maybe other browser too?)

Browse Source
This commit is contained in:
Mads Rasmussen
2017-10-25 20:24:04 +02:00
parent 72a0d614af
commit f48263e5a2
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,8 @@
function setHighlight () {
scope.loading = true;
$timeout(function () {
// The element to highlight
@@ -48,10 +50,10 @@
var rectLeft = el.find(".umb-backdrop__rect--left");
// Add the css
rectTop.css({ "height": topDistance, "x": leftDistance });
rectRight.css({ "x": leftAndWidth, "y": topDistance, "height": height });
rectBottom.css({ "height": "100%", "y": topAndHeight, "x": leftDistance });
rectLeft.css({ "width": leftDistance });
scope.rectTopCss = { "height": topDistance, "left": leftDistance + "px", opacity: scope.backdropOpacity };
scope.rectRightCss = { "left": leftAndWidth + "px", "top": topDistance + "px", "height": height, opacity: scope.backdropOpacity };
scope.rectBottomCss = { "height": "100%", "top": topAndHeight + "px", "left": leftDistance + "px", opacity: scope.backdropOpacity };
scope.rectLeftCss = { "width": leftDistance, opacity: scope.backdropOpacity };
// Prevent interaction in the highlighted area
if(scope.highlightPreventClick) {
@@ -61,6 +63,8 @@
}
scope.loading = false;
});
}

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

@@ -11,13 +11,17 @@
.umb-backdrop__backdrop {
height: 100%;
width: 100%;
fill-opacity: 0.4;
}
.umb-backdrop__rect {
position: absolute;
pointer-events: all;
margin: 0;
width: 100%;
height: 100%;
background: @black;
opacity: 0.4;
transition: 200ms opacity ease-in-out;
}
.umb-backdrop__highlight-prevent-click {

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

@@ -1,17 +1,17 @@
<div class="umb-backdrop" ng-click="clickBackdrop($event)">
<!-- Backdrop with highlight -->
<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%" />
<rect class="umb-backdrop__rect umb-backdrop__rect--right" height="100%" width="100%" />
</svg>
<div ng-if="highlightElement && !loading" class="umb-backdrop__backdrop">
<div class="umb-backdrop__rect umb-backdrop__rect--top" ng-style="rectTopCss"></div>
<div class="umb-backdrop__rect umb-backdrop__rect--right" ng-style="rectRightCss"></div>
<div class="umb-backdrop__rect umb-backdrop__rect--bottom" ng-style="rectBottomCss"></div>
<div class="umb-backdrop__rect umb-backdrop__rect--left" ng-style="rectLeftCss"></div>
</div>
<!-- Full screen backdrop -->
<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>
<div ng-if="!highlightElement || loading" class="umb-backdrop__backdrop">
<div class="umb-backdrop__rect" ng-style="{'opacity': backdropOpacity }"></div>
</div>
<!-- Prevent clicks in highlighted area -->
<div ng-if="highlightPreventClick" class="umb-backdrop__highlight-prevent-click"></div>