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

@@ -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
  *

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;
+
 };

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>

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%);
+}

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;
+      });
+
+    });
+
   });
 
 });