jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-24 19:56:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #63 from resin-io/fix/unstyled-flash

Browse Source 
Prevent flash of unstyled content at startup
This commit is contained in:
Juan Cruz Viotti 2015-12-15 10:36:40 -04:00
commit 255309aa76
5 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/browser/app.js
View File

@ -64,6 +64,9 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState
this.restart(); this.restart();
// We're ready to unhide the application now
document.querySelector('body').style.display = 'initial';
this.selectImage = function() { this.selectImage = function() {
return $q.when(dialog.selectImage()).then(function(image) { return $q.when(dialog.selectImage()).then(function(image) {
self.selection.setImage(image); self.selection.setImage(image);

3
build/css/main.css
View File

@ -5938,6 +5938,9 @@ body {
.space-right-tiny { .space-right-tiny {
margin-right: 5px; } margin-right: 5px; }
html {
background-color: #535760; }
hero-badge .badge { hero-badge .badge {
background-color: #535760; } background-color: #535760; }

3
lib/browser/app.js
View File

@ -63,6 +63,9 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState
this.restart(); this.restart();
// We're ready to unhide the application now
document.querySelector('body').style.display = 'initial';
this.selectImage = function() { this.selectImage = function() {
return $q.when(dialog.selectImage()).then(function(image) { return $q.when(dialog.selectImage()).then(function(image) {
self.selection.setImage(image); self.selection.setImage(image);

16
lib/index.html
View File

@ -3,7 +3,6 @@
<head> <head>
<title>Herostratus</title> <title>Herostratus</title>
<link rel="stylesheet" type="text/css" href="../node_modules/flexboxgrid/dist/flexboxgrid.css"> <link rel="stylesheet" type="text/css" href="../node_modules/flexboxgrid/dist/flexboxgrid.css">
<link rel="stylesheet" type="text/css" href="../node_modules/angular/angular-csp.css">
<link rel="stylesheet" type="text/css" href="../build/css/main.css"> <link rel="stylesheet" type="text/css" href="../build/css/main.css">
<link rel="import" href="components/hero-badge.html"> <link rel="import" href="components/hero-badge.html">
@ -15,7 +14,7 @@
<script src="../build/browser/app.js"></script> <script src="../build/browser/app.js"></script>
</head> </head>
<body ng-app="Herostratus" ng-controller="AppController as app" ng-cloak> <body ng-app="Herostratus" ng-controller="AppController as app" style="display: none">
<div class="content row middle-xs space-horizontal-large"> <div class="content row middle-xs space-horizontal-large">
<div class="col-xs"> <div class="col-xs">
@ -31,7 +30,7 @@
<hero-button ng-click="app.selectImage()">Select image</hero-button> <hero-button ng-click="app.selectImage()">Select image</hero-button>
</div> </div>
<div ng-show="app.selection.hasImage()"> <div ng-show="app.selection.hasImage()">
<span>{{ app.selection.getImage() | basename }}</span> <span ng-bind="app.selection.getImage() | basename"></span>
</div> </div>
</div> </div>
</div> </div>
@ -58,8 +57,10 @@
<a href="#" ng-click="app.selectDrive(drive)"> <a href="#" ng-click="app.selectDrive(drive)">
<!-- Show drive letter instead of phsycal drive name on Windows --> <!-- Show drive letter instead of phsycal drive name on Windows -->
<span ng-if="app.platform == 'win32'">Drive {{ drive.mountpoint }}\ - {{ drive.size }}</span> <span ng-if="app.platform == 'win32'"
<span ng-if="app.platform != 'win32'">{{ drive.device }} - {{ drive.size }}</span> ng-bind="'Drive ' + drive.mountpoint + '\\ - ' + drive.size"></span>
<span ng-if="app.platform != 'win32'"
ng-bind="drive.device + ' - ' + drive.size"></span>
</a> </a>
</li> </li>
@ -73,7 +74,7 @@
</div> </div>
<div ng-show="app.selection.hasDrive()"> <div ng-show="app.selection.hasDrive()">
<span>{{ app.selection.getDrive().device }}</span> <span ng-bind="app.selection.getDrive().device"></span>
</div> </div>
</div> </div>
</div> </div>
@ -91,7 +92,8 @@
<span ng-show="app.writer.progress == 100 && app.writer.isBurning()">Finishing...</span> <span ng-show="app.writer.progress == 100 && app.writer.isBurning()">Finishing...</span>
<span ng-show="app.writer.progress == 0 && !app.writer.isBurning()">Burn!</span> <span ng-show="app.writer.progress == 0 && !app.writer.isBurning()">Burn!</span>
<span ng-show="app.writer.progress == 0 && app.writer.isBurning()">Starting...</span> <span ng-show="app.writer.progress == 0 && app.writer.isBurning()">Starting...</span>
<span ng-show="app.writer.progress != 0 && app.writer.progress != 100">{{ app.writer.progress }}%</span> <span ng-show="app.writer.progress != 0 && app.writer.progress != 100"
ng-bind="app.writer.progress + '%'"></span>
</hero-progress-button> </hero-progress-button>
</div> </div>
</div> </div>

5
lib/scss/main.scss
View File

@ -39,6 +39,11 @@ $btn-padding: 10px;
@import "./modules/space"; @import "./modules/space";
// Prevent white flash when running application
html {
background-color: $body-bg;
}
hero-badge .badge { hero-badge .badge {
background-color: $body-bg; background-color: $body-bg;
} }