diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml index be2250951..ee9cd21cf 100644 --- a/guacamole/src/main/webapp/client.xhtml +++ b/guacamole/src/main/webapp/client.xhtml @@ -56,10 +56,14 @@
+ + + +
-
+
diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js index c2d5a5d09..4d24b9279 100644 --- a/guacamole/src/main/webapp/scripts/interface.js +++ b/guacamole/src/main/webapp/scripts/interface.js @@ -2,10 +2,11 @@ // UI Definition var GuacamoleUI = { - "display": document.getElementById("display"), - "menu" : document.getElementById("menu"), - "logo" : document.getElementById("status-logo"), - "state" : document.getElementById("state"), + "display" : document.getElementById("display"), + "menu" : document.getElementById("menu"), + "menuControl" : document.getElementById("menuControl"), + "logo" : document.getElementById("status-logo"), + "state" : document.getElementById("state"), "buttons": { @@ -137,13 +138,84 @@ var GuacamoleUI = { window.location.href = "logout"; }; - GuacamoleUI.display.onmouseout = function() { - GuacamoleUI.showMenu(); - }; + var detectMenuOpenTimeout = null; + var detectMenuCloseTimeout = null; + + GuacamoleUI.menu.addEventListener('mouseover', function() { + + // If we were waiting for menu close, we're not anymore + if (detectMenuCloseTimeout != null) { + window.clearTimeout(detectMenuCloseTimeout); + detectMenuCloseTimeout = null; + } + + }, true); + + GuacamoleUI.menu.addEventListener('mouseout', function(e) { + + // Get parent of the element the mouse pointer is leaving + if (!e) e = window.event; + var target = e.relatedTarget || e.toElement; + + // Ensure target is not menu nor child of menu + var targetParent = target; + while (targetParent != null) { + if (targetParent == GuacamoleUI.menu) return; + targetParent = targetParent.parentNode; + } + + // If not already waiting, start detection of mouse leave + if (detectMenuCloseTimeout == null) { + detectMenuCloseTimeout = window.setTimeout(function() { + GuacamoleUI.shadeMenu(); + detectMenuCloseTimeout = null; + }, 750); + } + + }, true); + + // When mouse hovers over top of screen, start detection of mouse hover + GuacamoleUI.menuControl.addEventListener('mousemove', function() { + + // If we were waiting for menu close, we're not anymore + if (detectMenuCloseTimeout != null) { + window.clearTimeout(detectMenuCloseTimeout); + detectMenuCloseTimeout = null; + } + + // Clear old timeout if mouse moved while we were waiting + if (detectMenuOpenTimeout != null) { + window.clearTimeout(detectMenuOpenTimeout); + detectMenuOpenTimeout = null; + } + + // If not alread waiting, wait for 250ms before showing menu + detectMenuOpenTimeout = window.setTimeout(function() { + GuacamoleUI.showMenu(); + detectMenuOpenTimeout = null; + }, 250); + + }, true); + + // When mouse leaves top of screen, cancel showing the menu + GuacamoleUI.menuControl.addEventListener('mouseout', function() { + + // If we were waiting for menu open, we're not anymore + if (detectMenuOpenTimeout != null) { + window.clearTimeout(detectMenuOpenTimeout); + detectMenuCloseTimeout = null; + } + + // If not already waiting, start detection of mouse leave + if (detectMenuCloseTimeout == null) { + detectMenuCloseTimeout = window.setTimeout(function() { + GuacamoleUI.shadeMenu(); + detectMenuCloseTimeout = null; + }, 750); + } + + }, true); - GuacamoleUI.display.onmouseover = function() { - GuacamoleUI.shadeMenu(); - }; // Reconnect button GuacamoleUI.buttons.reconnect.onclick = function() { @@ -163,10 +235,6 @@ GuacamoleUI.attach = function(guac) { var mouse = new Guacamole.Mouse(GuacamoleUI.display); mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = function(mouseState) { - - if (mouseState.y <= 5) - GuacamoleUI.showMenu(); - guac.sendMouseState(mouseState); }; diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css index 3dfe2bf6a..4b4099106 100644 --- a/guacamole/src/main/webapp/styles/client.css +++ b/guacamole/src/main/webapp/styles/client.css @@ -73,17 +73,14 @@ div.errorDialog p { #menu { - margin-left: auto; - margin-right: auto; - margin-bottom: 1em; - font-size: 0.8em; - background: #FEA; - border: 1px solid black; position: fixed; left: 0; top: 0; width: 100%; - z-index: 1; + z-index: 4; + background: #FEA; + border-bottom: 1px solid black; + font-size: 0.8em; } #menu.error { @@ -127,11 +124,7 @@ div#clipboardDiv { border: 1px solid black; width: 50em; - opacity: 0.5; -} - -#menu:hover div#clipboardDiv { - opacity: 1; + z-index: 2; } div#clipboardDiv h2 { @@ -161,3 +154,14 @@ div#clipboardDiv textarea { cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default; } +div#menuControl { + position: fixed; + top: 0; + left: 0; + + width: 100%; + height: 1.5em; + background: none; + + z-index: 3; +}