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
Joel Martin
parent
f9d3a3f353
commit
7683b58d06
Binary file not shown.
|
After Width: | Height: | Size: 501 B |
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
Binary file not shown.
|
After Width: | Height: | Size: 317 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 963 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
Binary file not shown.
|
After Width: | Height: | Size: 517 B |
Binary file not shown.
|
After Width: | Height: | Size: 497 B |
Binary file not shown.
|
After Width: | Height: | Size: 513 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
41
vnc.html
41
vnc.html
|
|
@ -47,52 +47,57 @@
|
|||
<div id="noVNC-control-bar">
|
||||
<!--noVNC Mobile Device only Buttons-->
|
||||
<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"
|
||||
value="Move" title="Move/Drag Viewport"
|
||||
title="Move/Drag Viewport"
|
||||
onclick="UI.setViewDrag();">
|
||||
<div id="noVNC_mobile_buttons">
|
||||
<input type="button" class="noVNC_status_button"
|
||||
id="noVNC_mouse_button0" value=" "
|
||||
<input type="image" src="images/nobutton_mouse.png"
|
||||
class="noVNC_status_button"
|
||||
id="noVNC_mouse_button0"
|
||||
onclick="UI.setMouseButton(1);">
|
||||
<input type="button" class="noVNC_status_button"
|
||||
id="noVNC_mouse_button1" value="L"
|
||||
<input type="image" src="images/left_mouse.png"
|
||||
class="noVNC_status_button"
|
||||
id="noVNC_mouse_button1"
|
||||
onclick="UI.setMouseButton(2);">
|
||||
<input type="button" class="noVNC_status_button"
|
||||
id="noVNC_mouse_button2" value="M"
|
||||
<input type="image" src="images/middle_mouse.png"
|
||||
class="noVNC_status_button"
|
||||
id="noVNC_mouse_button2"
|
||||
onclick="UI.setMouseButton(4);">
|
||||
<input type="button" class="noVNC_status_button"
|
||||
id="noVNC_mouse_button4" value="R"
|
||||
<input type="image" src="images/right_mouse.png"
|
||||
class="noVNC_status_button"
|
||||
id="noVNC_mouse_button4"
|
||||
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"
|
||||
value="Keyboard" title="Show Keyboard"
|
||||
onclick="UI.showKeyboard()"/>
|
||||
<input type="url"
|
||||
autocapitalize="off" autocorrect="off"
|
||||
id="keyboardinput" class="noVNC_status_button"
|
||||
onKeyDown="onKeyDown(event);"/>
|
||||
onKeyDown="onKeyDown(event);" onblur="UI.keyInputBlur();"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--noVNC Buttons-->
|
||||
<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"
|
||||
onclick="UI.sendCtrlAltDel();" />
|
||||
<input type="image" src="images/clipboard.png"
|
||||
<input type="image" src="images/clipboard_sml.png"
|
||||
id="clipboardButton" class="noVNC_status_button"
|
||||
value="Clipboard" title="Clipboard"
|
||||
onclick="UI.toggleClipboardPanel();" />
|
||||
<input type="image" src="images/settings.png"
|
||||
<input type="image" src="images/settings_sml.png"
|
||||
id="settingsButton" class="noVNC_status_button"
|
||||
value="Settings" title="Settings"
|
||||
onclick="UI.toggleSettingsPanel();" />
|
||||
<input type="image" src="images/connect.png"
|
||||
id="connectButton" class="noVNC_status_button"
|
||||
<input type="image" src="images/connect_sml.png"
|
||||
id="connectButton" class="noVNC_status_button_selected"
|
||||
value="Connect" title="Connect"
|
||||
onclick="UI.toggleConnectPanel()" />
|
||||
<input type="image" src="images/disconnect.png"
|
||||
<input type="image" src="images/disconnect_sml.png"
|
||||
id="disconnectButton" class="noVNC_status_button"
|
||||
value="Disconnect" title="Disconnect"
|
||||
onclick="UI.disconnect()" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue