Merge pull request #463 from mathuo/451-provide-drop-target-dropzone-quadrant-class

feat: drop target classnames
This commit is contained in:
mathuo 2024-01-19 15:16:42 +00:00 committed by GitHub
commit cae8f3664e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 14 deletions

View File

@ -22,26 +22,26 @@
will-change: transform;
pointer-events: none;
&.dv-overlay-top {
&.dv-overlay-small-vertical {
&.dv-droptarget-top {
&.dv-droptarget-small-vertical {
border-top: 1px solid var(--dv-drag-over-border-color);
}
}
&.dv-overlay-bottom {
&.dv-overlay-small-vertical {
&.dv-droptarget-bottom {
&.dv-droptarget-small-vertical {
border-bottom: 1px solid var(--dv-drag-over-border-color);
}
}
&.dv-overlay-left {
&.dv-overlay-small-horizontal {
&.dv-droptarget-left {
&.dv-droptarget-small-horizontal {
border-left: 1px solid var(--dv-drag-over-border-color);
}
}
&.dv-overlay-right {
&.dv-overlay-small-horizontal {
&.dv-droptarget-right {
&.dv-droptarget-small-horizontal {
border-right: 1px solid var(--dv-drag-over-border-color);
}
}

View File

@ -279,16 +279,25 @@ export class Droptarget extends CompositeDisposable {
this.overlayElement.style.transform = transform;
toggleClass(this.overlayElement, 'dv-overlay-small-vertical', isSmallY);
toggleClass(
this.overlayElement,
'dv-overlay-small-horizontal',
'dv-droptarget-small-vertical',
isSmallY
);
toggleClass(
this.overlayElement,
'dv-droptarget-small-horizontal',
isSmallX
);
toggleClass(this.overlayElement, 'dv-overlay-left', isLeft);
toggleClass(this.overlayElement, 'dv-overlay-right', isRight);
toggleClass(this.overlayElement, 'dv-overlay-top', isTop);
toggleClass(this.overlayElement, 'dv-overlay-bottom', isBottom);
toggleClass(this.overlayElement, 'dv-droptarget-left', isLeft);
toggleClass(this.overlayElement, 'dv-droptarget-right', isRight);
toggleClass(this.overlayElement, 'dv-droptarget-top', isTop);
toggleClass(this.overlayElement, 'dv-droptarget-bottom', isBottom);
toggleClass(
this.overlayElement,
'dv-droptarget-center',
quadrant === 'center'
);
}
private calculateQuadrant(