Trivernis
/
mediarepo
mirror of https://github.com/Trivernis/mediarepo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix grid entry size on last row

Browse Source 
Signed-off-by: trivernis <trivernis@protonmail.com>
pull/17/head
trivernis 2 years ago
parent fcbfa25435
commit ded9eafd36
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45
3 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File

15
mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html
Unescape Escape View File

@ -8,12 +8,15 @@
minBufferPx="500">
<div *cdkVirtualFor="let rowEntry of partitionedGridEntries; trackBy: trackByFileRowId">
<div class="file-row">
<app-file-card
(clickEvent)="setSelectedFile($event.entry)"
(contextmenu)="this.selectEntryWhenNotSelected(gridEntry); fileContextMenu.onContextMenu($event, this.getSelectedFiles())"
(dblClickEvent)="fileOpen.emit($event.entry.data)"
*ngFor="let gridEntry of rowEntry; trackBy: trackByFileId"
[entry]="gridEntry" [fileChanged]="this.fileChanged"></app-file-card>
<ng-container *ngFor="let gridEntry of rowEntry; trackBy: trackByFileId">
<app-file-card
(clickEvent)="setSelectedFile($event.entry)"
(contextmenu)="this.selectEntryWhenNotSelected(gridEntry); fileContextMenu.onContextMenu($event, this.getSelectedFiles())"
(dblClickEvent)="fileOpen.emit($event.entry.data)"
*ngIf="gridEntry"
[entry]="gridEntry" [fileChanged]="this.fileChanged"></app-file-card>
<div *ngIf="!gridEntry" class="empty-grid-entry"></div>
</ng-container>
</div>
</div>
</cdk-virtual-scroll-viewport>

7
mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.scss
Unescape Escape View File

@ -6,6 +6,13 @@ app-file-card {
margin: 5px;
}
.empty-grid-entry {
width: 100%;
height: 250px;
margin: 5px;
display: block;
}
.file-scroll {
height: 100%;
width: 100%;

36
mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts
Unescape Escape View File

@ -43,7 +43,7 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
public fileChanged = new BehaviorSubject<void>(undefined);
public selectedEntries: Selectable<File>[] = [];
public partitionedGridEntries: Selectable<File>[][] = [];
public partitionedGridEntries: (Selectable<File> | undefined)[][] = [];
private columns = 6;
private entrySizePx = 260;
@ -187,12 +187,12 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
this.ctrlClicked = event.ctrlKey ? false : this.ctrlClicked;
}
public trackByFileRowId(index: number, item: Selectable<File>[]) {
return item.map(e => e.data.id).join("-");
public trackByFileRowId(index: number, item: (Selectable<File> | undefined)[]) {
return item.map(e => e?.data.id).join("-");
}
public trackByFileId(index: number, item: Selectable<File>) {
return item.data.id;
public trackByFileId(index: number, item: Selectable<File> | undefined) {
return item?.data.id;
}
public onFileStatusChange(): void {
@ -224,14 +224,18 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
for (let i = 0; i < (Math.ceil(
this.gridEntries.length / this.columns)); i++) {
const entries = this.gridEntries.slice(
const entries: (Selectable<File> | undefined)[] = this.gridEntries.slice(
i * this.columns,
Math.min(this.gridEntries.length, (i + 1) * this.columns)
);
const length = entries.length;
for (let i = 0; i < (this.columns - length); i++) {
entries.push(undefined);
}
this.partitionedGridEntries.push(entries);
const preselectedEntry = entries.find(
e => e.data.id == this.preselectedFile?.id);
e => e?.data.id == this.preselectedFile?.id);
if (preselectedEntry) {
scrollToIndex = i;
@ -256,7 +260,8 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
private scrollToSelection() {
const selected = this.selectedEntries[0];
if (this.virtualScroll && selected) {
const index = Math.floor(this.gridEntries.indexOf(selected) / this.columns);
const index = Math.floor(
this.gridEntries.indexOf(selected) / this.columns);
setTimeout(() => {
this.virtualScroll.scrollToIndex(index);
this.changeDetector.markForCheck();
@ -345,14 +350,17 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
if (this.virtualScroll) {
const viewportSize = this.virtualScroll.getViewportSize();
let offsetTop = this.virtualScroll.measureScrollOffset("top");
const contentOffset = Math.floor(selectedIndex / this.columns) * 260;
const contentOffset = Math.floor(
selectedIndex / this.columns) * 260;
if (contentOffset > offsetTop + viewportSize - 300 || contentOffset < offsetTop) {
this.virtualScroll.scrollToIndex(Math.floor(selectedIndex / this.columns));
this.virtualScroll.scrollToIndex(
Math.floor(selectedIndex / this.columns));
offsetTop = this.virtualScroll.measureScrollOffset("top");
if (contentOffset < offsetTop + (viewportSize / 2)) {
this.virtualScroll.scrollToOffset((offsetTop + 130) - viewportSize / 2);
this.virtualScroll.scrollToOffset(
(offsetTop + 130) - viewportSize / 2);
}
}
}
@ -361,14 +369,16 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
private pageDown() {
if (this.virtualScroll) {
const offsetTop = this.virtualScroll.measureScrollOffset("top");
this.virtualScroll.scrollToOffset(offsetTop + this.virtualScroll.getViewportSize());
this.virtualScroll.scrollToOffset(
offsetTop + this.virtualScroll.getViewportSize());
}
}
private pageUp() {
if (this.virtualScroll) {
const offsetTop = this.virtualScroll.measureScrollOffset("top");
this.virtualScroll.scrollToOffset(offsetTop - this.virtualScroll.getViewportSize());
this.virtualScroll.scrollToOffset(
offsetTop - this.virtualScroll.getViewportSize());
}
}
}

Write Preview
Loading…
Cancel
Save