safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved menu hiding behavior and style.

Browse Source
This commit is contained in:
Michael Jumper
2011-12-19 16:45:23 -08:00
parent 6cfde7df70
commit 5048d171d5
2 changed files with 36 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
guacamole/src/main/webapp/scripts/interface.js
View File

@@ -56,7 +56,7 @@ var GuacamoleUI = {
if (!menu_shaded) { if (!menu_shaded) {
var step = Math.floor(GuacamoleUI.menu.offsetHeight / 5) + 1; var step = Math.floor(GuacamoleUI.menu.offsetHeight / 10) + 1;
var offset = 0; var offset = 0;
menu_shaded = true; menu_shaded = true;
@@ -151,31 +151,7 @@ var GuacamoleUI = {
}, true); }, true);
GuacamoleUI.menu.addEventListener('mouseout', function(e) { function menuShowHandler() {
// 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 we were waiting for menu close, we're not anymore
if (detectMenuCloseTimeout != null) { if (detectMenuCloseTimeout != null) {
@@ -189,21 +165,42 @@ var GuacamoleUI = {
detectMenuOpenTimeout = null; detectMenuOpenTimeout = null;
} }
// If not alread waiting, wait for 250ms before showing menu // If not alread waiting, wait before showing menu
detectMenuOpenTimeout = window.setTimeout(function() { detectMenuOpenTimeout = window.setTimeout(function() {
GuacamoleUI.showMenu(); GuacamoleUI.showMenu();
detectMenuOpenTimeout = null; detectMenuOpenTimeout = null;
}, 250); }, 325);
}
// Show menu of mouseover any part of menu
GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.showMenu, true);
// When mouse hovers over top of screen, start detection of mouse hover
GuacamoleUI.menuControl.addEventListener('mousemove', menuShowHandler, true);
document.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 == document) return;
targetParent = targetParent.parentNode;
}
menuShowHandler();
}, true); }, true);
// When mouse leaves top of screen, cancel showing the menu GuacamoleUI.display.addEventListener('mouseover', function() {
GuacamoleUI.menuControl.addEventListener('mouseout', function() {
// If we were waiting for menu open, we're not anymore // If we were detecting menu open, stop it
if (detectMenuOpenTimeout != null) { if (detectMenuOpenTimeout != null) {
window.clearTimeout(detectMenuOpenTimeout); window.clearTimeout(detectMenuOpenTimeout);
detectMenuCloseTimeout = null; detectMenuOpenTimeout = null;
} }
// If not already waiting, start detection of mouse leave // If not already waiting, start detection of mouse leave
@@ -211,12 +208,11 @@ var GuacamoleUI = {
detectMenuCloseTimeout = window.setTimeout(function() { detectMenuCloseTimeout = window.setTimeout(function() {
GuacamoleUI.shadeMenu(); GuacamoleUI.shadeMenu();
detectMenuCloseTimeout = null; detectMenuCloseTimeout = null;
}, 750); }, 500);
} }
}, true); }, true);
// Reconnect button // Reconnect button
GuacamoleUI.buttons.reconnect.onclick = function() { GuacamoleUI.buttons.reconnect.onclick = function() {
window.location.reload(); window.location.reload();

7
guacamole/src/main/webapp/styles/client.css
View File

@@ -125,6 +125,11 @@ div#clipboardDiv {
width: 50em; width: 50em;
z-index: 2; z-index: 2;
opacity: 0.5;
}
#menu:hover div#clipboardDiv {
opacity: 1;
} }
div#clipboardDiv h2 { div#clipboardDiv h2 {
@@ -160,7 +165,7 @@ div#menuControl {
left: 0; left: 0;
width: 100%; width: 100%;
height: 1.5em; height: 3px;
background: none; background: none;
z-index: 3; z-index: 3;