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:
parent
8c7b93f18c
commit
6bea5548fa
@ -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 */
|
||||
|
@ -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;
|
||||
|
@ -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'];
|
||||
|
@ -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 -->
|
||||
|
@ -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});
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user