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

Harmonise CSS names 

Follow the same naming convention for all CSS ids and classes.
This commit is contained in:
samhed 2016-08-25 14:41:53 +02:00 committed by Pierre Ossman
parent e40978c7fc
commit a49d929846
4 changed files with 104 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/styles/base.css
View File

@ -42,7 +42,7 @@ html {
} }
/* General button style */ /* General button style */
.noVNC_status_button { .noVNC_button {
padding: 4px 4px; padding: 4px 4px;
vertical-align: middle; vertical-align: middle;
border:1px solid #869dbc; border:1px solid #869dbc;
@ -60,7 +60,7 @@ html {
/*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
font-size: 12px; font-size: 12px;
} }
.noVNC_status_button_selected { .noVNC_button_selected {
padding: 4px 4px; padding: 4px 4px;
vertical-align: middle; vertical-align: middle;
border:1px solid #4366a9; border:1px solid #4366a9;
@ -76,10 +76,10 @@ html {
background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */ background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
/*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
} }
.noVNC_status_button:disabled { .noVNC_button:disabled {
opacity: 0.4; opacity: 0.4;
} }
.noVNC_status_button.noVNC_hidden { .noVNC_button.noVNC_hidden {
display: none; display: none;
} }
@ -134,7 +134,7 @@ html {
ime-mode: disabled; ime-mode: disabled;
} }
#noVNC_toggleExtraKeys_button { #noVNC_toggle_extra_keys_button {
display: none; display: none;
} }
@ -148,16 +148,16 @@ html {
#noVNC_extra_keys.noVNC_hidden { #noVNC_extra_keys.noVNC_hidden {
display: none; display: none;
} }
#noVNC_toggleCtrl_button { #noVNC_toggle_ctrl_button {
display: inline; display: inline;
} }
#noVNC_toggleAlt_button { #noVNC_toggle_alt_button {
display: inline; display: inline;
} }
#noVNC_sendTab_button { #noVNC_send_tab_button {
display: inline; display: inline;
} }
#noVNC_sendEsc_button { #noVNC_send_esc_button {
display: inline; display: inline;
} }
#noVNC_modifiers { #noVNC_modifiers {
@ -270,20 +270,20 @@ html {
} }
/* Connection Controls */ /* Connection Controls */
#noVNC_controls { #noVNC_connect_controls {
top: 73px; top: 73px;
right: 12px; right: 12px;
position: fixed; position: fixed;
} }
#noVNC_controls:after { #noVNC_connect_controls:after {
right:15px; right:15px;
} }
#noVNC_controls ul { #noVNC_connect_controls ul {
list-style: none; list-style: none;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
#noVNC_controls li { #noVNC_connect_controls li {
padding-bottom:8px; padding-bottom:8px;
} }
#noVNC_setting_host { #noVNC_setting_host {
@ -421,7 +421,7 @@ html {
#noVNC_logo { #noVNC_logo {
font-size: 150px; font-size: 150px;
} }
.noVNC_status_button { .noVNC_button {
font-size: 10px; font-size: 10px;
} }
.noVNC_buttons_left { .noVNC_buttons_left {
@ -431,7 +431,7 @@ html {
padding-right: 0px; padding-right: 0px;
} }
/* collapse the extra keys on lower resolutions */ /* collapse the extra keys on lower resolutions */
#noVNC_toggleExtraKeys_button { #noVNC_toggle_extra_keys_button {
display: inline; display: inline;
} }
#noVNC_modifiers { #noVNC_modifiers {
@ -440,22 +440,22 @@ html {
#noVNC_modifiers.noVNC_open { #noVNC_modifiers.noVNC_open {
display: inline; display: inline;
} }
#noVNC_toggleCtrl_button { #noVNC_toggle_ctrl_button {
position: absolute; position: absolute;
top: 30px; top: 30px;
left: 0px; left: 0px;
} }
#noVNC_toggleAlt_button { #noVNC_toggle_alt_button {
position: absolute; position: absolute;
top: 65px; top: 65px;
left: 0px; left: 0px;
} }
#noVNC_sendTab_button { #noVNC_send_tab_button {
position: absolute; position: absolute;
top: 100px; top: 100px;
left: 0px; left: 0px;
} }
#noVNC_sendEsc_button { #noVNC_send_esc_button {
position: absolute; position: absolute;
top: 135px; top: 135px;
left: 0px; left: 0px;
@ -472,7 +472,7 @@ html {
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
.noVNC_status_button { .noVNC_button {
font-size: 9px; font-size: 9px;
} }
#noVNC_clipboard_text { #noVNC_clipboard_text {

4
app/styles/black.css
View File

@ -44,7 +44,7 @@
color:#fff; color:#fff;
} }
.noVNC_status_button { .noVNC_button {
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;
border:1px solid #4c4c4c; border:1px solid #4c4c4c;
@ -59,7 +59,7 @@
background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */ background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
} }
.noVNC_status_button_selected { .noVNC_button_selected {
background: #9dd53a; /* Old browsers */ background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ 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-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */

110
app/ui.js
View File

@ -197,7 +197,7 @@ var UI;
addControlbarHandlers: function() { addControlbarHandlers: function() {
document.getElementById("noVNC_view_drag_button") document.getElementById("noVNC_view_drag_button")
.addEventListener('click', UI.toggleViewDrag); .addEventListener('click', UI.toggleViewDrag);
document.getElementById("noVNC_sendCtrlAltDel_button") document.getElementById("noVNC_send_ctrl_alt_del_button")
.addEventListener('click', UI.sendCtrlAltDel); .addEventListener('click', UI.sendCtrlAltDel);
document.getElementById("noVNC_status") document.getElementById("noVNC_status")
.addEventListener('click', UI.popupStatus); .addEventListener('click', UI.popupStatus);
@ -226,31 +226,31 @@ var UI;
window.addEventListener('load', UI.keyboardinputReset); window.addEventListener('load', UI.keyboardinputReset);
document.getElementById("noVNC_toggleExtraKeys_button") document.getElementById("noVNC_toggle_extra_keys_button")
.addEventListener('click', UI.toggleExtraKeys); .addEventListener('click', UI.toggleExtraKeys);
document.getElementById("noVNC_toggleCtrl_button") document.getElementById("noVNC_toggle_ctrl_button")
.addEventListener('click', UI.toggleCtrl); .addEventListener('click', UI.toggleCtrl);
document.getElementById("noVNC_toggleAlt_button") document.getElementById("noVNC_toggle_alt_button")
.addEventListener('click', UI.toggleAlt); .addEventListener('click', UI.toggleAlt);
document.getElementById("noVNC_sendTab_button") document.getElementById("noVNC_send_tab_button")
.addEventListener('click', UI.sendTab); .addEventListener('click', UI.sendTab);
document.getElementById("noVNC_sendEsc_button") document.getElementById("noVNC_send_esc_button")
.addEventListener('click', UI.sendEsc); .addEventListener('click', UI.sendEsc);
}, },
addXvpHandlers: function() { addXvpHandlers: function() {
document.getElementById("noVNC_xvpShutdown_button") document.getElementById("noVNC_xvp_shutdown_button")
.addEventListener('click', function() { UI.rfb.xvpShutdown(); }); .addEventListener('click', function() { UI.rfb.xvpShutdown(); });
document.getElementById("noVNC_xvpReboot_button") document.getElementById("noVNC_xvp_reboot_button")
.addEventListener('click', function() { UI.rfb.xvpReboot(); }); .addEventListener('click', function() { UI.rfb.xvpReboot(); });
document.getElementById("noVNC_xvpReset_button") document.getElementById("noVNC_xvp_reset_button")
.addEventListener('click', function() { UI.rfb.xvpReset(); }); .addEventListener('click', function() { UI.rfb.xvpReset(); });
document.getElementById("noVNC_toggleXvp_button") document.getElementById("noVNC_xvp_button")
.addEventListener('click', UI.toggleXvpPanel); .addEventListener('click', UI.toggleXvpPanel);
}, },
addConnectionControlHandlers: function() { addConnectionControlHandlers: function() {
document.getElementById("noVNC_connectPanel_button") document.getElementById("noVNC_connect_controls_button")
.addEventListener('click', UI.toggleConnectPanel); .addEventListener('click', UI.toggleConnectPanel);
document.getElementById("noVNC_disconnect_button") document.getElementById("noVNC_disconnect_button")
.addEventListener('click', UI.disconnect); .addEventListener('click', UI.disconnect);
@ -385,7 +385,7 @@ var UI;
.classList.remove("noVNC_hidden"); .classList.remove("noVNC_hidden");
document.getElementById('noVNC_extra_keys') document.getElementById('noVNC_extra_keys')
.classList.remove("noVNC_hidden"); .classList.remove("noVNC_hidden");
document.getElementById('noVNC_sendCtrlAltDel_button') document.getElementById('noVNC_send_ctrl_alt_del_button')
.classList.remove("noVNC_hidden"); .classList.remove("noVNC_hidden");
} else { } else {
document.getElementById('noVNC_logo') document.getElementById('noVNC_logo')
@ -399,7 +399,7 @@ var UI;
.classList.add("noVNC_hidden"); .classList.add("noVNC_hidden");
document.getElementById('noVNC_extra_keys') document.getElementById('noVNC_extra_keys')
.classList.add("noVNC_hidden"); .classList.add("noVNC_hidden");
document.getElementById('noVNC_sendCtrlAltDel_button') document.getElementById('noVNC_send_ctrl_alt_del_button')
.classList.add("noVNC_hidden"); .classList.add("noVNC_hidden");
UI.updateXvpButton(0); UI.updateXvpButton(0);
} }
@ -412,7 +412,7 @@ var UI;
case 'fatal': case 'fatal':
case 'failed': case 'failed':
case 'disconnected': case 'disconnected':
document.getElementById('noVNC_connectPanel_button') document.getElementById('noVNC_connect_controls_button')
.classList.remove("noVNC_hidden"); .classList.remove("noVNC_hidden");
document.getElementById('noVNC_disconnect_button') document.getElementById('noVNC_disconnect_button')
.classList.add("noVNC_hidden"); .classList.add("noVNC_hidden");
@ -420,13 +420,13 @@ var UI;
UI.toggleConnectPanel(); UI.toggleConnectPanel();
break; break;
case 'loaded': case 'loaded':
document.getElementById('noVNC_connectPanel_button') document.getElementById('noVNC_connect_controls_button')
.classList.remove("noVNC_hidden"); .classList.remove("noVNC_hidden");
document.getElementById('noVNC_disconnect_button') document.getElementById('noVNC_disconnect_button')
.classList.add("noVNC_hidden"); .classList.add("noVNC_hidden");
break; break;
default: default:
document.getElementById('noVNC_connectPanel_button') document.getElementById('noVNC_connect_controls_button')
.classList.add("noVNC_hidden"); .classList.add("noVNC_hidden");
document.getElementById('noVNC_disconnect_button') document.getElementById('noVNC_disconnect_button')
.classList.remove("noVNC_hidden"); .classList.remove("noVNC_hidden");
@ -592,7 +592,7 @@ var UI;
document.getElementById('noVNC_settings') document.getElementById('noVNC_settings')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
document.getElementById('noVNC_settings_button') document.getElementById('noVNC_settings_button')
.className = "noVNC_status_button_selected"; .className = "noVNC_button_selected";
UI.settingsOpen = true; UI.settingsOpen = true;
}, },
@ -601,7 +601,7 @@ var UI;
document.getElementById('noVNC_settings') document.getElementById('noVNC_settings')
.classList.remove("noVNC_open"); .classList.remove("noVNC_open");
document.getElementById('noVNC_settings_button') document.getElementById('noVNC_settings_button')
.className = "noVNC_status_button"; .className = "noVNC_button";
UI.settingsOpen = false; UI.settingsOpen = false;
}, },
@ -659,14 +659,14 @@ var UI;
if (UI.xvpOpen === true) { if (UI.xvpOpen === true) {
document.getElementById('noVNC_xvp') document.getElementById('noVNC_xvp')
.classList.remove("noVNC_open"); .classList.remove("noVNC_open");
document.getElementById('noVNC_toggleXvp_button') document.getElementById('noVNC_xvp_button')
.className = "noVNC_status_button"; .className = "noVNC_button";
UI.xvpOpen = false; UI.xvpOpen = false;
} else { } else {
document.getElementById('noVNC_xvp') document.getElementById('noVNC_xvp')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
document.getElementById('noVNC_toggleXvp_button') document.getElementById('noVNC_xvp_button')
.className = "noVNC_status_button_selected"; .className = "noVNC_button_selected";
UI.xvpOpen = true; UI.xvpOpen = true;
} }
}, },
@ -674,10 +674,10 @@ var UI;
// Disable/enable XVP button // Disable/enable XVP button
updateXvpButton: function(ver) { updateXvpButton: function(ver) {
if (ver >= 1) { if (ver >= 1) {
document.getElementById('noVNC_toggleXvp_button') document.getElementById('noVNC_xvp_button')
.classList.remove("noVNC_hidden"); .classList.remove("noVNC_hidden");
} else { } else {
document.getElementById('noVNC_toggleXvp_button') document.getElementById('noVNC_xvp_button')
.classList.add("noVNC_hidden"); .classList.add("noVNC_hidden");
// Close XVP panel if open // Close XVP panel if open
if (UI.xvpOpen === true) { if (UI.xvpOpen === true) {
@ -712,13 +712,13 @@ var UI;
document.getElementById('noVNC_clipboard') document.getElementById('noVNC_clipboard')
.classList.remove("noVNC_open"); .classList.remove("noVNC_open");
document.getElementById('noVNC_clipboard_button') document.getElementById('noVNC_clipboard_button')
.className = "noVNC_status_button"; .className = "noVNC_button";
UI.clipboardOpen = false; UI.clipboardOpen = false;
} else { } else {
document.getElementById('noVNC_clipboard') document.getElementById('noVNC_clipboard')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
document.getElementById('noVNC_clipboard_button') document.getElementById('noVNC_clipboard_button')
.className = "noVNC_status_button_selected"; .className = "noVNC_button_selected";
UI.clipboardOpen = true; UI.clipboardOpen = true;
} }
}, },
@ -753,7 +753,8 @@ var UI;
if (UI.settingsOpen === true) { if (UI.settingsOpen === true) {
UI.settingsApply(); UI.settingsApply();
UI.closeSettingsMenu(); UI.closeSettingsMenu();
document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button"; document.getElementById('noVNC_connect_controls_button')
.className = "noVNC_button";
} }
// Close clipboard panel if open // Close clipboard panel if open
if (UI.clipboardOpen === true) { if (UI.clipboardOpen === true) {
@ -766,20 +767,20 @@ var UI;
// Toggle Connection Panel // Toggle Connection Panel
if (UI.connSettingsOpen === true) { if (UI.connSettingsOpen === true) {
document.getElementById('noVNC_controls') document.getElementById('noVNC_connect_controls')
.classList.remove("noVNC_open"); .classList.remove("noVNC_open");
document.getElementById('noVNC_connectPanel_button') document.getElementById('noVNC_connect_controls_button')
.className = "noVNC_status_button"; .className = "noVNC_button";
UI.connSettingsOpen = false; UI.connSettingsOpen = false;
UI.saveSetting('host'); UI.saveSetting('host');
UI.saveSetting('port'); UI.saveSetting('port');
UI.saveSetting('token'); UI.saveSetting('token');
//UI.saveSetting('password'); //UI.saveSetting('password');
} else { } else {
document.getElementById('noVNC_controls') document.getElementById('noVNC_connect_controls')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
document.getElementById('noVNC_connectPanel_button') document.getElementById('noVNC_connect_controls_button')
.className = "noVNC_status_button_selected"; .className = "noVNC_button_selected";
UI.connSettingsOpen = true; UI.connSettingsOpen = true;
document.getElementById('noVNC_setting_host').focus(); document.getElementById('noVNC_setting_host').focus();
} }
@ -879,9 +880,11 @@ var UI;
document.mozFullScreenElement || // currently working methods document.mozFullScreenElement || // currently working methods
document.webkitFullscreenElement || document.webkitFullscreenElement ||
document.msFullscreenElement ) { document.msFullscreenElement ) {
document.getElementById('noVNC_fullscreen_button').className = "noVNC_status_button_selected"; document.getElementById('noVNC_fullscreen_button')
.className = "noVNC_button_selected";
} else { } else {
document.getElementById('noVNC_fullscreen_button').className = "noVNC_status_button"; document.getElementById('noVNC_fullscreen_button')
.className = "noVNC_button";
} }
}, },
@ -1103,9 +1106,9 @@ var UI;
} }
if (UI.rfb.get_viewportDrag()) { if (UI.rfb.get_viewportDrag()) {
viewDragButton.className = "noVNC_status_button_selected"; viewDragButton.className = "noVNC_button_selected";
} else { } else {
viewDragButton.className = "noVNC_status_button"; viewDragButton.className = "noVNC_button";
} }
// Different behaviour for touch vs non-touch // Different behaviour for touch vs non-touch
@ -1146,16 +1149,17 @@ var UI;
try { kbi.setSelectionRange(l, l); } // Move the caret to the end try { kbi.setSelectionRange(l, l); } // Move the caret to the end
catch (err) {} // setSelectionRange is undefined in Google Chrome catch (err) {} // setSelectionRange is undefined in Google Chrome
UI.keyboardVisible = true; UI.keyboardVisible = true;
skb.className = "noVNC_status_button_selected"; skb.className = "noVNC_button_selected";
} else if(UI.keyboardVisible === true) { } else if(UI.keyboardVisible === true) {
kbi.blur(); kbi.blur();
skb.className = "noVNC_status_button"; skb.className = "noVNC_button";
UI.keyboardVisible = false; UI.keyboardVisible = false;
} }
}, },
hideKeyboard: function() { hideKeyboard: function() {
document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button"; document.getElementById('noVNC_keyboard_button')
.className = "noVNC_button";
//Weird bug in iOS if you change keyboardVisible //Weird bug in iOS if you change keyboardVisible
//here it does not actually occur so next time //here it does not actually occur so next time
//you click keyboard icon it doesnt work. //you click keyboard icon it doesnt work.
@ -1168,10 +1172,12 @@ var UI;
clearTimeout(UI.hideKeyboardTimeout); clearTimeout(UI.hideKeyboardTimeout);
if(UI.keyboardVisible === true) { if(UI.keyboardVisible === true) {
document.getElementById('noVNC_keyboardinput').focus(); document.getElementById('noVNC_keyboardinput').focus();
document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button_selected"; document.getElementById('noVNC_keyboard_button')
.className = "noVNC_button_selected";
} else if(UI.keyboardVisible === false) { } else if(UI.keyboardVisible === false) {
document.getElementById('noVNC_keyboardinput').blur(); document.getElementById('noVNC_keyboardinput').blur();
document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button"; document.getElementById('noVNC_keyboard_button')
.className = "noVNC_button";
} }
}, },
@ -1257,14 +1263,14 @@ var UI;
if(UI.extraKeysVisible === false) { if(UI.extraKeysVisible === false) {
document.getElementById('noVNC_modifiers') document.getElementById('noVNC_modifiers')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
document.getElementById('noVNC_toggleExtraKeys_button') document.getElementById('noVNC_toggle_extra_keys_button')
.className = "noVNC_status_button_selected"; .className = "noVNC_button_selected";
UI.extraKeysVisible = true; UI.extraKeysVisible = true;
} else if(UI.extraKeysVisible === true) { } else if(UI.extraKeysVisible === true) {
document.getElementById('noVNC_modifiers') document.getElementById('noVNC_modifiers')
.classList.remove("noVNC_open"); .classList.remove("noVNC_open");
document.getElementById('noVNC_toggleExtraKeys_button') document.getElementById('noVNC_toggle_extra_keys_button')
.className = "noVNC_status_button"; .className = "noVNC_button";
UI.extraKeysVisible = false; UI.extraKeysVisible = false;
} }
}, },
@ -1283,11 +1289,13 @@ var UI;
UI.keepKeyboard(); UI.keepKeyboard();
if(UI.ctrlOn === false) { if(UI.ctrlOn === false) {
UI.rfb.sendKey(KeyTable.XK_Control_L, true); UI.rfb.sendKey(KeyTable.XK_Control_L, true);
document.getElementById('noVNC_toggleCtrl_button').className = "noVNC_status_button_selected"; document.getElementById('noVNC_toggle_ctrl_button')
.className = "noVNC_button_selected";
UI.ctrlOn = true; UI.ctrlOn = true;
} else if(UI.ctrlOn === true) { } else if(UI.ctrlOn === true) {
UI.rfb.sendKey(KeyTable.XK_Control_L, false); UI.rfb.sendKey(KeyTable.XK_Control_L, false);
document.getElementById('noVNC_toggleCtrl_button').className = "noVNC_status_button"; document.getElementById('noVNC_toggle_ctrl_button')
.className = "noVNC_button";
UI.ctrlOn = false; UI.ctrlOn = false;
} }
}, },
@ -1296,11 +1304,13 @@ var UI;
UI.keepKeyboard(); UI.keepKeyboard();
if(UI.altOn === false) { if(UI.altOn === false) {
UI.rfb.sendKey(KeyTable.XK_Alt_L, true); UI.rfb.sendKey(KeyTable.XK_Alt_L, true);
document.getElementById('noVNC_toggleAlt_button').className = "noVNC_status_button_selected"; document.getElementById('noVNC_toggle_alt_button')
.className = "noVNC_button_selected";
UI.altOn = true; UI.altOn = true;
} else if(UI.altOn === true) { } else if(UI.altOn === true) {
UI.rfb.sendKey(KeyTable.XK_Alt_L, false); UI.rfb.sendKey(KeyTable.XK_Alt_L, false);
document.getElementById('noVNC_toggleAlt_button').className = "noVNC_status_button"; document.getElementById('noVNC_toggle_alt_button')
.className = "noVNC_button";
UI.altOn = false; UI.altOn = false;
} }
}, },

44
vnc.html
View File

@ -56,21 +56,21 @@
<!-- Drag/Pan the viewport --> <!-- Drag/Pan the viewport -->
<input type="image" alt="viewport drag" src="app/images/drag.png" <input type="image" alt="viewport drag" src="app/images/drag.png"
id="noVNC_view_drag_button" class="noVNC_status_button noVNC_hidden" id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
title="Move/Drag Viewport" /> title="Move/Drag Viewport" />
<!--noVNC Touch Device only buttons--> <!--noVNC Touch Device only buttons-->
<div id="noVNC_mobile_buttons" class="noVNC_hidden"> <div id="noVNC_mobile_buttons" class="noVNC_hidden">
<input type="image" alt="No mousebutton" src="app/images/mouse_none.png" <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
id="noVNC_mouse_button0" class="noVNC_status_button" /> id="noVNC_mouse_button0" class="noVNC_button" />
<input type="image" alt="Left mousebutton" src="app/images/mouse_left.png" <input type="image" alt="Left mousebutton" src="app/images/mouse_left.png"
id="noVNC_mouse_button1" class="noVNC_status_button" /> id="noVNC_mouse_button1" class="noVNC_button" />
<input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.png" <input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.png"
id="noVNC_mouse_button2" class="noVNC_status_button" /> id="noVNC_mouse_button2" class="noVNC_button" />
<input type="image" alt="Right mousebutton" src="app/images/mouse_right.png" <input type="image" alt="Right mousebutton" src="app/images/mouse_right.png"
id="noVNC_mouse_button4" class="noVNC_status_button" /> id="noVNC_mouse_button4" class="noVNC_button" />
<input type="image" alt="Keyboard" src="app/images/keyboard.png" <input type="image" alt="Keyboard" src="app/images/keyboard.png"
id="noVNC_keyboard_button" class="noVNC_status_button" id="noVNC_keyboard_button" class="noVNC_button"
value="Keyboard" title="Show Keyboard" /> value="Keyboard" title="Show Keyboard" />
<!-- Note that Google Chrome on Android doesn't respect any of these, <!-- Note that Google Chrome on Android doesn't respect any of these,
html attributes which attempt to disable text suggestions on the html attributes which attempt to disable text suggestions on the
@ -81,16 +81,16 @@
mozactionhint="Enter"></textarea> mozactionhint="Enter"></textarea>
<div id="noVNC_extra_keys"> <div id="noVNC_extra_keys">
<input type="image" alt="Extra keys" src="app/images/toggleextrakeys.png" <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.png"
id="noVNC_toggleExtraKeys_button" class="noVNC_status_button" /> id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
<div id="noVNC_modifiers"> <div id="noVNC_modifiers">
<input type="image" alt="Ctrl" src="app/images/ctrl.png" <input type="image" alt="Ctrl" src="app/images/ctrl.png"
id="noVNC_toggleCtrl_button" class="noVNC_status_button" /> id="noVNC_toggle_ctrl_button" class="noVNC_button" />
<input type="image" alt="Alt" src="app/images/alt.png" <input type="image" alt="Alt" src="app/images/alt.png"
id="noVNC_toggleAlt_button" class="noVNC_status_button" /> id="noVNC_toggle_alt_button" class="noVNC_button" />
<input type="image" alt="Tab" src="app/images/tab.png" <input type="image" alt="Tab" src="app/images/tab.png"
id="noVNC_sendTab_button" class="noVNC_status_button" /> id="noVNC_send_tab_button" class="noVNC_button" />
<input type="image" alt="Esc" src="app/images/esc.png" <input type="image" alt="Esc" src="app/images/esc.png"
id="noVNC_sendEsc_button" class="noVNC_status_button" /> id="noVNC_send_esc_button" class="noVNC_button" />
</div> </div>
</div> </div>
</div> </div>
@ -101,22 +101,22 @@
<div class="noVNC_buttons_right"> <div class="noVNC_buttons_right">
<!-- Send Ctrl+Alt+Delete --> <!-- Send Ctrl+Alt+Delete -->
<input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png" <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
id="noVNC_sendCtrlAltDel_button" class="noVNC_status_button" id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
title="Send Ctrl-Alt-Del" /> title="Send Ctrl-Alt-Del" />
<!-- XVP Shutdown/Reboot --> <!-- XVP Shutdown/Reboot -->
<input type="image" alt="Shutdown/Reboot" src="app/images/power.png" <input type="image" alt="Shutdown/Reboot" src="app/images/power.png"
id="noVNC_toggleXvp_button" class="noVNC_status_button" id="noVNC_xvp_button" class="noVNC_button"
title="Shutdown/Reboot..." /> title="Shutdown/Reboot..." />
<div id="noVNC_xvp" class="noVNC_panel"> <div id="noVNC_xvp" class="noVNC_panel">
<input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" /> <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
<input type="button" id="noVNC_xvpReboot_button" value="Reboot" /> <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
<input type="button" id="noVNC_xvpReset_button" value="Reset" /> <input type="button" id="noVNC_xvp_reset_button" value="Reset" />
</div> </div>
<!-- Clipboard --> <!-- Clipboard -->
<input type="image" alt="Clipboard" src="app/images/clipboard.png" <input type="image" alt="Clipboard" src="app/images/clipboard.png"
id="noVNC_clipboard_button" class="noVNC_status_button" id="noVNC_clipboard_button" class="noVNC_button"
title="Clipboard" /> title="Clipboard" />
<div id="noVNC_clipboard" class="noVNC_panel"> <div id="noVNC_clipboard" class="noVNC_panel">
<textarea id="noVNC_clipboard_text" rows=5> <textarea id="noVNC_clipboard_text" rows=5>
@ -128,12 +128,12 @@
<!-- Toggle fullscreen --> <!-- Toggle fullscreen -->
<input type="image" alt="Fullscreen" src="app/images/fullscreen.png" <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
id="noVNC_fullscreen_button" class="noVNC_status_button noVNC_hidden" id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
title="Fullscreen" /> title="Fullscreen" />
<!-- Settings --> <!-- Settings -->
<input type="image" alt="Settings" src="app/images/settings.png" <input type="image" alt="Settings" src="app/images/settings.png"
id="noVNC_settings_button" class="noVNC_status_button" id="noVNC_settings_button" class="noVNC_button"
title="Settings" /> title="Settings" />
<div id="noVNC_settings" class="noVNC_panel"> <div id="noVNC_settings" class="noVNC_panel">
<ul> <ul>
@ -173,12 +173,12 @@
<!-- Connection Controls --> <!-- Connection Controls -->
<input type="image" alt="Connect" src="app/images/connect.png" <input type="image" alt="Connect" src="app/images/connect.png"
id="noVNC_connectPanel_button" class="noVNC_status_button" id="noVNC_connect_controls_button" class="noVNC_button"
title="Connect" /> title="Connect" />
<input type="image" alt="Disconnect" src="app/images/disconnect.png" <input type="image" alt="Disconnect" src="app/images/disconnect.png"
id="noVNC_disconnect_button" class="noVNC_status_button" id="noVNC_disconnect_button" class="noVNC_button"
title="Disconnect" /> title="Disconnect" />
<div id="noVNC_controls" class="noVNC_panel"> <div id="noVNC_connect_controls" class="noVNC_panel">
<ul> <ul>
<li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li> <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
<li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li> <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>