From 5baf8e5407e1b7c6f978a272052cfb89e9a008a9 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Mon, 18 Apr 2016 13:16:17 -0400
Subject: [PATCH] Improve UX when closing the drive selector modal (#339)

The current "Close" button makes it confusing to the user to know if
he's accepting his changes, or just discarding them.

The "Close" button in the top right corner was replaced with a standard
cross icon, and there is a new "Continue" block button fixed in the
bottom of the modal.

Fixes: https://github.com/resin-io/etcher/issues/294
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
---
 build/css/main.css                            | 15 ++++++++++-
 .../services/drive-selector-state.js          | 14 ++++++++++
 .../templates/drive-selector-modal.tpl.html   |  8 +++++-
 lib/scss/components/_modal.scss               | 18 ++++++++++++-
 .../browser/components/drive-selector.spec.js | 27 +++++++++++++++++++
 5 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/build/css/main.css b/build/css/main.css
index f9fa0c2e..e919b26f 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -6231,6 +6231,10 @@ button.btn:focus, button.progress-button:focus {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.modal-content {
+  display: flex;
+  flex-direction: column; }
+
 .modal-header {
   display: flex;
   align-items: baseline;
@@ -6243,9 +6247,11 @@ button.btn:focus, button.progress-button:focus {
 
 .modal-header {
   color: #b3b3b3;
-  padding: 11px 10px 9px 20px; }
+  padding: 11px 20px;
+  flex-grow: 0; }
 
 .modal-body {
+  flex-grow: 1;
   color: #666;
   padding: 0 20px;
   max-height: 250px;
@@ -6282,6 +6288,13 @@ button.btn:focus, button.progress-button:focus {
 .modal-open {
   padding-right: 0 !important; }
 
+.modal-footer {
+  flex-grow: 0;
+  border: 0; }
+
+.modal .btn-primary[disabled], .modal [disabled].progress-button--primary {
+  background-color: #d5d5d5; }
+
 /*
  * Copyright 2016 Resin.io
  *
diff --git a/lib/browser/components/drive-selector/services/drive-selector-state.js b/lib/browser/components/drive-selector/services/drive-selector-state.js
index e3759af9..30c95827 100644
--- a/lib/browser/components/drive-selector/services/drive-selector-state.js
+++ b/lib/browser/components/drive-selector/services/drive-selector-state.js
@@ -72,4 +72,18 @@ module.exports = function(SelectionStateModel) {
    */
   this.getSelectedDrive = SelectionStateModel.getDrive;
 
+  /**
+   * @summary Has a selected drive
+   * @function
+   * @public
+   *
+   * @returns {Boolean} whether there is a selected drive
+   *
+   * @example
+   * if (DriveSelectorStateService.hasSelectedDrive()) {
+   *   console.log('There is a selected drive');
+   * }
+   */
+  this.hasSelectedDrive = SelectionStateModel.hasDrive;
+
 };
diff --git a/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html
index eaf2b185..a1ea310d 100644
--- a/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/lib/browser/components/drive-selector/templates/drive-selector-modal.tpl.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
   <h4 class="modal-title">SELECT A DRIVE</h4>
-  <button class="btn btn-default btn-sm" ng-click="modal.closeModal()">CLOSE</button>
+  <button class="close" ng-click="modal.closeModal()">&times;</button>
 </div>
 
 <div class="modal-body">
@@ -15,3 +15,9 @@
     </li>
   </ul>
 </div>
+
+<div class="modal-footer">
+  <button class="btn btn-primary btn-block"
+    ng-click="modal.closeModal()"
+    ng-disabled="!modal.state.hasSelectedDrive()">CONTINUE</button>
+</div>
diff --git a/lib/scss/components/_modal.scss b/lib/scss/components/_modal.scss
index 63928da4..4f6b25c7 100644
--- a/lib/scss/components/_modal.scss
+++ b/lib/scss/components/_modal.scss
@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+.modal-content {
+  display: flex;
+  flex-direction: column;
+}
+
 .modal-header {
   display: flex;
   align-items: baseline;
@@ -28,10 +33,12 @@
 
 .modal-header {
   color: $btn-default-color;
-  padding: 11px 10px 9px 20px;
+  padding: 11px 20px;
+  flex-grow: 0;
 }
 
 .modal-body {
+  flex-grow: 1;
   color: #666;
   padding: 0 20px;
   max-height: 250px;
@@ -85,3 +92,12 @@
 .modal-open {
   padding-right: 0 !important;
 }
+
+.modal-footer {
+  flex-grow: 0;
+  border: 0;
+}
+
+.modal .btn-primary[disabled] {
+  background-color: darken($gray-lighter, 10%);
+}
diff --git a/tests/browser/components/drive-selector.spec.js b/tests/browser/components/drive-selector.spec.js
index ef7337b6..ccb7d4db 100644
--- a/tests/browser/components/drive-selector.spec.js
+++ b/tests/browser/components/drive-selector.spec.js
@@ -148,6 +148,33 @@ describe('Browser: DriveSelector', function() {
 
     });
 
+    describe('.hasSelectedDrive()', function() {
+
+      it('should return false if no selected drive', function() {
+        SelectionStateModel.removeDrive();
+        const hasDrive = DriveSelectorStateService.hasSelectedDrive();
+        m.chai.expect(hasDrive).to.be.false;
+      });
+
+      it('should return false if the selected drive is an empty object', function() {
+        SelectionStateModel.setDrive({});
+        const hasDrive = DriveSelectorStateService.hasSelectedDrive();
+        m.chai.expect(hasDrive).to.be.false;
+      });
+
+      it('should return true if there is a selected drive', function() {
+        DriveSelectorStateService.toggleSelectDrive({
+          device: '/dev/disk2',
+          name: 'USB Drive',
+          size: '16GB'
+        });
+
+        const hasDrive = DriveSelectorStateService.hasSelectedDrive();
+        m.chai.expect(hasDrive).to.be.true;
+      });
+
+    });
+
   });
 
 });