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

Add compact table and update themes

Browse Source
This commit is contained in:
Geomitron
2023-12-25 11:23:50 -06:00
parent f931a1b221
commit 0abf801c7e
9 changed files with 99 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src-angular/app/components/browse/browse.component.html
View File

@@ -1,11 +1,6 @@
<app-search-bar />
<div class="flex flex-1 overflow-hidden">
<div
#resultTableDiv
class="basis-2/3 flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full"
(scroll)="resultTable.tableScrolled($event)">
<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)" />
</div>
<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)" />
<div class="basis-1/3 min-w-[310px] max-w-[512px]">
<app-chart-sidebar #chartSidebar />
</div>

16
src-angular/app/components/browse/browse.component.ts
View File

@@ -1,21 +1,9 @@
import { AfterViewInit, Component, ElementRef, HostBinding, ViewChild } from '@angular/core'
import { SearchService } from 'src-angular/app/core/services/search.service'
import { Component, HostBinding } from '@angular/core'
@Component({
selector: 'app-browse',
templateUrl: './browse.component.html',
})
export class BrowseComponent implements AfterViewInit {
export class BrowseComponent {
@HostBinding('class.contents') contents = true
@ViewChild('resultTableDiv', { static: true }) resultTableDiv: ElementRef
constructor(private searchService: SearchService) { }
ngAfterViewInit() {
this.searchService.newSearch.subscribe(() => {
this.resultTableDiv.nativeElement.scrollTop = 0
})
}
}

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

@@ -1,35 +1,40 @@
<table id="resultTable" class="table table-zebra table-pin-rows">
<thead>
<tr>
<th class="collapsing" id="checkboxColumn">
<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('name')">
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('artist')">
Artist
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('album')">
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('genre')">
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('year')">
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</thead>
<tbody>
@for (song of songs; track song) {
<tr
app-result-table-row
(click)="onRowClicked(song)"
[class.!bg-neutral]="activeSong === song"
[class.!text-neutral-content]="activeSong === song"
[song]="song"></tr>
}
</tbody>
</table>
<div
#resultTableDiv
class="basis-2/3 flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full"
(scroll)="tableScrolled()">
<table id="resultTable" class="table table-zebra table-pin-rows" [class.table-xs]="settingsService.isCompactTable">
<thead>
<tr>
<th class="collapsing" id="checkboxColumn">
<input type="checkbox" class="checkbox" [(ngModel)]="allSelected" />
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('name')">
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('artist')">
Artist
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('album')">
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('genre')">
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('year')">
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</thead>
<tbody>
@for (song of songs; track song) {
<tr
app-result-table-row
(click)="onRowClicked(song)"
[class.!bg-neutral]="activeSong === song"
[class.!text-neutral-content]="activeSong === song"
[song]="song"></tr>
}
</tbody>
</table>
</div>

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

@@ -1,4 +1,4 @@
import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChildren } from '@angular/core'
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
import { sortBy } from 'lodash'
import { SettingsService } from 'src-angular/app/core/services/settings.service'
@@ -17,6 +17,7 @@ export class ResultTableComponent implements OnInit {
@Output() rowClicked = new EventEmitter<ChartData[]>()
@ViewChild('resultTableDiv', { static: true }) resultTableDiv: ElementRef
@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
activeSong: ChartData[] | null = null
@@ -31,13 +32,16 @@ export class ResultTableComponent implements OnInit {
ngOnInit() {
this.searchService.newSearch.subscribe(() => {
this.resultTableDiv.nativeElement.scrollTop = 0
this.activeSong = null
this.sortDirection = 'ascending'
this.sortColumn = null
this.updateSort()
setTimeout(() => this.tableScrolled(), 0)
})
this.searchService.updateSearch.subscribe(() => {
this.updateSort()
setTimeout(() => this.tableScrolled(), 0)
})
}
@@ -85,13 +89,16 @@ export class ResultTableComponent implements OnInit {
}
}
tableScrolled(event: Event): void {
if (event.target instanceof HTMLElement) {
if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) < 100) {
// Scrolled near the bottom of the table
if (this.searchService.areMorePages && !this.searchService.searchLoading) {
this.searchService.search(this.searchService.searchControl.value || '*', true).subscribe()
}
@HostListener('window:resize', ['$event'])
onResize() {
this.tableScrolled()
}
tableScrolled(): void {
const table = this.resultTableDiv.nativeElement
if (table.scrollHeight - (table.scrollTop + table.clientHeight) < 100) {
// Scrolled near the bottom of the table
if (this.searchService.areMorePages && !this.searchService.searchLoading) {
this.searchService.search(this.searchService.searchControl.value || '*', true).subscribe()
}
}
}