Show all status messages in a popup top bar

diff --git a/app/images/error.svg b/app/images/error.svg
new file mode 100644 (file)
index 0000000..6c47e8f
--- /dev/null
+++ b/app/images/error.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="error.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="13.274366"
+     inkscape:cy="14.078582"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 6.8222656 4.8027344 A 2.0002 2.0002 0 0 0 5.4296875 8.2363281 L 9.671875 12.480469 L 5.4296875 16.722656 A 2.0002 2.0002 0 1 0 8.2578125 19.550781 L 12.5 15.308594 L 16.742188 19.550781 A 2.0002 2.0002 0 1 0 19.570312 16.722656 L 15.328125 12.480469 L 19.570312 8.2363281 A 2.0002 2.0002 0 0 0 18.117188 4.8027344 A 2.0002 2.0002 0 0 0 16.742188 5.4082031 L 12.5 9.6503906 L 8.2578125 5.4082031 A 2.0002 2.0002 0 0 0 6.8222656 4.8027344 z "
+       transform="translate(0,1027.3622)"
+       id="path4155" />
+  </g>
+</svg>

diff --git a/app/images/info.svg b/app/images/info.svg
new file mode 100644 (file)
index 0000000..21d268c
--- /dev/null
+++ b/app/images/info.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="info.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="13.516502"
+     inkscape:cy="12.319239"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <circle
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4164"
+       cx="12"
+       cy="1032.3622"
+       r="2" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 12,1038.3622 0,9 2,0"
+       id="path4187"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

diff --git a/app/images/warning.svg b/app/images/warning.svg
new file mode 100644 (file)
index 0000000..7114f9b
--- /dev/null
+++ b/app/images/warning.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="warning.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="16.457343"
+     inkscape:cy="12.179552"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 12.513672 3.0019531 C 11.751609 2.9919531 11.052563 3.4242687 10.710938 4.1054688 L 3.2109375 19.105469 C 2.5461937 20.435369 3.5132277 21.9999 5 22 L 20 22 C 21.486772 21.9999 22.453806 20.435369 21.789062 19.105469 L 14.289062 4.1054688 C 13.951849 3.4330688 13.265888 3.0066531 12.513672 3.0019531 z M 12.478516 6.9804688 A 1.50015 1.50015 0 0 1 14 8.5 L 14 14.5 A 1.50015 1.50015 0 1 1 11 14.5 L 11 8.5 A 1.50015 1.50015 0 0 1 12.478516 6.9804688 z M 12.5 17 A 1.5 1.5 0 0 1 14 18.5 A 1.5 1.5 0 0 1 12.5 20 A 1.5 1.5 0 0 1 11 18.5 A 1.5 1.5 0 0 1 12.5 17 z "
+       transform="translate(0,1027.3622)"
+       id="path4208" />
+  </g>
+</svg>

diff --git a/app/styles/base.css b/app/styles/base.css
index c9974d69d57f26f0a8c830f258c9dcbbd9d9ba7c..e838b1dec394251583cfdb116154d67fda47d14f 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -39,6 +39,14 @@ html {
   top: 0;
   width: 100%;
   z-index: 200;
+
+  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+ */
+  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  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 */
 }
 
 /* General button style */
@@ -167,47 +175,6 @@ html {
   padding-left: 10px;
 }
 
-/* Center status display */
-#noVNC_status {
-  font-size: 12px;
-  padding-top: 4px;
-  height:32px;
-  text-align: center;
-  font-weight: bold;
-  color: #fff;
-  z-index: 0;
-  position: absolute;
-  width: 100%;
-  margin-left: 0px;
-}
-.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+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  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 */
-}
-
 /* Right side buttons */
 .noVNC_buttons_right {
   float: right;
@@ -295,28 +262,60 @@ html {
   float: right;
 }
 
-/* Popup Status */
-#noVNC_popup_status {
+/* ----------------------------------------
+ * Status Dialog
+ * ----------------------------------------
+ */
+
+#noVNC_status {
+  display: none;
   position: fixed;
-  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
 
-  margin: 15px;
-  top: 60px;
-  padding: 15px;
-  width: auto;
+  padding: 5px;
 
-  text-align: center;
-  font-weight: bold;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+
+  line-height: 25px;
   word-wrap: break-word;
   color: #fff;
-  background: rgba(0,0,0,0.65);
 
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 }
-#noVNC_popup_status.noVNC_hidden {
-  display: none;
+#noVNC_status.noVNC_open {
+  display: flex;
+}
+
+#noVNC_status::before {
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
+}
+
+#noVNC_status.noVNC_status_normal {
+  background: rgba(128,128,128,0.9);
+}
+#noVNC_status.noVNC_status_normal::before {
+  content: url("../images/info.svg") " ";
+}
+#noVNC_status.noVNC_status_error {
+  background: rgba(200,55,55,0.9);
+}
+#noVNC_status.noVNC_status_error::before {
+  content: url("../images/error.svg") " ";
+}
+#noVNC_status.noVNC_status_warn {
+  background: rgba(180,180,30,0.9);
+}
+#noVNC_status.noVNC_status_warn::before {
+  content: url("../images/warning.svg") " ";
 }
 
 /* ----------------------------------------
@@ -398,17 +397,6 @@ html {
  * ----------------------------------------
  */
 
-/* left-align the status text on lower resolutions */
-@media screen and (max-width: 800px){
-  #noVNC_status {
-    z-index: 1;
-    position: relative;
-    width: auto;
-    float: left;
-    margin-left: 4px;
-  }
-}
-
 @media screen and (max-width: 640px){
   #noVNC_clipboard_text {
     width: 410px;

diff --git a/app/styles/black.css b/app/styles/black.css
index 9a3d5d2e87b634d04ac8d02c974270dd3b91be2f..7c49ae068279917d3224df67e7d2789963b2cdff 100644 (file)
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -6,38 +6,6 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-#noVNC_keyboardinput {
-  background-color:#000;
-}
-
-.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+ */
-  background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  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 */
-}
-
 .noVNC_panel {
   border:2px solid #fff;
   background:#000;

diff --git a/app/styles/blue.css b/app/styles/blue.css
index b986d9b2ce5c816f33bb93a71ce817e932819107..a59428ec50ba797cdfb58f5199aa0a6e36078e7b 100644 (file)
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -6,59 +6,8 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-.noVNC_status_normal {
-  background-color:#04073d;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.54, rgb(10,15,79)),
-    color-stop(0.5, rgb(4,7,61))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(10,15,79) 54%,
-    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%
-  );
-}
-
 .noVNC_panel {
   border:2px solid #fff;
   background:#04073d;
   color:#fff;
 }
-
-#noVNC_keyboardinput {
-  background-color:#04073d;
-}
-

diff --git a/app/ui.js b/app/ui.js
index b9e437e5eba26e10641437267b2a86bc043e9c53..234af0aaac9ecef54421dd0f1f9004c02c0e5dba 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -39,7 +39,7 @@ var UI;
         rfb_state: 'loaded',
 
         resizeTimeout: null,
-        popupStatusTimeout: null,
+        statusTimeout: null,
         hideKeyboardTimeout: null,
 
         keyboardVisible: false,
@@ -175,6 +175,9 @@ var UI;
                 UI.updateViewDrag();
                 UI.setBarPosition();
             } );
+
+            document.getElementById("noVNC_status")
+                .addEventListener('click', UI.hideStatus);
         },
 
         setupFullscreen: function() {
@@ -196,10 +199,6 @@ var UI;
                 .addEventListener('click', UI.toggleViewDrag);
             document.getElementById("noVNC_send_ctrl_alt_del_button")
                 .addEventListener('click', UI.sendCtrlAltDel);
-            document.getElementById("noVNC_status")
-                .addEventListener('click', UI.popupStatus);
-            document.getElementById("noVNC_popup_status")
-                .addEventListener('click', UI.closePopup);
         },
 
         addTouchSpecificHandlers: function() {
@@ -313,10 +312,12 @@ var UI;
         updateState: function(rfb, state, oldstate, msg) {
             UI.rfb_state = state;
             var klass;
+            var timeout;
             switch (state) {
                 case 'failed':
                 case 'fatal':
                     klass = "noVNC_status_error";
+                    timeout = 0; // zero means no timeout
                     break;
                 case 'normal':
                     klass = "noVNC_status_normal";
@@ -341,8 +342,12 @@ var UI;
             }
 
             if (typeof(msg) !== 'undefined') {
-                document.getElementById('noVNC_control_bar').setAttribute("class", klass);
-                document.getElementById('noVNC_status').innerHTML = msg;
+                document.getElementById('noVNC_status')
+                    .classList.remove("noVNC_status_normal",
+                                      "noVNC_status_warn",
+                                      "noVNC_status_error");
+                document.getElementById('noVNC_status').classList.add(klass);
+                UI.showStatus(msg, timeout);
             }
 
             UI.updateVisualState();
@@ -432,27 +437,28 @@ var UI;
             //Util.Debug("<< updateVisualState");
         },
 
-        popupStatus: function(text) {
-            var psp = document.getElementById('noVNC_popup_status');
+        showStatus: function(text, time) {
+            var statusElem = document.getElementById('noVNC_status');
 
-            clearTimeout(UI.popupStatusTimeout);
+            clearTimeout(UI.statusTimeout);
 
-            if (typeof text === 'string') {
-                psp.innerHTML = text;
-            } else {
-                psp.innerHTML = document.getElementById('noVNC_status').innerHTML;
+            statusElem.innerHTML = text;
+            statusElem.classList.add("noVNC_open");
+
+            // If no time was specified, show the status for 1.5 seconds
+            if (typeof time === 'undefined') {
+                time = 1500;
             }
-            psp.classList.remove("noVNC_hidden");
-            psp.style.left = window.innerWidth/2 -
-                parseInt(window.getComputedStyle(psp).width)/2 -30 + "px";
 
-            // Show the popup for a maximum of 1.5 seconds
-            UI.popupStatusTimeout = setTimeout(UI.closePopup, 1500);
+            // A specified time of zero means no timeout
+            if (time != 0) {
+                UI.statusTimeout = window.setTimeout(UI.hideStatus, time);
+            }
         },
 
-        closePopup: function() {
-            clearTimeout(UI.popupStatusTimeout);
-            document.getElementById('noVNC_popup_status').classList.add("noVNC_hidden");
+        hideStatus: function() {
+            clearTimeout(UI.statusTimeout);
+            document.getElementById('noVNC_status').classList.remove("noVNC_open");
         },
 
 /* ------^-------
@@ -1022,7 +1028,7 @@ var UI;
                 // The browser is IE and we are in fullscreen mode.
                 // - We need to force clipping while in fullscreen since
                 //   scrollbars doesn't work.
-                UI.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
+                UI.showStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
                 UI.rememberedClipSetting = UI.getSetting('clip');
                 UI.setViewClip(true);
                 document.getElementById('noVNC_setting_clip').disabled = true;

diff --git a/vnc.html b/vnc.html
index 9d9fcaf328ffce9aae76faa472c468a2f90f62a3..1987bb4cd56965749b707e1bd34688192b156551 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -96,8 +96,6 @@
             </div>
         </div>
 
-        <div id="noVNC_status"></div>
-
         <div class="noVNC_buttons_right">
             <!-- Send Ctrl+Alt+Delete -->
             <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
@@ -189,9 +187,8 @@
             </div>
         </div>
 
-        <!-- Popup Status -->
-        <div id="noVNC_popup_status" class="noVNC_hidden">
-        </div>
+        <!-- Status Dialog -->
+        <div id="noVNC_status"></div>
 
     </div> <!-- End of noVNC_control_bar -->