From 8aa228a2908aaf0c379dac8f9ec17068c4a0447b Mon Sep 17 00:00:00 2001
From: Michael Jumper <zhangmaike@users.sourceforge.net>
Date: Sat, 19 Nov 2011 22:16:05 -0800
Subject: [PATCH] Connection icons, initial autohiding menu implementation.

---
 guacamole/src/main/webapp/client.xhtml        |  74 ++++++++++++++++--
 .../images/protocol-icons/tango/terminal.png  | Bin 0 -> 1164 bytes
 .../protocol-icons/tango/video-display.png    | Bin 0 -> 1080 bytes
 guacamole/src/main/webapp/index.xhtml         |   6 +-
 guacamole/src/main/webapp/styles/client.css   |  13 ++-
 guacamole/src/main/webapp/styles/login.css    |  11 +++
 6 files changed, 88 insertions(+), 16 deletions(-)
 create mode 100644 guacamole/src/main/webapp/images/protocol-icons/tango/terminal.png
 create mode 100644 guacamole/src/main/webapp/images/protocol-icons/tango/video-display.png

diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index 7dcd85c58..ad4defca5 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/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>
 
diff --git a/guacamole/src/main/webapp/images/protocol-icons/tango/terminal.png b/guacamole/src/main/webapp/images/protocol-icons/tango/terminal.png
new file mode 100644
index 0000000000000000000000000000000000000000..9370a2cefda5ae70ec70ad138a031e34ed3a8443
GIT binary patch
literal 1164
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE<hRxemd{22U45`9+AZi
z4BWyX%*Zfn4oDAYS%G6ZkOu2#sPI|3jDdl9tEY=&h{y4*QzJ8CLq*#57k}RuoacL>
z!*#Jj*VI)O7sUmmyF9KcE#eo;5<N1>&Z42|QL;-{2kXQalfU?C{t#gQa@6X<6(Q>j
zD!$xdlR~n7Pr8$~V`uuE?4JeaY<GTFyTBMzaBd#o|NZ~!*Vmf;IscH6hnIJ1)$eTi
zt{t+EV){E27A;xp>{_7I!SzUGHoKsss&w|PMX$JfL}ETpefaR<1*R`w!`s=|@~R3?
zJ4dgcnpIjVwX3XbRa4gL(2%Li-iPo1`|fpY^5kUR2c_Hs?jPs1%ijsIHLUCT__1@E
zfsMZK%f{(vV^`JxZo7Ts-;v2vFD_oZySPcC%+_|R)a2!U#SgmAf3V>X37-_sY9hX9
zmF%TU3zc5o*!<h{-R^YZNjpjz#15!(G8~f#Y1w{H_Kd3bt|UfXZKL;r7p8vg|5n#$
z*k-^{@aP1m&~%}Q?3LHWExw%IXjX96k&#8wcwesUobH*k=N^yp7GUXk!PS^8DB-*|
z?BO+QwxWQ{(*dCYChMi{$1i$#{_+>;2T4AG8?HTIuZ!bY*`zWxc}?oSM@sH|{!eBu
zm$MFWIN8w5cKV;tqa~rt3?|c+dN%&3Grm8+N8y}~(UjGyZTIdSKX~8mNA<H1F0GZS
zz0Z`md##o(T3qAnf7{c`dg&%#QIqRI3%WK=TiTj>ZtncV>&ELpy>H#TXa9TIW#{KA
za?H+DvP=-SyAad2VcXILy$XHFbA;Czig>s6f8XD})s=02eY3y4<$-Oo--A|*G$ysH
zzGddun8tHVO6Yk}wJ|Ga;iOIadL}o1eo^Spxp(fOaQls4Kh)A*i)UH~$u4+1xlum3
zSM}VfeTNrWbQxYt%4uwr&U^UOJpRF#c=eABQTa<R3$4Gr{Mv<EA&wV#c5^(Mq0zPB
zngA>3`FAy|E<e?~AAWO+tB6WOcA?(OEhjvkBw8bqHD@p#{nT|m{g~bbS?PECH+l#D
z(vsjm|GB_#m#!DbVS)7z8V~(kS@qBH{4S&E(s2j9`4<+?Wl?exI)3KNoYW_)Cw@sU
z7hSl@$Nzl5wxxbdQxeMZwq1&ediGqtZdc9$_BbP%`|oG`O7GgYFYedxb&I1`7XAJ8
zwPQz`pFrEg>Fo7?{_V`|w+k~m_GJ4s;pyIf|Lwc7zaE_^BlvEg_l+GN&%I$QIZ}A!
z<jGD8p2zt`P4;zv|1v+nb2j*L@a)r1i&nn1$}nGWxNGaLmvy^N@HZVk?*9MI?YQK>
z2evxoyS>`D%R+xA>&?jw-43!dvKyx~BuQI@dtS&AR$yDCePqX{AN(u}B0M;iMRx&n
zvucTJL`iZ{YGO&MZVHfKFfuT()HN{EH8Kb>G_o=_wlXx*HZZU<FxbfX-U+55H$Npa
Yt&)I-cROa50W~mqy85}Sb4q9e0NE@G8UO$Q

literal 0
HcmV?d00001

diff --git a/guacamole/src/main/webapp/images/protocol-icons/tango/video-display.png b/guacamole/src/main/webapp/images/protocol-icons/tango/video-display.png
new file mode 100644
index 0000000000000000000000000000000000000000..384777ed431ff23b8fdea7eed319924bfaf961e0
GIT binary patch
literal 1080
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE)4%caKYZ?lYt_f1s;*b
zKpodXn9)gNb_GbVtiUlHNQ3n=RQN1i#=yXA<LTlU;&J@yl(X3?p(01?-|zLRRZ+8@
z$+<(oM@?Ai)v;cVcQTF=rGkzh{5jaJH(4KS)egVO@tJ*vM#}81P1dF}CkCb`6*RFm
zExSCk<a+q^+Uu_2<-e4bJsdtbeZ03fwDg?q^H{k*_YZ$DpFMl_`|cC&tEA$%E=X`5
z{&2asxA*%o&ZzD8D%M`iFwwhO7&)cp>(emvzQ@|HU%$@0P`_|h;3SnjU%x%~F)w+d
zF6$e}+RXRu=gf!Q=kF=<=q8FJ^?b~n)po%0pu#e)c`@@2@f?xtd3jp?Jg<h#9sQG=
z^s4#4MaINPHA*WAd<<dA3`;y?d4Z*Kmf)sEA`J7Y|K04YYv<UqJe;?+r+lsRf`pz+
zYi-uL%l1X5pZLh5G*ABhz2wZ7hFl^aG_rI{otfK;RRgAox*uP@B(ifAQ`-f$3jH;9
zo12Q?B{k`s4Om}cDspJW`BIy#^f}v#Lv$S__+RO93kcTj`p$j&^yw#+ezTS(vqZM7
zV&7V_*Rj1u{NtRZtV(R=Q+<BqtaWwSv9V~bM%Rf=Z<tsk!=m46T;;1-edO}m11y3E
zpPcz>S1dQNi~T$Qj*Xj~W|e7l6-`m_y?iev+I_mByevy!ea|V;jta5$_P#RiDUp3!
z%cdxt|139ebB4v){hV7x?{O=MCU|U~vMSnFi{bE{DUY8luw@iF-e*ztWak9&=gDae
zE>jGc1P@A_*gU6fx9!RU5<i|i7XKJ`>;dn|GbYy}uT*dHvtp^=SFv8=OhS_zht|rj
zXNAUolUUN#{Woi|z7S-0G+C5jG3%_FYhXlnuH~n?+}yX#t5(^GO!SVw9w>76-mP0z
z-xsm*7_h2%PCB#q-?O!QXPd`!hKGk2o?EDqk^gRQmE6B?6W+ef{aKg({OaEM-@i5R
zcr-TMdwSppgW3TdgYeL+Z~k2U`Cv)uC#TO(ZfvoZO*VKEd2aph-*4XByLk7mb<vOC
z54YRbZ2w$(cMfw7@4dYqjyyJuXRc%?Cni2zn$3MZZr<Fvu`~BqJ=IK)y^v$}-zs<O
zzl^O><^6sC{;*lFoNMsgyRG4qQq#YK$4yW22=qQ>oWLI$c;(uht6OUfc>5J!TyLMh
zuO#~Uynn2Bm@hB9RWDu7eDzOPDp%YBP*zkeag8WRE=o--N!3jO5)4KL29~-8X1YcO
zA%;d)#>Q5LrrHJuRt5$o>n@&wX~@k_$xN#xpg~)HIVhJ)f@}!RPb(=;EJ|f4FE7{2
f%*!rLPAo{(%P&fw{mw=TsEEPS)z4*}Q$iB}wI$lH

literal 0
HcmV?d00001

diff --git a/guacamole/src/main/webapp/index.xhtml b/guacamole/src/main/webapp/index.xhtml
index f3b066172..35c399adc 100644
--- a/guacamole/src/main/webapp/index.xhtml
+++ b/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);
 
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index 99a09ae38..7d99735e6 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/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 {
diff --git a/guacamole/src/main/webapp/styles/login.css b/guacamole/src/main/webapp/styles/login.css
index d073c1de7..f8e5ca0a6 100644
--- a/guacamole/src/main/webapp/styles/login.css
+++ b/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');
+}
+