diff --git a/app/images/expander.svg b/app/images/expander.svg new file mode 100644 index 000000000..e1635358b --- /dev/null +++ b/app/images/expander.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/app/styles/base.css b/app/styles/base.css index f4ee929df..6f6afb753 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -7,6 +7,20 @@ * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). */ +/* + * Z index layers: + * + * 0: Main screen + * 10: Control bar + * 50: Transition blocker + * 60: Connection popups + * 100: Status bar + * ... + * 1000: Javascript crash + * ... + * 10000: Max (used for polyfills) + */ + body { margin:0; padding:0; @@ -172,6 +186,15 @@ input[type=button]:active, select:active { pointer-events: auto; } +/* ---------------------------------------- + * Layering + * ---------------------------------------- + */ + +.noVNC_connect_layer { + z-index: 60; +} + /* ---------------------------------------- * Fallback error * ---------------------------------------- @@ -179,7 +202,7 @@ input[type=button]:active, select:active { #noVNC_fallback_error { position: fixed; - z-index: 3; + z-index: 1000; left: 50%; transform: translate(-50%, -50px); transition: 0.5s ease-in-out; @@ -234,7 +257,7 @@ input[type=button]:active, select:active { #noVNC_control_bar_anchor { /* The anchor is needed to get z-stacking to work */ position: fixed; - z-index: 2; + z-index: 10; transition: 0.5s ease-in-out; @@ -294,7 +317,7 @@ input[type=button]:active, select:active { transform: translateY(35px); width: calc(100% + 30px); height: 50px; - z-index: -2; + z-index: -1; cursor: pointer; border-radius: 5px; background-color: rgb(83, 99, 122); @@ -362,8 +385,6 @@ input[type=button]:active, select:active { margin: 10px 0; vertical-align: middle; border:1px solid rgba(255, 255, 255, 0.2); - -webkit-border-radius: 6px; - -moz-border-radius: 6px; border-radius: 6px; } .noVNC_button.noVNC_selected { @@ -407,8 +428,6 @@ input[type=button]:active, select:active { padding: 15px; background: #fff; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; color: #000; border: 2px solid #E0E0E0; @@ -437,6 +456,7 @@ input[type=button]:active, select:active { .noVNC_panel label { display: block; + white-space: nowrap; } .noVNC_panel .noVNC_heading { @@ -458,6 +478,36 @@ input[type=button]:active, select:active { float: right; } +/* Expanders */ +.noVNC_expander { + cursor: pointer; +} +.noVNC_expander::before { + content: url("../images/expander.svg"); + display: inline-block; + margin-right: 5px; + transition: 0.2s ease-in-out; +} +.noVNC_expander.noVNC_open::before { + transform: rotateZ(90deg); +} +.noVNC_expander ~ * { + margin: 5px; + margin-left: 10px; + padding: 5px; + background: rgba(0, 0, 0, 0.05); + border-radius: 5px; +} +.noVNC_expander:not(.noVNC_open) ~ * { + display: none; +} + +/* Control bar content */ + +#noVNC_control_bar .noVNC_logo { + font-size: 13px; +} + :root:not(.noVNC_connected) #noVNC_view_drag_button { display: none; } @@ -528,25 +578,17 @@ input[type=button]:active, select:active { margin: 0px; padding: 0px; } +#noVNC_setting_port { + width: 80px; +} #noVNC_setting_path { width: 100px; } /* Connection 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; - margin: 0px; - padding: 0px; -} -#noVNC_setting_port { - width: 80px; -} /* ---------------------------------------- * Status Dialog @@ -558,7 +600,7 @@ input[type=button]:active, select:active { top: 0; left: 0; width: 100%; - z-index: 3; + z-index: 100; transform: translateY(-100%); transition: 0.5s ease-in-out; @@ -612,12 +654,87 @@ input[type=button]:active, select:active { content: url("../images/warning.svg") " "; } +/* ---------------------------------------- + * Connect Dialog + * ---------------------------------------- + */ + +#noVNC_connect_dlg { + transition: 0.5s ease-in-out; + + transform: scale(0, 0); + visibility: hidden; + opacity: 0; +} +#noVNC_connect_dlg.noVNC_open { + transform: scale(1, 1); + visibility: visible; + opacity: 1; +} +#noVNC_connect_dlg .noVNC_logo { + transition: 0.5s ease-in-out; + padding: 10px; + margin-bottom: 10px; + + font-size: 80px; + text-align: center; + + border-radius: 5px; +} +@media (max-width: 440px) { + #noVNC_connect_dlg { + max-width: calc(100vw - 100px); + } + #noVNC_connect_dlg .noVNC_logo { + font-size: calc(25vw - 30px); + } +} +#noVNC_connect_button { + cursor: pointer; + + padding: 10px; + + color: white; + background-color: rgb(110, 132, 163); + border-radius: 12px; + + text-align: center; + font-size: 20px; + + box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); +} +#noVNC_connect_button div { + margin: 2px; + padding: 5px 30px; + border: 1px solid rgb(83, 99, 122); + border-bottom-width: 2px; + border-radius: 5px; + background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147)); + + /* This avoids it jumping around when :active */ + vertical-align: middle; +} +#noVNC_connect_button div:active { + border-bottom-width: 1px; + margin-top: 3px; +} +:root:not(.noVNC_touch) #noVNC_connect_button div:hover { + background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155)); +} + +#noVNC_connect_button img { + vertical-align: bottom; + height: 1.3em; +} + /* ---------------------------------------- * Password Dialog * ---------------------------------------- */ #noVNC_password_dlg { + position: relative; + transform: translateY(-50px); } #noVNC_password_dlg.noVNC_open { @@ -646,7 +763,7 @@ input[type=button]:active, select:active { color: white; background: rgba(0, 0, 0, 0.5); - z-index: 1000; + z-index: 50; /*display: flex;*/ align-items: center; @@ -670,6 +787,10 @@ input[type=button]:active, select:active { border-bottom-right-radius: 800px 600px; /*border-top-left-radius: 800px 600px;*/ } +:root.noVNC_connected #noVNC_container { + background-color: rgb(40, 40, 40); + border-radius: 0; +} /* HTML5 Canvas */ #noVNC_screen { @@ -692,10 +813,11 @@ input[type=button]:active, select:active { * settings and noVNC settings. */ #noVNC_canvas { position: absolute; + top: 0; left: 0; right: 0; - margin-left: auto; - margin-right: auto; + bottom: 0; + margin: auto; } /*Default noVNC logo.*/ @@ -710,31 +832,14 @@ input[type=button]:active, select:active { .noVNC_logo { color:yellow; - text-align:left; font-family: 'Orbitron', 'OrbitronTTF', sans-serif; - font-size: 13px; line-height:90%; - text-shadow: 1px 1px 0 #000; + text-shadow: 0.1em 0.1em 0 black; } .noVNC_logo span{ color:green; } -#noVNC_logo { - margin-top: 60px; - margin-left: 60px; - font-size: 180px; - text-shadow: - 5px 5px 0 #000, - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; -} -:root.noVNC_connected #noVNC_logo { - display: none; -} - #noVNC_bell { display: none; } diff --git a/app/styles/black.css b/app/styles/black.css deleted file mode 100644 index 178fa100d..000000000 --- a/app/styles/black.css +++ /dev/null @@ -1,21 +0,0 @@ -/* - * noVNC black CSS - * Copyright (C) 2012 Joel Martin - * Copyright (C) 2013 Samuel Mannehed for Cendio AB - * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) - * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). - */ - -.noVNC_panel { - border:2px solid #fff; - background:#000; - color:#fff; -} - -#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading { - background: #4c4c4c; -} - -.noVNC_button.noVNC_selected { - background: #9dd53a; -} diff --git a/app/styles/blue.css b/app/styles/blue.css deleted file mode 100644 index a38ede15f..000000000 --- a/app/styles/blue.css +++ /dev/null @@ -1,17 +0,0 @@ -/* - * noVNC blue CSS - * Copyright (C) 2012 Joel Martin - * Copyright (C) 2013 Samuel Mannehed for Cendio AB - * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) - * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). - */ - -.noVNC_panel { - border:2px solid #fff; - background:#04073d; - color:#fff; -} - -#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading { - background: #080F80; -} diff --git a/app/ui.js b/app/ui.js index 7ca0dc7dc..0e789c043 100644 --- a/app/ui.js +++ b/app/ui.js @@ -142,6 +142,8 @@ var UI; UI.addClipboardHandlers(); UI.addSettingsHandlers(); + UI.openControlbar(); + // Show the connect panel on first load unless autoconnecting if (!autoconnect) { UI.openConnectPanel(); @@ -167,13 +169,7 @@ var UI; }, initSettings: function() { - // Stylesheet selection dropdown - var sheet = WebUtil.selectStylesheet(); - var sheets = WebUtil.getStylesheets(); var i; - for (i = 0; i < sheets.length; i += 1) { - UI.addOption(document.getElementById('noVNC_setting_stylesheet'),sheets[i].title, sheets[i].title); - } // Logging selection dropdown var llevels = ['error', 'warn', 'info', 'debug']; @@ -185,11 +181,6 @@ var UI; UI.initSetting('logging', 'warn'); WebUtil.init_logging(UI.getSetting('logging')); - UI.initSetting('stylesheet', 'default'); - WebUtil.selectStylesheet(null); - // call twice to get around webkit bug - WebUtil.selectStylesheet(UI.getSetting('stylesheet')); - // if port == 80 (or 443) then it won't be present and should be // set manually var port = window.location.port; @@ -205,7 +196,6 @@ var UI; /* Populate the controls if defaults are provided in the URL */ UI.initSetting('host', window.location.hostname); UI.initSetting('port', port); - UI.initSetting('password', ''); UI.initSetting('encrypt', (window.location.protocol === "https:")); UI.initSetting('true_color', true); UI.initSetting('cursor', !Util.isTouchDevice); @@ -214,7 +204,6 @@ var UI; UI.initSetting('view_only', false); UI.initSetting('path', 'websockify'); UI.initSetting('repeaterID', ''); - UI.initSetting('token', ''); }, setupWindowEvents: function() { @@ -266,6 +255,11 @@ var UI; .addEventListener('mousemove', UI.dragControlbarHandle); // resize events aren't available for elements window.addEventListener('resize', UI.updateControlbarHandle); + + var exps = document.getElementsByClassName("noVNC_expander"); + for (var i = 0;i < exps.length;i++) { + exps[i].addEventListener('click', UI.toggleExpander); + } }, addTouchSpecificHandlers: function() { @@ -343,8 +337,6 @@ var UI; }, addConnectionControlHandlers: function() { - document.getElementById("noVNC_connect_controls_button") - .addEventListener('click', UI.toggleConnectPanel); document.getElementById("noVNC_disconnect_button") .addEventListener('click', UI.disconnect); document.getElementById("noVNC_connect_button") @@ -471,6 +463,8 @@ var UI; document.getElementById('noVNC_setting_resize').disabled = UI.connected; document.getElementById('noVNC_setting_shared').disabled = UI.connected; document.getElementById('noVNC_setting_view_only').disabled = UI.connected; + document.getElementById('noVNC_setting_host').disabled = UI.connected; + document.getElementById('noVNC_setting_port').disabled = UI.connected; document.getElementById('noVNC_setting_path').disabled = UI.connected; document.getElementById('noVNC_setting_repeaterID').disabled = UI.connected; @@ -734,6 +728,14 @@ var UI; UI.activateControlbar(); }, + toggleExpander: function(e) { + if (this.classList.contains("noVNC_open")) { + this.classList.remove("noVNC_open"); + } else { + this.classList.add("noVNC_open"); + } + }, + /* ------^------- * /VISUAL * ============== @@ -837,13 +839,13 @@ var UI; UI.saveSetting('clip'); UI.saveSetting('shared'); UI.saveSetting('view_only'); + UI.saveSetting('host'); + UI.saveSetting('port'); UI.saveSetting('path'); UI.saveSetting('repeaterID'); - UI.saveSetting('stylesheet'); UI.saveSetting('logging'); // Settings with immediate (non-connected related) effect - WebUtil.selectStylesheet(UI.getSetting('stylesheet')); WebUtil.init_logging(UI.getSetting('logging')); UI.updateViewClip(); UI.updateViewDrag(); @@ -860,7 +862,6 @@ var UI; UI.closeSettingsPanel(); UI.closeXvpPanel(); UI.closeClipboardPanel(); - UI.closeConnectPanel(); UI.closeExtraKeys(); }, @@ -888,7 +889,6 @@ var UI; UI.updateSetting('view_only'); UI.updateSetting('path'); UI.updateSetting('repeaterID'); - UI.updateSetting('stylesheet'); UI.updateSetting('logging'); document.getElementById('noVNC_settings') @@ -1019,31 +1019,17 @@ var UI; * ------v------*/ openConnectPanel: function() { - UI.closeAllPanels(); - UI.openControlbar(); - - document.getElementById('noVNC_connect_controls') + document.getElementById('noVNC_connect_dlg') .classList.add("noVNC_open"); - document.getElementById('noVNC_connect_controls_button') - .classList.add("noVNC_selected"); - - document.getElementById('noVNC_setting_host').focus(); }, closeConnectPanel: function() { - document.getElementById('noVNC_connect_controls') + document.getElementById('noVNC_connect_dlg') .classList.remove("noVNC_open"); - document.getElementById('noVNC_connect_controls_button') - .classList.remove("noVNC_selected"); - - UI.saveSetting('host'); - UI.saveSetting('port'); - UI.saveSetting('token'); - //UI.saveSetting('password'); }, toggleConnectPanel: function() { - if (document.getElementById('noVNC_connect_controls') + if (document.getElementById('noVNC_connect_dlg') .classList.contains("noVNC_open")) { UI.closeConnectPanel(); } else { @@ -1054,13 +1040,11 @@ var UI; connect: function() { var host = document.getElementById('noVNC_setting_host').value; var port = document.getElementById('noVNC_setting_port').value; - var password = document.getElementById('noVNC_setting_password').value; - var token = document.getElementById('noVNC_setting_token').value; var path = document.getElementById('noVNC_setting_path').value; - //if token is in path then ignore the new token variable - if (token) { - path = WebUtil.injectParamIfMissing(path, "token", token); + var password = WebUtil.getConfigVar('password'); + if (password === null) { + password = undefined; } if ((!host) || (!port)) { @@ -1073,6 +1057,7 @@ var UI; if (!UI.initRFB()) return; UI.closeAllPanels(); + UI.closeConnectPanel(); UI.rfb.set_encrypt(UI.getSetting('encrypt')); UI.rfb.set_true_color(UI.getSetting('true_color')); @@ -1098,6 +1083,7 @@ var UI; if (typeof reason !== 'undefined') { UI.showStatus(reason, 'error'); } + UI.openControlbar(); UI.openConnectPanel(); }, diff --git a/app/webutil.js b/app/webutil.js index 90a0a5304..6cacb93b5 100644 --- a/app/webutil.js +++ b/app/webutil.js @@ -209,45 +209,6 @@ WebUtil.eraseSetting = function (name) { } }; -/* - * Alternate stylesheet selection - */ -WebUtil.getStylesheets = function () { - "use strict"; - var links = document.getElementsByTagName("link"); - var sheets = []; - - for (var i = 0; i < links.length; i += 1) { - if (links[i].title && - links[i].rel.toUpperCase().indexOf("STYLESHEET") > -1) { - sheets.push(links[i]); - } - } - return sheets; -}; - -// No sheet means try and use value from cookie, null sheet used to -// clear all alternates. -WebUtil.selectStylesheet = function (sheet) { - "use strict"; - if (typeof sheet === 'undefined') { - sheet = 'default'; - } - - var sheets = WebUtil.getStylesheets(); - for (var i = 0; i < sheets.length; i += 1) { - var link = sheets[i]; - if (link.title === sheet) { - Util.Debug("Using stylesheet " + sheet); - link.disabled = false; - } else { - //Util.Debug("Skipping stylesheet " + link.title); - link.disabled = true; - } - } - return sheet; -}; - WebUtil.injectParamIfMissing = function (path, param, value) { // force pretend that we're dealing with a relative path // (assume that we wanted an extra if we pass one in) diff --git a/vnc.html b/vnc.html index e46fa62d5..5e241a2a9 100644 --- a/vnc.html +++ b/vnc.html @@ -54,8 +54,6 @@ - -
  • - -
    • - -
  • - +
    Advanced
    +
  • @@ -239,41 +249,9 @@

    no
    VNC

    - -
    -
    -
      -
    • - Connection -
      • -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
      • -
    • - -
      • -
    -
    -
    @@ -283,8 +261,18 @@

    no
    VNC

    - +
    +
    + +
    + Connect +
    +
    +
    + + +
    • @@ -305,8 +293,6 @@

      no
      VNC

    -

    no
    VNC

    -