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

highlight areas in dragging-mode for modern browsers (#13224)

Browse Source
This commit is contained in:
Niels Lyngsø
2022-10-18 08:21:54 +02:00
committed by GitHub
parent 96bf197642
commit 2993f1bb6d
2 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
View File

@@ -234,26 +234,29 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
&:not(.--hovering-area):focus,
&:not(.--hovering-area):focus-within,
&.--active {
/** Avoid displaying hover when dragging-mode */
--umb-block-grid--block_ui-opacity: calc(1 - var(--umb-block-grid--dragging-mode, 0));
> .umb-block-grid__block--context {
opacity: 1;
opacity: var(--umb-block-grid--block_ui-opacity);
}
&:not(.--scale-mode) {
> .umb-block-grid__block--actions {
opacity: 1;
opacity: var(--umb-block-grid--block_ui-opacity);
}
> umb-block-grid-block > umb-block-grid-entries > .umb-block-grid__layout-container > .umb-block-grid__area-actions {
opacity: 1;
opacity: var(--umb-block-grid--block_ui-opacity);
}
}
> .umb-block-grid__scale-handler {
opacity: 1;
opacity: var(--umb-block-grid--block_ui-opacity);
}
> .umb-block-grid__force-left,
> .umb-block-grid__force-right {
opacity: 1;
opacity: var(--umb-block-grid--block_ui-opacity);
}
}
@@ -584,6 +587,9 @@ umb-block-grid-block {
top: 0px;
position: absolute;
z-index: 1;
/** Avoid showing inline-create in dragging-mode */
opacity: calc(1 - var(--umb-block-grid--dragging-mode, 0));
}
.umb-block-grid__block--inline-create-button.--above {
left: 0;
@@ -776,7 +782,8 @@ umb-block-grid-block {
background: transparent;
border-radius: 3px;
border: @blueDark solid 1px;
border: solid 1px;
border-color: rgba(@blueDark, .5);
border-radius: 3px;
height: 100%;
@@ -862,9 +869,25 @@ umb-block-grid-block {
transition: opacity 240ms;
}
.umb-block-grid__area.--highlight::after {
/** Avoid displaying highlight when in dragging-mode */
opacity: calc(1 - var(--umb-block-grid--dragging-mode, 0));
border-color: @blueDark;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.umb-block-grid__area:has( .umb-block-grid__layout-item-placeholder )::after {
opacity: 1;
border-color: @blueDark;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .7);
/* Moved back to edge for this case */
top: 0;
bottom: 0;
animation: umb-block-grid__area-after__border-pulse 400ms ease-in-out alternate infinite;
@keyframes umb-block-grid__area-after__border-pulse {
0% { border-color: rgba(@blueDark, 1); }
100% { border-color: rgba(@blueDark, 0.66); }
}
}
.umb-block-grid__scalebox-backdrop {

1
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentries.component.js
View File

@@ -619,6 +619,7 @@
}
window.removeEventListener('drag', _onDragMove);
window.removeEventListener('dragover', _onDragMove);
document.documentElement.style.setProperty("--umb-block-grid--dragging-mode", 0);
if(ghostElIndicateForceLeft) {
ghostEl.removeChild(ghostElIndicateForceLeft);