From 78fdc5b07e3704d224f37d0f269870e2b5519e2d Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jv@jviotti.com>
Date: Wed, 11 Oct 2017 03:53:34 +0100
Subject: [PATCH] feat(GUI): add some branding to usbboot-discovered devices
 (#1764)

- Add a nice icon in the drive selector dialog when a device has been
  discovered through usbboot

- Change the name of usbboot-initialized devices to "Compute Module"

Change-Type: minor
Changelog-Entry: Add eye candy to usbboot initialized devices.
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
---
 lib/gui/assets/device-types/raspberrypi.svg     | 17 +++++++++++++++++
 .../drive-selector/styles/_drive-selector.scss  | 16 ++++++++++------
 .../templates/drive-selector-modal.tpl.html     |  9 +++++++--
 lib/gui/css/main.css                            | 10 ++++++----
 lib/shared/sdk/standard/index.js                |  9 +++++++++
 5 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 lib/gui/assets/device-types/raspberrypi.svg

diff --git a/lib/gui/assets/device-types/raspberrypi.svg b/lib/gui/assets/device-types/raspberrypi.svg
new file mode 100644
index 00000000..27192bef
--- /dev/null
+++ b/lib/gui/assets/device-types/raspberrypi.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="570" height="720">
+ <path d="m 158.375,1.65625 c -3.6193,0.1123192 -7.51715,1.4493266 -11.9375,4.9375 C 135.61054,2.4174496 125.11041,0.9665612 115.71875,9.46875 101.22489,7.5879922 96.508461,11.469494 92.9375,16 89.754953,15.934135 69.118652,12.72793 59.65625,26.84375 35.874602,24.030329 28.359472,40.831625 36.875,56.5 c -4.856911,7.518955 -9.889503,14.947226 1.46875,29.28125 -4.018006,7.983514 -1.527431,16.64403 7.9375,27.125 -2.497857,11.2226 2.412077,19.14086 11.21875,25.3125 -1.64709,15.35756 14.083505,24.28743 18.78125,27.46875 1.803677,8.94868 5.56291,17.3927 23.53125,22.0625 2.96323,13.3361 13.76206,15.63906 24.21875,18.4375 -34.561929,20.08954 -64.20067,46.52266 -64,111.375 l -5.0625,9.03125 C 15.337882,350.69604 -20.316547,428.16001 35.4375,491.125 c 3.641871,19.70838 9.749589,33.86396 15.1875,49.53125 8.133834,63.13058 61.21763,92.69161 75.21875,96.1875 20.51653,15.62812 42.36818,30.45672 71.9375,40.84375 27.87515,28.74946 58.07388,39.7064 88.4375,39.6875 0.44515,-2.8e-4 0.89853,0.005 1.34375,0 30.36363,0.0189 60.56235,-10.93804 88.4375,-39.6875 29.56932,-10.38703 51.42097,-25.21563 71.9375,-40.84375 14.00112,-3.49589 67.08492,-33.05692 75.21875,-96.1875 5.43791,-15.66729 11.54562,-29.82287 15.1875,-49.53125 55.75404,-62.96499 20.09961,-140.42896 -19.53125,-164.53125 L 513.75,317.5625 c 0.20067,-64.85234 -29.43807,-91.28546 -64,-111.375 10.45669,-2.79844 21.25552,-5.1014 24.21875,-18.4375 17.96834,-4.6698 21.72758,-13.11382 23.53125,-22.0625 4.69775,-3.18132 20.42834,-12.11119 18.78125,-27.46875 8.80668,-6.17164 13.71661,-14.0899 11.21875,-25.3125 9.46494,-10.48097 11.9555,-19.141487 7.9375,-27.125 C 546.79575,71.447226 541.76316,64.018955 536.90625,56.5 545.42178,40.831625 537.90665,24.030329 514.125,26.84375 504.6626,12.72793 484.0263,15.934135 480.84375,16 477.27279,11.469494 472.55636,7.587992 458.0625,9.46875 448.67084,0.96656132 438.17071,2.41745 427.34375,6.59375 414.48455,-3.5536631 405.97149,4.580454 396.25,7.65625 380.67615,2.568472 377.11698,9.5371578 369.46875,12.375 352.4935,8.7869238 347.33315,16.598532 339.1875,24.84375 l -9.46875,-0.1875 c -25.61054,15.093115 -38.33378,45.825501 -42.84375,61.625 -4.51206,-15.801979 -17.20647,-46.534542 -42.8125,-61.625 l -9.46875,0.1875 C 226.4481,16.598532 221.28775,8.7869235 204.3125,12.375 196.66427,9.5371583 193.1051,2.5684729 177.53125,7.65625 c -6.37973,-2.0184911 -12.24667,-6.2144276 -19.15625,-6 z" style="fill:#000000" />
+ <path d="m 107.39184,68.055583 c 67.94767,35.031357 107.44689,63.368967 129.08717,87.504467 -11.08235,44.41759 -68.89638,46.44464 -90.03559,45.19858 4.32842,-2.01474 7.93988,-4.42778 9.22051,-8.13574 -5.30449,-3.76981 -24.11289,-0.39719 -37.24363,-7.77416 5.04407,-1.04499 7.40348,-2.06302 9.76289,-5.78542 -12.40571,-3.9567 -25.76862,-7.36642 -33.627746,-13.92116 4.241253,0.0524 8.201156,0.9488 13.740366,-2.89271 -11.111694,-5.98819 -22.969108,-10.73351 -32.18139,-19.88738 5.745213,-0.14063 11.939452,-0.0568 13.740371,-2.16953 -10.17044,-6.30068 -18.751242,-13.30787 -25.853592,-20.97215 8.039979,0.97052 11.435284,0.13478 13.378782,-1.26556 -7.687795,-7.87419 -17.417559,-14.52319 -22.056911,-24.22644 5.969606,2.057484 11.431249,2.84506 15.36752,-0.180795 -2.612365,-5.893453 -13.805413,-9.369618 -20.248967,-23.141676 6.284359,0.609377 12.949606,1.371108 14.282753,0 C 61.802068,58.517346 56.796919,51.835885 51.887978,44.913906 65.338021,44.714177 85.715734,44.966253 84.792549,43.82914 l -8.31654,-8.497335 c 13.137617,-3.537241 26.580651,0.568164 36.339661,3.615887 4.38186,-3.457681 -0.0776,-7.82998 -5.42383,-12.294015 11.16496,1.490646 21.25382,4.057389 30.37345,7.593362 4.87238,-4.399329 -3.16389,-8.798658 -7.05098,-13.197987 17.24936,3.272568 24.55716,7.87068 31.81981,12.47481 5.26935,-5.050799 0.30166,-9.343299 -3.2543,-13.740371 13.00566,4.817048 19.70478,11.035551 26.75756,17.175463 2.39119,-3.227053 6.07494,-5.592408 1.62715,-13.378781 9.23416,5.322725 16.18926,11.59506 21.33374,18.621817 5.71336,-3.637941 3.40387,-8.613023 3.43509,-13.197987 9.59665,7.806516 15.68687,16.11395 23.14168,24.226443 1.50169,-1.093437 2.81661,-4.80171 3.97747,-10.666867 22.89539,22.211815 55.24591,78.158241 8.31654,100.340861 C 207.95028,109.95728 160.25292,86.016909 107.39184,68.055583 z" style="fill:#75a928" />
+ <path d="M 467.92487,68.055583 C 399.9772,103.08694 360.47798,131.42455 338.8377,155.56005 c 11.08235,44.41759 68.89638,46.44464 90.03559,45.19858 -4.32842,-2.01474 -7.93988,-4.42778 -9.22051,-8.13574 5.30449,-3.76981 24.11289,-0.39719 37.24363,-7.77416 -5.04407,-1.04499 -7.40348,-2.06302 -9.76289,-5.78542 12.40571,-3.9567 25.76862,-7.36642 33.62775,-13.92116 -4.24126,0.0524 -8.20116,0.9488 -13.74037,-2.89271 11.11169,-5.98819 22.96911,-10.73351 32.18139,-19.88738 -5.74521,-0.14063 -11.93945,-0.0568 -13.74037,-2.16953 10.17044,-6.30068 18.75124,-13.30787 25.85359,-20.97215 -8.03998,0.97052 -11.43528,0.13478 -13.37878,-1.26556 7.68779,-7.87419 17.41756,-14.52319 22.05691,-24.22644 -5.96961,2.057484 -11.43125,2.84506 -15.36752,-0.180795 2.61237,-5.893453 13.80541,-9.369618 20.24897,-23.141676 -6.28436,0.609377 -12.94961,1.371108 -14.28276,0 2.92231,-11.888563 7.92746,-18.570024 12.8364,-25.492003 -13.45004,-0.199729 -33.82775,0.05235 -32.90457,-1.084766 l 8.31654,-8.497335 c -13.13762,-3.537241 -26.58065,0.568164 -36.33966,3.615887 -4.38186,-3.457681 0.0776,-7.82998 5.42383,-12.294015 -11.16496,1.490646 -21.25382,4.057389 -30.37345,7.593362 -4.87238,-4.399329 3.16389,-8.798658 7.05098,-13.197987 -17.24936,3.272568 -24.55716,7.87068 -31.81981,12.47481 -5.26935,-5.050799 -0.30166,-9.343299 3.2543,-13.740371 -13.00566,4.817048 -19.70478,11.035551 -26.75756,17.175463 -2.39119,-3.227053 -6.07494,-5.592408 -1.62715,-13.378781 -9.23416,5.322725 -16.18926,11.59506 -21.33374,18.621817 -5.71336,-3.637941 -3.40387,-8.613023 -3.43509,-13.197987 -9.59665,7.806516 -15.68687,16.11395 -23.14168,24.226443 -1.50169,-1.093437 -2.81661,-4.80171 -3.97747,-10.666867 -22.89539,22.211815 -55.24591,78.158241 -8.31654,100.340861 39.91877,-32.94716 87.61613,-56.887531 140.47721,-74.848857 z" style="fill:#75a928" />
+ <path d="m 365.2046,521.84937 a 71.956154,66.532318 0 1 1 -143.91231,0 71.956154,66.532318 0 1 1 143.91231,0 z" transform="matrix(1.131107,0,0,1.1280497,-43.139135,-68.310983)" style="fill:#bc1142" />
+ <path d="m 262.84091,276.64774 a 61.875,28.125 0 1 1 -123.75,0 61.875,28.125 0 1 1 123.75,0 z" transform="matrix(0.76741684,-1.1613112,2.171115,1.4224368,-560.88858,217.68859)" style="fill:#bc1142" />
+ <path d="m 262.84091,276.64774 a 61.875,28.125 0 1 1 -123.75,0 61.875,28.125 0 1 1 123.75,0 z" transform="matrix(-0.76741684,-1.1613112,-2.171115,1.4224368,1134.8288,213.68859)" style="fill:#bc1142" />
+ <path d="M 72.910253,342.0878 C 109.32447,332.33088 85.201845,492.72431 55.576871,479.56357 22.990103,453.35089 12.493801,376.58814 72.910253,342.0878 z" style="fill:#bc1142" />
+ <path d="m 493.67828,340.0878 c -36.41422,-9.75692 -12.2916,150.63651 17.33338,137.47577 32.58677,-26.21268 43.08307,-102.97543 -17.33338,-137.47577 z" style="fill:#bc1142" />
+ <path d="m 369.97158,220.6534 c 62.83486,-10.61013 115.11594,26.72229 113.01138,94.85796 -2.06693,26.12112 -136.15872,-90.96907 -113.01138,-94.85796 z" style="fill:#bc1142" />
+ <path d="M 196.35975,218.6534 C 133.52489,208.04327 81.24381,245.37569 83.34837,313.51136 85.4153,339.63248 219.50709,222.54229 196.35975,218.6534 z" style="fill:#bc1142" />
+ <path d="m 286.61932,202.75568 c -37.50259,-0.97548 -73.49548,27.83418 -73.58158,44.54443 -0.10462,20.30426 29.6512,41.09266 73.83726,41.62035 45.12305,0.32321 73.91561,-16.64049 74.0611,-37.59409 0.16484,-23.73996 -41.03879,-48.93744 -74.31678,-48.57069 z" style="fill:#bc1142" />
+ <path d="m 288.90937,619.11675 c 32.69744,-1.42711 76.57083,10.53196 76.6568,26.39598 0.5427,15.4052 -39.78969,50.21055 -78.82634,49.53765 -40.42729,1.74391 -80.06908,-33.11559 -79.54951,-45.19859 -0.60506,-17.71593 49.226,-31.54796 81.71905,-30.73504 z" style="fill:#bc1142" />
+ <path d="m 168.13874,525.10369 c 23.2791,28.04573 33.89066,77.31899 14.46355,91.84353 -18.37917,11.08784 -63.01228,6.52162 -94.736237,-39.05157 -21.395052,-38.24168 -18.637584,-77.15663 -3.615887,-88.58924 22.464424,-13.68429 57.173424,4.79902 83.888574,35.79728 z" style="fill:#bc1142" />
+ <path d="m 405.0209,516.21177 c -25.18682,29.50165 -39.21227,83.30951 -20.83785,100.6428 17.56828,13.46361 64.7292,11.58162 99.56566,-36.75574 25.29599,-32.46471 16.82013,-86.68225 2.37077,-101.07511 -21.46408,-16.60213 -52.27691,4.64489 -81.09858,37.18805 z" style="fill:#bc1142" />
+</svg>
diff --git a/lib/gui/components/drive-selector/styles/_drive-selector.scss b/lib/gui/components/drive-selector/styles/_drive-selector.scss
index 56700037..0536a519 100644
--- a/lib/gui/components/drive-selector/styles/_drive-selector.scss
+++ b/lib/gui/components/drive-selector/styles/_drive-selector.scss
@@ -15,7 +15,7 @@
  */
 
 .modal-drive-selector-modal .modal-content {
-  width: 300px;
+  width: 315px;
   height: 320px;
 }
 
@@ -30,7 +30,7 @@
 
 .modal-drive-selector-modal {
 
-  .list-group-item-footer {
+  .list-group-item-footer:has(span) {
     margin-top: 8px;
   }
 
@@ -52,12 +52,16 @@
     border-color: darken($palette-theme-light-background, 7%);
     padding: 12px 0;
 
-    > .tick {
-      font-size: 11px;
+    .list-group-item-section-expanded {
+      flex-grow: 1;
     }
 
-    :first-child {
-      flex-grow: 1;
+    .list-group-item-section + .list-group-item-section {
+      margin-left: 10px;
+    }
+
+    > .tick {
+      font-size: 11px;
     }
 
     &:first-child {
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 5a741966..137d32e1 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
@@ -9,7 +9,12 @@
       ng-disabled="!modal.constraints.isDriveValid(drive, modal.state.getImage())"
       ng-dblclick="modal.selectDriveAndClose(drive)"
       ng-click="modal.toggleDrive(drive)">
-        <div>
+        <img class="list-group-item-section" alt="Drive device type logo"
+          ng-if="drive.icon"
+          ng-src="./assets/device-types/{{drive.icon}}.svg"
+          width="25"
+          height="30">
+        <div class="list-group-item-section list-group-item-section-expanded">
           <h4 class="list-group-item-heading">{{ drive.description }} -
             <span class="word-keep">{{ drive.size | closestUnit }}</span>
           </h4>
@@ -27,7 +32,7 @@
 
           </footer>
         </div>
-        <span class="tick tick--success"
+        <span class="list-group-item-section tick tick--success"
           ng-show="modal.constraints.isDriveValid(drive, modal.state.getImage())"
           ng-disabled="!modal.state.isCurrentDrive(drive.device)"></span>
     </li>
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index a4a51322..1a33c79d 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6365,7 +6365,7 @@ body {
  * limitations under the License.
  */
 .modal-drive-selector-modal .modal-content {
-  width: 300px;
+  width: 315px;
   height: 320px; }
 
 .modal-drive-selector-modal .modal-body {
@@ -6375,7 +6375,7 @@ body {
 .modal-drive-selector-modal .list-group-item[disabled] {
   cursor: not-allowed; }
 
-.modal-drive-selector-modal .list-group-item-footer {
+.modal-drive-selector-modal .list-group-item-footer:has(span) {
   margin-top: 8px; }
 
 .modal-drive-selector-modal .list-group-item-heading,
@@ -6393,10 +6393,12 @@ body {
   border-radius: 0;
   border-color: #ededed;
   padding: 12px 0; }
+  .modal-drive-selector-modal .list-group-item .list-group-item-section-expanded {
+    flex-grow: 1; }
+  .modal-drive-selector-modal .list-group-item .list-group-item-section + .list-group-item-section {
+    margin-left: 10px; }
   .modal-drive-selector-modal .list-group-item > .tick {
     font-size: 11px; }
-  .modal-drive-selector-modal .list-group-item :first-child {
-    flex-grow: 1; }
   .modal-drive-selector-modal .list-group-item:first-child {
     border-top: 0; }
   .modal-drive-selector-modal .list-group-item[disabled] .list-group-item-heading {
diff --git a/lib/shared/sdk/standard/index.js b/lib/shared/sdk/standard/index.js
index bcc5be6e..ad9f9b13 100644
--- a/lib/shared/sdk/standard/index.js
+++ b/lib/shared/sdk/standard/index.js
@@ -51,6 +51,15 @@ exports.scan = (options = {}) => {
   }).map((drive) => {
     drive.pending = false
     drive.adaptor = exports.name
+
+    // TODO: Find a better way to detect that a certain
+    // block device is a compute module initialized
+    // through usbboot.
+    if (drive.description === '0001') {
+      drive.description = 'Compute Module'
+      drive.icon = 'raspberrypi'
+    }
+
     return drive
   })
 }