Merge 905f3df565 into 0ae5b50a0e

app/styles/base.css

@@ -321,20 +321,34 @@ select:active {
 
 #noVNC_control_bar_handle {
   position: absolute;
-  left: -15px;
+  left: 100%;
+  right: auto;
   top: 0;
   transform: translateY(35px);
-  width: calc(100% + 30px);
+  width: 15px;
   height: 50px;
   z-index: -1;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 0px 5px 5px 0px;
   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::before {
+  /* This extra element is to get a proper shadow */
+  content: "";
+  position: absolute;
+  height: 3px;
+  width: 3px;
+  left: -3px;
+  top: 100%;
+  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.5);
+}
+.noVNC_right #noVNC_control_bar_handle::before {
+  visibility: hidden;
+}
 #noVNC_control_bar_handle:after {
   content: "";
   transition: transform 0.5s ease-in-out;
@@ -353,6 +367,9 @@ select:active {
 }
 .noVNC_right #noVNC_control_bar_handle {
   background-position: left;
+  left: auto;
+  right: 100%;
+  border-radius: 5px 0px 0px 5px;
 }
 .noVNC_right #noVNC_control_bar_handle:after {
   left: 5px;
@@ -587,6 +604,29 @@ select:active {
   display: none;
 }
 
+/* ----------------------------------------
+ * 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
  * ----------------------------------------

app/ui.js

@@ -650,15 +650,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;
 
@@ -732,6 +787,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 () {
@@ -754,6 +810,7 @@ var UI;
                 UI.activateControlbar();
             }
             UI.controlbarGrabbed = false;
+            UI.displayControlBarHint(false);
         },
 
         controlbarHandleMouseDown: function(e) {
@@ -768,6 +825,8 @@ var UI;
             UI.controlbarGrabbed = true;
             UI.controlbarDrag = false;
 
+            UI.displayControlBarHint(true);
+
             UI.controlbarMouseDownClientY = ptr.clientY;
             UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top;
             e.preventDefault();

app/webutil.js

@@ -332,6 +332,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