diff --git a/app/styles/base.css b/app/styles/base.css index 81c45169..96f830bb 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -97,6 +97,32 @@ input[type=button]:active, select:active { margin-top: 3px; } +/* ---------------------------------------- + * WebKit centering hacks + * ---------------------------------------- + */ + +.noVNC_center { + /* + * This is a workaround because webkit misrenders transforms and + * uses non-integer coordinates, resulting in blurry content. + * Ideally we'd use "top: 50%; transform: translateY(-50%);" on + * the objects instead. + */ + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} +.noVNC_center > * { + pointer-events: auto; +} + /* ---------------------------------------- * Control Bar * ---------------------------------------- @@ -367,6 +393,29 @@ input[type=button]:active, select:active { content: url("../images/warning.svg") " "; } +/* ---------------------------------------- + * Password Dialog + * ---------------------------------------- + */ + +#noVNC_password_dlg { + transform: translateY(-50px); +} +#noVNC_password_dlg.noVNC_open { + transform: translateY(0); +} +#noVNC_password_dlg ul { + list-style: none; + margin: 0px; + padding: 0px; +} +#noVNC_password_dlg li { + padding-bottom:8px; +} +#noVNC_password_input { + width: 150px; +} + /* ---------------------------------------- * Main Area * ---------------------------------------- diff --git a/app/ui.js b/app/ui.js index 9689852a..33e0e997 100644 --- a/app/ui.js +++ b/app/ui.js @@ -249,6 +249,9 @@ var UI; .addEventListener('click', UI.disconnect); document.getElementById("noVNC_connect_button") .addEventListener('click', UI.connect); + + document.getElementById("noVNC_password_button") + .addEventListener('click', UI.setPassword); }, addClipboardHandlers: function() { @@ -323,11 +326,11 @@ var UI; UI.showStatus(msg, 'normal'); break; case 'password': - UI.toggleConnectPanel(); - - document.getElementById('noVNC_connect_button').value = "Send Password"; - document.getElementById('noVNC_connect_button').onclick = UI.setPassword; - document.getElementById('noVNC_setting_password').focus(); + document.getElementById('noVNC_password_dlg') + .classList.add('noVNC_open'); + setTimeout(function () { + document.getElementById(('noVNC_password_input').focus()); + }, 100); UI.showStatus(msg, 'warn'); break; @@ -397,6 +400,10 @@ var UI; // It is enabled (toggled) by direct click on the button UI.setViewDrag(false); + // State change also closes the password dialog + document.getElementById('noVNC_password_dlg') + .classList.remove('noVNC_open'); + switch (UI.rfb_state) { case 'fatal': case 'failed': @@ -827,12 +834,9 @@ var UI; }, setPassword: function() { - UI.rfb.sendPassword(document.getElementById('noVNC_setting_password').value); - //Reset connect button. - document.getElementById('noVNC_connect_button').value = "Connect"; - document.getElementById('noVNC_connect_button').onclick = UI.connect; - //Hide connection panel. - UI.toggleConnectPanel(); + UI.rfb.sendPassword(document.getElementById('noVNC_password_input').value); + document.getElementById('noVNC_password_dlg') + .classList.remove('noVNC_open'); return false; }, diff --git a/vnc.html b/vnc.html index a660988b..9c677eec 100644 --- a/vnc.html +++ b/vnc.html @@ -185,6 +185,16 @@ + +