Add hint that the control bar can be moved

The control bar can be dragged to the other side, this isn't obvious
however. This adds a hint on the opposite side in the form of a subtle
glowing half-ellipse.

3 files changed, 43 insertions, 0 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index ce31cf7..dbab5dd 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 0d6a657..e4ba3d2 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 6cb4be4..0109ce6 100644
--- a/vnc.html
+++ b/vnc.html
@@ -279,6 +279,8 @@
             </div>
         </div>
 
+        <div id="noVNC_control_bar_hint"></div>
+
     </div> <!-- End of noVNC_control_bar -->
 
     <!-- Status Dialog -->