diff --git a/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss b/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss index 63724c8..584234c 100644 --- a/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss +++ b/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; } } diff --git a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.html b/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.html index f4eb5e6..ee71963 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.html +++ b/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.html @@ -1,11 +1,11 @@ - - - - - - - +
+ +
+ + +
diff --git a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss b/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss index 1f93450..c6d56d4 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss +++ b/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; + } } diff --git a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.ts b/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.ts index 30bb756..4d0aa90 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.ts +++ b/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; @Input() public fileChanged: BehaviorSubject = new BehaviorSubject(undefined); @Output() clickEvent = new EventEmitter(); @@ -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); diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss index e0d51d0..2b57fdf 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss +++ b/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; } diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.scss b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.scss index d476890..d53d41a 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.scss +++ b/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 { diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts index a488c00..d4ecf5e 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts +++ b/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) { + 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); } } diff --git a/mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss b/mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss index fe6e2f6..3406b74 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss +++ b/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%;