jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile icons. 

- CSS highlighting of buttons when selected.
- Keyboard button tweaked to allow show/hide toggle of keyboard.

Signed-off-by: Chris Gordon <snorkeyg@gmail.com>
This commit is contained in:
Chris Gordon 2011-09-29 13:44:08 +10:00 committed by Joel Martin
parent 1709ee3ab7
commit 938daad1c9
15 changed files with 147 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/clipboard_sml.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 B

BIN
images/connect_sml.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 B

BIN
images/ctrlaltdel_sml.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 B

BIN
images/disconnect_sml.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/drag_sml.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 963 B

BIN
images/keyboard_sml.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/left_mouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 511 B

BIN
images/middle_mouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 517 B

BIN
images/nobutton_mouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 497 B

BIN
images/right_mouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 B

BIN
images/settings_sml.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

78
include/base.css
View File

@ -47,19 +47,14 @@ html {
/*Mobile buttons bar.*/ /*Mobile buttons bar.*/
#noVNC-control-bar { #noVNC-control-bar {
position:fixed; position:fixed;
background-color:#6d84a2; background: #b2bdcd; /* Old browsers */
background-image: -webkit-gradient( background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
linear, 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+ */
left bottom, background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
left top, background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
color-stop(0.5, rgb(109,132,162)), background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
color-stop(1, rgb(140,157,179)) 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 */
background-image: -moz-linear-gradient(
center bottom,
rgb(109,132,162) 50%,
rgb(140,157,179) 100%
);
display:block; display:block;
height:44px; height:44px;
left:0; left:0;
@ -220,14 +215,14 @@ html {
/*Bubble contents divs*/ /*Bubble contents divs*/
#noVNC_settings { #noVNC_settings {
display:none; display:none;
margin-top:72px; margin-top:77px;
right:10px; right:20px;
position:fixed; position:fixed;
} }
#noVNC_controls { #noVNC_controls {
margin-top:72px; margin-top:77px;
right:10px; right:12px;
position:fixed; position:fixed;
} }
#noVNC_controls.top:after { #noVNC_controls.top:after {
@ -236,8 +231,8 @@ html {
#noVNC_clipboard { #noVNC_clipboard {
display:none; display:none;
margin-top:72px; margin-top:77px;
right:20px; right:30px;
position:fixed; position:fixed;
} }
#noVNC_clipboard.top:after { #noVNC_clipboard.top:after {
@ -277,8 +272,12 @@ html {
#keyboardinput { #keyboardinput {
width:1px; width:1px;
height:1px; height:1px;
background-color:#6d84a2; background-color:#fff;
color:#fff;
border:0; border:0;
position: relative;
left: -40px;
z-index: -1;
} }
.noVNC_status_warn { .noVNC_status_warn {
@ -293,9 +292,43 @@ html {
.noVNC_status_button { .noVNC_status_button {
font-size: 12px; font-size: 12px;
padding: 2px; padding: 4px 4px;
vertical-align: middle; 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 { #noVNC_clipboard_text {
width: 500px; width: 500px;
} }
@ -307,7 +340,6 @@ html {
@media screen and (min-width: 481px) and (max-width: 640px) { @media screen and (min-width: 481px) and (max-width: 640px) {
.noVNC_status_button { .noVNC_status_button {
font-size: 10px; font-size: 10px;
padding: 1px;
} }
#noVNC_clipboard_text { #noVNC_clipboard_text {
width: 410px; width: 410px;
@ -320,7 +352,6 @@ html {
@media screen and (min-width: 321px) and (max-width: 480px) { @media screen and (min-width: 321px) and (max-width: 480px) {
.noVNC_status_button { .noVNC_status_button {
font-size: 10px; font-size: 10px;
padding: 0px;
} }
#noVNC_clipboard_text { #noVNC_clipboard_text {
width: 250px; width: 250px;
@ -333,7 +364,6 @@ html {
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
.noVNC_status_button { .noVNC_status_button {
font-size: 9px; font-size: 9px;
padding: 0px;
} }
#noVNC_clipboard_text { #noVNC_clipboard_text {
width: 220px; width: 220px;

48
include/black.css
View File

@ -1,17 +1,12 @@
#noVNC-control-bar { #noVNC-control-bar {
background-color:#000; background: #4c4c4c; /* Old browsers */
background-image: -webkit-gradient( background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
linear, 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+ */
left bottom, background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
left top, background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
color-stop(0.5, rgb(0,0,0)), background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
color-stop(0.5, rgb(20,20,20)) 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 */
background-image: -moz-linear-gradient(
center bottom,
rgb(0,0,0) 50%,
rgb(20,20,20) 50%
);
} }
.triangle-right { .triangle-right {
@ -24,3 +19,30 @@
background-color:#000; 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 */
}

41
include/ui.js
View File

@ -16,7 +16,7 @@ rfb_state : 'loaded',
settingsOpen : false, settingsOpen : false,
connSettingsOpen : true, connSettingsOpen : true,
clipboardOpen: false, clipboardOpen: false,
keyboardVisible: false,
// Render default UI and initialize settings menu // Render default UI and initialize settings menu
load: function() { load: function() {
var html = '', i, sheet, sheets, llevels; var html = '', i, sheet, sheets, llevels;
@ -199,9 +199,11 @@ toggleClipboardPanel: function() {
//Toggle Clipboard Panel //Toggle Clipboard Panel
if (UI.clipboardOpen == true) { if (UI.clipboardOpen == true) {
$D('noVNC_clipboard').style.display = "none"; $D('noVNC_clipboard').style.display = "none";
$D('clipboardButton').className = "noVNC_status_button";
UI.clipboardOpen = false; UI.clipboardOpen = false;
} else { } else {
$D('noVNC_clipboard').style.display = "block"; $D('noVNC_clipboard').style.display = "block";
$D('clipboardButton').className = "noVNC_status_button_selected";
UI.clipboardOpen = true; UI.clipboardOpen = true;
} }
}, },
@ -212,6 +214,7 @@ toggleConnectPanel: function() {
if (UI.settingsOpen == true) { if (UI.settingsOpen == true) {
UI.settingsApply(); UI.settingsApply();
UI.closeSettingsMenu(); UI.closeSettingsMenu();
$D('connectButton').className = "noVNC_status_button";
} }
if (UI.clipboardOpen == true) { if (UI.clipboardOpen == true) {
UI.toggleClipboardPanel(); UI.toggleClipboardPanel();
@ -220,9 +223,11 @@ toggleConnectPanel: function() {
//Toggle Connection Panel //Toggle Connection Panel
if (UI.connSettingsOpen == true) { if (UI.connSettingsOpen == true) {
$D('noVNC_controls').style.display = "none"; $D('noVNC_controls').style.display = "none";
$D('connectButton').className = "noVNC_status_button";
UI.connSettingsOpen = false; UI.connSettingsOpen = false;
} else { } else {
$D('noVNC_controls').style.display = "block"; $D('noVNC_controls').style.display = "block";
$D('connectButton').className = "noVNC_status_button_selected";
UI.connSettingsOpen = true; UI.connSettingsOpen = true;
$D('noVNC_host').focus(); $D('noVNC_host').focus();
} }
@ -265,12 +270,14 @@ openSettingsMenu: function() {
UI.toggleConnectPanel(); UI.toggleConnectPanel();
} }
$D('noVNC_settings').style.display = "block"; $D('noVNC_settings').style.display = "block";
$D('settingsButton').className = "noVNC_status_button_selected";
UI.settingsOpen = true; UI.settingsOpen = true;
}, },
// Close menu (without applying settings) // Close menu (without applying settings)
closeSettingsMenu: function() { closeSettingsMenu: function() {
$D('noVNC_settings').style.display = "none"; $D('noVNC_settings').style.display = "none";
$D('settingsButton').className = "noVNC_status_button";
UI.settingsOpen = false; UI.settingsOpen = false;
}, },
@ -551,21 +558,43 @@ setViewDrag: function(drag) {
drag = !UI.rfb.get_viewportDrag(); drag = !UI.rfb.get_viewportDrag();
} }
if (drag) { if (drag) {
vmb.style.backgroundColor = "black"; $D('noVNC_view_drag_button').className = "noVNC_status_button_selected";
vmb.style.color = "lightgray";
UI.rfb.set_viewportDrag(true); UI.rfb.set_viewportDrag(true);
} else { } else {
vmb.style.backgroundColor = ""; $D('noVNC_view_drag_button').className = "noVNC_status_button";
vmb.style.color = "";
UI.rfb.set_viewportDrag(false); UI.rfb.set_viewportDrag(false);
} }
}, },
// On touch devices, show the OS keyboard // On touch devices, show the OS keyboard
showKeyboard: function() { 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: // iOS < Version 5 does not support position fixed. Javascript workaround:
setOnscroll: function() { setOnscroll: function() {

41
vnc.html
View File

@ -47,52 +47,57 @@
<div id="noVNC-control-bar"> <div id="noVNC-control-bar">
<!--noVNC Mobile Device only Buttons--> <!--noVNC Mobile Device only Buttons-->
<div class="noVNC-buttons-left"> <div class="noVNC-buttons-left">
<input type="image" src="images/move.png" <input type="image" src="images/drag_sml.png"
id="noVNC_view_drag_button" class="noVNC_status_button" id="noVNC_view_drag_button" class="noVNC_status_button"
value="Move" title="Move/Drag Viewport" title="Move/Drag Viewport"
onclick="UI.setViewDrag();"> onclick="UI.setViewDrag();">
<div id="noVNC_mobile_buttons"> <div id="noVNC_mobile_buttons">
<input type="button" class="noVNC_status_button" <input type="image" src="images/nobutton_mouse.png"
id="noVNC_mouse_button0" value=" " class="noVNC_status_button"
id="noVNC_mouse_button0"
onclick="UI.setMouseButton(1);"> onclick="UI.setMouseButton(1);">
<input type="button" class="noVNC_status_button" <input type="image" src="images/left_mouse.png"
id="noVNC_mouse_button1" value="L" class="noVNC_status_button"
id="noVNC_mouse_button1"
onclick="UI.setMouseButton(2);"> onclick="UI.setMouseButton(2);">
<input type="button" class="noVNC_status_button" <input type="image" src="images/middle_mouse.png"
id="noVNC_mouse_button2" value="M" class="noVNC_status_button"
id="noVNC_mouse_button2"
onclick="UI.setMouseButton(4);"> onclick="UI.setMouseButton(4);">
<input type="button" class="noVNC_status_button" <input type="image" src="images/right_mouse.png"
id="noVNC_mouse_button4" value="R" class="noVNC_status_button"
id="noVNC_mouse_button4"
onclick="UI.setMouseButton(0);"> onclick="UI.setMouseButton(0);">
<input type="image" src="images/keyboard.png" <input type="image" src="images/keyboard_sml.png"
id="showKeyboard" class="noVNC_status_button" id="showKeyboard" class="noVNC_status_button"
value="Keyboard" title="Show Keyboard" value="Keyboard" title="Show Keyboard"
onclick="UI.showKeyboard()"/> onclick="UI.showKeyboard()"/>
<input type="url" <input type="url"
autocapitalize="off" autocorrect="off" autocapitalize="off" autocorrect="off"
id="keyboardinput" class="noVNC_status_button" id="keyboardinput" class="noVNC_status_button"
onKeyDown="onKeyDown(event);"/> onKeyDown="onKeyDown(event);" onblur="UI.keyInputBlur();"/>
</div> </div>
</div> </div>
<!--noVNC Buttons--> <!--noVNC Buttons-->
<div class="noVNC-buttons-right"> <div class="noVNC-buttons-right">
<input type="button" class="noVNC_status_button" <input type="image" src="images/ctrlaltdel_sml.png"
class="noVNC_status_button"
value="CtrlAltDel" id="sendCtrlAltDelButton" value="CtrlAltDel" id="sendCtrlAltDelButton"
onclick="UI.sendCtrlAltDel();" /> onclick="UI.sendCtrlAltDel();" />
<input type="image" src="images/clipboard.png" <input type="image" src="images/clipboard_sml.png"
id="clipboardButton" class="noVNC_status_button" id="clipboardButton" class="noVNC_status_button"
value="Clipboard" title="Clipboard" value="Clipboard" title="Clipboard"
onclick="UI.toggleClipboardPanel();" /> onclick="UI.toggleClipboardPanel();" />
<input type="image" src="images/settings.png" <input type="image" src="images/settings_sml.png"
id="settingsButton" class="noVNC_status_button" id="settingsButton" class="noVNC_status_button"
value="Settings" title="Settings" value="Settings" title="Settings"
onclick="UI.toggleSettingsPanel();" /> onclick="UI.toggleSettingsPanel();" />
<input type="image" src="images/connect.png" <input type="image" src="images/connect_sml.png"
id="connectButton" class="noVNC_status_button" id="connectButton" class="noVNC_status_button_selected"
value="Connect" title="Connect" value="Connect" title="Connect"
onclick="UI.toggleConnectPanel()" /> onclick="UI.toggleConnectPanel()" />
<input type="image" src="images/disconnect.png" <input type="image" src="images/disconnect_sml.png"
id="disconnectButton" class="noVNC_status_button" id="disconnectButton" class="noVNC_status_button"
value="Disconnect" title="Disconnect" value="Disconnect" title="Disconnect"
onclick="UI.disconnect()" /> onclick="UI.disconnect()" />