fix(files-tree): updated empty state

Author: nsemets

src/app/shared/components/files-drop-zone/files-drop-zone.component.html

@@ -10,7 +10,7 @@
       @if (isDragOver()) {
         <div class="flex flex-column gap-2 align-items-center pointer-events-none">
           <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
-          <p class="drop-text text-xl">{{ 'files.dropText' | translate }}</p>
+          <p class="text-xl">{{ 'files.dropText' | translate }}</p>
         </div>
       }
     </div>

src/app/shared/components/files-tree-row/files-tree-row.component.ts

@@ -26,6 +26,10 @@ export class FilesTreeRowComponent {
   showMenu = input<boolean>(false);
   allowedMenuActions = input.required<FileMenuFlags>();
 
+  openParentFolder = output<void>();
+  openEntry = output<FileModel>();
+  menuAction = output<FileMenuAction>();
+
   readonly isFolder = computed(() => this.file().kind === FileKind.Folder);
 
   readonly downloadsCount = computed(() => {
@@ -35,10 +39,6 @@ export class FilesTreeRowComponent {
     return this.file().extra.downloads;
   });
 
-  openParentFolder = output<void>();
-  openEntry = output<FileModel>();
-  menuAction = output<FileMenuAction>();
-
   onOpenEntry(): void {
     this.openEntry.emit(this.file());
   }

src/app/shared/components/files-tree/files-tree.component.html

@@ -33,20 +33,20 @@
             (menuAction)="onFileMenuAction($event, file.data)"
           ></osf-files-tree-row>
         </ng-template>
-      </p-tree>
 
-      @if (!files().length) {
-        <div class="empty-state-container p-4">
-          @if (!canUpload()) {
-            <h3 class="font-normal mb-4 text-no-transform">{{ 'files.emptyState' | translate }}</h3>
-          } @else {
-            <div class="drop-text">
-              <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
-              <p class="text-xl">{{ 'files.dropText' | translate }}</p>
-            </div>
-          }
-        </div>
-      }
+        <ng-template pTemplate="empty">
+          <div class="flex align-items-center justify-content-center h-full p-4">
+            @if (!canUpload()) {
+              <h3 class="font-normal mb-4 text-no-transform">{{ 'files.emptyState' | translate }}</h3>
+            } @else {
+              <div class="flex flex-column align-items-center justify-content-center">
+                <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
+                <p class="text-xl">{{ 'files.dropText' | translate }}</p>
+              </div>
+            }
+          </div>
+        </ng-template>
+      </p-tree>
     </div>
   }
 </osf-files-drop-zone>

src/styles/overrides/tree.scss

@@ -54,7 +54,7 @@
     }
 
     .p-tree-empty-message {
-      display: none;
+      height: 100%;
     }
 
     .p-tree-node-selected {
@@ -72,18 +72,4 @@
       }
     }
   }
-
-  .empty-state-container {
-    position: absolute;
-    inset: 0;
-    top: 2.75rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .drop-text {
-      text-align: center;
-      margin-bottom: 2.75rem;
-    }
-  }
 }