From 2556807166660978c8772de453b28250a74e1664 Mon Sep 17 00:00:00 2001
From: Benedict Aas <x+g@shou.io>
Date: Tue, 24 Oct 2017 19:43:43 +0100
Subject: [PATCH] feat(GUI): add optional progress bars to drive-selector
 drives (#1800)

We show a progress bar for any drive objects with a `progress` field
that isn't falsy, e.g. `undefined` or `0`.

Changelog-Type: minor
Changelog-Entry: Add optional progress bars to drive-selector drives.
---
 .../styles/_drive-selector.scss               | 20 +++++++++++++++++++
 .../templates/drive-selector-modal.tpl.html   |  1 +
 lib/gui/css/main.css                          | 13 ++++++++++++
 scripts/html-lint.js                          |  5 ++++-
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/lib/gui/components/drive-selector/styles/_drive-selector.scss b/lib/gui/components/drive-selector/styles/_drive-selector.scss
index 0536a519..1a1a98a0 100644
--- a/lib/gui/components/drive-selector/styles/_drive-selector.scss
+++ b/lib/gui/components/drive-selector/styles/_drive-selector.scss
@@ -71,6 +71,26 @@
     &[disabled] .list-group-item-heading {
       color: $palette-theme-light-soft-foreground;
     }
+
+    progress {
+      appearance: none;
+      width: 100%;
+      height: 2.5px;
+      border: none;
+      border-radius: 50% 50%;
+    }
+
+    progress::-webkit-progress-bar {
+      background-color: $palette-theme-default-background;
+      border: none;
+      outline: none;
+    }
+
+    progress::-webkit-progress-value {
+      border-bottom: 1px solid darken($palette-theme-primary-background, 15);
+      background-color: $palette-theme-primary-background;
+    }
+
   }
 
   .list-group-item-heading {
diff --git a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
index 63557206..ce8a1a07 100644
--- a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
@@ -32,6 +32,7 @@
             </span>
 
           </footer>
+          <progress ng-if="drive.progress" value="{{ drive.progress }}" max="100"></progress>
         </div>
         <span class="list-group-item-section tick tick--success"
           ng-show="modal.constraints.isDriveValid(drive, modal.state.getImage())"
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index d08f9b28..c26d8fee 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6403,6 +6403,19 @@ body {
     border-top: 0; }
   .modal-drive-selector-modal .list-group-item[disabled] .list-group-item-heading {
     color: #b3b3b3; }
+  .modal-drive-selector-modal .list-group-item progress {
+    appearance: none;
+    width: 100%;
+    height: 2.5px;
+    border: none;
+    border-radius: 50% 50%; }
+  .modal-drive-selector-modal .list-group-item progress::-webkit-progress-bar {
+    background-color: #ececec;
+    border: none;
+    outline: none; }
+  .modal-drive-selector-modal .list-group-item progress::-webkit-progress-value {
+    border-bottom: 1px solid #296cbd;
+    background-color: #5793db; }
 
 .modal-drive-selector-modal .list-group-item-heading {
   font-size: 13px; }
diff --git a/scripts/html-lint.js b/scripts/html-lint.js
index 351b4dcb..59839078 100644
--- a/scripts/html-lint.js
+++ b/scripts/html-lint.js
@@ -43,7 +43,10 @@ angularValidate.validate(
     doctype: 'HTML5',
     charset: 'utf-8',
     reportpath: null,
-    reportCheckstylePath: null
+    reportCheckstylePath: null,
+    relaxerror: [
+      'Expected a minus sign or a digit'
+    ]
   }
 ).then((result) => {
   _.each(result.failed, (failure) => {