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

Improve download UI

Browse Source
This commit is contained in:
Geomitron
2024-07-11 18:29:34 -05:00
parent 2d9fad5d03
commit 2e08dec589
6 changed files with 62 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,29 @@
<div class="border-t border-t-neutral p-2 flex gap-2 items-center">
<div *ngIf="searchService.songsResponse">
<div class="border-t border-t-neutral p-2 flex gap-2 items-center max-w-full">
<div *ngIf="searchService.songsResponse" class="text-nowrap">
{{ searchService.songsResponse.found }} Result{{ searchService.songsResponse.found === 1 ? '' : 's' }}
</div>
<div class="flex-1">
<button *ngIf="selectedGroupIds.length > 1" (click)="downloadSelected()" class="btn btn-sm btn-primary">
<button *ngIf="selectedGroupIds.length > 1" (click)="downloadSelected()" class="btn btn-sm btn-primary text-nowrap">
Download {{ selectedGroupIds.length }} Results
</button>
</div>
<button *ngIf="downloadService.downloadCount > 0" (click)="downloadsModal.showModal()" class="btn btn-sm btn-ghost w-[30vw]">
<progress
[attr.value]="downloadService.totalDownloadingPercent"
max="100"
class="progress h-3 rounded-md"
[class.progress-error]="downloadService.anyErrorsExist"></progress>
</button>
<div *ngIf="downloadService.downloadCount > 0" class="text-ellipsis text-nowrap overflow-hidden whitespace-nowrap max-w-full">
{{ downloadService.currentDownloadText }}
</div>
<div *ngIf="downloadService.downloadCount > 0" class="flex gap-2 items-center">
<button (click)="downloadsModal.showModal()" class="btn btn-sm btn-ghost w-[30vw] flex gap-2">
<div class="flex-1">
<progress
[attr.value]="downloadService.totalDownloadingPercent"
max="100"
class="progress h-3 rounded-md"
[class.progress-error]="downloadService.anyErrorsExist"></progress>
</div>
<div>
<i class="bi bi-info-circle text-xs"></i>
</div>
</button>
</div>
<dialog #downloadsModal class="modal whitespace-normal">
<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2 w-9/12 max-w-7xl min-h-0 overflow-y-clip">