Further conversion to new UI.

This commit is contained in:
Michael Jumper
2012-11-21 18:37:34 -08:00
parent 714c32b9a6
commit 91a6dd5c1a
4 changed files with 70 additions and 57 deletions

View File

@@ -43,19 +43,6 @@
<!-- Dimensional clone of viewport -->
<div id="viewportClone"/>
<!-- Dialogs -->
<div class="dialogOuter">
<div class="dialogMiddle">
<!-- Status Dialog -->
<div id="statusDialog" class="dialog">
<p id="statusText"></p>
<div class="buttons"><button id="reconnect">Reconnect</button></div>
</div>
</div>
</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

@@ -448,3 +448,37 @@ GuacUI.StateManager.registerComponent(
*/
GuacUI.StateManager.setState(GuacUI.Client.states.INTERACTIVE);
/**
* Modal status display. Displays a message to the user, covering the entire
* screen.
*
* Normally, this should only be used when user interaction with other
* components is impossible.
*
* @constructor
* @augments GuacUI.Component
*/
GuacUI.Client.ModalStatus = function(text) {
// Create element hierarchy
var outer = GuacUI.createElement("div", "dialogOuter");
var middle = GuacUI.createChildElement(outer, "div", "dialogMiddle");
var dialog = GuacUI.createChildElement(middle, "div", "dialog");
var status = GuacUI.createChildElement(dialog, "p", "status");
// Set status text
status.textContent = text;
this.show = function() {
document.body.appendChild(outer);
};
this.hide = function() {
document.body.removeChild(outer);
};
};
GuacUI.Client.ModalStatus.prototype = new GuacUI.Component();

View File

@@ -29,46 +29,12 @@ var GuacamoleUI = {
"viewport" : document.getElementById("viewportClone"),
"display" : document.getElementById("display"),
"logo" : document.getElementById("status-logo"),
"buttons": {
"reconnect" : document.getElementById("reconnect")
},
"containers": {
"state" : document.getElementById("statusDialog")
},
"state" : document.getElementById("statusText"),
"client" : null,
"sessionState" : new GuacamoleSessionState()
};
GuacamoleUI.hideStatus = function() {
GuacUI.removeClass(document.body, "guac-error");
GuacamoleUI.containers.state.style.visibility = "hidden";
GuacamoleUI.display.style.opacity = "1";
};
GuacamoleUI.showStatus = function(text) {
GuacUI.removeClass(document.body, "guac-error");
GuacamoleUI.containers.state.style.visibility = "visible";
GuacamoleUI.state.textContent = text;
GuacamoleUI.display.style.opacity = "1";
};
GuacamoleUI.showError = function(error) {
GuacUI.addClass(document.body, "guac-error");
GuacamoleUI.state.textContent = error;
GuacamoleUI.display.style.opacity = "0.1";
};
// Reconnect button
GuacamoleUI.buttons.reconnect.onclick = function() {
window.location.reload();
};
// Tie UI events / behavior to a specific Guacamole client
GuacamoleUI.attach = function(guac) {
@@ -262,6 +228,27 @@ GuacamoleUI.attach = function(guac) {
updateDisplayScale();
}
var last_status_notification = null;
function hideStatus() {
if (last_status_notification)
last_status_notification.hide();
last_status_notification = null;
}
function showStatus(status) {
hideStatus();
last_status_notification = new GuacUI.Client.ModalStatus(status);
last_status_notification.show();
}
function showError(status) {
hideStatus();
last_status_notification = new GuacUI.Client.ModalStatus(status);
last_status_notification.show();
}
// Handle client state change
guac.onstatechange = function(clientState) {
@@ -269,26 +256,26 @@ GuacamoleUI.attach = function(guac) {
// Idle
case 0:
GuacamoleUI.showStatus("Idle.");
showStatus("Idle.");
title_prefix = "[Idle]";
break;
// Connecting
case 1:
GuacamoleUI.showStatus("Connecting...");
showStatus("Connecting...");
title_prefix = "[Connecting...]";
break;
// Connected + waiting
case 2:
GuacamoleUI.showStatus("Connected, waiting for first update...");
showStatus("Connected, waiting for first update...");
title_prefix = "[Waiting...]";
break;
// Connected
case 3:
GuacamoleUI.hideStatus();
hideStatus();
title_prefix = null;
// Update clipboard with current data
@@ -302,19 +289,19 @@ GuacamoleUI.attach = function(guac) {
// Disconnecting
case 4:
GuacamoleUI.showStatus("Disconnecting...");
showStatus("Disconnecting...");
title_prefix = "[Disconnecting...]";
break;
// Disconnected
case 5:
GuacamoleUI.showStatus("Disconnected.");
showStatus("Disconnected.");
title_prefix = "[Disconnected]";
break;
// Unknown status code
default:
GuacamoleUI.showStatus("[UNKNOWN STATUS]");
showStatus("[UNKNOWN STATUS]");
}
@@ -334,7 +321,7 @@ GuacamoleUI.attach = function(guac) {
guac.disconnect();
// Display error message
GuacamoleUI.showError(error);
showError(error);
};

View File

@@ -55,8 +55,6 @@ div.dialogOuter {
position: fixed;
left: 0;
top: 0;
visibility: hidden;
}
div.dialogMiddle {
@@ -264,3 +262,10 @@ div#viewportClone {
visibility: hidden;
}
.status {
text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
font-size: xx-large;
color: white;
}