diff --git a/app/images/error.svg b/app/images/error.svg
new file mode 100644
index 00000000..6c47e8f2
--- /dev/null
+++ b/app/images/error.svg
@@ -0,0 +1,81 @@
+
+
+
+
diff --git a/app/images/info.svg b/app/images/info.svg
new file mode 100644
index 00000000..21d268c8
--- /dev/null
+++ b/app/images/info.svg
@@ -0,0 +1,87 @@
+
+
+
+
diff --git a/app/images/warning.svg b/app/images/warning.svg
new file mode 100644
index 00000000..7114f9b1
--- /dev/null
+++ b/app/images/warning.svg
@@ -0,0 +1,81 @@
+
+
+
+
diff --git a/app/styles/base.css b/app/styles/base.css
index c9974d69..e838b1de 100644
--- 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 9a3d5d2e..7c49ae06 100644
--- 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 b986d9b2..a59428ec 100644
--- 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 b9e437e5..234af0aa 100644
--- 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 9d9fcaf3..1987bb4c 100644
--- a/vnc.html
+++ b/vnc.html
@@ -96,8 +96,6 @@
-
-
-
-
+
+