mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-26 04:36:35 +00:00
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 <jviottidc@gmail.com>
This commit is contained in:
parent
d72364115d
commit
dd5d3e9e8d
@ -6596,6 +6596,9 @@ body {
|
|||||||
.relative {
|
.relative {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
|
|
||||||
|
.soft {
|
||||||
|
color: #787c7f; }
|
||||||
|
|
||||||
.section-footer {
|
.section-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -90,11 +90,7 @@ const storeReducer = (state, action) => {
|
|||||||
|
|
||||||
const newState = state.set('availableDrives', Immutable.fromJS(action.data));
|
const newState = state.set('availableDrives', Immutable.fromJS(action.data));
|
||||||
|
|
||||||
// Notice we only autoselect the drive if there is an image,
|
if (action.data.length === 1) {
|
||||||
// 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' ])) {
|
|
||||||
|
|
||||||
const drive = _.first(action.data);
|
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, {
|
if (selectedDevice && !_.find(action.data, {
|
||||||
device: selectedDevice
|
device: selectedDevice
|
||||||
|
@ -61,7 +61,9 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div ng-show="app.selection.hasDrive()">
|
<div ng-show="app.selection.hasDrive()">
|
||||||
<div>{{ app.selection.getDrive().name }} - {{ app.selection.getDrive().size | gigabyte | number:1 }} GB</div>
|
<div ng-class="{
|
||||||
|
soft: !app.selection.hasImage()
|
||||||
|
}">{{ app.selection.getDrive().name }} - {{ app.selection.getDrive().size | gigabyte | number:1 }} GB</div>
|
||||||
<button class="btn btn-link step-footer"
|
<button class="btn btn-link step-footer"
|
||||||
ng-click="app.reselectDrive()"
|
ng-click="app.reselectDrive()"
|
||||||
ng-hide="app.writer.isFlashing()">Change</button>
|
ng-hide="app.writer.isFlashing()">Change</button>
|
||||||
|
@ -71,6 +71,10 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.soft {
|
||||||
|
color: $color-disabled;
|
||||||
|
}
|
||||||
|
|
||||||
.section-footer {
|
.section-footer {
|
||||||
@extend .text-center;
|
@extend .text-center;
|
||||||
|
|
||||||
|
@ -85,7 +85,7 @@ describe('Browser: DrivesModel', function() {
|
|||||||
SelectionStateModel.removeImage();
|
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;
|
m.chai.expect(SelectionStateModel.hasDrive()).to.be.false;
|
||||||
|
|
||||||
DrivesModel.setDrives([
|
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();
|
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;
|
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([
|
DrivesModel.setDrives([
|
||||||
|
{
|
||||||
|
device: '/dev/sda',
|
||||||
|
name: 'USB Drive',
|
||||||
|
size: 9999999,
|
||||||
|
mountpoint: '/mnt/bar',
|
||||||
|
system: false,
|
||||||
|
protected: false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
device: '/dev/sdb',
|
device: '/dev/sdb',
|
||||||
name: 'SD Card',
|
name: 'SD Card',
|
||||||
@ -265,6 +278,7 @@ describe('Browser: DrivesModel', function() {
|
|||||||
protected: false
|
protected: false
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
m.chai.expect(SelectionStateModel.hasDrive()).to.be.false;
|
m.chai.expect(SelectionStateModel.hasDrive()).to.be.false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user