* On low resolution devices the status text is now justified to the left

button group instead of centered. * On low resolution devices the padding towards the edges of the screen of the left and right button groups are now removed. * Since the status_bar was merged into the control-bar the actual status_bar element became redundant and was therefor removed. * Improved the style of the control-bar when there is an error or a warning. * Implemented a fix so that vnc_auto.html works as intended with the improved screen real estate patch.
2013-07-17 16:11:19 +02:00 · 2013-07-17 16:11:19 +02:00 · 35b29c98ea
parent 6ca8a2c05c
commit 35b29c98ea
6 changed files with 117 additions and 49 deletions
--- a/include/base.css
+++ b/include/base.css
@ -51,7 +51,6 @@ html {
  float:right;
 }

-
 #noVNC_view_drag_button {
  display: none;
 }
@ -64,7 +63,6 @@ html {

 .noVNC-buttons-left {
  float: left;
-  padding-left:10px;
  z-index: 1;
  position: relative;
 }
@ -72,30 +70,19 @@ html {
 .noVNC-buttons-right {
  float:right;
  right: 0px;
-  padding-right:10px;
-  z-index: 1;
-  position: relative;
-}
-
-#noVNC_status_bar {
-  margin-top: 0px;
-  padding: 0px;
-  z-index: 0;
+  z-index: 2;
  position: absolute;
-  width: 100%;
-}
-
-#noVNC_status_bar div {
-  font-size: 12px;
-  padding-top: 4px;
 }

 #noVNC_status {
+  font-size: 12px;
+  padding-top: 4px;
  height:32px;
  text-align: center;
  font-weight: bold;
  color: #fff;
 }
+
 #noVNC_settings_menu {
  margin: 3px;
  text-align: left;
@ -110,16 +97,6 @@ html {
  float:right;
 }

-.noVNC_status_normal {
-  background: transparent;
-}
-.noVNC_status_error {
-  background: rgba(240,64,64,0.5);
-}
-.noVNC_status_warn {
-  background: rgba(240,240,64,0.5);
-}
-
 /* 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 {
@ -238,9 +215,7 @@ html {
 * 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+ */
@ -248,7 +223,30 @@ 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:36px;
  left:0;
@ -391,10 +389,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;
  }
@ -404,9 +431,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
@ -9,7 +9,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 +18,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
@ -5,7 +5,7 @@
 * 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 +20,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/ui.js
+++ b/include/ui.js
@ -158,7 +158,7 @@ addMouseHandlers: function() {
    $D("keyboardinput").onblur = UI.keyInputBlur;

    $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel;
-    $D("noVNC_status_bar").onclick = UI.togglePopupStatusPanel;
+    $D("noVNC_status").onclick = UI.togglePopupStatusPanel;
    $D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel;
    $D("clipboardButton").onclick = UI.toggleClipboardPanel;
    $D("settingsButton").onclick = UI.toggleSettingsPanel;
@ -470,8 +470,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':
@ -501,9 +499,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();
--- a/vnc.html
+++ b/vnc.html
@ -65,15 +65,12 @@
                <input type="image" src="images/keyboard.png"
                    id="showKeyboard" class="noVNC_status_button"
                    value="Keyboard" title="Show Keyboard"/>
-                <input type="email"
-                    autocapitalize="off" autocorrect="off"
-                    id="keyboardinput" class="noVNC_status_button"/>
+                <input type="email" autocapitalize="off" autocorrect="off"
+                    id="keyboardinput" class=""/>
            </div>
        </div>

-        <div id="noVNC_status_bar" class="noVNC_status_bar">
-                <div id="noVNC_status">Loading</div>
-        </div>
+        <div id="noVNC_status">Loading</div>

        <!--noVNC Buttons-->
        <div class="noVNC-buttons-right">
--- a/vnc_auto.html
+++ b/vnc_auto.html
@ -46,7 +46,9 @@
    <div id="noVNC_screen">
            <div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
                <table border=0 width="100%"><tr>
-                    <td><div id="noVNC_status">Loading</div></td>
+                    <td><div id="noVNC_status" style="position: relative; height: auto;">
+                        Loading
+                    </div></td>
                    <td width="1%"><div id="noVNC_buttons">
                        <input type=button value="Send CtrlAltDel"
                            id="sendCtrlAltDelButton">