Add collapsing of the sidebar

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

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html

@@ -1,11 +1,11 @@
-<mat-drawer-container (keyDownEvent)="this.onKeydown($event)" appInputReceiver autosize>
+<app-drawer-page (keyDownEvent)="this.onKeydown($event)" appInputReceiver>
-    <mat-drawer disableClose mode="side" opened>
+    <app-drawer-page-side>
         <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false;"
                                (searchStartEvent)="this.contentLoading = true;"
                                [selectedFiles]="this.selectedFiles"
                                [state]="this.state"></app-files-tab-sidebar>
-    </mat-drawer>
+    </app-drawer-page-side>
-    <mat-drawer-content>
+    <app-drawer-page-content>
         <app-busy-indicator [blurBackground]="true" [busy]="contentLoading" [darkenBackground]="true">
             <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"
                                 (modeChangeEvent)="state.mode.next($event)"
@@ -14,5 +14,5 @@
                                 [preselectedFile]="this.getStateSelectedFile()"
                                 [tabState]="this.state"></app-file-multiview>
         </app-busy-indicator>
-    </mat-drawer-content>
+    </app-drawer-page-content>
-</mat-drawer-container>
+</app-drawer-page>

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss

@@ -2,24 +2,6 @@ mat-selection-list {
     height: 100%;
 }
 
-mat-drawer {
-    height: 100%;
-    width: 25%;
-    overflow: hidden;
-}
-
-mat-drawer-content {
-    overflow-x: hidden;
-    overflow-y: auto;
-    height: 100%;
-}
-
-mat-drawer-container {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
-
 app-file-multiview {
     padding: 0;
     height: 100%;

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html

@@ -1,14 +1,14 @@
-<mat-drawer-container autosize>
+<app-drawer-page>
-    <mat-drawer disableClose="true" mode="side" opened>
+    <app-drawer-page-side>
         <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"
                                 (importFinished)="this.refreshFileView()"
                                 [selectedFiles]="selectedFiles"></app-import-tab-sidebar>
-    </mat-drawer>
+    </app-drawer-page-side>
-    <mat-drawer-content>
+    <app-drawer-page-content>
         <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"
                             (modeChangeEvent)="this.state.mode.next($event)"
                             [files]="this.files"
                             [mode]="this.state.mode.value"
                             [preselectedFile]="this.getSelectedFileFromState()"></app-file-multiview>
-    </mat-drawer-content>
+    </app-drawer-page-content>
-</mat-drawer-container>
+</app-drawer-page>

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.scss

@@ -1,21 +1,3 @@
-mat-drawer-container {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    overflow: hidden;
-}
-
-mat-drawer-content {
-    overflow-x: hidden;
-    overflow-y: auto;
-    height: 100%;
-}
-
-mat-drawer {
-    height: 100%;
-    width: 25%;
-}
-
 app-import-tab-sidebar, app-file-multiview {
     height: 100%;
     width: 100%;

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts

@@ -15,8 +15,6 @@ export class ImportTabComponent implements OnInit {
     public files: File[] = [];
     public selectedFiles: File[] = [];
 
-    private newFiles: File[] = [];
-
     constructor(private changeDetector: ChangeDetectorRef) {
     }
 

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

@@ -4,6 +4,7 @@ import {BusyIndicatorComponent} from "./busy-indicator/busy-indicator.component"
 import {ContextMenuComponent} from "./context-menu/context-menu.component";
 import {CommonModule} from "@angular/common";
 import {NgIconsModule} from "@ng-icons/core";
+import {MatChevronLeft, MatChevronRight} from "@ng-icons/material-icons";
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 import {MatButtonModule} from "@angular/material/button";
 import {MatDialogModule} from "@angular/material/dialog";
@@ -15,6 +16,12 @@ import {BusyDialogComponent} from "./busy-dialog/busy-dialog.component";
 import {SelectableComponent} from "./selectable/selectable.component";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {HasPropertyPipe} from "./pipes/has-property.pipe";
+import {DrawerPageComponent} from "./drawer-page/drawer-page.component";
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {DrawerPageSideComponent} from "./drawer-page/drawer-page-side/drawer-page-side.component";
+import {DrawerPageContentComponent} from "./drawer-page/drawer-page-content/drawer-page-content.component";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {MatRippleModule} from "@angular/material/core";
 
 
 @NgModule({
@@ -28,6 +35,9 @@ import {HasPropertyPipe} from "./pipes/has-property.pipe";
         BusyDialogComponent,
         SelectableComponent,
         HasPropertyPipe,
+        DrawerPageComponent,
+        DrawerPageSideComponent,
+        DrawerPageContentComponent,
     ],
     exports: [
         ConfirmDialogComponent,
@@ -38,15 +48,21 @@ import {HasPropertyPipe} from "./pipes/has-property.pipe";
         MetadataEntryComponent,
         SelectableComponent,
         HasPropertyPipe,
+        DrawerPageComponent,
+        DrawerPageSideComponent,
+        DrawerPageContentComponent,
     ],
     imports: [
         CommonModule,
-        NgIconsModule.withIcons({}),
+        NgIconsModule.withIcons({ MatChevronLeft, MatChevronRight }),
         MatProgressSpinnerModule,
         MatButtonModule,
         MatDialogModule,
         MatMenuModule,
-        MatProgressBarModule
+        MatProgressBarModule,
+        MatSidenavModule,
+        FlexLayoutModule,
+        MatRippleModule
     ]
 })
 export class AppCommonModule {

mediarepo-ui/src/app/components/shared/app-common/content-aware-image/content-aware-image.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
+import {Component, DoCheck, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
 import {SafeResourceUrl} from "@angular/platform-browser";
 
 @Component({
@@ -6,17 +6,17 @@ import {SafeResourceUrl} from "@angular/platform-browser";
     templateUrl: "./content-aware-image.component.html",
     styleUrls: ["./content-aware-image.component.scss"]
 })
-export class ContentAwareImageComponent implements OnInit {
+export class ContentAwareImageComponent implements OnInit, DoCheck {
-
     @Input() imageSrc!: string | SafeResourceUrl;
     @Input() maximizeHeight: boolean = true;
     @Input() maximizeWidth: boolean = true;
     @Input() borderRadius: string | undefined;
     @Input() decoding: "async" | "sync" | "auto" = "auto";
-
+    @ViewChild("image") image?: ElementRef<HTMLImageElement>;
-    @ViewChild("image") image: ElementRef<HTMLImageElement> | undefined;
+    @ViewChild("imageContainer") imageContainer?: ElementRef<HTMLDivElement>;
-
     scaleWidth = false;
+    private previousHeight = 0;
+    private previousWidth = 0;
 
     constructor() {
     }
@@ -27,6 +27,12 @@ export class ContentAwareImageComponent implements OnInit {
         }
     }
 
+    public ngDoCheck(): void {
+        if (this.image?.nativeElement && this.imageContainer?.nativeElement) {
+            this.adjustSize(this.image.nativeElement, this.imageContainer.nativeElement);
+        }
+    }
+
     /**
      * Fits the image into the container
      * @param {HTMLImageElement} image
@@ -35,8 +41,13 @@ export class ContentAwareImageComponent implements OnInit {
     public adjustSize(image: HTMLImageElement, imageContainer: HTMLDivElement): void {
         const containerHeight = Math.abs(imageContainer.clientHeight);
         const containerWidth = Math.abs(imageContainer.clientWidth);
-        const imageRelativeHeight = image.naturalHeight / containerHeight;
+
-        const imageRelativeWidth = image.naturalWidth / containerWidth;
+        if (this.previousWidth != containerWidth || this.previousHeight != containerHeight) {
-        this.scaleWidth = imageRelativeWidth > imageRelativeHeight;
+            this.previousHeight = containerHeight;
+            this.previousWidth = containerWidth;
+            const imageRelativeHeight = image.naturalHeight / containerHeight;
+            const imageRelativeWidth = image.naturalWidth / containerWidth;
+            this.scaleWidth = imageRelativeWidth > imageRelativeHeight;
+        }
     }
 }

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page-content/drawer-page-content.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page-content/drawer-page-content.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DrawerPageContentComponent } from './drawer-page-content.component';
+
+describe('DrawerPageContentComponent', () => {
+  let component: DrawerPageContentComponent;
+  let fixture: ComponentFixture<DrawerPageContentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DrawerPageContentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DrawerPageContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page-content/drawer-page-content.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-drawer-page-content',
+  templateUrl: './drawer-page-content.component.html',
+  styleUrls: ['./drawer-page-content.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DrawerPageContentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page-side/drawer-page-side.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page-side/drawer-page-side.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DrawerPageSideComponent } from './drawer-page-side.component';
+
+describe('DrawerPageSideComponent', () => {
+  let component: DrawerPageSideComponent;
+  let fixture: ComponentFixture<DrawerPageSideComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DrawerPageSideComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DrawerPageSideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page-side/drawer-page-side.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-drawer-page-side',
+  templateUrl: './drawer-page-side.component.html',
+  styleUrls: ['./drawer-page-side.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DrawerPageSideComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.html

@@ -0,0 +1,13 @@
+<mat-drawer-container autosize>
+    <mat-drawer [opened]="this.drawerOpened" disableClose mode="side">
+        <ng-content select="app-drawer-page-side"></ng-content>
+    </mat-drawer>
+    <mat-drawer-content>
+        <ng-content select="app-drawer-page-content"></ng-content>
+
+        <div (click)="this.toggleDrawer()" class="drawer-open-button-float" mat-ripple>
+            <ng-icon *ngIf="!this.drawerOpened" name="mat-chevron-right"></ng-icon>
+            <ng-icon *ngIf="this.drawerOpened" name="mat-chevron-left"></ng-icon>
+        </div>
+    </mat-drawer-content>
+</mat-drawer-container>

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.scss

@@ -0,0 +1,66 @@
+@import "src/colors";
+
+mat-drawer {
+    height: 100%;
+    width: 25%;
+    overflow: hidden;
+}
+
+mat-drawer-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 100%;
+}
+
+mat-drawer-container {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.drawer-side-inner {
+    width: 100%;
+    height: 100%;
+    display: block;
+    margin: 0;
+}
+
+.drawer-side-top-bar {
+    background: $background;
+}
+
+.collapse-button {
+    height: 2em;
+    float: right;
+
+    ng-icon {
+        margin-top: -0.5em;
+    }
+}
+
+.drawer-open-button-float {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    height: 4em;
+    width: 1.5em;
+    border-bottom-right-radius: 1em;
+    opacity: 0.5;
+    background: $background-lighter-10;
+    text-align: center;
+    transition-duration: 0.1s;
+
+    ng-icon {
+        margin: auto;
+    }
+}
+
+.drawer-open-button-float:hover {
+    background: $background-lighter-10;
+    opacity: 0.9;
+    cursor: pointer;
+    transition: 0.7s;
+    width: 2em;
+    height: 10em;
+}

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {DrawerPageComponent} from "./drawer-page.component";
+
+describe("DrawerPageComponent", () => {
+    let component: DrawerPageComponent;
+    let fixture: ComponentFixture<DrawerPageComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [DrawerPageComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DrawerPageComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.ts

@@ -0,0 +1,23 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Output} from "@angular/core";
+
+@Component({
+    selector: "app-drawer-page",
+    templateUrl: "./drawer-page.component.html",
+    styleUrls: ["./drawer-page.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DrawerPageComponent {
+
+    public drawerOpened = true;
+
+    @Output() appSizeChange = new EventEmitter<void>();
+
+    constructor(private changeDetecter: ChangeDetectorRef) {
+    }
+
+    public toggleDrawer(): void {
+        this.drawerOpened = !this.drawerOpened;
+        this.appSizeChange.emit();
+        this.changeDetecter.markForCheck();
+    }
+}