diff --git a/app/images/handle.svg b/app/images/handle.svg new file mode 100644 index 00000000..4a7a126f --- /dev/null +++ b/app/images/handle.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/app/images/handle_bg.svg b/app/images/handle_bg.svg new file mode 100644 index 00000000..b4c4d131 --- /dev/null +++ b/app/images/handle_bg.svg @@ -0,0 +1,172 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/app/styles/base.css b/app/styles/base.css index 179a20b7..ec682c46 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -153,18 +153,55 @@ input[type=button]:active, select:active { #noVNC_control_bar { position: relative; - left: -30px; + /* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */ + left: -80px; + + transition: 0.5s ease-in-out; background-color: rgb(110, 132, 163); border-radius: 0 10px 10px 0; - box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); - /* The extra border is to get a proper shadow */ border-color: rgb(110, 132, 163); border-style: solid; border-width: 0 0 0 30px; } +#noVNC_control_bar.noVNC_open { + box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); + left: -30px; +} + +#noVNC_control_bar_handle { + position: absolute; + right: -15px; + top: 10%; + width: 50px; + height: 50px; + z-index: -2; + cursor: pointer; + border-radius: 0 5px 5px 0; + background-color: rgb(83, 99, 122); + background-image: url("../images/handle_bg.svg"); + background-repeat: no-repeat; + background-position: right; + box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5); +} +#noVNC_control_bar_handle:after { + content: ""; + transition: 0.5s ease-in-out; + background: url("../images/handle.svg"); + position: absolute; + top: 22px; /* (50px-6px)/2 */ + right: 5px; + width: 5px; + height: 6px; +} +#noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after { + transform: translateX(1px) rotate(180deg); +} +:root:not(.noVNC_connected) #noVNC_control_bar_handle { + display: none; +} #noVNC_control_bar .noVNC_scroll { max-height: 100vh; /* Chrome is buggy with 100% */ diff --git a/app/styles/black.css b/app/styles/black.css index e3ad2493..d982a813 100644 --- a/app/styles/black.css +++ b/app/styles/black.css @@ -12,7 +12,7 @@ color:#fff; } -#noVNC_control_bar { +#noVNC_control_bar, #noVNC_control_bar_handle { background: #4c4c4c; } diff --git a/app/styles/blue.css b/app/styles/blue.css index 3db77270..e36e6d1d 100644 --- a/app/styles/blue.css +++ b/app/styles/blue.css @@ -12,6 +12,6 @@ color:#fff; } -#noVNC_control_bar { +#noVNC_control_bar, #noVNC_control_bar_handle { background: #080F80; } diff --git a/app/ui.js b/app/ui.js index 6e2ff03f..0c7cf1ec 100644 --- a/app/ui.js +++ b/app/ui.js @@ -198,6 +198,9 @@ var UI; document.getElementById("noVNC_control_bar") .addEventListener('keypress', UI.activateControlbar); + document.getElementById("noVNC_control_bar_handle") + .addEventListener('click', UI.toggleControlbar); + document.getElementById("noVNC_view_drag_button") .addEventListener('click', UI.toggleViewDrag); document.getElementById("noVNC_send_ctrl_alt_del_button") @@ -474,6 +477,26 @@ var UI; .classList.add("noVNC_idle"); }, + openControlbar: function() { + document.getElementById('noVNC_control_bar') + .classList.add("noVNC_open"); + }, + + closeControlbar: function() { + UI.closeAllPanels(); + document.getElementById('noVNC_control_bar') + .classList.remove("noVNC_open"); + }, + + toggleControlbar: function() { + if (document.getElementById('noVNC_control_bar') + .classList.contains("noVNC_open")) { + UI.closeControlbar(); + } else { + UI.openControlbar(); + } + }, + /* ------^------- * /VISUAL * ============== @@ -612,6 +635,7 @@ var UI; openSettingsPanel: function() { UI.closeAllPanels(); + UI.openControlbar(); UI.updateSetting('encrypt'); UI.updateSetting('true_color'); @@ -664,6 +688,7 @@ var UI; openXvpPanel: function() { UI.closeAllPanels(); + UI.openControlbar(); document.getElementById('noVNC_xvp') .classList.add("noVNC_open"); @@ -708,6 +733,7 @@ var UI; openClipboardPanel: function() { UI.closeAllPanels(); + UI.openControlbar(); document.getElementById('noVNC_clipboard') .classList.add("noVNC_open"); @@ -757,6 +783,7 @@ var UI; openConnectPanel: function() { UI.closeAllPanels(); + UI.openControlbar(); document.getElementById('noVNC_connect_controls') .classList.add("noVNC_open"); @@ -789,6 +816,7 @@ var UI; connect: function() { UI.closeAllPanels(); + UI.closeControlbar(); var host = document.getElementById('noVNC_setting_host').value; var port = document.getElementById('noVNC_setting_port').value; @@ -1250,6 +1278,7 @@ var UI; openExtraKeys: function() { UI.closeAllPanels(); + UI.openControlbar(); document.getElementById('noVNC_modifiers') .classList.add("noVNC_open"); diff --git a/vnc.html b/vnc.html index aeb63f8d..29d82521 100644 --- a/vnc.html +++ b/vnc.html @@ -52,7 +52,11 @@
-
+
+
+ +
+

no
VNC

@@ -189,7 +193,9 @@
-
+ +
+