From 35b29c98eae568e8cead3963aae84da088630c0d Mon Sep 17 00:00:00 2001 From: samhed Date: Wed, 17 Jul 2013 16:11:19 +0200 Subject: [PATCH] * 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. --- include/base.css | 92 +++++++++++++++++++++++++++++------------------ include/black.css | 20 ++++++++++- include/blue.css | 32 ++++++++++++++++- include/ui.js | 9 ++--- vnc.html | 9 ++--- vnc_auto.html | 4 ++- 6 files changed, 117 insertions(+), 49 deletions(-) diff --git a/include/base.css b/include/base.css index a221412c..e941eec0 100644 --- 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; } diff --git a/include/black.css b/include/black.css index 351f7b24..e03ae862 100644 --- 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; diff --git a/include/blue.css b/include/blue.css index 6fff89a5..70244969 100644 --- 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; diff --git a/include/ui.js b/include/ui.js index de75a632..b7bce23f 100644 --- 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(); diff --git a/vnc.html b/vnc.html index 672d4978..16362519 100644 --- a/vnc.html +++ b/vnc.html @@ -65,15 +65,12 @@ - + -
-
Loading
-
+
Loading
diff --git a/vnc_auto.html b/vnc_auto.html index d8eb0a5a..9ffee838 100644 --- a/vnc_auto.html +++ b/vnc_auto.html @@ -46,7 +46,9 @@
- +
Loading
+ Loading +