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

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

@@ -1,38 +1,12 @@
<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>
</thead>
<tbody>
<tr
*cdkVirtualFor="let song of songs; trackBy: trackByFn"
app-result-table-row
(click)="onRowClicked(song)"
(rowFocused)="onRowClicked(song)"
[class.!bg-neutral]="activeSong === song"
[class.!text-neutral-content]="activeSong === song"
[song]="song"></tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
</div>
<ng-template #headerTemplate>
<tr>
<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>
@@ -63,4 +37,17 @@
Upload Date <i *ngIf="sortColumn === 'modifiedTime'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</ng-template>
</thead>
<tbody>
<tr
*cdkVirtualFor="let song of songs; trackBy: trackByFn"
app-result-table-row
(click)="onRowClicked(song)"
(rowFocused)="onRowClicked(song)"
[class.!bg-neutral]="activeSong === song"
[class.!text-neutral-content]="activeSong === song"
[song]="song"></tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
</div>

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)
}