Merge branch 'master' of https://github.com/kanaka/noVNC into doubleclick

2026-06-06 20:39:39 +00:00 · 2013-07-19 09:47:47 +02:00
parent c6ad20992d 0e3d505e54
commit df4d6dde30
7 changed files with 210 additions and 66 deletions
--- 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;
  }
--- 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;
--- 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;
--- 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")
        {
--- 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;