Improved downloads modal CSS

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

@@ -1,27 +1,30 @@
-<div class="ui cards">
-  <div *ngFor="let download of downloads; trackBy:trackByVersionID" class="card" [style.background-color]="getBackgroundColor(download)">
-    <div class="content">
-      <i class="inside right floated close icon" (click)="cancelDownload(download.versionID)"></i>
-      <div class="header">{{download.title}}</div>
-    </div>
-    <div class="content">
-      <button
-        *ngIf="download.type == 'error'"
-        class="ui right floated labeled icon button"
-        (click)="retryDownload(download.versionID)">
-        <i class="redo icon"></i>
-        Retry
-      </button>
-      <div class="header">{{download.header}}</div>
-      <div *ngIf="download.type != 'done'" class="description">{{download.description}}</div>
-      <div *ngIf="download.type == 'done'" class="description">
+<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>
-      </div>
-      <div appProgressBar [percent]="download.percent" class="ui progress">
+      </span>
+    </div>
+
+    <div id="downloadProgressDiv">
+      <div id="downloadProgressBar" appProgressBar [percent]="download.percent" class="ui small progress">
         <div class="bar">
           <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/app/components/browse/status-bar/downloads-modal/downloads-modal.component.scss

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

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

@@ -44,8 +44,8 @@ export class DownloadsModalComponent {
 
   getBackgroundColor(download: DownloadProgress) {
     switch (download.type) {
-      case 'error': return 'indianred'
-      default: return 'unset'
+      case 'error': return '#a63a3a'
+      default: return undefined
     }
   }
 

src/assets/themes/dark.css

@@ -298,7 +298,7 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 .ui.segments:not(.horizontal)>.segment {
-  background-color: var(--dk-04dp) !important;
+  background-color: var(--dk-04dp); /* not important; the code changes this color */
   border-top: 1px solid var(--dk-12dp) !important;
 }
 .ui.segments:not(.horizontal)>.segment:first-child {

src/electron/ipc/download/ChartDownload.ts

@@ -19,7 +19,7 @@ type EventCallback = {
 }
 type Callbacks = { [E in keyof EventCallback]: EventCallback[E] }
 
-export type DownloadError = { header: string; body: string }
+export type DownloadError = { header: string; body: string; isLink?: boolean }
 
 export class ChartDownload {
 
@@ -98,7 +98,7 @@ export class ChartDownload {
   /**
    * Updates the GUI with new information about this chart download.
    */
-  private updateGUI(header: string, description: string, type: ProgressType) {
+  private updateGUI(header: string, description: string, type: ProgressType, isLink = false) {
     if (this.wasCanceled) { return }
     if (type == 'fastUpdate') {
       if (this.dropFastUpdate) {
@@ -115,7 +115,8 @@ export class ChartDownload {
       header: header,
       description: description,
       percent: this.percent,
-      type: type
+      type: type,
+      isLink
     })
   }
 
@@ -125,7 +126,7 @@ export class ChartDownload {
   private handleError(err: DownloadError, retry: () => void) {
     this._hasFailed = true
     this.retryFn = retry
-    this.updateGUI(err.header, err.body, 'error')
+    this.updateGUI(err.header, err.body, 'error', err.isLink == true)
     this.callbacks.error()
   }
 
@@ -270,7 +271,7 @@ export class ChartDownload {
 
     transfer.on('start', (_destinationFolder) => {
       destinationFolder = _destinationFolder
-      this.updateGUI('Moving files to library folder...', destinationFolder, 'good')
+      this.updateGUI('Moving files to library folder...', destinationFolder, 'good', true)
     })
 
     transfer.on('error', this.handleError.bind(this))
@@ -278,7 +279,7 @@ export class ChartDownload {
     return new Promise<void>(resolve => {
       transfer.on('complete', () => {
         this.percent = 100
-        this.updateGUI('Download complete.', destinationFolder, 'done')
+        this.updateGUI('Download complete.', destinationFolder, 'done', true)
         resolve()
       })
     })

src/electron/ipc/download/FilesystemChecker.ts

@@ -21,7 +21,7 @@ const filesystemErrors = {
   libraryFolder: () => { return { header: 'Library folder not specified', body: 'Please go to the settings to set your library folder.' } },
   libraryAccess: (err: NodeJS.ErrnoException) => fsError(err, 'Failed to access library folder.'),
   destinationFolderExists: (destinationPath: string) => {
-    return { header: 'This chart already exists in your library folder.', body: destinationPath }
+    return { header: 'This chart already exists in your library folder.', body: destinationPath, isLink: true }
   },
   mkdirError: (err: NodeJS.ErrnoException) => fsError(err, 'Failed to create temporary folder.')
 }

src/electron/shared/interfaces/download.interface.ts

@@ -29,6 +29,7 @@ export interface DownloadProgress {
   description: string
   percent: number
   type: ProgressType
+  isLink: boolean
 }
 
 export type ProgressType = 'good' | 'error' | 'cancel' | 'done' | 'fastUpdate'