Add notification area. Preload images that would otherwise be loaded later, as such a load may fail due to resource starvation.

This commit is contained in:
Michael Jumper
2013-06-26 10:56:09 -07:00
parent 6efb7b8bde
commit 6f33d188fd
3 changed files with 32 additions and 11 deletions

View File

@@ -43,6 +43,14 @@
<!-- Dimensional clone of viewport -->
<div id="viewportClone"/>
<!-- Notification area -->
<div id="notificationArea"/>
<!-- Images which should be preloaded -->
<div id="preload">
<img src="images/progress.png"/>
</div>
<!-- guacamole-common-js scripts -->
<script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
<script type="text/javascript" src="guacamole-common-js/mouse.js"></script>

View File

@@ -50,8 +50,9 @@ GuacUI.Client = {
/* UI Components */
"viewport" : document.getElementById("viewportClone"),
"display" : document.getElementById("display"),
"viewport" : document.getElementById("viewportClone"),
"display" : document.getElementById("display"),
"notification_area" : document.getElementById("notificationArea"),
/* Expected Input Rectangle */
@@ -794,7 +795,7 @@ GuacUI.Client.attach = function(guac) {
var download = new GuacUI.Download(blob.name);
download.updateProgress(getSizeString(0));
document.body.appendChild(download.getElement());
GuacUI.Client.notification_area.appendChild(download.getElement());
// Update progress as data is received
blob.ondata = function() {

View File

@@ -287,14 +287,16 @@ p.hint {
}
#notificationArea {
position: fixed;
right: 0.5em;
bottom: 0.5em;
}
.download.notification {
font-size: 0.9em;
position: fixed;
right: 0.5em;
bottom: 0.5em;
border: 1px solid rgba(255, 255, 255, 0.25);
background: black;
opacity: 0.9;
@@ -317,13 +319,13 @@ p.hint {
}
@keyframes progress {
from {background-position-x: 0px;}
to {background-position-x: 64px;}
from {background-position: 0px 0px;}
to {background-position: 64px 0px;}
}
@-webkit-keyframes progress {
from {background-position-x: 0px;}
to {background-position-x: 64px;}
from {background-position: 0px 0px;}
to {background-position: 64px 0px;}
}
.download.notification .progress {
@@ -368,3 +370,13 @@ p.hint {
font-weight: bold;
text-decoration: none;
}
#preload {
visibility: hidden;
position: absolute;
left: 0;
right: 0;
width: 0;
height: 0;
overflow: hidden;
}