Add hint that the control bar can be movedvisualhint

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
silhouette of the control bar.

3 files changed, 132 insertions, 0 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index 8c6c810..34fe320 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -566,6 +566,29 @@ input[type=button]:active, select:active {
 }
 
 /* ----------------------------------------
+ * Silhouettes
+ * ----------------------------------------
+ */
+
+/* Outline that shows the form of a target element */
+.noVNC_silhouette {
+  /* Two colors to make it easier to see no matter the background */
+  box-shadow: 0 4px 5px white, 0 -4px 5px skyblue;
+  transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out;
+  position: fixed;
+  visibility: hidden;
+  opacity: 0;
+}
+.noVNC_silhouette.noVNC_active {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+.noVNC_silhouette.noVNC_flipped {
+  transform: rotate(180deg);
+}
+
+/* ----------------------------------------
  * Status Dialog
  * ----------------------------------------
  */
diff --git a/app/ui.js b/app/ui.js
index 4faba53..0c2d2fe 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -608,15 +608,70 @@ var UI;
             if (anchor.classList.contains("noVNC_right")) {
                 WebUtil.writeSetting('controlbar_pos', 'left');
                 anchor.classList.remove("noVNC_right");
+
+                UI.updateControlBarHint('right');
             } else {
                 WebUtil.writeSetting('controlbar_pos', 'right');
                 anchor.classList.add("noVNC_right");
+
+                UI.updateControlBarHint('left');
             }
 
             // Consider this a movement of the handle
             UI.controlbarDrag = true;
         },
 
+        displayControlBarHint: function (show) {
+            var handleHint = WebUtil.getSilhouette("noVNC_control_bar_handle");
+            var controlBarHint = WebUtil.getSilhouette("noVNC_control_bar");
+
+            if (!show) {
+                if (handleHint === null || controlBarHint === null) return;
+
+                if (handleHint.classList.contains("noVNC_active")) {
+                    handleHint.classList.remove("noVNC_active");
+                }
+                if (controlBarHint.classList.contains("noVNC_active")) {
+                    controlBarHint.classList.remove("noVNC_active");
+                }
+                return;
+            }
+
+            if (handleHint === null || controlBarHint === null) {
+                var handle =
+                    document.getElementById('noVNC_control_bar_handle');
+                var controlBar = document.getElementById('noVNC_control_bar');
+
+                handleHint = WebUtil.createSilhouette(handle);
+                controlBarHint = WebUtil.createSilhouette(controlBar);
+                handleHint.classList.add("noVNC_flipped");
+                controlBarHint.classList.add("noVNC_flipped");
+            }
+
+            UI.updateControlBarHint();
+
+            handleHint.classList.add("noVNC_active");
+            controlBarHint.classList.add("noVNC_active");
+        },
+
+        updateControlBarHint: function (hintSide) {
+            var handle = document.getElementById('noVNC_control_bar_handle');
+            var controlBar = document.getElementById('noVNC_control_bar');
+            if (hintSide === undefined) {
+                // Don't change side if no side was specified
+                if (WebUtil.readSetting('controlbar_pos') === 'left') {
+                    hintSide = 'right';
+                } else {
+                    hintSide = 'left';
+                }
+            } else {
+                WebUtil.flipSilhouette(handle);
+                WebUtil.flipSilhouette(controlBar);
+            }
+            WebUtil.updateSilhouette(handle, hintSide);
+            WebUtil.updateSilhouette(controlBar, hintSide);
+        },
+
         dragControlbarHandle: function (e) {
             if (!UI.controlbarGrabbed) return;
 
@@ -690,6 +745,7 @@ var UI;
             // The transform needs coordinates that are relative to the parent
             var parentRelativeY = newY - controlbarBounds.top;
             handle.style.transform = "translateY(" + parentRelativeY + "px)";
+            UI.updateControlBarHint ();
         },
 
         updateControlbarHandle: function () {
@@ -712,6 +768,7 @@ var UI;
                 UI.activateControlbar();
             }
             UI.controlbarGrabbed = false;
+            UI.displayControlBarHint(false);
         },
 
         controlbarHandleMouseDown: function(e) {
@@ -726,6 +783,8 @@ var UI;
             UI.controlbarGrabbed = true;
             UI.controlbarDrag = false;
 
+            UI.displayControlBarHint(true);
+
             UI.controlbarMouseDownClientY = ptr.clientY;
             UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top;
             e.preventDefault();
diff --git a/app/webutil.js b/app/webutil.js
index 90a0a53..99271af 100644
--- a/app/webutil.js
+++ b/app/webutil.js
@@ -371,6 +371,56 @@ WebUtil.releaseCapture = function () {
     }
 };
 
+// Seperate elements that outline the form of a target element
+
+WebUtil.createSilhouette = function (target) {
+    var targetForm = target.getBoundingClientRect();
+    var targetStyle = window.getComputedStyle(target);
+
+    var silhouette = document.createElement("div");
+    silhouette.id = target.id + "_silhouette";
+    silhouette.style.borderRadius = targetStyle.borderRadius;
+    silhouette.style.width = targetForm.width + "px";
+    silhouette.style.height = targetForm.height + "px";
+    silhouette.classList.add("noVNC_silhouette");
+
+    document.body.appendChild(silhouette);
+
+    return silhouette;
+};
+
+WebUtil.getSilhouette = function (targetId) {
+    return document.getElementById(targetId + "_silhouette");
+};
+
+WebUtil.updateSilhouette = function (target, alignSide) {
+    var silhouette = WebUtil.getSilhouette(target.id);
+
+    if (silhouette === null) return;
+
+    var form = target.getBoundingClientRect();
+
+    if (alignSide === 'right') {
+        silhouette.style.right = form.left + "px";
+        silhouette.style.left = "auto";
+    } else if (alignSide === 'left') {
+        silhouette.style.left = window.innerWidth - form.right + "px";
+        silhouette.style.right = "auto";
+    }
+    silhouette.style.top = form.top + "px";
+};
+
+WebUtil.flipSilhouette = function (target) {
+    var silhouette = WebUtil.getSilhouette(target.id);
+
+    if (silhouette === null) return;
+
+    if (silhouette.classList.contains("noVNC_flipped")) {
+        silhouette.classList.remove("noVNC_flipped");
+    } else {
+        silhouette.classList.add("noVNC_flipped");
+    }
+};
 
 // Dynamically load scripts without using document.write()
 // Reference: http://unixpapa.com/js/dyna.html