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

clean up backdrop component

Browse Source
This commit is contained in:
Mads Rasmussen
2017-10-09 10:56:11 +02:00
parent ea6f561c96
commit 903a9f93c3
5 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,10 +19,11 @@
$timeout(function () {
var element = angular.element(scope.element);
var offset = element.offset();
var width = element.outerWidth(true);
var height = element.outerHeight(true);
// The element to highlight
var highlightElement = angular.element(scope.element);
var offset = highlightElement.offset();
var width = highlightElement.outerWidth(true);
var height = highlightElement.outerHeight(true);
// Rounding numbers
var topDistance = offset.top.toFixed();
@@ -30,10 +31,18 @@
var leftDistance = offset.left.toFixed();
var leftAndWidth = (offset.left + width).toFixed();
angular.element(".rect-left").css({ "width": leftDistance });
angular.element(".rect-top").css({ "height": topDistance, "x": leftDistance });
angular.element(".rect-bot").css({ "height": "100%", "y": topAndHeight, "x": leftDistance });
angular.element(".rect-right").css({ "x": leftAndWidth, "y": topDistance, "height": height });
// The four rectangles
var rectTop = el.find(".umb-backdrop__rect--top");
var rectRight = el.find(".umb-backdrop__rect--right");
var rectBottom = el.find(".umb-backdrop__rect--bottom");
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 });
});
}
@@ -47,9 +56,13 @@
setHighlight();
}));
$(window).on('resize.umbBackdrop', resize);
$(window).on("resize.umbBackdrop", resize);
scope.$on('$destroy', function () {
scope.$on("$destroy", function () {
// unbind watchers
for (var e in events) {
events[e]();
}
$(window).off("resize.umbBackdrop");
});

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -82,6 +82,7 @@
// Umbraco Components
@import "components/application/umb-tour.less";
@import "components/application/umb-backdrop.less";
@import "components/editor.less";
@import "components/overlays.less";
@import "components/card.less";

16
src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less Normal file
View File

@@ -0,0 +1,16 @@
.umb-backdrop {
height: 100%;
width: 100%;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
pointer-events: none;
}
.umb-backdrop__rect {
position: absolute;
pointer-events: all;
opacity: 0.5;
margin: 0;
}

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

@@ -46,22 +46,4 @@
.umb-tour__content {
margin-bottom: 20px;
line-height: 24px;
}
// SVG Backdrop
.umb-tour__canvas {
height: 100%;
width: 100%;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
pointer-events: none;
}
.umb-tour__rect {
position: absolute;
pointer-events: all;
opacity: 0.5;
margin: 0;
}

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

@@ -1,15 +1,15 @@
<div>
<!-- Backdrop with highlight -->
<svg ng-if="element" class="umb-tour__canvas" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect class="rect-left umb-tour__rect" height="100%"/>
<rect class="rect-top umb-tour__rect" width="100%"/>
<rect class="rect-bot umb-tour__rect" width="100%"/>
<rect class="rect-right umb-tour__rect" height="100%" width="100%"/>
<svg ng-if="element" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
<!-- Full screen backdrop -->
<svg ng-if="!element" class="umb-tour__canvas" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect class="umb-tour__rect" height="100%" width="100%"/>
<svg ng-if="!element" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect class="umb-backdrop__rect" height="100%" width="100%"/>
</svg>
</div>