1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-22 18:50:08 +03:00

feature #1711: Improve detached vnc/spice window style

This commit is contained in:
Daniel Molina 2014-12-10 19:09:29 +01:00
parent 8c7b93f18c
commit 6bea5548fa
5 changed files with 41 additions and 135 deletions

View File

@ -11,9 +11,6 @@ body {
padding:0;
font-family: Helvetica;
/*Background image with light grey curve.*/
background-color:#494949;
background-repeat:no-repeat;
background-position:right bottom;
height:100%;
}
@ -93,7 +90,6 @@ html {
height:32px;
text-align: center;
font-weight: bold;
color: #fff;
}
#noVNC_settings_menu {
@ -122,8 +118,6 @@ html {
display: table;
width:100%;
height:100%;
background-color:#313131;
border-bottom-right-radius: 800px 600px;
/*border-top-left-radius: 800px 600px;*/
}
@ -174,12 +168,8 @@ html {
left:20px;
padding:15px;
color:#000;
background:#eee; /* default background for browsers without gradient support */
border:2px solid #E0E0E0;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#noVNC_popup_status_panel {
@ -195,7 +185,6 @@ html {
text-align:center;
font-weight:bold;
word-wrap:break-word;
color:#fff;
background:rgba(0,0,0,0.65);
-webkit-border-radius:10px;
@ -239,31 +228,13 @@ html {
*/
.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 */
color: #b2bdcd; /* Old browsers */
}
.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 */
color: #f04040; /* Old browsers */
}
.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 */
color: #f0f040; /* Old browsers */
}
/* Control bar */

View File

@ -1,7 +1,6 @@
body
{
background-color: #999999;
color: #000000; margin: 0; padding: 0;
margin: 0; padding: 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-size: 12pt;
line-height: 1.5em;
@ -9,101 +8,33 @@ body
* { margin: 0; }
#login
{
width: 95%;
margin-left: auto;
margin-right: auto;
border: 1px solid #999999;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#24414e));
background: -moz-linear-gradient(top, #fff, #24414e);
background-color: #24414e;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#login span.logo
{
display: inline-block;
margin-right: 5px;
padding: 2px 10px 2px 20px;
border-right: 1px solid #999999;
font-size: 20px;
font-weight: bolder;
text-shadow: #efefef 1px 1px 0px;
}
#login label { color: #ffffff; text-shadow: 1px 1px 0px rgba(175, 210, 220, 0.8); }
#login input
{
padding: 5px;
background-color: #fAfAfA;
border: 1px inset #999999;
outline: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#login input#host { width: 200px; }
#login input#port { width: 75px; }
#login input#password { width: 100px; }
#login button
{
padding: 5px 10px 5px 10px;
margin-left: 5px;
text-shadow: #efefef 1px 1px 0px;
border: 1px outset #999999;
cursor: pointer;
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
#login button:hover
{
background-color: #666666;
color: #ffffff;
}
#spice-area
{
height: 100%;
width: 95%;
padding: 0;
margin-left: auto;
margin-right: auto;
border: solid #222222 1px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.spice-screen
{
min-height: 600px;
height: 100%;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #333333;
text-align: center;
}
.spice-message {
width: 700px;
height: 50px;
overflow: auto;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #efefef;
border: solid #c3c3c3 2px;
border: solid #c3c3c3 1px;
font-size: 8pt;
float: right;
margin-right: 30px;
line-height: 1.1em;
font-family: 'Andale Mono', monospace;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.spice-message p {
margin-bottom: 0em;

View File

@ -2974,29 +2974,22 @@ function updateVNCState(rfb, state, oldstate, msg) {
sb = $D('VNC_status_bar');
cad = $D('sendCtrlAltDelButton');
switch (state) {
case 'failed':
case 'fatal':
klass = "VNC_status_error";
break;
case 'normal':
klass = "VNC_status_normal";
break;
case 'disconnected':
case 'loaded':
klass = "VNC_status_normal";
break;
case 'password':
klass = "VNC_status_warn";
break;
default:
klass = "VNC_status_warn";
case 'failed': level = "error"; break;
case 'fatal': level = "error"; break;
case 'normal': level = "normal"; break;
case 'disconnected': level = "normal"; break;
case 'loaded': level = "normal"; break;
default: level = "warn"; break;
}
if (state === "normal") { cad.disabled = false; }
else { cad.disabled = true; }
if (state === "normal") {
cad.disabled = false;
} else {
cad.disabled = true;
}
if (typeof(msg) !== 'undefined') {
sb.setAttribute("class", klass);
sb.setAttribute("class", "noVNC_status_" + level);
s.innerHTML = msg;
}
}
@ -3146,7 +3139,7 @@ function vncCallback(request,response){
'true_color': true,
'local_cursor': true,
'shared': true,
'updateState': updateVNCState});
'onUpdateState': updateVNCState});
var proxy_host = window.location.hostname;
var proxy_port = config['system_config']['vnc_proxy_port'];

View File

@ -27,7 +27,7 @@
<html>
<head>
<title>Spice Javascript client</title>
<title><%= params['title']%></title>
<script src="vendor/spice/spicearraybuffer.js"></script>
<script src="vendor/spice/enums.js"></script>
<script src="vendor/spice/atKeynames.js"></script>
@ -164,15 +164,23 @@
<body>
<div id="login">
<span class="logo">SPICE</span>
</div>
<div style="background: #f7f7f7; border-bottom: 1px solid #dfdfdf; padding: 10px 0px 15px 0px">
<div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
<table border=0 width="100%"><tr>
<td width="1%" >
<img src="images/one_small_logo.png" style="height:40px; vertical-align:top; margin-left: 30px">
</td>
<td><div id="message-div" class="spice-message"></div></td>
</tr></table>
</div>
</div>
<div id="spice-area">
<div id="spice-screen" class="spice-screen"></div>
</div>
<div id="message-div" class="spice-message"></div>
<div id="debug-div">
<!-- If DUMPXXX is turned on, dumped images will go here -->

View File

@ -45,12 +45,14 @@ var INCLUDE_URI = "vendor/noVNC/";
<body style="margin: 0px;">
<div id="noVNC_screen">
<div style="background: #f7f7f7; border-bottom: 1px solid #dfdfdf; padding: 10px 0px 15px 0px">
<div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
<table border=0 width="100%"><tr>
<td width="1%" ><img src="images/one_small_logo.png" style="height:40px; vertical-align:top; margin-left: 30px"></td>
<td><div id="noVNC_status" style="position: relative; height: auto;">
Loading
</div></td>
<td width="1%"><div id="noVNC_buttons">
<td width="1%" ><div id="noVNC_buttons" style="margin-right: 30px">
<input type=button value="Send CtrlAltDel"
id="sendCtrlAltDelButton">
<span id="noVNC_xvp_buttons">
@ -64,6 +66,7 @@ var INCLUDE_URI = "vendor/noVNC/";
</div></td>
</tr></table>
</div>
</div>
<canvas id="noVNC_canvas" width="640px" height="20px">
Canvas not supported.
</canvas>
@ -198,7 +201,7 @@ var INCLUDE_URI = "vendor/noVNC/";
'local_cursor': WebUtil.getQueryVar('cursor', true),
'shared': WebUtil.getQueryVar('shared', true),
'view_only': WebUtil.getQueryVar('view_only', false),
'updateState': updateState,
'onUpdateState': updateState,
'onXvpInit': xvpInit,
'onPasswordRequired': passwordRequired});