diff --git a/app/styles/base.css b/app/styles/base.css index df10c7df..179a20b7 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -142,9 +142,14 @@ input[type=button]:active, select:active { position: fixed; z-index: 2; + transition: 0.5s ease-in-out; + /* Edge misrenders animations wihthout this */ transform: translateX(0); } +:root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle { + opacity: 0.8; +} #noVNC_control_bar { position: relative; diff --git a/app/ui.js b/app/ui.js index 27187fb1..6e2ff03f 100644 --- a/app/ui.js +++ b/app/ui.js @@ -41,6 +41,7 @@ var UI; resizeTimeout: null, statusTimeout: null, hideKeyboardTimeout: null, + controlbarTimeout: null, keyboardVisible: false, @@ -188,6 +189,15 @@ var UI; }, addControlbarHandlers: function() { + document.getElementById("noVNC_control_bar") + .addEventListener('mousemove', UI.activateControlbar); + document.getElementById("noVNC_control_bar") + .addEventListener('mouseup', UI.activateControlbar); + document.getElementById("noVNC_control_bar") + .addEventListener('mousedown', UI.activateControlbar); + document.getElementById("noVNC_control_bar") + .addEventListener('keypress', UI.activateControlbar); + document.getElementById("noVNC_view_drag_button") .addEventListener('click', UI.toggleViewDrag); document.getElementById("noVNC_send_ctrl_alt_del_button") @@ -213,6 +223,15 @@ var UI; document.getElementById("noVNC_keyboardinput") .addEventListener('submit', function () { return false; }); + document.getElementById("noVNC_control_bar") + .addEventListener('touchstart', UI.activateControlbar); + document.getElementById("noVNC_control_bar") + .addEventListener('touchmove', UI.activateControlbar); + document.getElementById("noVNC_control_bar") + .addEventListener('touchend', UI.activateControlbar); + document.getElementById("noVNC_control_bar") + .addEventListener('input', UI.activateControlbar); + window.addEventListener('load', UI.keyboardinputReset); }, @@ -441,6 +460,20 @@ var UI; document.getElementById('noVNC_status').classList.remove("noVNC_open"); }, + activateControlbar: function() { + clearTimeout(UI.controlbarTimeout); + // We manipulate the anchor instead of the actual control + // bar in order to avoid creating new a stacking group + document.getElementById('noVNC_control_bar_anchor') + .classList.remove("noVNC_idle"); + UI.controlbarTimeout = window.setTimeout(UI.idleControlbar, 2000); + }, + + idleControlbar: function() { + document.getElementById('noVNC_control_bar_anchor') + .classList.add("noVNC_idle"); + }, + /* ------^------- * /VISUAL * ==============