mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-22 22:37:18 +00:00
3392a5eca1
* Extend ProgressButton to support a striped progress bar This feature will be used to implement the burn validation step. * Implement alert-ribbon CSS component This component will be used to inform an error situation to the user during the burn/check processes. * Add "Enable write validation on success" setting * Implement write validation support Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com> Fixes: https://github.com/resin-io/etcher/issues/45
90 lines
4.5 KiB
HTML
90 lines
4.5 KiB
HTML
<div class="row around-xs">
|
|
<div class="col-xs">
|
|
<div class="box text-center">
|
|
<hero-icon path="../assets/images/image.svg" label="SELECT IMAGE"></hero-icon>
|
|
<span class="badge space-top-medium">1</span>
|
|
|
|
<div class="space-vertical-large">
|
|
<div ng-hide="app.selection.hasImage()">
|
|
<button class="btn btn-primary btn-brick" ng-click="app.selectImage()">Select image</button>
|
|
<p class="step-footer">*supported files: .img, .iso, .zip</p>
|
|
</div>
|
|
<div ng-show="app.selection.hasImage()">
|
|
<span ng-bind="app.selection.getImage() | basename" ng-click="app.reselectImage()"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs">
|
|
<div class="box text-center relative">
|
|
<div class="step-border-left" ng-disabled="!app.selection.hasImage()"></div>
|
|
<div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>
|
|
|
|
<hero-icon path="../assets/images/drive.svg" ng-disabled="!app.selection.hasImage()" label="SELECT DRIVE"></hero-icon>
|
|
|
|
<span class="badge space-top-medium" ng-disabled="!app.selection.hasImage()">2</span>
|
|
|
|
<div class="space-vertical-large">
|
|
<div ng-hide="app.selection.hasDrive()">
|
|
|
|
<div ng-show="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
|
|
<button class="btn btn-primary btn-brick"
|
|
ng-disabled="!app.selection.hasImage()"
|
|
ng-click="app.openDriveSelector()">Select drive</button>
|
|
</div>
|
|
|
|
<div ng-hide="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
|
|
<button class="btn btn-danger btn-brick">Connect a drive</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div ng-show="app.selection.hasDrive()" ng-bind="app.selection.getDrive().name + ' - ' + app.selection.getDrive().size" ng-click="app.reselectDrive()"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs">
|
|
<div class="box text-center">
|
|
<hero-icon path="../assets/images/burn.svg" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()" label="BURN IMAGE"></hero-icon>
|
|
<span class="badge space-top-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</span>
|
|
|
|
<div class="space-vertical-large">
|
|
<progress-button class="btn-brick"
|
|
percentage="app.writer.state.progress"
|
|
striped="{{ app.writer.state.type == 'check' }}"
|
|
ng-attr-active="{{ app.writer.isBurning() }}"
|
|
ng-show="app.success"
|
|
ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
|
|
ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
|
|
<span ng-show="app.writer.state.progress == 100 && app.writer.isBurning()">Finishing...</span>
|
|
<span ng-show="app.writer.state.progress == 0 && !app.writer.isBurning()">Burn!</span>
|
|
<span ng-show="app.writer.state.progress == 0 && app.writer.isBurning() && !app.writer.state.speed">Starting...</span>
|
|
<span ng-show="app.writer.state.speed && app.writer.state.progress != 100 && app.writer.state.type != 'check'"
|
|
ng-bind="app.writer.state.progress + '% '"></span>
|
|
<span ng-show="app.writer.state.speed && app.writer.state.progress != 100 && app.writer.state.type == 'check'"
|
|
ng-bind="app.writer.state.progress + '% Validating...'"></span>
|
|
</progress-button>
|
|
|
|
<div class="alert-ribbon alert-warning" ng-class="{ 'alert-ribbon--open': !app.success }">
|
|
<span class="glyphicon glyphicon-warning-sign"></span>
|
|
<span ng-show="app.settings.validateWriteOnSuccess">
|
|
Your removable drive did not pass validation check.<br>Please insert another one and <button class="btn btn-link" ng-click="app.restartAfterFailure()">try again</button>
|
|
</span>
|
|
<span ng-hide="app.settings.validateWriteOnSuccess">
|
|
Oops, seems something went wrong. Click <button class="btn btn-link" ng-click="app.restartAfterFailure()">here</button> to retry
|
|
</span>
|
|
</div>
|
|
|
|
<button class="btn btn-warning btn-brick" ng-hide="app.success" ng-click="app.restartAfterFailure()">
|
|
<span class="glyphicon glyphicon-repeat"></span> Retry
|
|
</button>
|
|
|
|
<p class="step-footer"
|
|
ng-bind="app.writer.state.speed.toFixed(2) + ' MB/s'"
|
|
ng-show="app.writer.state.speed && app.writer.state.progress != 100 && app.writer.state.type == 'write'"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|