Cleaner activation with Angular directives

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

@@ -3,9 +3,11 @@
 <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">
-            <h1 class="display-6">Drop files to begin upload</h1>
+        <div class="global-dropzone-overlay fade" [class.show]="fileIsOver" [class.hide]="hidden">
+            <h2>Drop files to begin upload</h2>
+        </div>
+        <div [class.inert]="fileIsOver">
+            <router-outlet></router-outlet>
         </div>
-        <router-outlet></router-outlet>
     </ng-template>
-</ngx-file-drop>
+</ngx-file-drop>

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

@@ -1,11 +1,5 @@
 import { SettingsService, SETTINGS_KEYS } from './services/settings.service'
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  RendererFactory2,
-} from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { ConsumerStatusService } from './services/consumer-status.service'
@@ -23,22 +17,20 @@ export class AppComponent implements OnInit, OnDestroy {
   successSubscription: Subscription
   failedSubscription: Subscription
 
-  private renderer: Renderer2
   private fileLeaveTimeoutID: any
+  fileIsOver: boolean = false
+  hidden: boolean = true
 
   constructor(
     private settings: SettingsService,
     private consumerStatusService: ConsumerStatusService,
     private toastService: ToastService,
     private router: Router,
-    private uploadDocumentsService: UploadDocumentsService,
-    rendererFactory: RendererFactory2
+    private uploadDocumentsService: UploadDocumentsService
   ) {
     let anyWindow = window as any
     anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js'
     this.settings.updateAppearanceSettings()
-
-    this.renderer = rendererFactory.createRenderer(null, null)
   }
 
   ngOnDestroy(): void {
@@ -121,27 +113,29 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   public fileOver() {
-    this.renderer.addClass(
-      document.getElementsByClassName('main-content').item(0),
-      'inert'
-    )
+    // allows transition
+    setTimeout(() => {
+      this.fileIsOver = true
+    }, 1)
+    this.hidden = false
+    // stop fileLeave timeout
     clearTimeout(this.fileLeaveTimeoutID)
   }
 
-  public fileLeave() {
+  public fileLeave(immediate: boolean = false) {
+    const ms = immediate ? 0 : 500
+
     this.fileLeaveTimeoutID = setTimeout(() => {
-      this.renderer.removeClass(
-        document.getElementsByClassName('main-content').item(0),
-        'inert'
-      )
-    }, 1000)
+      this.fileIsOver = false
+      // await transition completed
+      setTimeout(() => {
+        this.hidden = true
+      }, 150)
+    }, ms)
   }
 
   public dropped(files: NgxFileDropEntry[]) {
-    this.renderer.removeClass(
-      document.getElementsByClassName('main-content').item(0),
-      'inert'
-    )
+    this.fileLeave(true)
     this.uploadDocumentsService.uploadFiles(files)
     this.toastService.showInfo($localize`Initiating upload...`, 3000)
   }

src-ui/src/theme.scss

@@ -255,24 +255,27 @@ table.table {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(23, 84, 31, .7);
-  // z-index: $zindex-modal; // 1055
-  z-index: 1055;
-  opacity: 0;
+  background-color: rgba(23, 84, 31, .8);
+  z-index: 1055; // $zindex-modal
   pointer-events: none !important;
   user-select: none !important;
   text-align: center;
   padding-top: 25%;
-  transition: opacity 0.2s ease;
-}
 
-.main-dropzone.ngx-file-drop__drop-zone--over {
-  .global-dropzone-overlay {
-    opacity: 1;
+  &.show {
+    opacity: 1 !important;
+  }
+
+  &.hide {
+    display: none;
   }
 }
 
-.main-content.inert {
+.ngx-file-drop__drop-zone--over .global-dropzone-overlay {
+  opacity: 0;
+}
+
+.inert {
   pointer-events: none !important;
   user-select: none !important;
 }