Combine menu status and error dialog into central status text.

guacamole/src/main/webapp/client.xhtml

@@ -50,7 +50,6 @@
 
             <!-- Logo and status -->
             <img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
-            <span id="state"></span>
 
         </div>
 
@@ -66,17 +65,19 @@
         <!-- On-screen keyboard -->
         <div id="keyboardContainer"></div>
 
-        <!-- Error Dialog-->
+        <!-- Dialogs -->
-        <div id="errorDialog" class="errorDialogOuter">
+        <div class="dialogOuter">
-            <div class="errorDialogMiddle">
+            <div class="dialogMiddle">
-                <div class="errorDialog">
+
-                    <p id="errorText"></p>
+                <!-- 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/interface.js

@@ -5,8 +5,8 @@ var GuacamoleUI = {
     "display"     : document.getElementById("display"),
     "menu"        : document.getElementById("menu"),
     "menuControl" : document.getElementById("menuControl"),
+    "touchMenu"   : document.getElementById("touchMenu"),
     "logo"        : document.getElementById("status-logo"),
-    "state"       : document.getElementById("state"),
 
     "buttons": {
 
@@ -19,12 +19,12 @@ var GuacamoleUI = {
     },
 
     "containers": {
-        "error"    : document.getElementById("errorDialog"),
+        "state"    : document.getElementById("statusDialog"),
         "clipboard": document.getElementById("clipboardDiv"),
         "keyboard" : document.getElementById("keyboardContainer")
     },
     
-    "error"     : document.getElementById("errorText"),
+    "state"     : document.getElementById("statusText"),
     "clipboard" : document.getElementById("clipboard")
 
 };
@@ -41,15 +41,20 @@ var GuacamoleUI = {
     var guacErrorImage = new Image();
     guacErrorImage.src = "images/noguacamole-logo-24.png";
 
+    GuacamoleUI.hideStatus = function() {
+        document.body.classList.remove("guac-error");
+        GuacamoleUI.containers.state.style.visibility = "hidden";
+    };
+    
+    GuacamoleUI.showStatus = function(text) {
+        document.body.classList.remove("guac-error");
+        GuacamoleUI.containers.state.style.visibility = "visible";
+        GuacamoleUI.state.textContent = text;
+    };
+    
     GuacamoleUI.showError = function(error) {
-
+        document.body.classList.add("guac-error");
-        GuacamoleUI.menu.className = "error";
+        GuacamoleUI.state.textContent = error;
-        GuacamoleUI.display.className += " guac-error";
-
-        GuacamoleUI.logo.src = guacErrorImage.src;
-        GuacamoleUI.error.textContent = error;
-        GuacamoleUI.containers.error.style.visibility = "visible";
-
     };
 
     GuacamoleUI.shadeMenu = function() {
@@ -209,6 +214,38 @@ var GuacamoleUI = {
     // When mouse enters display, start detection of intent to close menu
     GuacamoleUI.display.addEventListener('mouseover', startMenuCloseDetect, true);
 
+    var menuShowLongPressTimeout = null;
+
+    // Detect long-press at bottom of screen
+    document.body.addEventListener('touchstart', function(e) {
+
+        if (!menuShowLongPressTimeout) {
+
+            menuShowLongPressTimeout = window.setTimeout(function() {
+                
+                menuShowLongPressTimeout = null;
+                GuacamoleUI.showMenu();
+
+            }, 1000);
+
+        }
+        
+    }, true);
+
+    // Reset detection when touch stops
+    document.body.addEventListener('touchend', function() {
+
+        // Reset opacity, stop detection of keyboard show gesture
+        GuacamoleUI.shadeMenu();
+        window.clearTimeout(menuShowLongPressTimeout);
+        menuShowLongPressTimeout = null;
+        
+    }, false);
+
+    GuacamoleUI.menu.addEventListener('touchend', function(e) {
+        e.stopPropagation();
+    }, false);
+    
     // Show menu if mouse leaves document
     document.addEventListener('mouseout', function(e) {
         
@@ -324,43 +361,43 @@ GuacamoleUI.attach = function(guac) {
 
             // Idle
             case 0:
-                GuacamoleUI.state.textContent = "Idle."
+                GuacamoleUI.showStatus("Idle.");
                 break;
 
             // Connecting
             case 1:
-                GuacamoleUI.state.textContent = "Connecting...";
+                GuacamoleUI.shadeMenu();
+                GuacamoleUI.showStatus("Connecting...");
                 break;
 
             // Connected + waiting
             case 2:
-                GuacamoleUI.state.textContent = "Connected, waiting for first update...";
+                GuacamoleUI.showStatus("Connected, waiting for first update...");
                 break;
 
             // Connected
             case 3:
                 
+                GuacamoleUI.hideStatus();
                 GuacamoleUI.display.className =
                     GuacamoleUI.display.className.replace(/guac-loading/, '');
 
                 GuacamoleUI.menu.className = "connected";
-                GuacamoleUI.state.textContent = "Connected.";
-                GuacamoleUI.shadeMenu();
                 break;
 
             // Disconnecting
             case 4:
-                GuacamoleUI.state.textContent = "Disconnecting...";
+                GuacamoleUI.showStatus("Disconnecting...");
                 break;
 
             // Disconnected
             case 5:
-                GuacamoleUI.state.textContent = "Disconnected.";
+                GuacamoleUI.showStatus("Disconnected.");
                 break;
 
             // Unknown status code
             default:
-                GuacamoleUI.state.textContent = "Unknown";
+                GuacamoleUI.showStatus("[UNKNOWN STATUS]");
 
         }
     };

guacamole/src/main/webapp/styles/client.css

@@ -28,7 +28,7 @@ body {
     -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
-div.errorDialogOuter {
+div.dialogOuter {
     display: table;
     height: 100%;
     width: 100%;
@@ -37,44 +37,56 @@ div.errorDialogOuter {
     top: 0;
 
     visibility: hidden;
+    /*
+    background-image: url('../images/spinner.gif');
+    background-position: center;
+    background-repeat: no-repeat;
+    */
+
+    /*
+    background-image: url('../images/noimage.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    */
+
 }
 
-div.errorDialogMiddle {
+div.dialogMiddle {
     width: 100%;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
 }
 
-div.errorDialog {
+div.dialog {
-
-    opacity: 0.75;
-    background: #D22;
-    border: 1px solid #F44;
     padding: 1em;
 
     max-width: 75%;
     text-align: left;
 
     display: inline-block;
+    visibility: visible;
 }
 
-div.errorDialog h1 {
+div.dialog h1 {
     margin: 0;
     margin-bottom: 0.25em;
     text-align: center;
 }
 
-div.errorDialog div.buttons {
+div.dialog div.buttons {
     margin: 0;
     margin-top: 0.5em;
     text-align: center;
 }
 
-div.errorDialog p {
+*:not(.guac-error) button#reconnect {
-    margin: 0;
+    display: none;
 }
 
+div.dialog p {
+    margin: 0;
+}
 
 #menu {
     position: fixed;
@@ -87,12 +99,20 @@ div.errorDialog p {
     font-size: 0.8em;
 }
 
-#menu.error {
+.guac-error #menu {
     background: #D44;
 }
 
-.error #state {
+#statusText {
+    text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
     font-weight: bold;
+    font-size: xx-large;
+    color: white;
+}
+
+.guac-error #statusText {
+    text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
+    color: #D44;
 }
 
 img {
@@ -145,20 +165,6 @@ div#clipboardDiv textarea {
     width: 100%;
 }
 
-.guac-display.guac-loading {
-    border: 1px dotted gray;
-    background-image: url('../images/spinner.gif');
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.guac-display.guac-error {
-    border: 1px dotted red;
-    background-image: url('../images/noimage.png');
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
 .guac-hide-cursor {
     cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
 }