Connection icons, initial autohiding menu implementation.

guacamole/src/main/webapp/client.xhtml

@@ -97,13 +97,6 @@
             var errorDialog = document.getElementById("errorDialog");
             var errorDialogText = document.getElementById("errorText");
 
-            // Position display correctly
-            window.onresize = function() {
-                display.style.top = menu.offsetHeight + "px";
-            };
-
-            window.onresize();
-
             var state = document.getElementById("state");
             guac.onstatechange = function(clientState) {
 
@@ -184,6 +177,10 @@
             var mouse = new Guacamole.Mouse(display);
             mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
                 function(mouseState) {
+
+                    if (mouseState.y <= 5)
+                        showMenu();
+
                     guac.sendMouseState(mouseState);
                 };
 
@@ -335,6 +332,69 @@
                 // TODO: Handle exception ...
             }
 
+            var menu_shaded = false;
+
+            var hide_interval = null;
+            var show_interval = null;
+
+            function hideMenu() {
+
+                if (!menu_shaded) {
+
+                    var step = Math.floor(menu.offsetHeight / 5) + 1;
+                    var offset = 0;
+                    menu_shaded = true;
+
+                    window.clearInterval(show_interval);
+                    hide_interval = window.setInterval(function() {
+
+                        offset -= step;
+                        menu.style.top = offset + "px";
+
+                        if (offset <= -menu.offsetHeight) {
+                            window.clearInterval(hide_interval);
+                            menu.style.visiblity = "hidden";
+                        }
+
+                    }, 30);
+                }
+
+            }
+
+            function showMenu() {
+
+                if (menu_shaded) {
+
+                    var step = Math.floor(menu.offsetHeight / 5) + 1;
+                    var offset = -menu.offsetHeight;
+                    menu_shaded = false;
+                    menu.style.visiblity = "";
+
+                    window.clearInterval(hide_interval);
+                    show_interval = window.setInterval(function() {
+
+                        offset += step;
+
+                        if (offset >= 0) {
+                            offset = 0;
+                            window.clearInterval(show_interval);
+                        }
+
+                        menu.style.top = offset + "px";
+
+                    }, 30);
+                }
+
+            }
+
+            display.onmouseout = function() {
+                showMenu();
+            };
+
+            display.onmouseover = function() {
+                hideMenu();
+            };
+
 
             /* ]]> */ </script>
 

guacamole/src/main/webapp/index.xhtml

@@ -131,6 +131,9 @@
                     var protocol = document.createElement("td");
                     var id = document.createElement("td");
 
+                    var protocolIcon = document.createElement("div");
+                    protocolIcon.className = "protocol icon " + configs[i].protocol;
+
                     // Set CSS
                     protocol.className = "protocol";
                     id.className = "name";
@@ -141,7 +144,8 @@
                         "client.xhtml?" + encodeURIComponent(configs[i].id));
 
                     // Set cell contents
-                    protocol.textContent   = configs[i].protocol;
+                    protocol.appendChild(protocolIcon);
+                    //protocol.textContent   = configs[i].protocol;
                     clientLink.textContent = configs[i].id;
                     id.appendChild(clientLink);
 

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

@@ -86,14 +86,6 @@ div.errorDialog p {
     z-index: 1;
 }
 
-#menu.connected {
-    opacity: 0.5;
-}
-
-#menu.connected:hover {
-    opacity: 1;
-}
-
 #menu.error {
     background: #D44;
 }
@@ -139,6 +131,11 @@ div#clipboardDiv {
     border-radius: 0.5em;
 
     width: 50em;
+    opacity: 0.5;
+}
+
+#menu:hover div#clipboardDiv {
+    opacity: 1;
 }
 
 div#clipboardDiv h2 {

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

@@ -219,3 +219,14 @@ div#connection-list-ui a[href] {
 div#connection-list-ui a[href]:hover {
     text-decoration: underline;
 }
+
+.protocol.icon {
+    width: 24px;
+    height: 24px;
+    background-image: url('../images/protocol-icons/tango/video-display.png');
+}
+
+.protocol.icon.ssh {
+    background-image: url('../images/protocol-icons/tango/terminal.png');
+}
+