mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-23 03:06:38 +00:00
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
This commit is contained in:
parent
f4d9c8e7c4
commit
db8f7d0862
@ -6497,7 +6497,7 @@ body {
|
|||||||
.page-main .step-selection-text {
|
.page-main .step-selection-text {
|
||||||
color: #fff; }
|
color: #fff; }
|
||||||
|
|
||||||
.page-main .text-disabled {
|
.page-main .text-disabled > span {
|
||||||
color: #787c7f; }
|
color: #787c7f; }
|
||||||
|
|
||||||
.page-main .relative {
|
.page-main .relative {
|
||||||
|
@ -34,19 +34,19 @@ module.exports = function(
|
|||||||
this.external = OSOpenExternalService;
|
this.external = OSOpenExternalService;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @summary Determine if the image step should be disabled
|
* @summary Determine if the drive step should be disabled
|
||||||
* @function
|
* @function
|
||||||
* @public
|
* @public
|
||||||
*
|
*
|
||||||
* @returns {Boolean} whether the image step should be disabled
|
* @returns {Boolean} whether the drive step should be disabled
|
||||||
*
|
*
|
||||||
* @example
|
* @example
|
||||||
* if (MainController.shouldImageStepBeDisabled()) {
|
* if (MainController.shouldDriveStepBeDisabled()) {
|
||||||
* console.log('The image step should be disabled');
|
* console.log('The drive step should be disabled');
|
||||||
* }
|
* }
|
||||||
*/
|
*/
|
||||||
this.shouldImageStepBeDisabled = () => {
|
this.shouldDriveStepBeDisabled = () => {
|
||||||
return !SelectionStateModel.hasDrive();
|
return !SelectionStateModel.hasImage();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -62,7 +62,7 @@ module.exports = function(
|
|||||||
* }
|
* }
|
||||||
*/
|
*/
|
||||||
this.shouldFlashStepBeDisabled = () => {
|
this.shouldFlashStepBeDisabled = () => {
|
||||||
return !SelectionStateModel.hasImage() || this.shouldImageStepBeDisabled();
|
return !SelectionStateModel.hasDrive() || this.shouldDriveStepBeDisabled();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
color: $palette-theme-dark-foreground;
|
color: $palette-theme-dark-foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .text-disabled {
|
.page-main .text-disabled > span {
|
||||||
color: $palette-theme-dark-disabled-foreground;
|
color: $palette-theme-dark-disabled-foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,45 @@
|
|||||||
<div class="page-main row around-xs">
|
<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="col-xs" ng-controller="DriveSelectionController as drive">
|
||||||
<div class="box text-center relative">
|
<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"
|
<svg-icon class="center-block"
|
||||||
path="../../../assets/drive.svg"
|
path="../../../assets/drive.svg"
|
||||||
@ -11,11 +50,14 @@
|
|||||||
|
|
||||||
<div ng-show="main.drives.hasAvailableDrives()">
|
<div ng-show="main.drives.hasAvailableDrives()">
|
||||||
<button class="button button-primary button-brick"
|
<button class="button button-primary button-brick"
|
||||||
|
ng-disabled="main.shouldDriveStepBeDisabled()"
|
||||||
ng-click="drive.openDriveSelector()">Select drive</button>
|
ng-click="drive.openDriveSelector()">Select drive</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-hide="main.drives.hasAvailableDrives()">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -36,48 +78,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</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="col-xs" ng-controller="FlashController as flash">
|
||||||
<div class="box text-center">
|
<div class="box text-center">
|
||||||
<svg-icon class="center-block"
|
<svg-icon class="center-block"
|
||||||
|
@ -23,7 +23,7 @@ describe('Browser: MainPage', function() {
|
|||||||
DrivesModel = _DrivesModel_;
|
DrivesModel = _DrivesModel_;
|
||||||
}));
|
}));
|
||||||
|
|
||||||
describe('.shouldImageStepBeDisabled()', function() {
|
describe('.shouldDriveStepBeDisabled()', function() {
|
||||||
|
|
||||||
it('should return true if there is no drive', function() {
|
it('should return true if there is no drive', function() {
|
||||||
const controller = $controller('MainController', {
|
const controller = $controller('MainController', {
|
||||||
@ -32,7 +32,7 @@ describe('Browser: MainPage', function() {
|
|||||||
|
|
||||||
SelectionStateModel.clear();
|
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() {
|
it('should return false if there is a drive', function() {
|
||||||
@ -40,11 +40,12 @@ describe('Browser: MainPage', function() {
|
|||||||
$scope: {}
|
$scope: {}
|
||||||
});
|
});
|
||||||
|
|
||||||
SelectionStateModel.hasDrive = () => {
|
SelectionStateModel.setImage({
|
||||||
return true;
|
path: 'rpi.img',
|
||||||
};
|
size: 99999
|
||||||
|
});
|
||||||
|
|
||||||
m.chai.expect(controller.shouldImageStepBeDisabled()).to.be.false;
|
m.chai.expect(controller.shouldDriveStepBeDisabled()).to.be.false;
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user