feat(GUI): swap drive and image selection step order (#1049)

Change the first step to be drive selection and the second step to be
image selection, instead of vice versa as it previously was.

Changelog-Entry: Swap the order of the drive and image selection steps.

lib/gui/assets/image.svg

@@ -1,16 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 41 41" enable-background="new 0 0 41 41" xml:space="preserve">
+	 viewBox="0 0 41 41" style="enable-background:new 0 0 41 41;" xml:space="preserve">
 <g>
-	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M20.5,0C31.822,0,41,9.178,41,20.5S31.822,41,20.5,41
+	<path fill="#FFFFFF" d="M20.5,0C9.2,0,0,9.2,0,20.5S9.2,41,20.5,41S41,31.8,41,20.5S31.8,0,20.5,0z M20.5,29c-4.7,0-8.5-3.8-8.5-8.5
-		S0,31.822,0,20.5S9.178,0,20.5,0z"/>
+		c0-4.7,3.8-8.5,8.5-8.5c4.7,0,8.5,3.8,8.5,8.5C29,25.2,25.2,29,20.5,29z"/>
-	<path fill-rule="evenodd" clip-rule="evenodd" fill="#555760" d="M20.5,12c4.694,0,8.5,3.806,8.5,8.5S25.194,29,20.5,29
+	<path fill="#FFFFFF" d="M20.5,12.6c-4.3,0-7.9,3.5-7.9,7.9s3.5,7.9,7.9,7.9s7.9-3.5,7.9-7.9S24.8,12.6,20.5,12.6z M20.5,25
-		S12,25.194,12,20.5S15.806,12,20.5,12z"/>
+		C18,25,16,23,16,20.5s2-4.5,4.5-4.5s4.5,2,4.5,4.5S23,25,20.5,25z"/>
-	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M20.5,12.625c4.349,0,7.875,3.526,7.875,7.875
-		s-3.526,7.875-7.875,7.875s-7.875-3.526-7.875-7.875S16.151,12.625,20.5,12.625z"/>
-	<path fill-rule="evenodd" clip-rule="evenodd" fill="#555760" d="M20.5,16c2.485,0,4.5,2.015,4.5,4.5S22.985,25,20.5,25
-		S16,22.985,16,20.5S18.015,16,20.5,16z"/>
 </g>
 </svg>

lib/gui/pages/main/controllers/main.js

@@ -34,19 +34,19 @@ module.exports = function(
   this.tooltipModal = TooltipModalService;
 
   /**
-   * @summary Determine if the drive step should be disabled
+   * @summary Determine if the image step should be disabled
    * @function
    * @public
    *
-   * @returns {Boolean} whether the drive step should be disabled
+   * @returns {Boolean} whether the image step should be disabled
    *
    * @example
-   * if (MainController.shouldDriveStepBeDisabled()) {
+   * if (MainController.shouldImageStepBeDisabled()) {
-   *   console.log('The drive step should be disabled');
+   *   console.log('The image step should be disabled');
    * }
    */
-  this.shouldDriveStepBeDisabled = () => {
+  this.shouldImageStepBeDisabled = () => {
-    return !SelectionStateModel.hasImage();
+    return !SelectionStateModel.hasDrive();
   };
 
   /**
@@ -62,7 +62,7 @@ module.exports = function(
    * }
    */
   this.shouldFlashStepBeDisabled = () => {
-    return this.shouldDriveStepBeDisabled() || !SelectionStateModel.hasDrive();
+    return !SelectionStateModel.hasImage() || this.shouldImageStepBeDisabled();
   };
 
 };

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

@@ -1,63 +1,23 @@
 <div class="page-main row around-xs">
-  <div class="col-xs" ng-controller="ImageSelectionController as image">
-    <div class="box text-center" os-dropzone="image.selectImage($file)">
-      <svg-icon class="center-block" path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}"></svg-icon>
-      <span class="icon-caption">SELECT IMAGE</span>
-      <span class="badge space-top-medium">1</span>
-
-      <div class="space-vertical-large">
-        <div ng-hide="main.selection.hasImage()">
-          <button class="button button-primary button-brick" ng-click="image.openImageSelector()">Select image</button>
-
-          <p class="step-footer">
-            {{ ::image.mainSupportedExtensions.join(', ') }}, and
-            <span class="step-footer-underline"
-              uib-tooltip="{{ image.extraSupportedExtensions.join(', ') }}">others</span>
-          </p>
-        </div>
-        <div ng-if="main.selection.hasImage()">
-          <div class="step-selection-text">
-            <span ng-click="main.external.open(main.selection.getImageUrl())"
-              ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:20"
-              uib-tooltip="{{ main.selection.getImagePath() | basename }}"></span>
-
-            <span class="glyphicon glyphicon-info-sign" ng-click="main.tooltipModal.show({
-              title: 'IMAGE FILE NAME',
-              message: main.selection.getImagePath()
-            })"></span>
-          </div>
-
-          <button class="button button-link step-footer"
-            ng-click="image.reselectImage()"
-            ng-hide="main.state.isFlashing()">Change</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <div class="col-xs" ng-controller="DriveSelectionController as drive">
     <div class="box text-center relative">
-      <div class="step-border-left" ng-disabled="main.shouldDriveStepBeDisabled()"></div>
-      <div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()"></div>
 
       <svg-icon class="center-block"
         path="../../../assets/drive.svg"
         ng-disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
-      <span class="icon-caption"
+      <span class="icon-caption">SELECT DRIVE</span>
-        ng-disabled="main.shouldDriveStepBeDisabled()">SELECT DRIVE</span>
 
-      <span class="badge space-top-medium" ng-disabled="main.shouldDriveStepBeDisabled()">2</span>
+      <span class="badge space-top-medium">1</span>
 
       <div class="space-vertical-large">
         <div ng-hide="main.selection.hasDrive()">
 
-          <div ng-show="main.drives.hasAvailableDrives() || main.shouldDriveStepBeDisabled()">
+          <div ng-show="main.drives.hasAvailableDrives()">
             <button class="button button-primary button-brick"
-              ng-disabled="main.shouldDriveStepBeDisabled()"
               ng-click="drive.openDriveSelector()">Select drive</button>
           </div>
 
-          <div ng-hide="main.drives.hasAvailableDrives() || main.shouldDriveStepBeDisabled()">
+          <div ng-hide="main.drives.hasAvailableDrives()">
             <button class="button button-primary button-brick button-no-hover">Connect a drive</button>
           </div>
 
@@ -76,6 +36,58 @@
     </div>
   </div>
 
+  <div class="col-xs" ng-controller="ImageSelectionController as image">
+    <div class="box text-center relative" os-dropzone="image.selectImage($file)">
+      <div class="step-border-left" ng-disabled="main.shouldImageStepBeDisabled()"></div>
+      <div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()"></div>
+
+      <svg-icon
+        class="center-block"
+        path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}"
+        ng-disabled="main.shouldImageStepBeDisabled()"></svg-icon>
+      <span
+        class="icon-caption"
+        ng-disabled="main.shouldImageStepBeDisabled()">SELECT IMAGE</span>
+      <span
+        class="badge space-top-medium"
+        ng-disabled="main.shouldImageStepBeDisabled()">2</span>
+
+      <div class="space-vertical-large">
+        <div ng-hide="main.selection.hasImage()">
+          <button
+            class="button button-primary button-brick"
+            ng-click="image.openImageSelector()"
+            ng-disabled="main.shouldImageStepBeDisabled()">Select image</button>
+
+          <p class="step-footer">
+            {{ ::image.mainSupportedExtensions.join(', ') }}, and
+            <span class="step-footer-underline"
+              uib-tooltip="{{ image.extraSupportedExtensions.join(', ') }}">others</span>
+          </p>
+        </div>
+        <div ng-if="main.selection.hasImage()">
+          <div class="step-selection-text">
+            <span ng-click="main.external.open(main.selection.getImageUrl())"
+              ng-class="{ 'text-disabled': main.shouldImageStepBeDisabled() }"
+              ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:20"
+              uib-tooltip="{{ main.selection.getImagePath() | basename }}"></span>
+
+            <span class="glyphicon glyphicon-info-sign"
+              ng-class="{ 'text-disabled': main.shouldImageStepBeDisabled() }"
+              ng-click="main.tooltipModal.show({
+                title: 'IMAGE FILE NAME',
+                message: main.selection.getImagePath()
+              })"></span>
+          </div>
+
+          <button class="button button-link step-footer"
+            ng-click="image.reselectImage()"
+            ng-hide="main.state.isFlashing()">Change</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="col-xs" ng-controller="FlashController as flash">
     <div class="box text-center">
       <svg-icon class="center-block"

tests/gui/pages/main.spec.js

@@ -23,29 +23,28 @@ describe('Browser: MainPage', function() {
       DrivesModel = _DrivesModel_;
     }));
 
-    describe('.shouldDriveStepBeDisabled()', function() {
+    describe('.shouldImageStepBeDisabled()', function() {
 
-      it('should return true if there is no image', function() {
+      it('should return true if there is no drive', function() {
         const controller = $controller('MainController', {
           $scope: {}
         });
 
         SelectionStateModel.clear();
 
-        m.chai.expect(controller.shouldDriveStepBeDisabled()).to.be.true;
+        m.chai.expect(controller.shouldImageStepBeDisabled()).to.be.true;
       });
 
-      it('should return false if there is an image', function() {
+      it('should return false if there is a drive', function() {
         const controller = $controller('MainController', {
           $scope: {}
         });
 
-        SelectionStateModel.setImage({
+        SelectionStateModel.hasDrive = () => {
-          path: 'rpi.img',
+          return true;
-          size: 99999
+        };
-        });
 
-        m.chai.expect(controller.shouldDriveStepBeDisabled()).to.be.false;
+        m.chai.expect(controller.shouldImageStepBeDisabled()).to.be.false;
       });
 
     });