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 f4ee929d..302df2a8 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 302df2a8..749bcead 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 7ca0dc7d..28e2148f 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 e46fa62d..5d9331e0 100644 --- a/vnc.html +++ b/vnc.html @@ -263,10 +263,6 @@ -
  • - - -
  • 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 178fa100..00000000 --- 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 a38ede15..00000000 --- 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 28e2148f..9ff24068 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 90a0a530..6cacb93b 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 5d9331e0..9d2240eb 100644 --- a/vnc.html +++ b/vnc.html @@ -54,8 +54,6 @@ - - -
  • - -
  • Settings
    • -
  • - -
    • @@ -196,8 +193,24 @@
  • - - +
    WebSocket
    +
      +
    • + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
  • @@ -241,14 +254,6 @@
  • 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 | 79 ++++++++++++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 36 deletions(-) diff --git a/vnc.html b/vnc.html index 2ac75119..bdb706c1 100644 --- a/vnc.html +++ b/vnc.html @@ -176,15 +176,6 @@
  • Settings
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • @@ -193,24 +184,7 @@
  • -
    WebSocket
    -
      -
    • - -
      • -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    +
  • @@ -221,17 +195,50 @@
    • -
  • - - -
    • -
  • - +
    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 19ec70e0..606c1356 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 606c1356..51ba9396 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 b2e7e99f..a8b6ec17 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 bdb706c1..e56065ed 100644 --- a/vnc.html +++ b/vnc.html @@ -250,28 +250,11 @@ -
    -
    -
      -
    • - 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 51ba9396..8ceda02c 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 a8b6ec17..0e789c04 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 e56065ed..78599b7e 100644 --- a/vnc.html +++ b/vnc.html @@ -249,9 +249,6 @@ - @@ -264,6 +261,16 @@
    + +
    +
    + +
    + Connect +
    +
    +
    +
    @@ -286,8 +293,6 @@
    -

    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 502dec75..6f6afb75 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 {