From 91a6dd5c1ac3fac0df96d17306e38ae97386520b Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Wed, 21 Nov 2012 18:37:34 -0800 Subject: [PATCH] Further conversion to new UI. --- guacamole/src/main/webapp/client.xhtml | 13 ---- .../src/main/webapp/scripts/client-ui.js | 34 +++++++++ .../src/main/webapp/scripts/interface.js | 71 ++++++++----------- guacamole/src/main/webapp/styles/client.css | 9 ++- 4 files changed, 70 insertions(+), 57 deletions(-) diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml index f9ca5a569..8a91c1bf2 100644 --- a/guacamole/src/main/webapp/client.xhtml +++ b/guacamole/src/main/webapp/client.xhtml @@ -43,19 +43,6 @@
- -
-
- - -
-

-
-
- -
-
- diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js index 93ca4cc00..7f148566c 100644 --- a/guacamole/src/main/webapp/scripts/client-ui.js +++ b/guacamole/src/main/webapp/scripts/client-ui.js @@ -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(); + diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js index de3a891ec..e12c743f3 100644 --- a/guacamole/src/main/webapp/scripts/interface.js +++ b/guacamole/src/main/webapp/scripts/interface.js @@ -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); }; diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css index 2cbfeb580..70b52f80c 100644 --- a/guacamole/src/main/webapp/styles/client.css +++ b/guacamole/src/main/webapp/styles/client.css @@ -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; +} +