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

4
app/styles/black.css
View File

@ -44,7 +44,7 @@
color:#fff;
}
.noVNC_status_button {
.noVNC_button {
font-size: 12px;
vertical-align: middle;
border:1px solid #4c4c4c;
@ -59,7 +59,7 @@
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: -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+ */

110
app/ui.js
View File

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

44
vnc.html
View File

@ -56,21 +56,21 @@
<!-- Drag/Pan the viewport -->
<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" />
<!--noVNC Touch Device only buttons-->
<div id="noVNC_mobile_buttons" class="noVNC_hidden">
<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"
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"
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"
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"
id="noVNC_keyboard_button" class="noVNC_status_button"
id="noVNC_keyboard_button" class="noVNC_button"
value="Keyboard" title="Show Keyboard" />
<!-- Note that Google Chrome on Android doesn't respect any of these,
html attributes which attempt to disable text suggestions on the
@ -81,16 +81,16 @@
mozactionhint="Enter"></textarea>
<div id="noVNC_extra_keys">
<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">
<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"
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"
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"
id="noVNC_sendEsc_button" class="noVNC_status_button" />
id="noVNC_send_esc_button" class="noVNC_button" />
</div>
</div>
</div>
@ -101,22 +101,22 @@
<div class="noVNC_buttons_right">
<!-- Send Ctrl+Alt+Delete -->
<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" />
<!-- XVP Shutdown/Reboot -->
<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..." />
<div id="noVNC_xvp" class="noVNC_panel">
<input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
<input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
<input type="button" id="noVNC_xvpReset_button" value="Reset" />
<input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
<input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
<input type="button" id="noVNC_xvp_reset_button" value="Reset" />
</div>
<!-- Clipboard -->
<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" />
<div id="noVNC_clipboard" class="noVNC_panel">
<textarea id="noVNC_clipboard_text" rows=5>
@ -128,12 +128,12 @@
<!-- Toggle fullscreen -->
<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" />
<!-- Settings -->
<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" />
<div id="noVNC_settings" class="noVNC_panel">
<ul>
@ -173,12 +173,12 @@
<!-- Connection Controls -->
<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" />
<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" />
<div id="noVNC_controls" class="noVNC_panel">
<div id="noVNC_connect_controls" class="noVNC_panel">
<ul>
<li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
<li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>