feat(GUI): show selected drives below drive step (#2309)

We add a list of selected drives below the drive selection step, able to
accommodate four lines of drives before scrolling occurs.

Closes: https://github.com/resin-io/etcher/issues/2263
Change-Type: patch
Changelog-Entry: Show selected drives below drive selection step.

lib/gui/app/pages/main/controllers/drive-selection.js

@@ -17,10 +17,12 @@
 'use strict'
 
 const _ = require('lodash')
+const angular = require('angular')
 const settings = require('../../../models/settings')
 const selectionState = require('../../../../../shared/models/selection-state')
 const analytics = require('../../../modules/analytics')
 const exceptionReporter = require('../../../modules/exception-reporter')
+const utils = require('../../../../../shared/utils')
 
 module.exports = function (DriveSelectorService) {
   /**
@@ -97,4 +99,14 @@ module.exports = function (DriveSelectorService) {
     this.openDriveSelector()
     analytics.logEvent('Reselect drive')
   }
+
+  /**
+   * @summary Get memoized selected drives
+   * @function
+   * @public
+   *
+   * @example
+   * DriveSelectionController.getMemoizedSelectedDrives()
+   */
+  this.getMemoizedSelectedDrives = utils.memoize(selectionState.getSelectedDrives, angular.equals)
 }

lib/gui/app/pages/main/styles/_main.scss

@@ -107,6 +107,17 @@ svg-icon > img[disabled] {
   margin-top: 1px;
 }
 
+.page-main .step-drive.step-list {
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $palette-theme-dark-disabled-foreground;
+    border-radius: 4px;
+  }
+}
+
 .page-main .glyphicon {
   vertical-align: text-top;
 }
@@ -123,6 +134,13 @@ svg-icon > img[disabled] {
   color: $palette-theme-dark-disabled-foreground;
 }
 
+.page-main .step-list {
+  height: 80px;
+  margin: 15px;
+  overflow-y: auto;
+  color: $palette-theme-dark-disabled-foreground;
+}
+
 .target-status-wrap {
   display: flex;
   position: absolute;

lib/gui/app/pages/main/templates/main.tpl.html

@@ -84,6 +84,13 @@
             ng-click="drive.reselectDrive()"
             ng-hide="main.state.isFlashing()">Change</button>
         </div>
+        <div ng-if="main.selection.getSelectedDevices().length > 1"
+          class="step-drive step-list">
+          <div ng-repeat="driveObj in drive.getMemoizedSelectedDrives()"
+            uib-tooltip="{{ driveObj.description }} ({{ driveObj.displayName }})">
+            {{ driveObj.description | middleEllipsis:14 }}
+          </div>
+        </div>
       </div>
     </div>
   </div>

lib/gui/css/main.css

@@ -6575,6 +6575,13 @@ svg-icon > img[disabled] {
 .page-main .step-drive.glyphicon, .page-main .step-drive.tick {
   margin-top: 1px; }
 
+.page-main .step-drive.step-list::-webkit-scrollbar {
+  width: 4px; }
+
+.page-main .step-drive.step-list::-webkit-scrollbar-thumb {
+  background-color: #787c7f;
+  border-radius: 4px; }
+
 .page-main .glyphicon, .page-main .tick {
   vertical-align: text-top; }
 
@@ -6588,6 +6595,12 @@ svg-icon > img[disabled] {
   margin-right: 4.5px;
   color: #787c7f; }
 
+.page-main .step-list {
+  height: 80px;
+  margin: 15px;
+  overflow-y: auto;
+  color: #787c7f; }
+
 .target-status-wrap {
   display: flex;
   position: absolute;