From 142ed02f518608ba58cfac2e5e3fc25bd054c9ec Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Fri, 11 Feb 2022 17:09:36 +0100
Subject: [PATCH] Add option to collapse the file preview strip in the gallery
 view

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../shared/app-common/app-common.module.ts    |  3 ++-
 .../file-gallery/file-gallery.component.html  | 15 ++++++++-----
 .../file-gallery/file-gallery.component.scss  | 22 ++++++++++++++++++-
 .../file-gallery/file-gallery.component.ts    | 13 +++++++++++
 .../app/components/shared/file/file.module.ts |  6 ++++-
 5 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts b/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts
index da689bc..b56e73f 100644
--- a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts
+++ b/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,
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html
index 291cf61..79873c7 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html
+++ b/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"
-         fxFlex="80%">
+         [class.full-size]="!this.previewStripVisible"
+         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 class="file-scroll-view" fxFlex="20%">
+    <div
+        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">
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 99362f0..e34bd0d 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
@@ -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 {
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts
index 9a5eb90..b6640f8 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts
+++ b/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);
diff --git a/mediarepo-ui/src/app/components/shared/file/file.module.ts b/mediarepo-ui/src/app/components/shared/file/file.module.ts
index ec44d88..5b3bc6c 100644
--- a/mediarepo-ui/src/app/components/shared/file/file.module.ts
+++ b/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,