diff --git a/app/styles/base.css b/app/styles/base.css index ce31cf7e..dbab5ddf 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -402,6 +402,35 @@ select:active { padding: 0 5px 0 10px; } +/* Control bar hint */ +#noVNC_control_bar_hint { + position: fixed; + left: calc(100vw - 50px); + right: auto; + width: 100px; + height: 50%; + max-height: 600px; + + visibility: hidden; + opacity: 0; + transition: 0.2s ease-in-out; + background: transparent; + box-shadow: 0 0 10px black, inset 0 0 10px 10px rgba(110, 132, 163, 0.8); + border-radius: 10px; + transition-delay: 0s; + transform: scale(0); +} +#noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint{ + left: auto; + right: calc(100vw - 50px); +} +#noVNC_control_bar_hint.noVNC_active { + visibility: visible; + opacity: 1; + transition-delay: 0.2s; + transform: scale(1); +} + /* General button style */ .noVNC_button { display: block; diff --git a/app/ui.js b/app/ui.js index 0d6a6578..e4ba3d22 100644 --- a/app/ui.js +++ b/app/ui.js @@ -627,6 +627,15 @@ const UI = { UI.controlbarDrag = true; }, + showControlbarHint: function (show) { + var hint = document.getElementById('noVNC_control_bar_hint'); + if (show) { + hint.classList.add("noVNC_active"); + } else { + hint.classList.remove("noVNC_active"); + } + }, + dragControlbarHandle: function (e) { if (!UI.controlbarGrabbed) return; @@ -722,6 +731,7 @@ const UI = { UI.activateControlbar(); } UI.controlbarGrabbed = false; + UI.showControlbarHint(false); }, controlbarHandleMouseDown: function(e) { @@ -740,6 +750,8 @@ const UI = { UI.controlbarGrabbed = true; UI.controlbarDrag = false; + UI.showControlbarHint(true); + UI.controlbarMouseDownClientY = ptr.clientY; UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top; e.preventDefault(); diff --git a/vnc.html b/vnc.html index 6cb4be4d..0109ce69 100644 --- a/vnc.html +++ b/vnc.html @@ -279,6 +279,8 @@ +
+