From 7683b58d067243e37bd01b77c7e5c1abeb27b7bc Mon Sep 17 00:00:00 2001 From: Chris Gordon Date: Thu, 29 Sep 2011 13:44:08 +1000 Subject: [PATCH] Mobile icons. - CSS highlighting of buttons when selected. - Keyboard button tweaked to allow show/hide toggle of keyboard. Signed-off-by: Chris Gordon --- images/clipboard_sml.png | Bin 0 -> 501 bytes images/connect_sml.png | Bin 0 -> 404 bytes images/ctrlaltdel_sml.png | Bin 0 -> 317 bytes images/disconnect_sml.png | Bin 0 -> 1378 bytes images/drag_sml.png | Bin 0 -> 963 bytes images/keyboard_sml.png | Bin 0 -> 1283 bytes images/left_mouse.png | Bin 0 -> 511 bytes images/middle_mouse.png | Bin 0 -> 517 bytes images/nobutton_mouse.png | Bin 0 -> 497 bytes images/right_mouse.png | Bin 0 -> 513 bytes images/settings_sml.png | Bin 0 -> 2495 bytes include/base.css | 78 ++++++++++++++++++++++++++------------ include/black.css | 48 ++++++++++++++++------- include/ui.js | 41 +++++++++++++++++--- vnc.html | 41 +++++++++++--------- 15 files changed, 147 insertions(+), 61 deletions(-) create mode 100644 images/clipboard_sml.png create mode 100644 images/connect_sml.png create mode 100644 images/ctrlaltdel_sml.png create mode 100644 images/disconnect_sml.png create mode 100644 images/drag_sml.png create mode 100644 images/keyboard_sml.png create mode 100644 images/left_mouse.png create mode 100644 images/middle_mouse.png create mode 100644 images/nobutton_mouse.png create mode 100644 images/right_mouse.png create mode 100644 images/settings_sml.png diff --git a/images/clipboard_sml.png b/images/clipboard_sml.png new file mode 100644 index 0000000000000000000000000000000000000000..24df33c1c103755c23167c9a1d5eb51f9057060e GIT binary patch literal 501 zcmVP000>X1^@s6#OZ}&0005JNklLQsoytXHG%qsDu&24?kb6(gJMZNIUjQci;%GE_^nL#i=bVU0+3)v%yWQ@~-6FHu z?1ydJziiuX0zj=+gYWxKhGG0P3X&k2nr5MT4Y|wp8MrATn@2jALL#zx6ke_*NzM*Q(LB=qxlTR{ z-;+rcMIa&o#WNuyL{XG4;(6ZLfhv-T5CWd(<%>9ubKQ3ik|dGupG+on52n*8WzD<# rPah746vwf&3n2ssgTZ}w#D9YiP?b1W?a7*e00000NkvXXu0mjf;r`$= literal 0 HcmV?d00001 diff --git a/images/connect_sml.png b/images/connect_sml.png new file mode 100644 index 0000000000000000000000000000000000000000..79e71adb85cbdd2da5b59d9e2c38609dd526d1be GIT binary patch literal 404 zcmV;F0c-w=P)P000>X1^@s6#OZ}&00047NklS9D+ncfe;N96$KSXNI`*e04{(81y?{Ei6R9Of(lMRK|`ICPyi+&eiUAZ zm9zdypa3aP8p(P)``(OKvkOZEAgLANt&n8Es+ql)h-}pOd;)L4*vyoZaUk(X(h2YZ zD6n1y173kMNkcPx$w|M`b>JGf1FjY{IRJKnLo*x0Y$q|00GDQVGp9jbXaej5Yrr!= z6v_iSix@a`oW`_)kjbxOY4Z0?^0`QVpqcM2o%j@J13gJ2vf(nCK`weuV_Im@L}d5R zDRAuZbw>Wp5CivAbYhOP!dl(+VukP6=Za^N0FPdB9#J3{kN0zN8cC>vtYm2u*aKRw zgA~{TE`S}r|8)dB0q4NbGfRO7GaHt4T@FcoWtg~-r2gDO6$V{N1I=O}sav-{^k{{! y4cr3b0^fFPm1r~rl2*vhD1?cbjhg8Ee|!N&_KPMesy;aY0000P000>X1^@s6#OZ}&00035NklEIGHbhH+fhROmqGP}QpED4br)*+f` z_?l_{ec#LO+c)rEu-peF-2wwZk-8P|U}oc72a=w3m0px=;itmLe1 z#^)NUsv0@xQqw6Qf3i;eeYVpf={%ANX10{n1-g;U+RRoliQfnwftyI?tt`uHNl#|h z+ZT|ukaT5ci zMJI${Kqr++6=)XZJ#Ys&cHgZ7UcC3Sx~_*sQC#x%+c;nbytZig#9=-FEZMBb(?pXA P00000NkvXXu0mjfvjB`6 literal 0 HcmV?d00001 diff --git a/images/disconnect_sml.png b/images/disconnect_sml.png new file mode 100644 index 0000000000000000000000000000000000000000..8832f5ea7e2bdde7016b9429917fd453e42aadb8 GIT binary patch literal 1378 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 literal 0 HcmV?d00001 diff --git a/images/keyboard_sml.png b/images/keyboard_sml.png new file mode 100644 index 0000000000000000000000000000000000000000..f797952513b39cc75d0f0dd4d6716608e10217ed GIT binary patch literal 1283 zcmV+e1^oJnP)X1^@s6sPETi000EaNklRNjzKsl+3H2fX*Se?>)crik)8OqXL!g(Zk)QUl+u@eZ{N?8!v_!lURzreuTz#~)o$Ou{ncK!u58uobz4={SGnacq(;4w(VW_$&Tn0? zLI}}g46&zAPcHz$ULt<47-LVhIeLJBh>%XF$y!}QAP_(_7UAhsnk>u0Krn#eSd^ug z(`1!b(Ld0S;X^TADCEg3n(+F)h>wnk)A;$yRWL9yH#>)^$thg9d>IhH?CdP2Ca3Y! z+$BH=%+FuP)Z`TAlCx;HT3FcjvlqAg;`IegPfj5@GlR{|O)M-fVtR5KKVFzYty=4~ ztKG0fWOsT+R-mdX6o&#p2t`()soJ)OkYyQ)Cd1*7006QqL)A1WiV6n6AuCW-4T`LS zfkAdSplT`{vJ3_WiE(J^mfypX-^W&bH_NSCXW|FATe*W}`{>?%qSaUdQqGj>F}4;qINgs8wq? z^3GB8_xJJpckYp8Sr|P$hDapBQ%_PN7+mkKYV`y^?C#TK0kuNAd)jltXu2&tkJ-U z58kKbOcIrH1t&i_iO8AL;_9U4fg~KzHkK$PNeru;=_E_bY=I=X`e&0s?}Fa+y5r zwvA|P7!KKiTsDVhqk(8N3e~A{qhL_AR>R<62)ak-s}+kXoMV4j#+H5vY>}A`x{LY_0?>}|w)ThJ4!xj6} t2m;U`qQbdz=l(i-_H6Z4&i6*0`Va9a7RbS?<+lI;002ovPDHLkV1f&1X|4bO literal 0 HcmV?d00001 diff --git a/images/left_mouse.png b/images/left_mouse.png new file mode 100644 index 0000000000000000000000000000000000000000..1de7a486c76ff1b95efd7e5ee36dd6943cc6dd3a GIT binary patch literal 511 zcmVX1^@s6HR9gx0005TNkly zKhD}f5XIlxu*TB5qC!GGMv9cV1WC&YKqwXxk_(^!S^NKxY&N7`ufy{^BuRp5wTe=yggB0|-EL8<)l{q1 zx;aUA_riL;R!Ne;vMfj`A*BRk49#Zq*`4x_>nA1i%`P>6%qjo?002ovPDHLkV1jL+ B<81%{ literal 0 HcmV?d00001 diff --git a/images/middle_mouse.png b/images/middle_mouse.png new file mode 100644 index 0000000000000000000000000000000000000000..81fbd9bd375b2daa88b6bac6a7972c58b708a67b GIT binary patch literal 517 zcmV+g0{Z=lP)X1^@s6HR9gx0005ZNkly zzltJ35XQfr(H;kS;J`?bd5jA#-1w4>%zXkyP6VL?HBbltU?dpHCifEe1osR^UUJ;X z1cRfFO!r0W*)ulkvb)@VSrz^Ls=KHz;G>D86P$Co+wG9g=OLv;9LE3v%d!9faU4Sk z0ZJ)M)5PI$kc1H8c^=V%XS3OlAP62f=cn9oIK=l~k4o{cpPta^bWZVPGJ%v5jYi|d zGtLd0&F0HF6aW}wnP(OX1tqT6>xiOAoaYoUrBrnQux&d7zLc{pOJOO25CUo4noE*I zi4|}h#~H_VyUjqND9Ysa`@OyurfFsjK@i*orj#nNG8Nr!Hwl7(FvbWWnMwR-A_P)O z06>x?5`bikq19@gZk9VY9FIqgMk75@QwIR)^?LeNJm2CTJ%6CI*SK`}9;JKxYG9q- z4g6|_(xBgO0(KndX)qYP2xQx~epfV`&2PT%-wkcI+i+d?rxpwVuIv8sJnv@cVzB_F zbX%!ZK3_dN9*>iLzb~(8I-N?+d2)%N{l4@0T&z|rQZAR_I1a)vM6p;zE|-Jv`&h5n zD3waGR;yi{q^o;jxm?OH3}F}sgb)xyfH8(@wR-PP`Oozit@F&YG*W3V00000NkvXX Hu0mjf=bh+1 literal 0 HcmV?d00001 diff --git a/images/nobutton_mouse.png b/images/nobutton_mouse.png new file mode 100644 index 0000000000000000000000000000000000000000..93dbf5780777973578edaf7ae35f65ed01e5718e GIT binary patch literal 497 zcmVX1^@s6HR9gx0005FNkly z!HVKQ5QhIwv}2%i@+3$eV-E8o-hBc+tO#O*=)n*Y#FOAj_Br+m_8B~RS~ikHFlwZ` z_b|+0CpM$Y>@fS^{-W!vqNpz5e-kMOIOpnkJfdE&Ln(!#C;$MC;{X7PqJWeVlv3EX zjq~}e2q7d4!wTz7%jNRNWHM3L3W7kDH6D*OAIGtZqDWn{tZTF1@1Hs6S~130rGZAH zq4|Elk37$%5lku7GXS`*TLIsSIgX>TG$W-%S@*_-5SrJ(MNw2T4u?YplIM9Pb~>HR zqp)qel8~n9U0_P7=Cu`>PNyPGQ^FV{gqXL75CWxMmOu!h04T;7hQr}oXSM5u%jJS7 zip)eq9ROrDo0&)P+QlP!{Xpeh>(=8(RG#gJflc}}@P`#DgMR%Ju;+Q-gCO`Tkn6hU zTQL|6z9mWWFmyB;!T0^2Mlb;QzW+N6!@HsD^%|7YL#NYudiQZ0$6`L8R}Oqxi^W25 z&c!W;@%ye;E4kfnNxR*K=XuDo49#W}wOS2Hl3=&nq19@sUaxm^lis}xo6SaLSq96p nAf<$q5{xl)yWK}`$`{uk{?qW@S6u}n00000NkvXXu0mjfItA$@ literal 0 HcmV?d00001 diff --git a/images/right_mouse.png b/images/right_mouse.png new file mode 100644 index 0000000000000000000000000000000000000000..355b25dc9a03e6d8dc4b956dc51185b5ff8f63e9 GIT binary patch literal 513 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 literal 0 HcmV?d00001 diff --git a/include/base.css b/include/base.css index a80ca9c..4404d01 100644 --- a/include/base.css +++ b/include/base.css @@ -47,19 +47,14 @@ html { /*Mobile buttons bar.*/ #noVNC-control-bar { position:fixed; - background-color:#6d84a2; - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.5, rgb(109,132,162)), - color-stop(1, rgb(140,157,179)) - ); - background-image: -moz-linear-gradient( - center bottom, - rgb(109,132,162) 50%, - rgb(140,157,179) 100% - ); + background: #b2bdcd; /* Old browsers */ +background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ +background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */ +background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ display:block; height:44px; left:0; @@ -220,14 +215,14 @@ html { /*Bubble contents divs*/ #noVNC_settings { display:none; - margin-top:72px; - right:10px; + margin-top:77px; + right:20px; position:fixed; } #noVNC_controls { - margin-top:72px; - right:10px; + margin-top:77px; + right:12px; position:fixed; } #noVNC_controls.top:after { @@ -236,8 +231,8 @@ html { #noVNC_clipboard { display:none; - margin-top:72px; - right:20px; + margin-top:77px; + right:30px; position:fixed; } #noVNC_clipboard.top:after { @@ -277,8 +272,12 @@ html { #keyboardinput { width:1px; height:1px; - background-color:#6d84a2; + background-color:#fff; + color:#fff; border:0; + position: relative; + left: -40px; + z-index: -1; } .noVNC_status_warn { @@ -293,9 +292,43 @@ html { .noVNC_status_button { font-size: 12px; - padding: 2px; + padding: 4px 4px; vertical-align: middle; + border:1px solid #869dbc; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + background: #b2bdcd; /* Old browsers */ + background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ + /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ + + } + +.noVNC_status_button_selected { + font-size: 12px; + padding: 4px 4px; + vertical-align: middle; + border:1px solid #4366a9; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + background: #779ced; /* Old browsers */ + background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */ + /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ +} + #noVNC_clipboard_text { width: 500px; } @@ -307,7 +340,6 @@ html { @media screen and (min-width: 481px) and (max-width: 640px) { .noVNC_status_button { font-size: 10px; - padding: 1px; } #noVNC_clipboard_text { width: 410px; @@ -320,7 +352,6 @@ html { @media screen and (min-width: 321px) and (max-width: 480px) { .noVNC_status_button { font-size: 10px; - padding: 0px; } #noVNC_clipboard_text { width: 250px; @@ -333,7 +364,6 @@ html { @media screen and (max-width: 320px) { .noVNC_status_button { font-size: 9px; - padding: 0px; } #noVNC_clipboard_text { width: 220px; diff --git a/include/black.css b/include/black.css index b155a11..96a96b0 100644 --- a/include/black.css +++ b/include/black.css @@ -1,17 +1,12 @@ #noVNC-control-bar { - background-color:#000; - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.5, rgb(0,0,0)), - color-stop(0.5, rgb(20,20,20)) - ); - background-image: -moz-linear-gradient( - center bottom, - rgb(0,0,0) 50%, - rgb(20,20,20) 50% - ); + background: #4c4c4c; /* Old browsers */ + background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */ } .triangle-right { @@ -24,3 +19,30 @@ background-color:#000; } +.noVNC_status_button { + font-size: 12px; + + vertical-align: middle; + border:1px solid #4c4c4c; + background: #4c4c4c; /* Old browsers */ + background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */ + +} + +.noVNC_status_button_selected { + +background: #9dd53a; /* Old browsers */ +background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */ +background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */ +background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ +} diff --git a/include/ui.js b/include/ui.js index 321d77a..94ad9a0 100644 --- a/include/ui.js +++ b/include/ui.js @@ -16,7 +16,7 @@ rfb_state : 'loaded', settingsOpen : false, connSettingsOpen : true, clipboardOpen: false, - +keyboardVisible: false, // Render default UI and initialize settings menu load: function() { var html = '', i, sheet, sheets, llevels; @@ -199,9 +199,11 @@ toggleClipboardPanel: function() { //Toggle Clipboard Panel if (UI.clipboardOpen == true) { $D('noVNC_clipboard').style.display = "none"; + $D('clipboardButton').className = "noVNC_status_button"; UI.clipboardOpen = false; } else { $D('noVNC_clipboard').style.display = "block"; + $D('clipboardButton').className = "noVNC_status_button_selected"; UI.clipboardOpen = true; } }, @@ -212,6 +214,7 @@ toggleConnectPanel: function() { if (UI.settingsOpen == true) { UI.settingsApply(); UI.closeSettingsMenu(); + $D('connectButton').className = "noVNC_status_button"; } if (UI.clipboardOpen == true) { UI.toggleClipboardPanel(); @@ -220,9 +223,11 @@ toggleConnectPanel: function() { //Toggle Connection Panel if (UI.connSettingsOpen == true) { $D('noVNC_controls').style.display = "none"; + $D('connectButton').className = "noVNC_status_button"; UI.connSettingsOpen = false; } else { $D('noVNC_controls').style.display = "block"; + $D('connectButton').className = "noVNC_status_button_selected"; UI.connSettingsOpen = true; $D('noVNC_host').focus(); } @@ -265,12 +270,14 @@ openSettingsMenu: function() { UI.toggleConnectPanel(); } $D('noVNC_settings').style.display = "block"; + $D('settingsButton').className = "noVNC_status_button_selected"; UI.settingsOpen = true; }, // Close menu (without applying settings) closeSettingsMenu: function() { $D('noVNC_settings').style.display = "none"; + $D('settingsButton').className = "noVNC_status_button"; UI.settingsOpen = false; }, @@ -551,21 +558,43 @@ setViewDrag: function(drag) { drag = !UI.rfb.get_viewportDrag(); } if (drag) { - vmb.style.backgroundColor = "black"; - vmb.style.color = "lightgray"; + $D('noVNC_view_drag_button').className = "noVNC_status_button_selected"; UI.rfb.set_viewportDrag(true); } else { - vmb.style.backgroundColor = ""; - vmb.style.color = ""; + $D('noVNC_view_drag_button').className = "noVNC_status_button"; UI.rfb.set_viewportDrag(false); } }, // On touch devices, show the OS keyboard showKeyboard: function() { - $D('keyboardinput').focus(); + if(UI.keyboardVisible == false) { + $D('keyboardinput').focus(); + UI.keyboardVisible = true; + $D('showKeyboard').className = + "noVNC_status_button_selected"; + } else if(UI.keyboardVisible == true) { + $D('keyboardinput').blur(); + $D('showKeyboard').className = + "noVNC_status_button"; + UI.keyboardVisible = false; + } + }, +keyInputBlur: function() { + $D('showKeyboard').className = + "noVNC_status_button"; + //Weird bug in iOS if you change keyboardVisible + //here it does not actually occur so next time + //you click keyboard icon it doesnt work. + var t=setTimeout("UI.setKeyboard()",100) + +}, + +setKeyboard: function() { + UI.keyboardVisible = false; +}, // iOS < Version 5 does not support position fixed. Javascript workaround: setOnscroll: function() { diff --git a/vnc.html b/vnc.html index c4831d8..5271040 100644 --- a/vnc.html +++ b/vnc.html @@ -47,52 +47,57 @@
-
- - - - - + onKeyDown="onKeyDown(event);" onblur="UI.keyInputBlur();"/>
- - - - -