From dd5d3e9e8d53efaa914abd50e191e44f42944bbc Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Wed, 27 Jul 2016 00:00:58 -0400 Subject: [PATCH] feat(GUI): perform drive auto-selection when no selected image (#602) Currently, we intentionally prevent a drive from being auto-selected if there was no selected image for UX purposes, however this way of thinking has been challenged, and we didn't find a real UX problem by doing this. As a minor design improvement, we gray out the drive name in the main window when an image hasn't been selected yet. Change-Type: minor Changelog-Entry: Perform drive auto-selection even when there is no selected image. Signed-off-by: Juan Cruz Viotti --- build/css/main.css | 3 +++ lib/gui/models/store.js | 8 ++------ lib/gui/partials/main.html | 4 +++- lib/gui/scss/main.scss | 4 ++++ tests/gui/models/drives.spec.js | 20 +++++++++++++++++--- 5 files changed, 29 insertions(+), 10 deletions(-) diff --git a/build/css/main.css b/build/css/main.css index 58710df3..4f5b56f6 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -6596,6 +6596,9 @@ body { .relative { position: relative; } +.soft { + color: #787c7f; } + .section-footer { display: flex; align-items: center; diff --git a/lib/gui/models/store.js b/lib/gui/models/store.js index 0fb528a5..f7c5a8ed 100644 --- a/lib/gui/models/store.js +++ b/lib/gui/models/store.js @@ -90,11 +90,7 @@ const storeReducer = (state, action) => { const newState = state.set('availableDrives', Immutable.fromJS(action.data)); - // Notice we only autoselect the drive if there is an image, - // which means that the first step was completed successfully, - // otherwise the drive is selected while the drive step is disabled - // which looks very weird. - if (action.data.length === 1 && state.hasIn([ 'selection', 'image' ])) { + if (action.data.length === 1) { const drive = _.first(action.data); @@ -108,7 +104,7 @@ const storeReducer = (state, action) => { } - const selectedDevice = state.getIn([ 'selection', 'drive', 'device' ]); + const selectedDevice = newState.getIn([ 'selection', 'drive' ]); if (selectedDevice && !_.find(action.data, { device: selectedDevice diff --git a/lib/gui/partials/main.html b/lib/gui/partials/main.html index 7f0d62f1..9165e25a 100644 --- a/lib/gui/partials/main.html +++ b/lib/gui/partials/main.html @@ -61,7 +61,9 @@
-
{{ app.selection.getDrive().name }} - {{ app.selection.getDrive().size | gigabyte | number:1 }} GB
+
{{ app.selection.getDrive().name }} - {{ app.selection.getDrive().size | gigabyte | number:1 }} GB
diff --git a/lib/gui/scss/main.scss b/lib/gui/scss/main.scss index f34ad5db..6e44c6cd 100644 --- a/lib/gui/scss/main.scss +++ b/lib/gui/scss/main.scss @@ -71,6 +71,10 @@ body { position: relative; } +.soft { + color: $color-disabled; +} + .section-footer { @extend .text-center; diff --git a/tests/gui/models/drives.spec.js b/tests/gui/models/drives.spec.js index 28782076..3579886b 100644 --- a/tests/gui/models/drives.spec.js +++ b/tests/gui/models/drives.spec.js @@ -85,7 +85,7 @@ describe('Browser: DrivesModel', function() { SelectionStateModel.removeImage(); }); - it('should not auto-select a single valid available drive', function() { + it('should auto-select a single valid available drive', function() { m.chai.expect(SelectionStateModel.hasDrive()).to.be.false; DrivesModel.setDrives([ @@ -99,7 +99,8 @@ describe('Browser: DrivesModel', function() { } ]); - m.chai.expect(SelectionStateModel.hasDrive()).to.be.false; + m.chai.expect(SelectionStateModel.hasDrive()).to.be.true; + m.chai.expect(SelectionStateModel.getDrive().device).to.equal('/dev/sdb'); }); }); @@ -253,9 +254,21 @@ describe('Browser: DrivesModel', function() { SelectionStateModel.removeDrive(); }); - it('should be deleted if its not contain in the available drives anymore', function() { + it('should be deleted if its not contained in the available drives anymore', function() { m.chai.expect(SelectionStateModel.hasDrive()).to.be.true; + + // We have to provide at least two drives, otherwise, + // if we only provide one, the single drive will be + // auto-selected. DrivesModel.setDrives([ + { + device: '/dev/sda', + name: 'USB Drive', + size: 9999999, + mountpoint: '/mnt/bar', + system: false, + protected: false + }, { device: '/dev/sdb', name: 'SD Card', @@ -265,6 +278,7 @@ describe('Browser: DrivesModel', function() { protected: false } ]); + m.chai.expect(SelectionStateModel.hasDrive()).to.be.false; });