-
Drop files to begin upload
+
+
Drop files to begin upload
{
component.onDrop(new Event('drop') as DragEvent)
expect(settingsService.globalDropzoneActive).toBeTruthy()
}))
+
+ it('should hide if app loses focus', fakeAsync(() => {
+ const leaveSpy = jest.spyOn(component, 'onDragLeave')
+ jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+ settingsService.globalDropzoneEnabled = true
+ component.onDragOver(new Event('dragover') as DragEvent)
+ tick(1)
+ expect(component.hidden).toBeFalsy()
+ expect(component.fileIsOver).toBeTruthy()
+ jest.spyOn(document, 'hidden', 'get').mockReturnValue(true)
+ component.onVisibilityChange()
+ expect(leaveSpy).toHaveBeenCalled()
+ flush()
+ }))
+
+ it('should hide on window blur', fakeAsync(() => {
+ const leaveSpy = jest.spyOn(component, 'onDragLeave')
+ jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+ settingsService.globalDropzoneEnabled = true
+ component.onDragOver(new Event('dragover') as DragEvent)
+ tick(1)
+ expect(component.hidden).toBeFalsy()
+ expect(component.fileIsOver).toBeTruthy()
+ jest.spyOn(document, 'hidden', 'get').mockReturnValue(true)
+ component.onWindowBlur()
+ expect(leaveSpy).toHaveBeenCalled()
+ flush()
+ }))
})
diff --git a/src-ui/src/app/components/file-drop/file-drop.component.ts b/src-ui/src/app/components/file-drop/file-drop.component.ts
index 833c84cbb..0c9637b79 100644
--- a/src-ui/src/app/components/file-drop/file-drop.component.ts
+++ b/src-ui/src/app/components/file-drop/file-drop.component.ts
@@ -57,8 +57,8 @@ export class FileDropComponent {
immediate: boolean = false
) {
if (!this.dragDropEnabled) return
- event.preventDefault()
- event.stopImmediatePropagation()
+ event?.preventDefault()
+ event?.stopImmediatePropagation()
this.settings.globalDropzoneActive = false
const ms = immediate ? 0 : 500
@@ -86,4 +86,13 @@ export class FileDropComponent {
if (files.length > 0)
this.toastService.showInfo($localize`Initiating upload...`, 3000)
}
+
+ @HostListener('window:blur', ['$event']) public onWindowBlur() {
+ if (this.fileIsOver) this.onDragLeave(null)
+ }
+
+ @HostListener('document:visibilitychange', ['$event'])
+ public onVisibilityChange() {
+ if (document.hidden && this.fileIsOver) this.onDragLeave(null)
+ }
}
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 6065224ce..d93b6d8db 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -484,49 +484,6 @@ table.table {
color: var(--bs-body-color);
}
-.main-dropzone {
- height: 100%;
- width: 100%;
-
- &.ngx-file-drop__drop-zone--over {
- background-color: transparent !important;
- }
-}
-
-.global-dropzone-overlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: hsla(var(--pngx-primary), var(--pngx-primary-lightness), .8);
- z-index: 1055; // $zindex-modal
- pointer-events: none !important;
- user-select: none !important;
- text-align: center;
- padding-top: 25%;
-
- h2 {
- color: var(--pngx-primary-text-contrast)
- }
-}
-
-.ngx-file-drop__drop-zone--over {
- .global-dropzone-overlay {
- opacity: 1;
- pointer-events: all !important;
-
- * {
- pointer-events: none;
- }
- }
-
- .main-wrapper {
- pointer-events: none !important;
- user-select: none !important;
- }
-}
-
.alert-primary {
--bs-alert-color: var(--bs-primary);
--bs-alert-bg: var(--pngx-primary-faded);