myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-04-11 14:19:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Column spaceing and selection

Browse Source
This commit is contained in:
SocksOnHead
2025-08-06 03:19:51 +02:00
parent 57e8cea5d0
commit 2925a5a237
3 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src-angular/app/components/browse/result-table/result-table.component.html
View File

@@ -1,21 +1,42 @@
<div class="flex-1 flex flex-col overflow-hidden">
<div class="flex-shrink-0">
<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable" style="table-layout: fixed">
<thead class="bg-base-100">
<ng-container *ngTemplateOutlet="headerTemplate; context: { isVisible: true }"></ng-container>
</thead>
</table>
</div>
<cdk-virtual-scroll-viewport
#viewport
class="flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full"
[itemSize]="tableRowHeight"
(scroll)="onViewportScroll()">
<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable" style="table-layout: fixed">
<!-- Invisible header for column alignment -->
<thead class="invisible absolute opacity-0" style="height: 0; overflow: hidden">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<table class="table table-zebra w-full" [class.table-xs]="settingsService.isCompactTable">
<thead>
<tr [style.top]="tableHeaderPosition" class="sticky top-0 bg-base-100 z-10">
<th class="collapsing" id="checkboxColumn">
<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
</th>
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('artist')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
Artist
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('album')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('genre')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('year')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('charter')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('charter')">
Charter <i *ngIf="sortColumn === 'charter'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('length')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('length')">
Length (min) <i *ngIf="sortColumn === 'length'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('difficulty')" [ngClass]="sortDirection" class="cursor-pointer">Difficulty</th>
<th *ngIf="hasColumn('uploaded')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('modifiedTime')">
Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</thead>
<tbody>
<tr
@@ -30,37 +51,3 @@
</table>
</cdk-virtual-scroll-viewport>
</div>
<ng-template #headerTemplate>
<tr>
<th class="collapsing" id="checkboxColumn">
<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
</th>
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('artist')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
Artist
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('album')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('genre')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('year')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('charter')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('charter')">
Charter <i *ngIf="sortColumn === 'charter'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('length')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('length')">
Length (min) <i *ngIf="sortColumn === 'length'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
<th *ngIf="hasColumn('difficulty')" [ngClass]="sortDirection" class="cursor-pointer">Difficulty</th>
<th *ngIf="hasColumn('uploaded')" [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('modifiedTime')">
Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</ng-template>

9
src-angular/app/components/browse/result-table/result-table.component.ts
View File

@@ -119,6 +119,15 @@ export class ResultTableComponent implements OnInit, OnDestroy {
}
}
public get tableHeaderPosition(): string {
if (!this.viewport) {
return '-0px'
}
const offset = this.viewport.getOffsetToRenderedContentStart()
return `-${offset}px`
}
@HostListener('window:resize', ['$event'])
onResize() {
if (this.viewport) {

6
src-angular/app/core/services/selection.service.ts
View File

@@ -12,7 +12,7 @@ export class SelectionService {
public selections: { [groupId: number]: boolean | undefined } = {}
constructor(searchService: SearchService) {
constructor(private searchService: SearchService) {
searchService.newSearch.subscribe(() => {
this.selections = {}
this.deselectAll()
@@ -33,8 +33,8 @@ export class SelectionService {
selectAll() {
this.allSelected = true
for (const groupId in this.selections) {
this.selections[groupId] = true
for (const song of this.searchService.groupedSongs) {
this.selections[song[0].groupId] = true
}
this.selectAllChangedEmitter.emit(true)
}