diff --git a/app/styles/base.css b/app/styles/base.css index a462eae6..ed77c6b9 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -222,11 +222,18 @@ input[type=button]:active, select:active { float: right; } +:root:not(.noVNC_connected) #noVNC_view_drag_button { + display: none; +} + /* noVNC Touch Device only buttons */ #noVNC_mobile_buttons { display: inline; } -#noVNC_mobile_buttons.noVNC_hidden { +:root:not(.noVNC_connected) #noVNC_mobile_buttons { + display: none; +} +:root:not(.noVNC_touch) #noVNC_mobile_buttons { display: none; } @@ -242,7 +249,7 @@ input[type=button]:active, select:active { ime-mode: disabled; } -#noVNC_toggle_extra_keys_button { +:root:not(.noVNC_connected) #noVNC_extra_keys { display: none; } @@ -280,7 +287,15 @@ input[type=button]:active, select:active { padding-left: 10px; } +/* Send Ctrl+Alt+Delete */ +:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button { + display: none; +} + /* XVP Shutdown/Reboot */ +:root:not(.noVNC_connected) #noVNC_xvp_button { + display: none; +} #noVNC_xvp { } #noVNC_xvp_buttons { @@ -288,6 +303,9 @@ input[type=button]:active, select:active { } /* Clipboard */ +:root:not(.noVNC_connected) #noVNC_clipboard_button { + display: none; +} #noVNC_clipboard { } #noVNC_clipboard_text { @@ -307,7 +325,11 @@ input[type=button]:active, select:active { } /* Connection Controls */ -#noVNC_connect_controls { +:root.noVNC_connected #noVNC_connect_controls_button { + display: none; +} +:root:not(.noVNC_connected) #noVNC_disconnect_button { + display: none; } #noVNC_connect_controls ul { list-style: none; @@ -440,7 +462,7 @@ input[type=button]:active, select:active { width: auto; height: auto; } -#noVNC_screen.noVNC_hidden { +:root:not(.noVNC_connected) #noVNC_screen { display: none; } @@ -480,7 +502,7 @@ input[type=button]:active, select:active { -1px 1px 0 #000, 1px 1px 0 #000; } -#noVNC_logo.noVNC_hidden { +:root.noVNC_connected #noVNC_logo { display: none; } diff --git a/app/ui.js b/app/ui.js index 4b34e243..6c09e150 100644 --- a/app/ui.js +++ b/app/ui.js @@ -66,12 +66,9 @@ var UI; UI.initSettings(); - // Show mouse selector buttons on touch screen devices + // Adapt the interface for touch screen devices if (UI.isTouchDevice) { - // Show mobile buttons - document.getElementById('noVNC_mobile_buttons') - .classList.remove("noVNC_hidden"); - UI.hideMouseButton(); + document.documentElement.classList.add("noVNC_touch"); // Remove the address bar setTimeout(function() { window.scrollTo(0, 1); }, 100); UI.forceSetting('clip', true); @@ -368,34 +365,11 @@ var UI; document.getElementById('noVNC_setting_repeaterID').disabled = connected; if (connected) { - document.getElementById('noVNC_logo') - .classList.add("noVNC_hidden"); - document.getElementById('noVNC_screen') - .classList.remove("noVNC_hidden"); + document.documentElement.classList.add("noVNC_connected"); UI.updateViewClip(); UI.setMouseButton(1); - document.getElementById('noVNC_clipboard_button') - .classList.remove("noVNC_hidden"); - document.getElementById('noVNC_keyboard_button') - .classList.remove("noVNC_hidden"); - document.getElementById('noVNC_extra_keys') - .classList.remove("noVNC_hidden"); - document.getElementById('noVNC_send_ctrl_alt_del_button') - .classList.remove("noVNC_hidden"); } else { - document.getElementById('noVNC_logo') - .classList.remove("noVNC_hidden"); - document.getElementById('noVNC_screen') - .classList.add("noVNC_hidden"); - UI.hideMouseButton(); - document.getElementById('noVNC_clipboard_button') - .classList.add("noVNC_hidden"); - document.getElementById('noVNC_keyboard_button') - .classList.add("noVNC_hidden"); - document.getElementById('noVNC_extra_keys') - .classList.add("noVNC_hidden"); - document.getElementById('noVNC_send_ctrl_alt_del_button') - .classList.add("noVNC_hidden"); + document.documentElement.classList.remove("noVNC_connected"); UI.updateXvpButton(0); } @@ -411,23 +385,11 @@ var UI; case 'fatal': case 'failed': case 'disconnected': - document.getElementById('noVNC_connect_controls_button') - .classList.remove("noVNC_hidden"); - document.getElementById('noVNC_disconnect_button') - .classList.add("noVNC_hidden"); UI.openConnectPanel(); break; case 'loaded': - document.getElementById('noVNC_connect_controls_button') - .classList.remove("noVNC_hidden"); - document.getElementById('noVNC_disconnect_button') - .classList.add("noVNC_hidden"); break; default: - document.getElementById('noVNC_connect_controls_button') - .classList.add("noVNC_hidden"); - document.getElementById('noVNC_disconnect_button') - .classList.remove("noVNC_hidden"); break; } @@ -1086,52 +1048,48 @@ var UI; updateViewDrag: function() { var clipping = false; + if (UI.rfb_state !== 'normal') return; + // Check if viewport drag is possible. It is only possible // if the remote display is clipping the client display. - if (UI.rfb_state === 'normal' && - UI.rfb.get_display().get_viewport() && + if (UI.rfb.get_display().get_viewport() && UI.rfb.get_display().clippingDisplay()) { clipping = true; } var viewDragButton = document.getElementById('noVNC_view_drag_button'); - if (UI.rfb_state !== 'normal') { - // Always hide when not connected - viewDragButton.classList.add("noVNC_hidden"); + if (!clipping && + UI.rfb.get_viewportDrag()) { + // The size of the remote display is the same or smaller + // than the client display. Make sure viewport drag isn't + // active when it can't be used. + UI.rfb.set_viewportDrag(false); + } + + if (UI.rfb.get_viewportDrag()) { + viewDragButton.classList.add("noVNC_selected"); } else { - if (!clipping && - UI.rfb.get_viewportDrag()) { - // The size of the remote display is the same or smaller - // than the client display. Make sure viewport drag isn't - // active when it can't be used. - UI.rfb.set_viewportDrag(false); - } + viewDragButton.classList.remove("noVNC_selected"); + } - if (UI.rfb.get_viewportDrag()) { - viewDragButton.classList.add("noVNC_selected"); - } else { - viewDragButton.classList.remove("noVNC_selected"); - } + // Different behaviour for touch vs non-touch + // The button is disabled instead of hidden on touch devices + if (UI.isTouchDevice) { + viewDragButton.classList.remove("noVNC_hidden"); - // Different behaviour for touch vs non-touch - // The button is disabled instead of hidden on touch devices - if (UI.isTouchDevice) { - viewDragButton.classList.remove("noVNC_hidden"); - - if (clipping) { - viewDragButton.disabled = false; - } else { - viewDragButton.disabled = true; - } - } else { + if (clipping) { viewDragButton.disabled = false; + } else { + viewDragButton.disabled = true; + } + } else { + viewDragButton.disabled = false; - if (clipping) { - viewDragButton.classList.remove("noVNC_hidden"); - } else { - viewDragButton.classList.add("noVNC_hidden"); - } + if (clipping) { + viewDragButton.classList.remove("noVNC_hidden"); + } else { + viewDragButton.classList.add("noVNC_hidden"); } } }, @@ -1329,10 +1287,6 @@ var UI; * MISC * ------v------*/ - hideMouseButton: function() { - UI.setMouseButton(-1); - }, - setMouseButton: function(num) { if (UI.rfb) { UI.rfb.get_mouse().set_touchButton(num); diff --git a/vnc.html b/vnc.html index 9a6aa29b..8b68ff50 100644 --- a/vnc.html +++ b/vnc.html @@ -60,7 +60,7 @@ title="Move/Drag Viewport" /> -
+
no
VNC -
+