diff --git a/include/base.css b/include/base.css index 89b2b574..0578619e 100644 --- a/include/base.css +++ b/include/base.css @@ -1,6 +1,7 @@ /* * noVNC base 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). */ @@ -51,7 +52,6 @@ html { float:right; } - #noVNC_view_drag_button { display: none; } @@ -64,32 +64,26 @@ html { .noVNC-buttons-left { float: left; - padding-left:10px; - padding-top:4px; + z-index: 1; + position: relative; } .noVNC-buttons-right { float:right; right: 0px; - padding-right:10px; - padding-top:4px; -} - -#noVNC_status_bar { - margin-top: 0px; - padding: 0px; -} - -#noVNC_status_bar div { - font-size: 12px; - padding-top: 4px; - width:100%; + z-index: 2; + position: absolute; } #noVNC_status { - height:20px; + font-size: 12px; + padding-top: 4px; + height:32px; text-align: center; + font-weight: bold; + color: #fff; } + #noVNC_settings_menu { margin: 3px; text-align: left; @@ -104,22 +98,12 @@ html { float:right; } -.noVNC_status_normal { - background: #eee; -} -.noVNC_status_error { - background: #f44; -} -.noVNC_status_warn { - background: #ff4; -} - /* Do not set width/height for VNC_screen or VNC_canvas or incorrect * scaling will occur. Canvas resizes to remote VNC settings */ #noVNC_screen_pad { margin: 0px; padding: 0px; - height: 44px; + height: 36px; } #noVNC_screen { text-align: center; @@ -154,14 +138,14 @@ html { /*Bubble contents divs*/ #noVNC_settings { display:none; - margin-top:77px; + margin-top:73px; right:20px; position:fixed; } #noVNC_controls { display:none; - margin-top:77px; + margin-top:73px; right:12px; position:fixed; } @@ -173,7 +157,7 @@ html { display:none; position:fixed; - margin-top:77px; + margin-top:73px; right:20px; left:20px; padding:15px; @@ -186,9 +170,30 @@ html { border-radius:10px; } +#noVNC_popup_status_panel { + display:none; + position: fixed; + z-index: 1; + + margin:15px; + margin-top:60px; + padding:15px; + width:auto; + + text-align:center; + font-weight:bold; + word-wrap:break-word; + color:#fff; + background:rgba(0,0,0,0.65); + + -webkit-border-radius:10px; + -moz-border-radius:10px; + border-radius:10px; +} + #noVNC_clipboard { display:none; - margin-top:77px; + margin-top:73px; right:30px; position:fixed; } @@ -207,17 +212,11 @@ html { z-index: -1; } -.noVNC_status_warn { - background-color:yellow; -} - /* * Advanced Styling */ -/* Control bar */ -#noVNC-control-bar { - position:fixed; +.noVNC_status_normal { background: #b2bdcd; /* Old browsers */ background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ @@ -225,9 +224,32 @@ html { background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ +} +.noVNC_status_error { + background: #f04040; /* Old browsers */ + background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ + background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ +} +.noVNC_status_warn { + background: #f0f040; /* Old browsers */ + background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ + background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ +} +/* Control bar */ +#noVNC-control-bar { + position:fixed; + display:block; - height:44px; + height:36px; left:0; top:0; width:100%; @@ -368,10 +390,39 @@ html { font-size: 180px; } -@media screen and (min-width: 481px) and (max-width: 640px) { +.noVNC-buttons-left { + padding-left: 10px; +} + +.noVNC-buttons-right { + padding-right: 10px; +} + +#noVNC_status { + z-index: 0; + position: absolute; + width: 100%; +} + +@media screen and (max-width: 640px){ .noVNC_status_button { font-size: 10px; } + .noVNC-buttons-left { + padding-left: 0px; + } + .noVNC-buttons-right { + padding-right: 0px; + } + #noVNC_status { + z-index: 1; + position: relative; + width: auto; + float: left; + } +} + +@media screen and (min-width: 481px) and (max-width: 640px) { #noVNC_clipboard_text { width: 410px; } @@ -381,9 +432,6 @@ html { } @media screen and (min-width: 321px) and (max-width: 480px) { - .noVNC_status_button { - font-size: 10px; - } #noVNC_clipboard_text { width: 250px; } diff --git a/include/black.css b/include/black.css index 351f7b24..7d940c5a 100644 --- a/include/black.css +++ b/include/black.css @@ -1,6 +1,7 @@ /* * 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). */ @@ -9,7 +10,7 @@ background-color:#000; } -#noVNC-control-bar { +.noVNC_status_normal { background: #4c4c4c; /* Old browsers */ background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */ @@ -18,6 +19,24 @@ background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */ background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */ } +.noVNC_status_error { + background: #f04040; /* Old browsers */ + background: -moz-linear-gradient(top, #f04040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */ + background: linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */ +} +.noVNC_status_warn { + background: #f0f040; /* Old browsers */ + background: -moz-linear-gradient(top, #f0f040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */ + background: linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */ +} .triangle-right { border:2px solid #fff; diff --git a/include/blue.css b/include/blue.css index 6fff89a5..b2a0adcc 100644 --- a/include/blue.css +++ b/include/blue.css @@ -1,11 +1,12 @@ /* * 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-control-bar { +.noVNC_status_normal { background-color:#04073d; background-image: -webkit-gradient( linear, @@ -20,6 +21,36 @@ rgb(4,7,61) 50% ); } +.noVNC_status_error { + background-color:#f04040; + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.54, rgb(240,64,64)), + color-stop(0.5, rgb(4,7,61)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(4,7,61) 54%, + rgb(249,64,64) 50% + ); +} +.noVNC_status_warn { + background-color:#f0f040; + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.54, rgb(240,240,64)), + color-stop(0.5, rgb(4,7,61)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(4,7,61) 54%, + rgb(240,240,64) 50% + ); +} .triangle-right { border:2px solid #fff; diff --git a/include/rfb.js b/include/rfb.js index d9137370..16ae76d5 100644 --- a/include/rfb.js +++ b/include/rfb.js @@ -1,6 +1,7 @@ /* * noVNC: HTML5 VNC client * Copyright (C) 2012 Joel Martin + * Copyright (C) 2013 Samuel Mannehed for Cendio AB * Licensed under MPL 2.0 (see LICENSE.txt) * * See README.md for usage and integration instructions. @@ -165,6 +166,8 @@ Util.conf_defaults(conf, that, defaults, [ 'onFBUComplete(rfb, fbu): RFB FBU received and processed '], ['onFBResize', 'rw', 'func', function() { }, 'onFBResize(rfb, width, height): frame buffer resized'], + ['onDesktopName', 'rw', 'func', function() { }, + 'onDesktopName(rfb, name): desktop name received'], // These callback names are deprecated ['updateState', 'rw', 'func', function() { }, @@ -873,6 +876,7 @@ init_msg = function() { /* Connection name/title */ name_length = ws.rQshift32(); fb_name = ws.rQshiftStr(name_length); + conf.onDesktopName(that, fb_name); if (conf.true_color && fb_name === "Intel(r) AMT KVM") { diff --git a/include/ui.js b/include/ui.js index 3387567a..b933d312 100644 --- a/include/ui.js +++ b/include/ui.js @@ -1,6 +1,7 @@ /* * noVNC: HTML5 VNC client * Copyright (C) 2012 Joel Martin + * Copyright (C) 2013 Samuel Mannehed for Cendio AB * Licensed under MPL 2.0 (see LICENSE.txt) * * See README.md for usage and integration instructions. @@ -20,6 +21,7 @@ var UI = { rfb_state : 'loaded', settingsOpen : false, connSettingsOpen : false, +popupStatusOpen : false, clipboardOpen: false, keyboardVisible: false, @@ -82,7 +84,8 @@ start: function(callback) { UI.rfb = RFB({'target': $D('noVNC_canvas'), 'onUpdateState': UI.updateState, - 'onClipboard': UI.clipReceive}); + 'onClipboard': UI.clipReceive, + 'onDesktopName': UI.updateDocumentTitle}); UI.updateVisualState(); // Unfocus clipboard when over the VNC area @@ -156,6 +159,8 @@ addMouseHandlers: function() { $D("keyboardinput").onblur = UI.keyInputBlur; $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel; + $D("noVNC_status").onclick = UI.togglePopupStatusPanel; + $D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel; $D("clipboardButton").onclick = UI.toggleClipboardPanel; $D("settingsButton").onclick = UI.toggleSettingsPanel; $D("connectButton").onclick = UI.toggleConnectPanel; @@ -257,20 +262,39 @@ forceSetting: function(name, val) { }, +// Show the popup status panel +togglePopupStatusPanel: function() { + var psp = $D('noVNC_popup_status_panel'); + if (UI.popupStatusOpen === true) { + psp.style.display = "none"; + UI.popupStatusOpen = false; + } else { + psp.innerHTML = $D('noVNC_status').innerHTML; + psp.style.display = "block"; + psp.style.left = window.innerWidth/2 - + parseInt(window.getComputedStyle(psp, false).width)/2 -30 + "px"; + UI.popupStatusOpen = true; + } +}, + // Show the clipboard panel toggleClipboardPanel: function() { // Close the description panel $D('noVNC_description').style.display = "none"; - //Close settings if open + // Close settings if open if (UI.settingsOpen === true) { UI.settingsApply(); UI.closeSettingsMenu(); } - //Close connection settings if open + // Close connection settings if open if (UI.connSettingsOpen === true) { UI.toggleConnectPanel(); } - //Toggle Clipboard Panel + // Close popup status panel if open + if (UI.popupStatusOpen === true) { + UI.togglePopupStatusPanel(); + } + // Toggle Clipboard Panel if (UI.clipboardOpen === true) { $D('noVNC_clipboard').style.display = "none"; $D('clipboardButton').className = "noVNC_status_button"; @@ -286,17 +310,22 @@ toggleClipboardPanel: function() { toggleConnectPanel: function() { // Close the description panel $D('noVNC_description').style.display = "none"; - //Close connection settings if open + // Close connection settings if open if (UI.settingsOpen === true) { UI.settingsApply(); UI.closeSettingsMenu(); $D('connectButton').className = "noVNC_status_button"; } + // Close clipboard panel if open if (UI.clipboardOpen === true) { UI.toggleClipboardPanel(); } + // Close popup status panel if open + if (UI.popupStatusOpen === true) { + UI.togglePopupStatusPanel(); + } - //Toggle Connection Panel + // Toggle Connection Panel if (UI.connSettingsOpen === true) { $D('noVNC_controls').style.display = "none"; $D('connectButton').className = "noVNC_status_button"; @@ -347,13 +376,18 @@ toggleSettingsPanel: function() { openSettingsMenu: function() { // Close the description panel $D('noVNC_description').style.display = "none"; + // Close clipboard panel if open if (UI.clipboardOpen === true) { UI.toggleClipboardPanel(); } - //Close connection settings if open + // Close connection settings if open if (UI.connSettingsOpen === true) { UI.toggleConnectPanel(); } + // Close popup status panel if open + if (UI.popupStatusOpen === true) { + UI.togglePopupStatusPanel(); + } $D('noVNC_settings').style.display = "block"; $D('settingsButton').className = "noVNC_status_button_selected"; UI.settingsOpen = true; @@ -437,8 +471,6 @@ setMouseButton: function(num) { updateState: function(rfb, state, oldstate, msg) { var s, sb, c, d, cad, vd, klass; UI.rfb_state = state; - s = $D('noVNC_status'); - sb = $D('noVNC_status_bar'); switch (state) { case 'failed': case 'fatal': @@ -468,9 +500,8 @@ updateState: function(rfb, state, oldstate, msg) { } if (typeof(msg) !== 'undefined') { - s.setAttribute("class", klass); - sb.setAttribute("class", klass); - s.innerHTML = msg; + $D('noVNC-control-bar').setAttribute("class", klass); + $D('noVNC_status').innerHTML = msg; } UI.updateVisualState(); @@ -530,6 +561,12 @@ updateVisualState: function() { }, +// Display the desktop name in the document title +updateDocumentTitle: function(rfb, name) { + document.title = name + " - noVNC"; +}, + + clipReceive: function(rfb, text) { Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "..."); $D('noVNC_clipboard_text').value = text; diff --git a/vnc.html b/vnc.html index 5f6cc70e..66b70259 100644 --- a/vnc.html +++ b/vnc.html @@ -5,6 +5,7 @@
+ +
+
+