diff options
author | samhed <samuel@cendio.se> | 2016-08-25 14:41:53 +0200 |
---|---|---|
committer | Pierre Ossman <ossman@cendio.se> | 2016-09-20 15:36:38 +0200 |
commit | a49d92984608959620dc9c35d3c4739a0929715d (patch) | |
tree | 3413305291b70425c3633a832882711fb988f2fb | |
parent | e40978c7fcd5f9b2e4c07bd216cb225ba89a0691 (diff) | |
download | novnc-a49d92984608959620dc9c35d3c4739a0929715d.tar.gz |
Harmonise CSS names
Follow the same naming convention for all CSS ids and classes.
-rw-r--r-- | app/styles/base.css | 40 | ||||
-rw-r--r-- | app/styles/black.css | 4 | ||||
-rw-r--r-- | app/ui.js | 110 | ||||
-rw-r--r-- | vnc.html | 44 |
4 files changed, 104 insertions, 94 deletions
diff --git a/app/styles/base.css b/app/styles/base.css index 4336375..d1d83a3 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -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 { diff --git a/app/styles/black.css b/app/styles/black.css index 7788f7d..9a3d5d2 100644 --- a/app/styles/black.css +++ b/app/styles/black.css @@ -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+ */ @@ -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; } }, @@ -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> |