From 8f2ca5feaace9b0e7b253afd1e0eef0af1cd5ccc Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sat, 29 Oct 2016 16:02:35 +0200 Subject: [PATCH 01/11] Black out background when connected --- app/styles/base.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/styles/base.css b/app/styles/base.css index f4ee929df..302df2a83 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -670,6 +670,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 { From 47fbdced4530dd2a66a5f20be27b69d6c12a6ffc Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sun, 30 Oct 2016 21:32:35 +0100 Subject: [PATCH 02/11] Center canvas vertically as well --- app/styles/base.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/styles/base.css b/app/styles/base.css index 302df2a83..749bcead5 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -696,10 +696,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.*/ From 58fc267b2bac1b89450b76a21e91ffd25e7e4358 Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sat, 29 Oct 2016 16:04:13 +0200 Subject: [PATCH 03/11] Remove unused token setting --- app/ui.js | 8 -------- vnc.html | 4 ---- 2 files changed, 12 deletions(-) diff --git a/app/ui.js b/app/ui.js index 7ca0dc7dc..28e2148f3 100644 --- a/app/ui.js +++ b/app/ui.js @@ -214,7 +214,6 @@ var UI; UI.initSetting('view_only', false); UI.initSetting('path', 'websockify'); UI.initSetting('repeaterID', ''); - UI.initSetting('token', ''); }, setupWindowEvents: function() { @@ -1038,7 +1037,6 @@ var UI; UI.saveSetting('host'); UI.saveSetting('port'); - UI.saveSetting('token'); //UI.saveSetting('password'); }, @@ -1055,14 +1053,8 @@ var UI; 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); - } - if ((!host) || (!port)) { var msg = _("Must set host and port"); Util.Error(msg); diff --git a/vnc.html b/vnc.html index e46fa62d5..5d9331e08 100644 --- a/vnc.html +++ b/vnc.html @@ -263,10 +263,6 @@

no
VNC

-
  • - - -
  • From 340d9d66cca2c1e5236ccf00006da9d9b32ae76d Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sun, 30 Oct 2016 21:36:54 +0100 Subject: [PATCH 04/11] Remove alternative style sheets Anyone with basic knowledge of CSS will easily figure out how to customise the appearance of the UI, so remove the burden of having to maintain these extra style sheets. --- app/styles/black.css | 21 --------------------- app/styles/blue.css | 17 ----------------- app/ui.js | 14 -------------- app/webutil.js | 39 --------------------------------------- vnc.html | 10 ---------- 5 files changed, 101 deletions(-) delete mode 100644 app/styles/black.css delete mode 100644 app/styles/blue.css 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 28e2148f3..9ff240681 100644 --- a/app/ui.js +++ b/app/ui.js @@ -167,13 +167,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 +179,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; @@ -838,11 +827,9 @@ var UI; UI.saveSetting('view_only'); 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(); @@ -887,7 +874,6 @@ var UI; UI.updateSetting('view_only'); UI.updateSetting('path'); UI.updateSetting('repeaterID'); - UI.updateSetting('stylesheet'); UI.updateSetting('logging'); document.getElementById('noVNC_settings') 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 5d9331e08..9d2240ebf 100644 --- a/vnc.html +++ b/vnc.html @@ -54,8 +54,6 @@ - - -
  • - -
  • Settings
    • -
  • - -
    • @@ -196,8 +193,24 @@

    no
    VNC

  • - - +
    WebSocket
    +
      +
    • + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
  • @@ -241,14 +254,6 @@

    no
    VNC

  • Connection
    • -
  • - - -
    • -
  • - - -
  • From 13304bacd0f9df11cf638f916f5f5b1958ef49da Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sat, 29 Oct 2016 17:37:09 +0200 Subject: [PATCH 06/11] Group rarely changed settings together --- vnc.html | 77 ++++++++++++++++++++++++++++++-------------------------- 1 file changed, 42 insertions(+), 35 deletions(-) diff --git a/vnc.html b/vnc.html index 2ac751190..bdb706c19 100644 --- a/vnc.html +++ b/vnc.html @@ -177,62 +177,69 @@

    no
    VNC

    Settings
  • - +
  • - +
    • +
  • - -
    • -
  • - + +
  • -
    WebSocket
    +
    Advanced
    • - + +
      • +
    • +
      • +
    • - - + +
    • - - +
      WebSocket
      +
        +
      • + +
        • +
      • + + +
        • +
      • + + +
        • +
      • + + +
        • +
      • +
      • +
    • - - +
    • -
  • - - -
    • -
  • - - -
    • -
    • - -
  • - -
  • From ef3e12b5958672ed97ba87cf11f147ab76101219 Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sat, 29 Oct 2016 17:39:22 +0200 Subject: [PATCH 07/11] Remove vendor prefix from border-radius It's been standardised for quite some time, so remove the extra noise in the CSS. --- app/styles/base.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/styles/base.css b/app/styles/base.css index 19ec70e08..606c13569 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -362,8 +362,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 +405,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; From 512d3605add8ccd6ae1e9fcf6736ec51a3d8bba5 Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sat, 29 Oct 2016 17:58:34 +0200 Subject: [PATCH 08/11] Remove connect dialog It only contained a password field, which might not be needed, and is handled by a separate dialog if it is. --- app/styles/base.css | 7 +------ app/ui.js | 47 +++++++-------------------------------------- vnc.html | 19 +----------------- 3 files changed, 9 insertions(+), 64 deletions(-) diff --git a/app/styles/base.css b/app/styles/base.css index 606c13569..51ba9396a 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -558,17 +558,12 @@ input[type=button]:active, select:active { } /* Connection Controls */ -:root.noVNC_connected #noVNC_connect_controls_button { +:root.noVNC_connected #noVNC_connect_button { display: none; } :root:not(.noVNC_connected) #noVNC_disconnect_button { display: none; } -#noVNC_connect_controls ul { - list-style: none; - margin: 0px; - padding: 0px; -} /* ---------------------------------------- * Status Dialog diff --git a/app/ui.js b/app/ui.js index b2e7e99f8..a8b6ec17e 100644 --- a/app/ui.js +++ b/app/ui.js @@ -142,10 +142,7 @@ var UI; UI.addClipboardHandlers(); UI.addSettingsHandlers(); - // Show the connect panel on first load unless autoconnecting - if (!autoconnect) { - UI.openConnectPanel(); - } + UI.openControlbar(); UI.updateViewClip(); @@ -194,7 +191,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); @@ -336,8 +332,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") @@ -863,7 +857,6 @@ var UI; UI.closeSettingsPanel(); UI.closeXvpPanel(); UI.closeClipboardPanel(); - UI.closeConnectPanel(); UI.closeExtraKeys(); }, @@ -1020,42 +1013,16 @@ var UI; * CONNECTION * ------v------*/ - openConnectPanel: function() { - UI.closeAllPanels(); - UI.openControlbar(); - - document.getElementById('noVNC_connect_controls') - .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') - .classList.remove("noVNC_open"); - document.getElementById('noVNC_connect_controls_button') - .classList.remove("noVNC_selected"); - - //UI.saveSetting('password'); - }, - - toggleConnectPanel: function() { - if (document.getElementById('noVNC_connect_controls') - .classList.contains("noVNC_open")) { - UI.closeConnectPanel(); - } else { - UI.openConnectPanel(); - } - }, - 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 path = document.getElementById('noVNC_setting_path').value; + var password = WebUtil.getConfigVar('password'); + if (password === null) { + password = undefined; + } + if ((!host) || (!port)) { var msg = _("Must set host and port"); Util.Error(msg); @@ -1091,7 +1058,7 @@ var UI; if (typeof reason !== 'undefined') { UI.showStatus(reason, 'error'); } - UI.openConnectPanel(); + UI.openControlbar(); }, /* ------^------- diff --git a/vnc.html b/vnc.html index bdb706c19..e56065edd 100644 --- a/vnc.html +++ b/vnc.html @@ -250,28 +250,11 @@

    no
    VNC

    -
    -
    -
      -
    • - Connection -
      • -
    • - - -
      • -
      • -
    • - -
      • -
    -
    -
    From b3c932c3864ca810b3676b9859c19f8344f9f795 Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Sat, 29 Oct 2016 17:58:34 +0200 Subject: [PATCH 09/11] Make connect button more prominent It's generally the only thing the user needs to click on, so make sure it clearly stands out. --- app/styles/base.css | 99 +++++++++++++++++++++++++++++++++++---------- app/ui.js | 26 ++++++++++++ vnc.html | 15 ++++--- 3 files changed, 114 insertions(+), 26 deletions(-) diff --git a/app/styles/base.css b/app/styles/base.css index 51ba9396a..8ceda02cd 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -480,6 +480,10 @@ input[type=button]:active, select:active { /* Control bar content */ +#noVNC_control_bar .noVNC_logo { + font-size: 13px; +} + :root:not(.noVNC_connected) #noVNC_view_drag_button { display: none; } @@ -558,9 +562,6 @@ input[type=button]:active, select:active { } /* Connection Controls */ -:root.noVNC_connected #noVNC_connect_button { - display: none; -} :root:not(.noVNC_connected) #noVNC_disconnect_button { display: none; } @@ -629,6 +630,79 @@ 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 * ---------------------------------------- @@ -732,31 +806,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/ui.js b/app/ui.js index a8b6ec17e..0e789c043 100644 --- a/app/ui.js +++ b/app/ui.js @@ -144,6 +144,11 @@ var UI; UI.openControlbar(); + // Show the connect panel on first load unless autoconnecting + if (!autoconnect) { + UI.openConnectPanel(); + } + UI.updateViewClip(); UI.updateVisualState(); @@ -1013,6 +1018,25 @@ var UI; * CONNECTION * ------v------*/ + openConnectPanel: function() { + document.getElementById('noVNC_connect_dlg') + .classList.add("noVNC_open"); + }, + + closeConnectPanel: function() { + document.getElementById('noVNC_connect_dlg') + .classList.remove("noVNC_open"); + }, + + toggleConnectPanel: function() { + if (document.getElementById('noVNC_connect_dlg') + .classList.contains("noVNC_open")) { + UI.closeConnectPanel(); + } else { + UI.openConnectPanel(); + } + }, + connect: function() { var host = document.getElementById('noVNC_setting_host').value; var port = document.getElementById('noVNC_setting_port').value; @@ -1033,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')); @@ -1059,6 +1084,7 @@ var UI; UI.showStatus(reason, 'error'); } UI.openControlbar(); + UI.openConnectPanel(); }, /* ------^------- diff --git a/vnc.html b/vnc.html index e56065edd..78599b7e7 100644 --- a/vnc.html +++ b/vnc.html @@ -249,9 +249,6 @@

    no
    VNC

    - @@ -264,6 +261,16 @@

    no
    VNC

    + +
    +
    + +
    + Connect +
    +
    +
    +
    @@ -286,8 +293,6 @@

    no
    VNC

    -

    no
    VNC

    -
    -
    +
    • From 813458923e50be7e751684c9f75daf3da883c7d7 Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Tue, 15 Nov 2016 15:44:49 +0100 Subject: [PATCH 11/11] Avoid wrapping labels --- app/styles/base.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/base.css b/app/styles/base.css index 502dec754..6f6afb753 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -456,6 +456,7 @@ input[type=button]:active, select:active { .noVNC_panel label { display: block; + white-space: nowrap; } .noVNC_panel .noVNC_heading {