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

4
src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.html
View File

@@ -137,7 +137,7 @@
{{ version.md5.substring(0, 7) }}
<div class="tooltip tooltip-accent" data-tip="Copy full hash">
<button class="btn btn-circle btn-ghost btn-xs" (click)="copyHash(version.md5)">
<i class="bi bi-copy text-sx"></i>
<i class="bi bi-copy text-xs"></i>
</button>
</div>
</div>
@@ -147,7 +147,7 @@
{{ version.chartMd5.substring(0, 7) }}
<div class="tooltip tooltip-accent" data-tip="Copy full hash">
<button class="btn btn-circle btn-ghost btn-xs" (click)="copyHash(version.chartMd5)">
<i class="bi bi-copy text-sx"></i>
<i class="bi bi-copy text-xs"></i>
</button>
</div>
</div>

14
src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.html
View File

@@ -131,6 +131,20 @@
<i class="bi bi-three-dots text-2xl px-1 text-neutral-content"></i>
<app-chart-sidebar-menu [chartVersions]="charts![0]" (selectedVersionChanges)="selectedChart = $event" />
</div>
<dialog #libraryDirectoryErrorModal class="modal">
<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
<i class="bi bi-x-lg text-lg"></i>
</button>
</form>
<h3 class="text-lg font-bold">Chart can't be downloaded yet</h3>
<p class="py-4">Please select a chart library directory in the Settings tab before downloading.</p>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
</div>
}

7
src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.ts
View File

@@ -18,6 +18,7 @@ export class ChartSidebarComponent implements OnInit {
@HostBinding('class.contents') contents = true
@ViewChild('menu') menu: ElementRef
@ViewChild('libraryDirectoryErrorModal') libraryDirectoryErrorModal: ElementRef<HTMLDialogElement>
public shortInstrumentDisplay = shortInstrumentDisplay
public difficultyDisplay = difficultyDisplay
@@ -281,7 +282,11 @@ export class ChartSidebarComponent implements OnInit {
* Adds the selected chart to the download queue.
*/
onDownloadClicked() {
this.downloadService.addDownload(this.selectedChart!)
if (this.settingsService.libraryDirectory) {
this.downloadService.addDownload(this.selectedChart!)
} else {
this.libraryDirectoryErrorModal.nativeElement.showModal()
}
}
public showMenu() {

18
src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.html
View File

@@ -8,9 +8,21 @@
[class.border-2]="download.type === 'error'">
<div class="card-body">
<div class="card-actions justify-end">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" (click)="downloadService.cancelDownload(download.md5)">
<i class="bi bi-x-lg text-lg"></i>
</button>
@if (download.type === 'done') {
<button
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 tooltip tooltip-left tooltip-accent"
data-tip="Hide"
(click)="downloadService.cancelDownload(download.md5)">
<i class="bi bi-x-lg text-lg"></i>
</button>
} @else {
<button
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 tooltip tooltip-left tooltip-error"
data-tip="Cancel"
(click)="downloadService.cancelDownload(download.md5)">
<i class="bi bi-x-lg text-lg text-error"></i>
</button>
}
</div>
<h2 class="card-title">{{ download.chartName }}</h2>
<progress

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">