refactor(gui): revert drive/image selection step order swap (#1086)

We revert the drive and image selection step order swap back from drive
selection first and image second, to image first and drive second.

See: https://github.com/resin-io/etcher/pull/1049

lib/gui/css/main.css

@@ -6497,7 +6497,7 @@ body {
 .page-main .step-selection-text {
   color: #fff; }
 
-.page-main .text-disabled {
+.page-main .text-disabled > span {
   color: #787c7f; }
 
 .page-main .relative {

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

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

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

@@ -26,7 +26,7 @@
   color: $palette-theme-dark-foreground;
 }
 
-.page-main .text-disabled {
+.page-main .text-disabled > span {
   color: $palette-theme-dark-disabled-foreground;
 }
 

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

@@ -1,6 +1,45 @@
 <div class="page-main row around-xs">
+  <div class="col-xs" ng-controller="ImageSelectionController as image">
+    <div class="box text-center relative" os-dropzone="image.selectImage($file)">
+
+      <svg-icon
+        class="center-block"
+        path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}"></svg-icon>
+
+      <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.showSelectedImageDetails()"
+              class="step-image step-name"
+              ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:20"
+              uib-tooltip="{{ main.selection.getImagePath() | basename }}"></span>
+            <span class="step-image step-size">{{ main.selection.getImageSize() | gigabyte | number:1 }} GB</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"
@@ -11,11 +50,14 @@
 
           <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()">
-            <button class="button button-primary button-brick button-no-hover">Connect a drive</button>
+            <button
+              class="button button-primary button-brick button-no-hover"
+              ng-disabled="main.shouldDriveStepBeDisabled()">Connect a drive</button>
           </div>
 
         </div>
@@ -36,48 +78,6 @@
     </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>
-
-      <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.showSelectedImageDetails()"
-              class="step-image step-name"
-              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="step-image step-size">{{ main.selection.getImageSize() | gigabyte | number:1 }} GB</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,7 +23,7 @@ describe('Browser: MainPage', function() {
       DrivesModel = _DrivesModel_;
     }));
 
-    describe('.shouldImageStepBeDisabled()', function() {
+    describe('.shouldDriveStepBeDisabled()', function() {
 
       it('should return true if there is no drive', function() {
         const controller = $controller('MainController', {
@@ -32,7 +32,7 @@ describe('Browser: MainPage', function() {
 
         SelectionStateModel.clear();
 
-        m.chai.expect(controller.shouldImageStepBeDisabled()).to.be.true;
+        m.chai.expect(controller.shouldDriveStepBeDisabled()).to.be.true;
       });
 
       it('should return false if there is a drive', function() {
@@ -40,11 +40,12 @@ describe('Browser: MainPage', function() {
           $scope: {}
         });
 
-        SelectionStateModel.hasDrive = () => {
-          return true;
-        };
+        SelectionStateModel.setImage({
+          path: 'rpi.img',
+          size: 99999
+        });
 
-        m.chai.expect(controller.shouldImageStepBeDisabled()).to.be.false;
+        m.chai.expect(controller.shouldDriveStepBeDisabled()).to.be.false;
       });
 
     });