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

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

View File

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

View File

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

View File

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

View File

@ -3,7 +3,6 @@
<head>
<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/angular/angular-csp.css">
<link rel="stylesheet" type="text/css" href="../build/css/main.css">
<link rel="import" href="components/hero-badge.html">
@ -15,7 +14,7 @@
<script src="../build/browser/app.js"></script>
</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="col-xs">
@ -31,7 +30,7 @@
<hero-button ng-click="app.selectImage()">Select image</hero-button>
</div>
<div ng-show="app.selection.hasImage()">
<span>{{ app.selection.getImage() | basename }}</span>
<span ng-bind="app.selection.getImage() | basename"></span>
</div>
</div>
</div>
@ -58,8 +57,10 @@
<a href="#" ng-click="app.selectDrive(drive)">
<!-- 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'">{{ drive.device }} - {{ drive.size }}</span>
<span ng-if="app.platform == 'win32'"
ng-bind="'Drive ' + drive.mountpoint + '\\ - ' + drive.size"></span>
<span ng-if="app.platform != 'win32'"
ng-bind="drive.device + ' - ' + drive.size"></span>
</a>
</li>
@ -73,7 +74,7 @@
</div>
<div ng-show="app.selection.hasDrive()">
<span>{{ app.selection.getDrive().device }}</span>
<span ng-bind="app.selection.getDrive().device"></span>
</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 == 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.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>
</div>
</div>

View File

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