Simplify dropzone transitions to make more reliable

src-ui/src/app/app.component.html

@@ -3,10 +3,10 @@
 <ngx-file-drop dropZoneClassName="main-dropzone" contentClassName="main-content" [disabled]="!dragDropEnabled"
 (onFileDrop)="dropped($event)" (onFileOver)="fileOver()" (onFileLeave)="fileLeave()">
     <ng-template ngx-file-drop-content-tmp>
-        <div class="global-dropzone-overlay fade" [class.show]="fileIsOver" [class.hide]="hidden">
+        <div class="global-dropzone-overlay">
             <h2 i18n>Drop files to begin upload</h2>
         </div>
-        <div [class.inert]="fileIsOver">
+        <div class="main-wrapper">
             <router-outlet></router-outlet>
         </div>
     </ng-template>

src-ui/src/app/app.component.spec.ts

@@ -149,19 +149,17 @@ describe('AppComponent', () => {
   })
 
   it('should support drag drop', fakeAsync(() => {
-    expect(component.fileIsOver).toBeFalsy()
+    expect(settingsService.globalDropzoneActive).toBeFalsy()
     component.fileOver()
     tick(1)
     fixture.detectChanges()
-    expect(component.fileIsOver).toBeTruthy()
+    expect(settingsService.globalDropzoneActive).toBeTruthy()
     const dropzone = fixture.debugElement.query(
       By.css('.global-dropzone-overlay')
     )
     expect(dropzone).not.toBeNull()
-    component.fileLeave()
     tick(700)
     fixture.detectChanges()
-    expect(dropzone.classes['hide']).toBeTruthy()
     // drop
     const toastSpy = jest.spyOn(toastService, 'show')
     const uploadSpy = jest.spyOn(uploadDocumentsService, 'onNgxFileDrop')
@@ -173,6 +171,7 @@ describe('AppComponent', () => {
         },
       } as unknown as NgxFileDropEntry,
     ])
+    expect(settingsService.globalDropzoneActive).toBeFalsy()
     tick(3000)
     expect(toastSpy).toHaveBeenCalled()
     expect(uploadSpy).toHaveBeenCalled()

src-ui/src/app/app.component.ts

@@ -25,10 +25,6 @@ export class AppComponent implements OnInit, OnDestroy {
   successSubscription: Subscription
   failedSubscription: Subscription
 
-  private fileLeaveTimeoutID: any
-  fileIsOver: boolean = false
-  hidden: boolean = true
-
   constructor(
     private settings: SettingsService,
     private consumerStatusService: ConsumerStatusService,
@@ -263,31 +259,14 @@ export class AppComponent implements OnInit, OnDestroy {
 
   public fileOver() {
     this.settings.globalDropzoneActive = true
-    // allows transition
-    setTimeout(() => {
-      this.fileIsOver = true
-    }, 1)
-    this.hidden = false
-    // stop fileLeave timeout
-    clearTimeout(this.fileLeaveTimeoutID)
   }
 
-  public fileLeave(immediate: boolean = false) {
+  public fileLeave() {
     this.settings.globalDropzoneActive = false
-    const ms = immediate ? 0 : 500
-
-    this.fileLeaveTimeoutID = setTimeout(() => {
-      this.fileIsOver = false
-      // await transition completed
-      setTimeout(() => {
-        this.hidden = true
-      }, 150)
-    }, ms)
   }
 
   public dropped(files: NgxFileDropEntry[]) {
-    this.settings.globalDropzoneActive = false
+    this.fileLeave()
-    this.fileLeave(true)
     this.uploadDocumentsService.onNgxFileDrop(files)
     if (files.length > 0)
       this.toastService.showInfo($localize`Initiating upload...`, 3000)

src-ui/src/styles.scss

@@ -505,28 +505,25 @@ table.table {
   user-select: none !important;
   text-align: center;
   padding-top: 25%;
+  opacity: 0;
+  transition: opacity 0.05s linear;
 
   h2 {
     color: var(--pngx-primary-text-contrast)
   }
-
-  &.show {
-    opacity: 1 !important;
 }
 
-  &.hide {
+.ngx-file-drop__drop-zone--over {
-    display: none;
+  .global-dropzone-overlay {
-  }
+    opacity: 1;
+    pointer-events: all !important;
   }
 
-.ngx-file-drop__drop-zone--over .global-dropzone-overlay {
+  .main-wrapper {
-  opacity: 0;
-}
-
-.inert {
     pointer-events: none !important;
     user-select: none !important;
   }
+}
 
 .alert-primary {
   --bs-alert-color: var(--bs-primary);