From 0fa4e0a90afd48f69e7bd66d7f8ff3d8af6d6198 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Fri, 28 Jun 2013 14:44:58 +0200 Subject: [PATCH] Merged the control-bar and the status-bar together. Also added a popup with the status text. --- include/base.css | 34 ++++++++++++++++++++++++++++++---- include/ui.js | 45 +++++++++++++++++++++++++++++++++++++++------ vnc.html | 12 ++++++++---- 3 files changed, 77 insertions(+), 14 deletions(-) diff --git a/include/base.css b/include/base.css index 89b2b574..f97306b3 100644 --- a/include/base.css +++ b/include/base.css @@ -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; diff --git a/include/ui.js b/include/ui.js index 3387567a..de75a632 100644 --- a/include/ui.js +++ b/include/ui.js @@ -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; diff --git a/vnc.html b/vnc.html index 5f6cc70e..672d4978 100644 --- a/vnc.html +++ b/vnc.html @@ -71,6 +71,10 @@ +
+
Loading
+
+
+ +
+
+