Fix resizing issues with filegrid and gallery

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent c8cccf4500
commit 1956f2d0b0

@ -16,6 +16,7 @@ import {SafeResourceUrl} from "@angular/platform-browser";
import {Selectable} from "../../models/Selectable";
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
import {CdkDragMove} from "@angular/cdk/drag-drop";
import {TabService} from "../../services/tab/tab.service";
@Component({
selector: 'app-file-gallery',
@ -42,7 +43,8 @@ export class FileGalleryComponent implements OnChanges, OnInit {
public imagePosition = {x: 0, y: 0};
public mouseInImageView = false;
constructor(private fileService: FileService) {
constructor(private tabService: TabService, private fileService: FileService) {
tabService.selectedTab.subscribe(() => this.adjustElementSizes());
}
/**
@ -56,25 +58,31 @@ export class FileGalleryComponent implements OnChanges, OnInit {
this.selectedFile?.unselect();
entry.select();
this.selectedFile = entry;
const selectedIndex = this.entries.indexOf(entry);
//this.virtualScroll.scrollToIndex(, "smooth");
await this.loadSelectedFile();
if (this.virtualScroll) {
const viewportSize = this.virtualScroll.getViewportSize();
const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered
this.virtualScroll.scrollToIndex(
Math.max(selectedIndex - indexAdjustment, 0), "smooth");
if (selectedIndex > indexAdjustment) {
this.virtualScroll.scrollToOffset(
this.virtualScroll.measureScrollOffset("left") + 130, "smooth");
}
this.scrollToSelection();
}
this.fileSelectEvent.emit(this.selectedFile.data);
}
}
private scrollToSelection(): void {
if (this.selectedFile) {
const selectedIndex = this.entries.indexOf(this.selectedFile);
const viewportSize = this.virtualScroll.getViewportSize();
const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered
this.virtualScroll.scrollToIndex(
Math.max(selectedIndex - indexAdjustment, 0), "smooth");
if (selectedIndex > indexAdjustment) {
this.virtualScroll.scrollToOffset(
this.virtualScroll.measureScrollOffset("left") + 130, "smooth");
}
}
}
/**
* Loads the content url of the selected file
* @returns {Promise<void>}
@ -192,4 +200,11 @@ export class FileGalleryComponent implements OnChanges, OnInit {
}
return undefined;
}
public adjustElementSizes(): void {
if (this.virtualScroll) {
this.virtualScroll.checkViewportSize();
this.scrollToSelection();
}
}
}

@ -14,6 +14,7 @@ import {File} from "../../models/File";
import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component";
import {GridEntry} from "./file-grid-entry/GridEntry";
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
import {TabService} from "../../services/tab/tab.service";
@Component({
selector: 'app-file-grid',
@ -38,7 +39,8 @@ export class FileGridComponent implements OnChanges, OnInit {
private ctrlClicked = false;
private gridEntries: GridEntry[] = []
constructor() {
constructor(private tabService: TabService) {
tabService.selectedTab.subscribe(() => this.adjustElementSizes());
}
public ngOnInit(): void {
@ -181,4 +183,10 @@ export class FileGridComponent implements OnChanges, OnInit {
break;
}
}
public adjustElementSizes(): void {
if (this.virtualScroll) {
this.virtualScroll.checkViewportSize();
}
}
}

@ -1,5 +1,5 @@
<div id="content">
<mat-tab-group #tabGroup>
<mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)">
<mat-tab label="Repositories">
<app-repositories-tab></app-repositories-tab>
</mat-tab>

@ -1,8 +1,9 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {Repository} from "../../models/Repository";
import {RepositoryService} from "../../services/repository/repository.service";
import {MatTabGroup} from "@angular/material/tabs";
import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs";
import {TagService} from "../../services/tag/tag.service";
import {TabService} from "../../services/tab/tab.service";
@Component({
selector: 'app-home',
@ -16,8 +17,11 @@ export class HomeComponent implements OnInit {
@ViewChild("tabGroup") tabGroup!: MatTabGroup;
constructor(private repoService: RepositoryService, private tagService: TagService) {
}
constructor(
private tabService: TabService,
private repoService: RepositoryService,
private tagService: TagService)
{}
public async ngOnInit(): Promise<void> {
this.selectedRepository = this.repoService.selectedRepository.getValue();
@ -42,4 +46,8 @@ export class HomeComponent implements OnInit {
async loadRepoData() {
await this.tagService.loadTags();
}
public onTabSelectionChange(event: MatTabChangeEvent): void {
this.tabService.setSelectedTab(event.index);
}
}

@ -1,8 +1,8 @@
<mat-drawer-container>
<mat-drawer-container autosize>
<mat-drawer disableClose="true" mode="side" opened>
<app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
</mat-drawer>
<mat-drawer-content>
<app-file-grid [files]="this.files" ></app-file-grid>
<app-file-grid #fileGrid [files]="this.files" ></app-file-grid>
</mat-drawer-content>
</mat-drawer-container>

@ -16,8 +16,12 @@ mat-drawer {
width: 25%;
}
app-import-tab-sidebar, app-file-gallery {
app-import-tab-sidebar, app-file-grid {
height: 100%;
width: 100%;
margin: 0;
}
app-file-grid {
display: block;
}

@ -1,6 +1,7 @@
import {Component} from '@angular/core';
import {Component, ViewChild} from '@angular/core';
import {File} from "../../../models/File";
import {FileService} from "../../../services/file/file.service";
import {FileGridComponent} from "../../../components/file-grid/file-grid.component";
@Component({
selector: 'app-import-tab',
@ -11,6 +12,8 @@ export class ImportTabComponent {
public files: File[] = [];
@ViewChild("fileGrid") fileGrid!: FileGridComponent;
constructor(private fileService: FileService) {
}

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { TabService } from './tab.service';
describe('TabService', () => {
let service: TabService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(TabService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

@ -0,0 +1,15 @@
import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs";
@Injectable({
providedIn: 'root'
})
export class TabService {
public selectedTab = new BehaviorSubject<number>(0);
constructor() { }
public setSelectedTab(index: number) {
this.selectedTab.next(index);
}
}
Loading…
Cancel
Save