Further conversion to new UI.

guacamole/src/main/webapp/client.xhtml

@@ -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>

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();
+

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);
         
     };
 

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;
+}
+