Merged the control-bar and the status-bar together.
Also added a popup with the status text.
This commit is contained in:
Samuel Mannehed
parent
8f12ca7a5a
commit
0fa4e0a90a
|
|
@ -66,6 +66,8 @@ html {
|
|||
float: left;
|
||||
padding-left:10px;
|
||||
padding-top:4px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.noVNC-buttons-right {
|
||||
|
|
@ -73,17 +75,21 @@ html {
|
|||
right: 0px;
|
||||
padding-right:10px;
|
||||
padding-top:4px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#noVNC_status_bar {
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#noVNC_status_bar div {
|
||||
font-size: 12px;
|
||||
padding-top: 4px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#noVNC_status {
|
||||
|
|
@ -105,13 +111,13 @@ html {
|
|||
}
|
||||
|
||||
.noVNC_status_normal {
|
||||
background: #eee;
|
||||
background: transparent;
|
||||
}
|
||||
.noVNC_status_error {
|
||||
background: #f44;
|
||||
background: rgba(240,64,64,0.5);
|
||||
}
|
||||
.noVNC_status_warn {
|
||||
background: #ff4;
|
||||
background: rgba(240,240,64,0.5);
|
||||
}
|
||||
|
||||
/* Do not set width/height for VNC_screen or VNC_canvas or incorrect
|
||||
|
|
@ -186,6 +192,26 @@ html {
|
|||
border-radius:10px;
|
||||
}
|
||||
|
||||
#noVNC_popup_status_panel {
|
||||
display:none;
|
||||
position: fixed;
|
||||
|
||||
margin:15px;
|
||||
margin-top:60px;
|
||||
padding:15px;
|
||||
width:auto;
|
||||
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
word-wrap:break-word;
|
||||
color:#fff;
|
||||
background:rgba(0,0,0,0.65);
|
||||
|
||||
-webkit-border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
#noVNC_clipboard {
|
||||
display:none;
|
||||
margin-top:77px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
* noVNC: HTML5 VNC client
|
||||
* Copyright (C) 2012 Joel Martin
|
||||
* Copyright (C) 2013 Samuel Mannehed for Cendio AB
|
||||
* Licensed under MPL 2.0 (see LICENSE.txt)
|
||||
*
|
||||
* See README.md for usage and integration instructions.
|
||||
|
|
@ -20,6 +21,7 @@ var UI = {
|
|||
rfb_state : 'loaded',
|
||||
settingsOpen : false,
|
||||
connSettingsOpen : false,
|
||||
popupStatusOpen : false,
|
||||
clipboardOpen: false,
|
||||
keyboardVisible: false,
|
||||
|
||||
|
|
@ -156,6 +158,8 @@ addMouseHandlers: function() {
|
|||
$D("keyboardinput").onblur = UI.keyInputBlur;
|
||||
|
||||
$D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel;
|
||||
$D("noVNC_status_bar").onclick = UI.togglePopupStatusPanel;
|
||||
$D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel;
|
||||
$D("clipboardButton").onclick = UI.toggleClipboardPanel;
|
||||
$D("settingsButton").onclick = UI.toggleSettingsPanel;
|
||||
$D("connectButton").onclick = UI.toggleConnectPanel;
|
||||
|
|
@ -257,20 +261,39 @@ forceSetting: function(name, val) {
|
|||
},
|
||||
|
||||
|
||||
// Show the popup status panel
|
||||
togglePopupStatusPanel: function() {
|
||||
var psp = $D('noVNC_popup_status_panel');
|
||||
if (UI.popupStatusOpen === true) {
|
||||
psp.style.display = "none";
|
||||
UI.popupStatusOpen = false;
|
||||
} else {
|
||||
psp.innerHTML = $D('noVNC_status').innerHTML;
|
||||
psp.style.display = "block";
|
||||
psp.style.left = window.innerWidth/2 -
|
||||
parseInt(window.getComputedStyle(psp, false).width)/2 -30 + "px";
|
||||
UI.popupStatusOpen = true;
|
||||
}
|
||||
},
|
||||
|
||||
// Show the clipboard panel
|
||||
toggleClipboardPanel: function() {
|
||||
// Close the description panel
|
||||
$D('noVNC_description').style.display = "none";
|
||||
//Close settings if open
|
||||
// Close settings if open
|
||||
if (UI.settingsOpen === true) {
|
||||
UI.settingsApply();
|
||||
UI.closeSettingsMenu();
|
||||
}
|
||||
//Close connection settings if open
|
||||
// Close connection settings if open
|
||||
if (UI.connSettingsOpen === true) {
|
||||
UI.toggleConnectPanel();
|
||||
}
|
||||
//Toggle Clipboard Panel
|
||||
// Close popup status panel if open
|
||||
if (UI.popupStatusOpen === true) {
|
||||
UI.togglePopupStatusPanel();
|
||||
}
|
||||
// Toggle Clipboard Panel
|
||||
if (UI.clipboardOpen === true) {
|
||||
$D('noVNC_clipboard').style.display = "none";
|
||||
$D('clipboardButton').className = "noVNC_status_button";
|
||||
|
|
@ -286,17 +309,22 @@ toggleClipboardPanel: function() {
|
|||
toggleConnectPanel: function() {
|
||||
// Close the description panel
|
||||
$D('noVNC_description').style.display = "none";
|
||||
//Close connection settings if open
|
||||
// Close connection settings if open
|
||||
if (UI.settingsOpen === true) {
|
||||
UI.settingsApply();
|
||||
UI.closeSettingsMenu();
|
||||
$D('connectButton').className = "noVNC_status_button";
|
||||
}
|
||||
// Close clipboard panel if open
|
||||
if (UI.clipboardOpen === true) {
|
||||
UI.toggleClipboardPanel();
|
||||
}
|
||||
// Close popup status panel if open
|
||||
if (UI.popupStatusOpen === true) {
|
||||
UI.togglePopupStatusPanel();
|
||||
}
|
||||
|
||||
//Toggle Connection Panel
|
||||
// Toggle Connection Panel
|
||||
if (UI.connSettingsOpen === true) {
|
||||
$D('noVNC_controls').style.display = "none";
|
||||
$D('connectButton').className = "noVNC_status_button";
|
||||
|
|
@ -347,13 +375,18 @@ toggleSettingsPanel: function() {
|
|||
openSettingsMenu: function() {
|
||||
// Close the description panel
|
||||
$D('noVNC_description').style.display = "none";
|
||||
// Close clipboard panel if open
|
||||
if (UI.clipboardOpen === true) {
|
||||
UI.toggleClipboardPanel();
|
||||
}
|
||||
//Close connection settings if open
|
||||
// Close connection settings if open
|
||||
if (UI.connSettingsOpen === true) {
|
||||
UI.toggleConnectPanel();
|
||||
}
|
||||
// Close popup status panel if open
|
||||
if (UI.popupStatusOpen === true) {
|
||||
UI.togglePopupStatusPanel();
|
||||
}
|
||||
$D('noVNC_settings').style.display = "block";
|
||||
$D('settingsButton').className = "noVNC_status_button_selected";
|
||||
UI.settingsOpen = true;
|
||||
|
|
|
|||
12
vnc.html
12
vnc.html
|
|
@ -71,6 +71,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="noVNC_status_bar" class="noVNC_status_bar">
|
||||
<div id="noVNC_status">Loading</div>
|
||||
</div>
|
||||
|
||||
<!--noVNC Buttons-->
|
||||
<div class="noVNC-buttons-right">
|
||||
<input type="image" src="images/ctrlaltdel.png"
|
||||
|
|
@ -106,6 +110,10 @@
|
|||
<input id="descriptionButton" type="button" value="Close">
|
||||
</div>
|
||||
|
||||
<!-- Popup Status Panel -->
|
||||
<div id="noVNC_popup_status_panel" class="">
|
||||
</div>
|
||||
|
||||
<!-- Clipboard Panel -->
|
||||
<div id="noVNC_clipboard" class="triangle-right top">
|
||||
<textarea id="noVNC_clipboard_text" rows=5>
|
||||
|
|
@ -163,10 +171,6 @@
|
|||
<div id="noVNC_screen">
|
||||
<div id="noVNC_screen_pad"></div>
|
||||
|
||||
<div id="noVNC_status_bar" class="noVNC_status_bar">
|
||||
<div id="noVNC_status">Loading</div>
|
||||
</div>
|
||||
|
||||
<h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
|
||||
|
||||
<!-- HTML5 Canvas -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue