Only show the control bar hint once per "move"

After the user has "followed" the hint by dragging the handle to the
other side, the control bar will switch to that side. Once this has
happened, we will now hide the hint until the user starts over by
dragging the handle again.
This change was added to make the hint feel more like a "hint" and less
like a permanent GUI element. It isn't as persistent and intrusive now.

Note that we don't want the act of hiding the hint to result in a
transition animation here.

2 files changed, 14 insertions, 1 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index 303be94..ac78606 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -374,6 +374,9 @@ html {
   transition-delay: 0.2s;
   transform: scale(1);
 }
+#noVNC_control_bar_hint.noVNC_notransition {
+  transition: none !important;
+}
 
 /* Control bar buttons */
 .noVNC_button {
diff --git a/app/ui.js b/app/ui.js
index 464c7f2..9254120 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -589,10 +589,20 @@ const UI = {
 
         // Consider this a movement of the handle
         UI.controlbarDrag = true;
+
+        // The user has "followed" hint, let's hide it until the next drag
+        UI.showControlbarHint(false, false);
     },
 
-    showControlbarHint(show) {
+    showControlbarHint(show, animate=true) {
         const hint = document.getElementById('noVNC_control_bar_hint');
+
+        if (animate) {
+            hint.classList.remove("noVNC_notransition");
+        } else {
+            hint.classList.add("noVNC_notransition");
+        }
+
         if (show) {
             hint.classList.add("noVNC_active");
         } else {