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 result table layout

Browse Source
This commit is contained in:
Geomitron
2023-12-14 13:36:45 -06:00
parent c2e355cb53
commit 742c6a28d0
23 changed files with 81 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,12 @@
<app-search-bar></app-search-bar>
<div class="ui celled two column grid">
<div id="table-row" class="row">
<div id="table-column" class="column twelve wide">
<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)"></app-result-table>
</div>
<div id="sidebar-column" class="column four wide">
<app-chart-sidebar #chartSidebar></app-chart-sidebar>
</div>
<div class="flex flex-1 overflow-y-hidden">
<!-- TODO: adjust sizing -->
<div
class="flex-grow-[1] overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)"></app-result-table>
</div>
<div class="flex-grow-[1] min-w-[175px]">
<app-chart-sidebar #chartSidebar></app-chart-sidebar>
</div>
</div>
<app-status-bar #statusBar></app-status-bar>

27
src-angular/app/components/browse/browse.component.scss
View File

@@ -1,27 +0,0 @@
:host {
display: contents;
}
.two.column.grid {
display: contents;
margin: 0;
}
#table-row {
flex-grow: 1;
min-height: 0;
flex-wrap: nowrap;
box-shadow: none;
}
#table-column {
overflow-y: auto;
padding: 0;
}
#sidebar-column {
display: flex;
min-width: 175px;
overflow: hidden;
padding: 0;
}

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

@@ -1,4 +1,4 @@
import { Component, ViewChild } from '@angular/core'
import { Component, HostBinding, ViewChild } from '@angular/core'
import { SearchService } from 'src-angular/app/core/services/search.service'
@@ -9,10 +9,9 @@ import { StatusBarComponent } from './status-bar/status-bar.component'
@Component({
selector: 'app-browse',
templateUrl: './browse.component.html',
styleUrls: ['./browse.component.scss'],
})
export class BrowseComponent {
@HostBinding('class.contents') contents = true
@ViewChild('resultTable', { static: true }) resultTable: ResultTableComponent
@ViewChild('chartSidebar', { static: true }) chartSidebar: ChartSidebarComponent
@ViewChild('statusBar', { static: true }) statusBar: StatusBarComponent

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

@@ -1,10 +1,8 @@
<td>
<div #checkbox class="ui checkbox" (click)="$event.stopPropagation()">
<input type="checkbox" />
</div>
<input #checkAllCheckbox type="checkbox" class="checkbox" (click)="$event.stopPropagation()" [(ngModel)]="selected" />
</td>
<td>
<span id="chartCount" *ngIf="song.length > 1">{{ song.length }}</span> {{ song[0].name }}
<span *ngIf="song.length > 1" class="rounded-sm bg-accent text-accent-content px-1 mr-1 font-bold">{{ song.length }}</span> {{ song[0].name }}
</td>
<td>{{ song[0].artist }}</td>
<td>{{ song[0].album || 'Various' }}</td>

10
src-angular/app/components/browse/result-table/result-table-row/result-table-row.component.scss
View File

@@ -1,10 +0,0 @@
.ui.checkbox {
display: block;
}
#chartCount {
background-color: lightgray;
border-radius: 3px;
padding: 1px 4px 2px 4px;
margin-right: 3px;
}

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

@@ -1,4 +1,4 @@
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'
import { Component, Input, OnInit } from '@angular/core'
import { ChartData } from '../../../../../../src-shared/interfaces/search.interface'
import { SelectionService } from '../../../../core/services/selection.service'
@@ -6,36 +6,24 @@ import { SelectionService } from '../../../../core/services/selection.service'
@Component({
selector: 'tr[app-result-table-row]',
templateUrl: './result-table-row.component.html',
styleUrls: ['./result-table-row.component.scss'],
})
export class ResultTableRowComponent implements AfterViewInit {
export class ResultTableRowComponent implements OnInit {
@Input() song: ChartData[]
@ViewChild('checkbox', { static: true }) checkbox: ElementRef
constructor(private selectionService: SelectionService) { }
get songID() {
return this.song[0].songId ?? this.song[0].chartId
ngOnInit() {
this.selectionService.selections[this.groupId] = false
}
ngAfterViewInit() {
this.selectionService.onSelectionChanged(this.songID, isChecked => {
if (isChecked) {
// TODO
// $(this.checkbox.nativeElement).checkbox('check')
} else {
// $(this.checkbox.nativeElement).checkbox('uncheck')
}
})
get groupId() {
return this.song[0].groupId
}
// $(this.checkbox.nativeElement).checkbox({
// onChecked: () => {
// this.selectionService.selectSong(this.songID)
// },
// onUnchecked: () => {
// this.selectionService.deselectSong(this.songID)
// },
// })
get selected() {
return this.selectionService.selections[this.groupId] ?? false
}
set selected(value: boolean) {
this.selectionService.selections[this.groupId] = value
}
}

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

@@ -1,26 +1,26 @@
<table
id="resultTable"
class="ui stackable selectable single sortable fixed line striped compact small table"
[class.inverted]="settingsService.theme === 'dark'">
<table id="resultTable" class="table table-zebra table-pin-rows overflow-y-auto">
<!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
<!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->
<thead>
<!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
<tr>
<th class="collapsing" id="checkboxColumn">
<div class="ui checkbox" id="checkbox" #checkboxColumn appCheckbox (checked)="checkAll($event)">
<input type="checkbox" />
</div>
<input #checkAllCheckbox type="checkbox" class="checkbox" (change)="checkAll(checkAllCheckbox.checked)" />
</th>
<th class="four wide" [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
<th class="four wide" [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
<th class="four wide" [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
<th class="four wide" [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
<th [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
<th [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
<th [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
<th [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
</tr>
</thead>
<tbody>
@for (song of songs; track song) {
<tr app-result-table-row (click)="onRowClicked(song)" [class.active]="activeSong === song" [song]="song"></tr>
<tr
app-result-table-row
(click)="onRowClicked(song)"
[class.!bg-neutral]="activeSong === song"
[class.!text-neutral-content]="activeSong === song"
[song]="song"></tr>
}
</tbody>
</table>

25
src-angular/app/components/browse/result-table/result-table.component.scss
View File

@@ -1,25 +0,0 @@
:host {
display: contents;
}
.ui.checkbox {
display: block;
}
#checkboxColumn {
width: 34.64px;
}
#resultTable {
border-radius: 0px;
thead>tr:first-child>th:first-child,
thead>tr:first-child>th:last-child {
border-radius: 0px;
}
th {
position: sticky;
top: 0;
z-index:1;
}
}

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

@@ -1,4 +1,4 @@
import { Component, EventEmitter, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
import Comparators from 'comparators'
import { SettingsService } from 'src-angular/app/core/services/settings.service'
@@ -12,9 +12,9 @@ import { ResultTableRowComponent } from './result-table-row/result-table-row.com
@Component({
selector: 'app-result-table',
templateUrl: './result-table.component.html',
styleUrls: ['./result-table.component.scss'],
})
export class ResultTableComponent implements OnInit {
@HostBinding('class.contents') contents = true
@Output() rowClicked = new EventEmitter<ChartData[]>()
@@ -32,10 +32,6 @@ export class ResultTableComponent implements OnInit {
) { }
ngOnInit() {
this.selectionService.onSelectAllChanged(selected => {
this.checkboxColumn.check(selected)
})
this.searchService.searchUpdated.subscribe(() => {
this.activeSong = null
this.updateSort()
@@ -76,6 +72,7 @@ export class ResultTableComponent implements OnInit {
* Called when the user checks the `checkboxColumn`.
*/
checkAll(isChecked: boolean) {
console.log(isChecked)
if (isChecked) {
this.selectionService.selectAll()
} else {

2
src-angular/app/components/browse/search-bar/search-bar.component.html
View File

@@ -59,7 +59,7 @@
</button>
</div>
</div>
<div class="collapse-content justify-center">
<div class="collapse-content justify-center pt-2">
<form [formGroup]="advancedSearchForm">
<div class="flex flex-wrap gap-5 justify-center">
<div>

2
src-angular/app/components/browse/status-bar/status-bar.component.html
View File

@@ -1,4 +1,4 @@
<div id="bottomMenu" class="ui bottom borderless menu">
<div id="bottomMenu" class="ui bottom borderless menu border-t border-t-neutral">
<div *ngIf="(searchService.groupedSongs?.length ?? 0) > 0" class="item">
{{ searchService.groupedSongs.length }}{{ allResultsVisible ? '' : '+' }} Result{{ searchService.groupedSongs.length === 1 ? '' : 's' }}
</div>

5
src-angular/app/components/browse/status-bar/status-bar.component.scss
View File

@@ -3,11 +3,6 @@
min-width: 200px;
}
#bottomMenu {
border-radius: 0px;
border-width: 1px 0px 0px 0px;
}
#downloadsModal {
.header {
display: flex;

7
src-angular/app/components/browse/status-bar/status-bar.component.ts
View File

@@ -102,9 +102,10 @@ export class StatusBarComponent {
}
deselectSongsWithMultipleCharts() {
for (const chartGroup of this.chartGroups) {
this.selectionService.deselectSong(chartGroup[0].songID)
}
// TODO
// for (const chartGroup of this.chartGroups) {
// this.selectionService.deselectSong(chartGroup[0].songID)
// }
}
clearCompleted() {