mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 07:17:18 +00:00
feat(GUI): swap drive and image selection step order (#1049)
Change the first step to be drive selection and the second step to be image selection, instead of vice versa as it previously was. Changelog-Entry: Swap the order of the drive and image selection steps.
This commit is contained in:
Benedict Aas
Juan Cruz Viotti
parent
9dd9065305
commit
b25b2d1179
@ -1,16 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 41 41" enable-background="new 0 0 41 41" xml:space="preserve">
|
||||
viewBox="0 0 41 41" style="enable-background:new 0 0 41 41;" xml:space="preserve">
|
||||
<g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M20.5,0C31.822,0,41,9.178,41,20.5S31.822,41,20.5,41
|
||||
S0,31.822,0,20.5S9.178,0,20.5,0z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#555760" d="M20.5,12c4.694,0,8.5,3.806,8.5,8.5S25.194,29,20.5,29
|
||||
S12,25.194,12,20.5S15.806,12,20.5,12z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M20.5,12.625c4.349,0,7.875,3.526,7.875,7.875
|
||||
s-3.526,7.875-7.875,7.875s-7.875-3.526-7.875-7.875S16.151,12.625,20.5,12.625z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#555760" d="M20.5,16c2.485,0,4.5,2.015,4.5,4.5S22.985,25,20.5,25
|
||||
S16,22.985,16,20.5S18.015,16,20.5,16z"/>
|
||||
<path fill="#FFFFFF" d="M20.5,0C9.2,0,0,9.2,0,20.5S9.2,41,20.5,41S41,31.8,41,20.5S31.8,0,20.5,0z M20.5,29c-4.7,0-8.5-3.8-8.5-8.5
|
||||
c0-4.7,3.8-8.5,8.5-8.5c4.7,0,8.5,3.8,8.5,8.5C29,25.2,25.2,29,20.5,29z"/>
|
||||
<path fill="#FFFFFF" d="M20.5,12.6c-4.3,0-7.9,3.5-7.9,7.9s3.5,7.9,7.9,7.9s7.9-3.5,7.9-7.9S24.8,12.6,20.5,12.6z M20.5,25
|
||||
C18,25,16,23,16,20.5s2-4.5,4.5-4.5s4.5,2,4.5,4.5S23,25,20.5,25z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 756 B |
@ -34,19 +34,19 @@ module.exports = function(
|
||||
this.tooltipModal = TooltipModalService;
|
||||
|
||||
/**
|
||||
* @summary Determine if the drive step should be disabled
|
||||
* @summary Determine if the image step should be disabled
|
||||
* @function
|
||||
* @public
|
||||
*
|
||||
* @returns {Boolean} whether the drive step should be disabled
|
||||
* @returns {Boolean} whether the image step should be disabled
|
||||
*
|
||||
* @example
|
||||
* if (MainController.shouldDriveStepBeDisabled()) {
|
||||
* console.log('The drive step should be disabled');
|
||||
* if (MainController.shouldImageStepBeDisabled()) {
|
||||
* console.log('The image step should be disabled');
|
||||
* }
|
||||
*/
|
||||
this.shouldDriveStepBeDisabled = () => {
|
||||
return !SelectionStateModel.hasImage();
|
||||
this.shouldImageStepBeDisabled = () => {
|
||||
return !SelectionStateModel.hasDrive();
|
||||
};
|
||||
|
||||
/**
|
||||
@ -62,7 +62,7 @@ module.exports = function(
|
||||
* }
|
||||
*/
|
||||
this.shouldFlashStepBeDisabled = () => {
|
||||
return this.shouldDriveStepBeDisabled() || !SelectionStateModel.hasDrive();
|
||||
return !SelectionStateModel.hasImage() || this.shouldImageStepBeDisabled();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
@ -1,63 +1,23 @@
|
||||
<div class="page-main row around-xs">
|
||||
<div class="col-xs" ng-controller="ImageSelectionController as image">
|
||||
<div class="box text-center" os-dropzone="image.selectImage($file)">
|
||||
<svg-icon class="center-block" path="{{ main.selection.getImageLogo() || '../../../assets/image.svg' }}"></svg-icon>
|
||||
<span class="icon-caption">SELECT IMAGE</span>
|
||||
<span class="badge space-top-medium">1</span>
|
||||
|
||||
<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.external.open(main.selection.getImageUrl())"
|
||||
ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:20"
|
||||
uib-tooltip="{{ main.selection.getImagePath() | basename }}"></span>
|
||||
|
||||
<span class="glyphicon glyphicon-info-sign" ng-click="main.tooltipModal.show({
|
||||
title: 'IMAGE FILE NAME',
|
||||
message: main.selection.getImagePath()
|
||||
})"></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="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"
|
||||
path="../../../assets/drive.svg"
|
||||
ng-disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
|
||||
<span class="icon-caption"
|
||||
ng-disabled="main.shouldDriveStepBeDisabled()">SELECT DRIVE</span>
|
||||
<span class="icon-caption">SELECT DRIVE</span>
|
||||
|
||||
<span class="badge space-top-medium" ng-disabled="main.shouldDriveStepBeDisabled()">2</span>
|
||||
<span class="badge space-top-medium">1</span>
|
||||
|
||||
<div class="space-vertical-large">
|
||||
<div ng-hide="main.selection.hasDrive()">
|
||||
|
||||
<div ng-show="main.drives.hasAvailableDrives() || main.shouldDriveStepBeDisabled()">
|
||||
<div ng-show="main.drives.hasAvailableDrives()">
|
||||
<button class="button button-primary button-brick"
|
||||
ng-disabled="main.shouldDriveStepBeDisabled()"
|
||||
ng-click="drive.openDriveSelector()">Select drive</button>
|
||||
</div>
|
||||
|
||||
<div ng-hide="main.drives.hasAvailableDrives() || main.shouldDriveStepBeDisabled()">
|
||||
<div ng-hide="main.drives.hasAvailableDrives()">
|
||||
<button class="button button-primary button-brick button-no-hover">Connect a drive</button>
|
||||
</div>
|
||||
|
||||
@ -76,6 +36,58 @@
|
||||
</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>
|
||||
<span
|
||||
class="icon-caption"
|
||||
ng-disabled="main.shouldImageStepBeDisabled()">SELECT IMAGE</span>
|
||||
<span
|
||||
class="badge space-top-medium"
|
||||
ng-disabled="main.shouldImageStepBeDisabled()">2</span>
|
||||
|
||||
<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.external.open(main.selection.getImageUrl())"
|
||||
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="glyphicon glyphicon-info-sign"
|
||||
ng-class="{ 'text-disabled': main.shouldImageStepBeDisabled() }"
|
||||
ng-click="main.tooltipModal.show({
|
||||
title: 'IMAGE FILE NAME',
|
||||
message: main.selection.getImagePath()
|
||||
})"></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="box text-center">
|
||||
<svg-icon class="center-block"
|
||||
|
||||
@ -23,29 +23,28 @@ describe('Browser: MainPage', function() {
|
||||
DrivesModel = _DrivesModel_;
|
||||
}));
|
||||
|
||||
describe('.shouldDriveStepBeDisabled()', function() {
|
||||
describe('.shouldImageStepBeDisabled()', function() {
|
||||
|
||||
it('should return true if there is no image', function() {
|
||||
it('should return true if there is no drive', function() {
|
||||
const controller = $controller('MainController', {
|
||||
$scope: {}
|
||||
});
|
||||
|
||||
SelectionStateModel.clear();
|
||||
|
||||
m.chai.expect(controller.shouldDriveStepBeDisabled()).to.be.true;
|
||||
m.chai.expect(controller.shouldImageStepBeDisabled()).to.be.true;
|
||||
});
|
||||
|
||||
it('should return false if there is an image', function() {
|
||||
it('should return false if there is a drive', function() {
|
||||
const controller = $controller('MainController', {
|
||||
$scope: {}
|
||||
});
|
||||
|
||||
SelectionStateModel.setImage({
|
||||
path: 'rpi.img',
|
||||
size: 99999
|
||||
});
|
||||
SelectionStateModel.hasDrive = () => {
|
||||
return true;
|
||||
};
|
||||
|
||||
m.chai.expect(controller.shouldDriveStepBeDisabled()).to.be.false;
|
||||
m.chai.expect(controller.shouldImageStepBeDisabled()).to.be.false;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user