jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-27 21:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #57 from resin-io/jviotti/feat/41/burn-again

Browse Source 
Implement burn complete screen
This commit is contained in:
Juan Cruz Viotti 2015-12-01 14:40:38 -04:00
commit f1bd700507
11 changed files with 236 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
build/browser/app.js
View File

@ -54,7 +54,15 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState
this.selection = SelectionStateService; this.selection = SelectionStateService;
this.writer = ImageWriterService; this.writer = ImageWriterService;
this.scanner = DriveScannerService; this.scanner = DriveScannerService;
this.scanner.start(2000);
this.restart = function() {
console.debug('Restarting');
this.selection.clear();
this.writer.setProgress(0);
this.scanner.start(2000);
};
this.restart();
this.selectImage = function() { this.selectImage = function() {
return $q.when(dialog.selectImage()).then(function(image) { return $q.when(dialog.selectImage()).then(function(image) {
@ -613,6 +621,18 @@ selectionState.service('SelectionStateService', function() {
return !!self.getImage(); return !!self.getImage();
}; };
/**
* @summary Clear all selections
* @function
* @public
*
* @example
* SelectionStateService.clear();
*/
this.clear = function() {
selection = {};
};
}); });
},{"angular":9}],6:[function(require,module,exports){ },{"angular":9}],6:[function(require,module,exports){

159
build/css/main.css
View File

@ -22,7 +22,7 @@
* THE SOFTWARE. * THE SOFTWARE.
*/ */
/*! /*!
* Bootstrap v3.3.5 (http://getbootstrap.com) * Bootstrap v3.3.6 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -260,8 +260,8 @@ th {
@font-face { @font-face {
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot"); src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot");
src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); } src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
.glyphicon { .glyphicon {
position: relative; position: relative;
@ -275,10 +275,10 @@ th {
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
.glyphicon-asterisk:before { .glyphicon-asterisk:before {
content: "\2a"; } content: "\002a"; }
.glyphicon-plus:before { .glyphicon-plus:before {
content: "\2b"; } content: "\002b"; }
.glyphicon-euro:before, .glyphicon-euro:before,
.glyphicon-eur:before { .glyphicon-eur:before {
@ -1181,7 +1181,7 @@ h1, h2, h3, h4, h5, h6,
.h6 .small { .h6 .small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: #777777; } color: #ddd; }
h1, .h1, h1, .h1,
h2, .h2, h2, .h2,
@ -1279,7 +1279,7 @@ mark,
text-transform: capitalize; } text-transform: capitalize; }
.text-muted { .text-muted {
color: #777777; } color: #ddd; }
.text-primary { .text-primary {
color: #5793db; } color: #5793db; }
@ -1418,7 +1418,7 @@ dd {
abbr[title], abbr[title],
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted #777777; } border-bottom: 1px dotted #ddd; }
.initialism { .initialism {
font-size: 90%; } font-size: 90%; }
@ -1438,7 +1438,7 @@ blockquote {
display: block; display: block;
font-size: 80%; font-size: 80%;
line-height: 1.42857; line-height: 1.42857;
color: #777777; } color: #ddd; }
blockquote footer:before, blockquote footer:before,
blockquote small:before, blockquote small:before,
blockquote .small:before { blockquote .small:before {
@ -2047,7 +2047,7 @@ table {
caption { caption {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
color: #777777; color: #ddd;
text-align: left; } text-align: left; }
th { th {
@ -2354,6 +2354,9 @@ output {
color: #999; } color: #999; }
.form-control::-webkit-input-placeholder { .form-control::-webkit-input-placeholder {
color: #999; } color: #999; }
.form-control::-ms-expand {
border: 0;
background-color: transparent; }
.form-control[disabled], .form-control[readonly], .form-control[disabled], .form-control[readonly],
fieldset[disabled] .form-control { fieldset[disabled] .form-control {
background-color: #eeeeee; background-color: #eeeeee;
@ -2797,7 +2800,7 @@ select[multiple].input-lg,
@media (min-width: 768px) { @media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label { .form-horizontal .form-group-lg .control-label {
padding-top: 14.33333px; padding-top: 11px;
font-size: 17px; } } font-size: 17px; } }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -2875,13 +2878,10 @@ fieldset[disabled] a.btn {
.btn-default:active, .btn-default.active, .btn-default:active, .btn-default.active,
.open > .btn-default.dropdown-toggle { .open > .btn-default.dropdown-toggle {
background-image: none; } background-image: none; }
.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus, .btn-default[disabled]:active, .btn-default[disabled].active, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default.focus {
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active {
background-color: #fff; background-color: #fff;
border-color: #ccc; } border-color: #ccc; }
.btn-default .badge { .btn-default .badge {
@ -2915,13 +2915,10 @@ fieldset[disabled] a.btn {
.btn-primary:active, .btn-primary.active, .btn-primary:active, .btn-primary.active,
.open > .btn-primary.dropdown-toggle { .open > .btn-primary.dropdown-toggle {
background-image: none; } background-image: none; }
.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary.focus {
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
background-color: #5793db; background-color: #5793db;
border-color: #4286d7; } border-color: #4286d7; }
.btn-primary .badge { .btn-primary .badge {
@ -2955,13 +2952,10 @@ fieldset[disabled] a.btn {
.btn-success:active, .btn-success.active, .btn-success:active, .btn-success.active,
.open > .btn-success.dropdown-toggle { .open > .btn-success.dropdown-toggle {
background-image: none; } background-image: none; }
.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled].active, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus,
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success.focus {
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active {
background-color: #5cb85c; background-color: #5cb85c;
border-color: #4cae4c; } border-color: #4cae4c; }
.btn-success .badge { .btn-success .badge {
@ -2995,13 +2989,10 @@ fieldset[disabled] a.btn {
.btn-info:active, .btn-info.active, .btn-info:active, .btn-info.active,
.open > .btn-info.dropdown-toggle { .open > .btn-info.dropdown-toggle {
background-image: none; } background-image: none; }
.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus, .btn-info[disabled]:active, .btn-info[disabled].active, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus,
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info.focus {
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de; background-color: #5bc0de;
border-color: #46b8da; } border-color: #46b8da; }
.btn-info .badge { .btn-info .badge {
@ -3035,13 +3026,10 @@ fieldset[disabled] a.btn {
.btn-warning:active, .btn-warning.active, .btn-warning:active, .btn-warning.active,
.open > .btn-warning.dropdown-toggle { .open > .btn-warning.dropdown-toggle {
background-image: none; } background-image: none; }
.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus,
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning.focus {
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
background-color: #f0ad4e; background-color: #f0ad4e;
border-color: #eea236; } border-color: #eea236; }
.btn-warning .badge { .btn-warning .badge {
@ -3075,13 +3063,10 @@ fieldset[disabled] a.btn {
.btn-danger:active, .btn-danger.active, .btn-danger:active, .btn-danger.active,
.open > .btn-danger.dropdown-toggle { .open > .btn-danger.dropdown-toggle {
background-image: none; } background-image: none; }
.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus,
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger.focus {
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger.active {
background-color: #d9534f; background-color: #d9534f;
border-color: #d43f3a; } border-color: #d43f3a; }
.btn-danger .badge { .btn-danger .badge {
@ -3106,7 +3091,7 @@ fieldset[disabled] a.btn {
.btn-link[disabled]:hover, .btn-link[disabled]:focus, .btn-link[disabled]:hover, .btn-link[disabled]:focus,
fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus { fieldset[disabled] .btn-link:focus {
color: #777777; color: #ddd;
text-decoration: none; } text-decoration: none; }
.btn-lg, .btn-group-lg > .btn { .btn-lg, .btn-group-lg > .btn {
@ -3236,7 +3221,7 @@ tbody.collapse.in {
background-color: #5793db; } background-color: #5793db; }
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
color: #777777; } color: #ddd; }
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
text-decoration: none; text-decoration: none;
@ -3264,7 +3249,7 @@ tbody.collapse.in {
padding: 3px 20px; padding: 3px 20px;
font-size: 12px; font-size: 12px;
line-height: 1.42857; line-height: 1.42857;
color: #777777; color: #ddd;
white-space: nowrap; } white-space: nowrap; }
.dropdown-backdrop { .dropdown-backdrop {
@ -3426,13 +3411,15 @@ tbody.collapse.in {
.btn-group-vertical > .btn:first-child:not(:last-child) { .btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } border-bottom-left-radius: 0; }
.btn-group-vertical > .btn:last-child:not(:first-child) { .btn-group-vertical > .btn:last-child:not(:first-child) {
border-bottom-left-radius: 4px;
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; } border-top-left-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0; } border-radius: 0; }
@ -3483,6 +3470,8 @@ tbody.collapse.in {
float: left; float: left;
width: 100%; width: 100%;
margin-bottom: 0; } margin-bottom: 0; }
.input-group .form-control:focus {
z-index: 3; }
.input-group-addon, .input-group-addon,
.input-group-btn, .input-group-btn,
@ -3589,9 +3578,9 @@ tbody.collapse.in {
text-decoration: none; text-decoration: none;
background-color: #eeeeee; } background-color: #eeeeee; }
.nav > li.disabled > a { .nav > li.disabled > a {
color: #777777; } color: #ddd; }
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus { .nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
color: #777777; color: #ddd;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
cursor: initial; } cursor: initial; }
@ -4030,14 +4019,14 @@ tbody.collapse.in {
background-color: #222; background-color: #222;
border-color: #090909; } border-color: #090909; }
.navbar-inverse .navbar-brand { .navbar-inverse .navbar-brand {
color: #9d9d9d; } color: white; }
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
color: #fff; color: #fff;
background-color: transparent; } background-color: transparent; }
.navbar-inverse .navbar-text { .navbar-inverse .navbar-text {
color: #9d9d9d; } color: white; }
.navbar-inverse .navbar-nav > li > a { .navbar-inverse .navbar-nav > li > a {
color: #9d9d9d; } color: white; }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
color: #fff; color: #fff;
background-color: transparent; } background-color: transparent; }
@ -4065,7 +4054,7 @@ tbody.collapse.in {
.navbar-inverse .navbar-nav .open .dropdown-menu .divider { .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background-color: #090909; } background-color: #090909; }
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #9d9d9d; } color: white; }
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #fff; color: #fff;
background-color: transparent; } background-color: transparent; }
@ -4076,11 +4065,11 @@ tbody.collapse.in {
color: #444; color: #444;
background-color: transparent; } } background-color: transparent; } }
.navbar-inverse .navbar-link { .navbar-inverse .navbar-link {
color: #9d9d9d; } color: white; }
.navbar-inverse .navbar-link:hover { .navbar-inverse .navbar-link:hover {
color: #fff; } color: #fff; }
.navbar-inverse .btn-link { .navbar-inverse .btn-link {
color: #9d9d9d; } color: white; }
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {
color: #fff; } color: #fff; }
.navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus, .navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus,
@ -4101,7 +4090,7 @@ tbody.collapse.in {
padding: 0 5px; padding: 0 5px;
color: #ccc; } color: #ccc; }
.breadcrumb > .active { .breadcrumb > .active {
color: #777777; } color: #ddd; }
.pagination { .pagination {
display: inline-block; display: inline-block;
@ -4133,7 +4122,7 @@ tbody.collapse.in {
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover, .pagination > li > span:hover,
.pagination > li > span:focus { .pagination > li > span:focus {
z-index: 3; z-index: 2;
color: #296cbd; color: #296cbd;
background-color: #eeeeee; background-color: #eeeeee;
border-color: #ddd; } border-color: #ddd; }
@ -4141,7 +4130,7 @@ tbody.collapse.in {
.pagination > .active > span, .pagination > .active > span,
.pagination > .active > span:hover, .pagination > .active > span:hover,
.pagination > .active > span:focus { .pagination > .active > span:focus {
z-index: 2; z-index: 3;
color: #fff; color: #fff;
background-color: #5793db; background-color: #5793db;
border-color: #5793db; border-color: #5793db;
@ -4152,7 +4141,7 @@ tbody.collapse.in {
.pagination > .disabled > a, .pagination > .disabled > a,
.pagination > .disabled > a:hover, .pagination > .disabled > a:hover,
.pagination > .disabled > a:focus { .pagination > .disabled > a:focus {
color: #777777; color: #ddd;
background-color: #fff; background-color: #fff;
border-color: #ddd; border-color: #ddd;
cursor: initial; } cursor: initial; }
@ -4222,7 +4211,7 @@ tbody.collapse.in {
.pager .disabled > a:hover, .pager .disabled > a:hover,
.pager .disabled > a:focus, .pager .disabled > a:focus,
.pager .disabled > span { .pager .disabled > span {
color: #777777; color: #ddd;
background-color: #fff; background-color: #fff;
cursor: initial; } cursor: initial; }
@ -4249,9 +4238,9 @@ a.label:hover, a.label:focus {
cursor: pointer; } cursor: pointer; }
.label-default { .label-default {
background-color: #777777; } background-color: #ddd; }
.label-default[href]:hover, .label-default[href]:focus { .label-default[href]:hover, .label-default[href]:focus {
background-color: #5e5e5e; } background-color: #c4c4c4; }
.label-primary { .label-primary {
background-color: #5793db; } background-color: #5793db; }
@ -4289,7 +4278,7 @@ a.label:hover, a.label:focus {
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
background-color: #777777; background-color: #ddd;
border-radius: 10px; } border-radius: 10px; }
.badge:empty { .badge:empty {
display: none; } display: none; }
@ -4333,7 +4322,9 @@ a.badge:hover, a.badge:focus {
border-top-color: #d5d5d5; } border-top-color: #d5d5d5; }
.container .jumbotron, .container .jumbotron,
.container-fluid .jumbotron { .container-fluid .jumbotron {
border-radius: 6px; } border-radius: 6px;
padding-left: 15px;
padding-right: 15px; }
.jumbotron .container { .jumbotron .container {
max-width: 100%; } max-width: 100%; }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@ -4598,12 +4589,12 @@ button.list-group-item {
.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus { .list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
background-color: #eeeeee; background-color: #eeeeee;
color: #777777; color: #ddd;
cursor: initial; } cursor: initial; }
.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading { .list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading {
color: inherit; } color: inherit; }
.list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text { .list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text {
color: #777777; } color: #ddd; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
z-index: 2; z-index: 2;
@ -5158,8 +5149,12 @@ button.close {
.modal-header { .modal-header {
padding: 15px; padding: 15px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
min-height: 16.42857px; } .modal-header:before, .modal-header:after {
content: " ";
display: table; }
.modal-header:after {
clear: both; }
.modal-header .close { .modal-header .close {
margin-top: -2px; } margin-top: -2px; }
@ -5518,7 +5513,8 @@ button.close {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
background-color: transparent; }
.carousel-control.left { .carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
@ -5615,14 +5611,14 @@ button.close {
.carousel-control .icon-next { .carousel-control .icon-next {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: -15px; margin-top: -10px;
font-size: 30px; } font-size: 30px; }
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev { .carousel-control .icon-prev {
margin-left: -15px; } margin-left: -10px; }
.carousel-control .glyphicon-chevron-right, .carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next { .carousel-control .icon-next {
margin-right: -15px; } margin-right: -10px; }
.carousel-caption { .carousel-caption {
left: 20%; left: 20%;
right: 20%; right: 20%;
@ -5931,13 +5927,16 @@ body {
margin: 15px 0; } margin: 15px 0; }
.space-vertical-large { .space-vertical-large {
margin: 25px 0; } margin: 30px 0; }
.space-horizontal-large { .space-horizontal-large {
margin: 0 25px; } margin: 0 30px; }
.space-top-large { .space-bottom-large {
margin-top: 25px; } margin-bottom: 30px; }
.space-right-tiny {
margin-right: 5px; }
hero-badge .badge { hero-badge .badge {
background-color: #535760; } background-color: #535760; }
@ -5982,9 +5981,15 @@ body {
.relative { .relative {
position: relative; } position: relative; }
.soft {
color: #ddd; }
.section-footer { .section-footer {
color: #333333; position: fixed;
margin-top: 50px; } bottom: 30px;
left: 0;
right: 0;
color: #333333; }
.step-border, .step-border-left, .step-border-right { .step-border, .step-border-left, .step-border-right {
height: 2px; height: 2px;

10
lib/browser/app.js
View File

@ -53,7 +53,15 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState
this.selection = SelectionStateService; this.selection = SelectionStateService;
this.writer = ImageWriterService; this.writer = ImageWriterService;
this.scanner = DriveScannerService; this.scanner = DriveScannerService;
this.scanner.start(2000);
this.restart = function() {
console.debug('Restarting');
this.selection.clear();
this.writer.setProgress(0);
this.scanner.start(2000);
};
this.restart();
this.selectImage = function() { this.selectImage = function() {
return $q.when(dialog.selectImage()).then(function(image) { return $q.when(dialog.selectImage()).then(function(image) {

12
lib/browser/modules/selection-state.js
View File

@ -130,4 +130,16 @@ selectionState.service('SelectionStateService', function() {
return !!self.getImage(); return !!self.getImage();
}; };
/**
* @summary Clear all selections
* @function
* @public
*
* @example
* SelectionStateService.clear();
*/
this.clear = function() {
selection = {};
};
}); });

5
lib/components/hero-button.html
View File

@ -18,6 +18,11 @@
position: relative; position: relative;
} }
:host ::content .glyphicon {
top: 2px;
margin-right: 2px;
}
/* /*
* Remove blue/orange outline * Remove blue/orange outline
* !important is needed here for some reason * !important is needed here for some reason

46
lib/components/hero-tick.html Normal file
View File

@ -0,0 +1,46 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="hero-tick">
<template>
<style>
:host ::content .glyphicon {
display: inline-block;
border-radius: 50%;
padding: 5px;
font-size: 18px;
}
:host ::content .glyphicon-ok {
background-color: rgb(95, 184, 53);
}
:host ::content .glyphicon-remove {
background-color: #d9534f;
}
</style>
<span class="glyphicon"></span>
</template>
<script>
Polymer({
is: "hero-tick",
properties: {
type: {
type: String
}
},
ready: function() {
var glyphicon = this.querySelector('.glyphicon');
if (this.type === 'success') {
glyphicon.className += ' glyphicon-ok';
} else if (this.type === 'error') {
glyphicon.className += ' glyphicon-remove';
} else {
throw new Error('Unknown hero-tick type: ' + this.state);
}
}
});
</script>
</dom-module>

20
lib/index.html
View File

@ -11,6 +11,7 @@
<link rel="import" href="components/hero-icon.html"> <link rel="import" href="components/hero-icon.html">
<link rel="import" href="components/hero-button.html"> <link rel="import" href="components/hero-button.html">
<link rel="import" href="components/hero-progress-button.html"> <link rel="import" href="components/hero-progress-button.html">
<link rel="import" href="components/hero-tick.html">
<script src="../build/browser/app.js"></script> <script src="../build/browser/app.js"></script>
</head> </head>
@ -19,7 +20,7 @@
<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">
<div class="row around-xs space-top-large"> <div class="row around-xs space-bottom-large" ng-hide="app.writer.progress == 100 && !app.writer.isBurning()">
<div class="col-xs"> <div class="col-xs">
<div class="box text-center"> <div class="box text-center">
<hero-icon path="images/image.svg">SELECT IMAGE</hero-icon> <hero-icon path="images/image.svg">SELECT IMAGE</hero-icon>
@ -87,7 +88,6 @@
<hero-progress-button percentage="{{ app.writer.progress }}" active="{{ app.writer.isBurning() }}" <hero-progress-button percentage="{{ app.writer.progress }}" active="{{ app.writer.isBurning() }}"
ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())" ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"> ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
<span ng-show="app.writer.progress == 100 && !app.writer.isBurning()">Done</span>
<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>
@ -98,14 +98,26 @@
</div> </div>
</div> </div>
<div class="row around-xs section-footer"> <div class="row around-xs space-bottom-large" ng-show="app.writer.progress == 100 && !app.writer.isBurning()">
<div class="col-xs"> <div class="col-xs">
<div class="box text-center"> <div class="box text-center">
<hero-caption ng-click="app.open('https://resin.io')">AN OPEN SOURCE PROJECT BY RESIN.IO</hero-caption> <h3><hero-tick type="success" class="space-right-tiny"></hero-tick> Burn Complete!</h3>
<p class="soft">Safely ejected and ready for use</p>
<div class="space-vertical-large">
<hero-button ng-click="app.restart()">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
Lets do it again
</hero-button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="text-center section-footer">
<hero-caption ng-click="app.open('https://resin.io')">AN OPEN SOURCE PROJECT BY RESIN.IO</hero-caption>
</div>
</body> </body>
</html> </html>

11
lib/scss/main.scss
View File

@ -21,9 +21,11 @@
* THE SOFTWARE. * THE SOFTWARE.
*/ */
$icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
$body-bg: rgb(83, 87, 96); $body-bg: rgb(83, 87, 96);
$text-color: white; $text-color: white;
$brand-primary: rgb(87, 147, 219); $brand-primary: rgb(87, 147, 219);
$gray-light: #ddd;
$font-size-base: 13px; $font-size-base: 13px;
$cursor-disabled: initial; $cursor-disabled: initial;
$color-disabled: rgb(120, 124, 127); $color-disabled: rgb(120, 124, 127);
@ -97,9 +99,16 @@ body {
position: relative; position: relative;
} }
.soft {
color: $gray-light;
}
.section-footer { .section-footer {
position: fixed;
bottom: 30px;
left: 0;
right: 0;
color: $gray-dark; color: $gray-dark;
margin-top: 50px;
} }
.step-border { .step-border {

11
lib/scss/modules/_space.scss
View File

@ -21,8 +21,9 @@
* THE SOFTWARE. * THE SOFTWARE.
*/ */
$spacing-large: 25px; $spacing-large: 30px;
$spacing-medium: 15px; $spacing-medium: 15px;
$spacing-tiny: 5px;
.space-vertical-medium { .space-vertical-medium {
margin: $spacing-medium 0; margin: $spacing-medium 0;
@ -36,6 +37,10 @@ $spacing-medium: 15px;
margin: 0 $spacing-large; margin: 0 $spacing-large;
} }
.space-top-large { .space-bottom-large {
margin-top: $spacing-large; margin-bottom: $spacing-large;
}
.space-right-tiny {
margin-right: $spacing-tiny;
} }

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

27
tests/browser/modules/selection-state.spec.js
View File

@ -18,6 +18,10 @@ describe('Browser: SelectionState', function() {
describe('given a clean state', function() { describe('given a clean state', function() {
beforeEach(function() {
SelectionStateService.clear();
});
it('getDrive() should return undefined', function() { it('getDrive() should return undefined', function() {
var drive = SelectionStateService.getDrive(); var drive = SelectionStateService.getDrive();
m.chai.expect(drive).to.be.undefined; m.chai.expect(drive).to.be.undefined;
@ -140,6 +144,29 @@ describe('Browser: SelectionState', function() {
}); });
describe('given a drive', function() {
beforeEach(function() {
SelectionStateService.setDrive('/dev/disk2');
SelectionStateService.setImage('foo.img');
});
describe('.clear()', function() {
it('should clear all selections', function() {
m.chai.expect(SelectionStateService.hasDrive()).to.be.true;
m.chai.expect(SelectionStateService.hasImage()).to.be.true;
SelectionStateService.clear();
m.chai.expect(SelectionStateService.hasDrive()).to.be.false;
m.chai.expect(SelectionStateService.hasImage()).to.be.false;
});
});
});
}); });
}); });