Fix vanishing scrollbar in grid by replacing the progress spinner with 'something'

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss

@@ -1,3 +1,11 @@
+:host {
+    display: block;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+}
+
 .busy-indicator-overlay {
     position: absolute;
     top: 0;
@@ -5,12 +13,16 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
-    display: flex;
+    display: block;
     z-index: 998;
 
     mat-progress-spinner {
         z-index: 999;
-        margin: auto;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
     }
 }
 

mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.html

@@ -1,11 +1,11 @@
-<mat-card #card (click)="clickEvent.emit(this)" (dblclick)="dblClickEvent.emit(this)"
-          [class.selected]="this.entry.selected | async">
-    <mat-card-content>
-        <app-busy-indicator [busy]="this.loading">
-            <app-file-thumbnail *ngIf="!loading"
+<div (click)="this.onClick()" (dblclick)="dblClickEvent.emit(this)"
+     [class.loading]="this.loading"
+     [class.selected]="this.entry.selected | async" class="file-card-inner">
+    <app-middle-centered *ngIf="this.loading">
+        <div class="loading-indicator"></div>
+    </app-middle-centered>
+    <app-file-thumbnail *ngIf="!this.loading"
                         [fileChanged]="this.fileChanged"
                         [file]="this.entry.data"
-                                class=".entry-image"></app-file-thumbnail>
-        </app-busy-indicator>
-    </mat-card-content>
-</mat-card>
+                        class="entry-image"></app-file-thumbnail>
+</div>

mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss

@@ -1,28 +1,68 @@
 @import "src/colors";
 
-mat-card {
-    height: calc(100% - 32px);
-    width: calc(100% - 32px);
-    user-select: none;
+:host {
+    display: block;
+    overflow: hidden;
+    border-radius: 5px;
     cursor: pointer;
-    background: $background-lighter-05;
-}
-
-mat-card.selected {
-    background: $primary-darker-10;
+    user-select: none;
+    position: relative;
 }
 
-mat-card-content {
+.file-card-inner {
+    background-color: $background-lighter-05;
     height: 100%;
     width: 100%;
-}
+    margin: 0;
+    display: flex;
+    position: relative;
 
-app-busy-indicator {
-    height: 100%;
-    width: 100%;
+    &.selected {
+        background-color: $primary-darker-10;
+    }
 }
 
 .entry-image {
-    width: 100%;
-    height: 100%;
+    margin: 10px;
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
+    display: flex;
+}
+
+.loading-indicator {
+    display: block;
+    background-color: $primary;
+    animation-name: pulse;
+    animation-duration: 3s;
+    border-radius: 1em;
+    width: 2em;
+    height: 2em;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes pulse {
+    2% {
+        border-radius: 1em;
+        width: 2em;
+        height: 2em;
+    }
+
+    48% {
+        border-radius: 2em;
+        width: 4em;
+        height: 4em;
+    }
+
+    52% {
+        border-radius: 2em;
+        width: 4em;
+        height: 4em;
+    }
+
+    98% {
+        border-radius: 1em;
+        width: 2em;
+        height: 2em;
+    }
 }

mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.ts

@@ -2,15 +2,13 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    ElementRef,
     EventEmitter,
     Input,
     OnChanges,
     OnDestroy,
     OnInit,
     Output,
-    SimpleChanges,
-    ViewChild
+    SimpleChanges
 } from "@angular/core";
 import {File} from "../../../../../api/models/File";
 import {Selectable} from "../../../../models/Selectable";
@@ -26,7 +24,7 @@ const LOADING_WORK_KEY = "FILE_THUMBNAIL_LOADING";
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FileCardComponent implements OnInit, OnChanges, OnDestroy {
-    @ViewChild("card") card!: ElementRef;
+
     @Input() public entry!: Selectable<File>;
     @Input() public fileChanged: BehaviorSubject<void> = new BehaviorSubject<void>(undefined);
     @Output() clickEvent = new EventEmitter<FileCardComponent>();
@@ -60,6 +58,11 @@ export class FileCardComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    public onClick(): void {
+        console.debug(this.entry.data.id);
+        this.clickEvent.emit(this);
+    }
+
     private setImageDelayed() {
         if (this.workId) {
             this.schedulingService.cancelWork(LOADING_WORK_KEY, this.workId);

mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss

@@ -49,9 +49,11 @@
     .file-item {
         width: 100%;
         overflow: hidden;
-        height: calc(100%);
+        height: 100%;
 
-        ::ng-deep mat-card {
+        app-file-card {
+            height: 100%;
+            width: 100%;
             border-left: 2px solid $background;
             border-radius: 0;
         }

mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.scss

@@ -3,9 +3,7 @@
 app-file-card {
     height: 250px;
     width: 100%;
-    padding: 5px;
-    display: block;
-    overflow: hidden;
+    margin: 5px;
 }
 
 .file-scroll {

mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts

@@ -89,6 +89,7 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
      * @param {FileCardComponent} clickedEntry
      */
     setSelectedFile(clickedEntry: Selectable<File>) {
+        console.debug(clickedEntry);
         if (!(this.shiftClicked || this.ctrlClicked) && this.selectedEntries.length > 0) {
             this.selectedEntries.forEach(entry => {
                 if (entry !== clickedEntry) entry.unselect();
@@ -100,13 +101,11 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
         } else {
             clickedEntry.selected.next(!clickedEntry.selected.value);
             if (!clickedEntry.selected.value) {
-                this.logger.trace("File wasn't selected");
                 const index = this.selectedEntries.indexOf(clickedEntry);
                 if (index > -1) {
                     this.selectedEntries.splice(index, 1);
                 }
             } else {
-                this.logger.trace("File was selected");
                 this.selectedEntries.push(clickedEntry);
             }
         }

mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss

@@ -1,5 +1,9 @@
 @import "src/colors";
 
+:host {
+    position: relative;
+}
+
 app-content-aware-image {
     height: 100%;
     width: 100%;