Add option to collapse the file preview strip in the gallery view

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

mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts

@@ -22,7 +22,7 @@ import {DrawerPageSideComponent} from "./drawer-page/drawer-page-side/drawer-pag
 import {DrawerPageContentComponent} from "./drawer-page/drawer-page-content/drawer-page-content.component";
 import {FlexLayoutModule} from "@angular/flex-layout";
 import {MatRippleModule} from "@angular/material/core";
-import { FlapButtonComponent } from './flap-button/flap-button.component';
+import {FlapButtonComponent} from "./flap-button/flap-button.component";
 
 
 @NgModule({
@@ -53,6 +53,7 @@ import { FlapButtonComponent } from './flap-button/flap-button.component';
         DrawerPageComponent,
         DrawerPageSideComponent,
         DrawerPageContentComponent,
+        FlapButtonComponent,
     ],
     imports: [
         CommonModule,

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

@@ -1,16 +1,21 @@
-<div #inner (keyDownEvent)="handleKeydownEvent($event)" appInputReceiver class="gallery-container" fxLayout="column">
+<div #inner (keyDownEvent)="handleKeydownEvent($event)" appInputReceiver class="gallery-container">
     <button (click)="this.appClose.emit(this)" class="close-button" mat-icon-button>
         <ng-icon name="mat-close"></ng-icon>
     </button>
     <div (dblclick)="this.selectedFile? this.fileDblClick.emit(this.selectedFile.data) : null"
-         class="file-full-view"
+         [class.full-size]="!this.previewStripVisible"
-         fxFlex="80%">
+         class="file-full-view">
         <app-content-viewer (contextmenu)="this.selectedFile && fileContextMenu.onContextMenu($event, [this.selectedFile!.data])"
                             *ngIf="this.selectedFile"
                             [file]="this.selectedFile!.data"></app-content-viewer>
+        <app-flap-button (click)="this.togglePreviewStrip()" align="center" attach="bottom">
+            <ng-icon *ngIf="previewStripVisible" name="mat-expand-more"></ng-icon>
+            <ng-icon *ngIf="!previewStripVisible" name="mat-expand-less"></ng-icon>
+        </app-flap-button>
     </div>
-    <mat-divider fxFlex></mat-divider>
+    <div
-    <div class="file-scroll-view" fxFlex="20%">
+        class="file-scroll-view">
+        <mat-divider></mat-divider>
         <cdk-virtual-scroll-viewport #virtualScroll class="file-scroll-viewport" itemSize="260" maxBufferPx="3000"
                                      minBufferPx="1000" orientation="horizontal">
             <div *cdkVirtualFor="let entry of entries; trackBy: trackByFileId" class="file-item">

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

@@ -14,6 +14,7 @@
     width: 100%;
     position: relative;
     user-select: none;
+    overflow-y: hidden;
 }
 
 app-file-gallery-entry, .file-item {
@@ -27,9 +28,28 @@ app-file-gallery-entry {
 }
 
 .file-full-view {
+    position: relative;
     width: 100%;
-    height: 100%;
+    height: 80%;
     overflow: hidden;
+    transition-duration: 1s;
+
+    &.full-size {
+        height: 100%;
+    }
+}
+
+.file-scroll-view {
+    transition-duration: 1s;
+    height: 20%;
+
+    .file-scroll-viewport {
+        height: calc(100% - 4px);
+    }
+
+    mat-divider {
+        height: 2px;
+    }
 }
 
 app-content-viewer {

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

@@ -43,6 +43,9 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit {
     public fileContentUrl: SafeResourceUrl | undefined;
     public fileChanged = new BehaviorSubject<void>(undefined);
 
+    public imageViewHeightPercent = 80;
+    public previewStripVisible = true;
+
     private scrollTimeout: number | undefined;
     private escapeCount = 0;
 
@@ -186,6 +189,16 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit {
         this.fileChanged.next();
     }
 
+    public togglePreviewStrip(): void {
+        if (this.previewStripVisible) {
+            this.imageViewHeightPercent = 100;
+            this.previewStripVisible = false;
+        } else {
+            this.imageViewHeightPercent = 80;
+            this.previewStripVisible = true;
+        }
+    }
+
     private scrollToSelection(): void {
         if (this.selectedFile) {
             const selectedIndex = this.entries.indexOf(this.selectedFile);

mediarepo-ui/src/app/components/shared/file/file.module.ts

@@ -18,11 +18,13 @@ import {
     MatAutoDelete,
     MatClose,
     MatDescription,
+    MatExpandLess,
+    MatExpandMore,
     MatFiberNew,
     MatGif,
     MatImage,
     MatMovie,
-    MatRefresh,
+    MatRefresh
 } from "@ng-icons/material-icons";
 import {DragDropModule} from "@angular/cdk/drag-drop";
 import {MatButtonModule} from "@angular/material/button";
@@ -64,6 +66,8 @@ import {MatCardModule} from "@angular/material/card";
             MatDescription,
             MatAutoDelete,
             MatFiberNew,
+            MatExpandMore,
+            MatExpandLess
         }),
         DragDropModule,
         MatButtonModule,