Restructure

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

@@ -0,0 +1,28 @@
+<div *ngIf="downloads.length > 0" class="ui segments">
+	<div *ngFor="let download of downloads; trackBy: trackByVersionID" class="ui segment" [style.background-color]="getBackgroundColor(download)">
+		<h3 id="downloadTitle">
+			<span style="flex-grow: 1">{{ download.title }}</span>
+			<i class="inside right close icon" (click)="cancelDownload(download.versionID)"></i>
+		</h3>
+
+		<div id="downloadText">
+			<span style="flex-grow: 1">{{ download.header }}</span>
+			<span *ngIf="!download.isLink" class="description">{{ download.description }}</span>
+			<span *ngIf="download.isLink" class="description">
+				<a (click)="openFolder(download.description)">{{ download.description }}</a>
+			</span>
+		</div>
+
+		<div id="downloadProgressDiv">
+			<div id="downloadProgressBar" appProgressBar [percent]="download.percent" class="ui small progress">
+				<div class="bar" [style.height]="download.type === 'error' ? '-webkit-fill-available' : undefined">
+					<div class="progress"></div>
+				</div>
+			</div>
+			<button *ngIf="download.type === 'error'" class="ui right attached labeled compact icon button" (click)="retryDownload(download.versionID)">
+				<i class="redo icon"></i>
+				Retry
+			</button>
+		</div>
+	</div>
+</div>

src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.scss

@@ -0,0 +1,26 @@
+#downloadTitle,
+#downloadText {
+  display: flex;
+  margin-bottom: 0.3rem;
+}
+
+#downloadText {
+  flex-wrap: wrap;
+}
+
+#downloadProgressDiv {
+  display: flex;
+}
+
+#downloadProgressBar {
+  flex-grow: 1;
+  margin: 0;
+  .bar {
+    transform: translateY(-50%);
+    top: 50%;
+  }
+}
+
+i.close.icon, a {
+  cursor: pointer;
+}

src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef, Component } from '@angular/core'
+
+import { DownloadProgress } from '../../../../../electron/shared/interfaces/download.interface'
+import { DownloadService } from '../../../../core/services/download.service'
+import { ElectronService } from '../../../../core/services/electron.service'
+
+@Component({
+	selector: 'app-downloads-modal',
+	templateUrl: './downloads-modal.component.html',
+	styleUrls: ['./downloads-modal.component.scss'],
+})
+export class DownloadsModalComponent {
+
+	downloads: DownloadProgress[] = []
+
+	constructor(private electronService: ElectronService, private downloadService: DownloadService, ref: ChangeDetectorRef) {
+		electronService.receiveIPC('queue-updated', order => {
+			this.downloads.sort((a, b) => order.indexOf(a.versionID) - order.indexOf(b.versionID))
+		})
+
+		downloadService.onDownloadUpdated(download => {
+			const index = this.downloads.findIndex(thisDownload => thisDownload.versionID == download.versionID)
+			if (download.type == 'cancel') {
+				this.downloads = this.downloads.filter(thisDownload => thisDownload.versionID != download.versionID)
+			} else if (index == -1) {
+				this.downloads.push(download)
+			} else {
+				this.downloads[index] = download
+			}
+			ref.detectChanges()
+		})
+	}
+
+	trackByVersionID(_index: number, item: DownloadProgress) {
+		return item.versionID
+	}
+
+	cancelDownload(versionID: number) {
+		this.downloadService.cancelDownload(versionID)
+	}
+
+	retryDownload(versionID: number) {
+		this.downloadService.retryDownload(versionID)
+	}
+
+	getBackgroundColor(download: DownloadProgress) {
+		switch (download.type) {
+			case 'error': return '#a63a3a'
+			default: return undefined
+		}
+	}
+
+	openFolder(filepath: string) {
+		this.electronService.showFolder(filepath)
+	}
+}