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

Adjust target overlay position using hotkey (#8431)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-07-14 13:58:57 +02:00
committed by GitHub
parent d347d36861
commit 8c8c26bc9a
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
View File

@@ -407,11 +407,15 @@ Opens an overlay to show a custom YSOD. </br>
function setTargetPosition() {
var container = $("#contentwrapper");
var containerLeft = container[0].offsetLeft;
var containerRight = containerLeft + container[0].offsetWidth;
var containerTop = container[0].offsetTop;
var containerBottom = containerTop + container[0].offsetHeight;
var overlay = $(scope.model.event.target).closest('.umb-overlay');
var container = overlay.length > 0 ? overlay : $("#contentwrapper");
let rect = container[0].getBoundingClientRect();
var containerLeft = rect.left;
var containerRight = containerLeft + rect.width;
var containerTop = rect.top;
var containerBottom = containerTop + rect.height;
var mousePositionClickX = null;
var mousePositionClickY = null;
@@ -434,8 +438,9 @@ Opens an overlay to show a custom YSOD. </br>
elementWidth = el[0].clientWidth;
// move element to this position
position.left = mousePositionClickX - (elementWidth / 2);
position.top = mousePositionClickY - (elementHeight / 2);
// when using hotkey it fallback to center of container
position.left = mousePositionClickX ? mousePositionClickX - (elementWidth / 2) : (containerLeft + containerRight) / 2 - (elementWidth / 2);
position.top = mousePositionClickY ? mousePositionClickY - (elementHeight / 2) : (containerTop + containerBottom) / 2 - (elementHeight / 2);
// check to see if element is outside screen
// outside right
@@ -463,6 +468,7 @@ Opens an overlay to show a custom YSOD. </br>
}
el.css(position);
el.css("visibility", "visible");
}
scope.submitForm = function (model) {

2
src/Umbraco.Web.UI.Client/src/less/components/overlays.less
View File

@@ -106,7 +106,6 @@
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, 0);
transform: translate(-50%, -50%);
border-radius: @baseBorderRadius;
}
@@ -128,6 +127,7 @@
width: 400px;
max-height: 100vh;
box-sizing: border-box;
visibility: hidden;
border-radius: @baseBorderRadius;
&.umb-overlay--medium {