From aeeb1d42949a4bdabc25c4accc00408c334599c0 Mon Sep 17 00:00:00 2001
From: Benedict Aas <x+g@shou.io>
Date: Mon, 16 Apr 2018 20:11:19 +0100
Subject: [PATCH] feat(GUI): remove unnecessary status dots (#2202)

We remove usage of the status dots except when failed devices occur, in
which case we still display the red failed dot and quantity. We also use
singular and plural depending on the quantity of failed devices.

Change-Type: patch
---
 lib/gui/app/pages/main/styles/_main.scss      |  6 ------
 .../app/pages/main/templates/main.tpl.html    | 13 ++++++------
 lib/gui/css/main.css                          |  4 ----
 lib/shared/messages.js                        | 20 ++++++++-----------
 lib/shared/models/flash-state.js              |  9 ---------
 5 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss
index aa79fb5b..6063cc75 100644
--- a/lib/gui/app/pages/main/styles/_main.scss
+++ b/lib/gui/app/pages/main/styles/_main.scss
@@ -141,12 +141,6 @@ svg-icon > img[disabled] {
     margin-right: 5px;
   }
 
-  &.target-status-flashing > .target-status-dot {
-    background-color: $palette-theme-warning-background;
-  }
-  &.target-status-verifying > .target-status-dot {
-    background-color: $palette-theme-primary-background;
-  }
   &.target-status-succeeded > .target-status-dot {
     background-color: $palette-theme-success-background;
   }
diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html
index c7fc26c0..a8ede8cd 100644
--- a/lib/gui/app/pages/main/templates/main.tpl.html
+++ b/lib/gui/app/pages/main/templates/main.tpl.html
@@ -111,12 +111,13 @@
           <span>ETA: {{ main.state.getFlashState().eta | secondsToDate | amDateFormat:'m[m]ss[s]' }}</span>
         </p>
 
-        <div class="target-status-wrap" ng-if="main.state.isFlashing()">
-          <div class="target-status-line target-status-{{ type }}"
-            ng-repeat="(type, quantity) in main.state.getFlashQuantities()">
-              <span class="target-status-dot"></span>
-              <span class="target-status-quantity">{{ quantity }}</span>
-              <span class="target-status-message">{{ main.progressMessage[type]() }}</span>
+        <div class="target-status-wrap" ng-if="main.state.getFlashState().failed">
+          <div class="target-status-line target-status-failed">
+            <span class="target-status-dot"></span>
+            <span class="target-status-quantity">{{ main.state.getFlashState().failed }}</span>
+            <span class="target-status-message">{{
+              main.progressMessage.failed(main.state.getFlashState().failed)
+            }}</span>
           </div>
         </div>
       </div>
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index 8aa74ac0..8a54480b 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6603,10 +6603,6 @@ svg-icon > img[disabled] {
     height: 8px;
     border-radius: 50%;
     margin-right: 5px; }
-  .target-status-line.target-status-flashing > .target-status-dot {
-    background-color: #ff912f; }
-  .target-status-line.target-status-verifying > .target-status-dot {
-    background-color: #5793db; }
   .target-status-line.target-status-succeeded > .target-status-dot {
     background-color: #5fb835; }
   .target-status-line.target-status-failed > .target-status-dot {
diff --git a/lib/shared/messages.js b/lib/shared/messages.js
index aae2a6f0..700231b0 100644
--- a/lib/shared/messages.js
+++ b/lib/shared/messages.js
@@ -32,20 +32,16 @@ module.exports = {
    */
   progress: {
 
-    flashing: () => {
-      return 'Flashing device(s)'
+    succeeded: (quantity) => {
+      // eslint-disable-next-line no-magic-numbers
+      const plural = quantity > 1 ? 's' : ''
+      return `Succeeded device${plural}`
     },
 
-    verifying: () => {
-      return 'Validating device(s)'
-    },
-
-    succeeded: () => {
-      return 'Done device(s)'
-    },
-
-    failed: () => {
-      return 'Failed device(s)'
+    failed: (quantity) => {
+      // eslint-disable-next-line no-magic-numbers
+      const plural = quantity > 1 ? 's' : ''
+      return `Failed device${plural}`
     }
   },
 
diff --git a/lib/shared/models/flash-state.js b/lib/shared/models/flash-state.js
index 68c598e7..8ae20d10 100644
--- a/lib/shared/models/flash-state.js
+++ b/lib/shared/models/flash-state.js
@@ -172,15 +172,6 @@ exports.getFlashState = () => {
   return store.getState().get('flashState').toJS()
 }
 
-exports.getFlashQuantities = () => {
-  return _.pick(exports.getFlashState(), [
-    'flashing',
-    'verifying',
-    'succeeded',
-    'failed'
-  ])
-}
-
 /**
  * @summary Determine if the last flash was cancelled
  * @function