Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-19 16:23:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update downloader style and add auto-close

Browse source
This commit is contained in:
Ryan Huffman 2016-01-15 08:51:21 -08:00
parent 253719882d
commit 57f2722c6b
3 changed files with 123 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
console/src/downloader.css
View file

@ -5,15 +5,107 @@
* {
font-family: "Proxima Nova", "Open Sans", Arial, Helvetica, sans-serif;
font-size: 1.022em;
line-height: 130%;
}
body {
margin: 0;
padding: 0;
color: #808785;
margin: 0 auto;
text-align: center;
font-size: 14pt;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#error-message {
background-color: #F7F8F8;
color: #EB4C5F;
padding: 20px;
margin: 20px 120px 0 120px;
-webkit-touch-callout: text;
-webkit-user-select: text;
}
progress {
margin: 0 auto;
height: 1px;
width: 300px;
-webkit-appearance: none;
}
progress[value]::-webkit-progress-bar {
background-color: #DADADA;
/* border-radius: 2px; */
}
progress[value]::-webkit-progress-value {
background-color: #21B7D4;
/* border-radius: 2px; */
}
.state {
padding-top: 100px;
}
h1 {
font-size: 29pt;
font-weight: normal;
}
#cancel-area {
margin-top: 100px;
}
a:link,
a:visited,
a:hover,
a:active {
color: #B4B4B4;
}
a:hover {
color: #2D88A4;
}
.one {
opacity: 0;
animation: dot 2.3s infinite;
animation-delay: 0.0s;
}
.two {
opacity: 0;
animation: dot 2.3s infinite;
animation-delay: 0.2s;
}
.three {
opacity: 0;
animation: dot 2.3s infinite;
animation-delay: 0.3s;
}
@-webkit-keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

28
console/src/downloader.html
View file

@ -7,19 +7,31 @@
</head>
<body onload="ready()">
<div id="state-downloading" class="state">
<h1>Downloading<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
<progress max="100" value="80" id="download-progress"></progress>
<div id="cancel-area">
<a id="cancel" href="#">Cancel</a>
</div>
</div>
<div id="state-installing" class="state">
Installing!
</div>
<div id="state-error" class="state">
Error :(
<div id='error-message'></div>
<button>OK</button>
<h1>Installing<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
<em>Just a moment</em>
</div>
<div id="state-complete" class="state">
Complete
<button>OK</button>
<h1>Success!</h1>
<em>You're all set.</em>
</div>
<div id="state-error" class="state">
<h1>Houston...</h1>
<em>An unfortunate error has occurred:</em>
<div id="error-message">
</div>
</body>
</html>

12
console/src/downloader.js
View file

@ -2,6 +2,7 @@ function ready() {
console.log("Ready");
const electron = require('electron');
const remote = require('remote');
window.$ = require('./vendor/jquery/jquery-2.1.4.min.js');
$(".state").hide();
@ -10,14 +11,15 @@ function ready() {
function updateState(state, args) {
console.log(state, args);
if (state == 'downloading') {
console.log("Updating progress bar");
$('#download-progress').attr('value', args.progress * 100);
} else if (state == 'installing') {
} else if (state == 'complete') {
setTimeout(function() {
remote.getCurrentWindow().close();
}, 2000);
} else if (state == 'error') {
$('#error-message').innerHTML = args.message;
$('#error-message').html(args.message);
}
if (currentState != state) {
@ -33,5 +35,9 @@ function ready() {
updateState(message.state, message.args);
});
// updateState('error', { message: "This is an error message", progress: 0.5 });
// updateState('complete', { progress: 0 });
updateState('downloading', { progress: 0 });
electron.ipcRenderer.send('ready');
}