Allow control bar to be moved to the right side

app/images/handle_bg.svg

@@ -9,9 +9,9 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="20"
+   width="15"
    height="50"
-   viewBox="0 0 20 50"
+   viewBox="0 0 15 50"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -29,8 +29,8 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:zoom="16"
-     inkscape:cx="10.515997"
+     inkscape:cx="-10.001409"
-     inkscape:cy="22.863737"
+     inkscape:cy="24.512566"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -63,7 +63,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -77,13 +77,13 @@
        id="rect4249"
        width="1"
        height="1.0000174"
-       x="14.5"
+       x="9.5"
        y="1008.8622"
        ry="1.7382812e-05" />
     <rect
        ry="1.7382812e-05"
        y="1013.8622"
-       x="14.5"
+       x="9.5"
        height="1.0000174"
        width="1"
        id="rect4255"
@@ -91,7 +91,7 @@
     <rect
        ry="1.7382812e-05"
        y="1008.8622"
-       x="9.5"
+       x="4.5"
        height="1.0000174"
        width="1"
        id="rect4261"
@@ -101,13 +101,13 @@
        id="rect4263"
        width="1"
        height="1.0000174"
-       x="9.5"
+       x="4.5"
        y="1013.8622"
        ry="1.7382812e-05" />
     <rect
        ry="1.7382812e-05"
        y="1039.8622"
-       x="14.5"
+       x="9.5"
        height="1.0000174"
        width="1"
        id="rect4265"
@@ -117,7 +117,7 @@
        id="rect4267"
        width="1"
        height="1.0000174"
-       x="14.5"
+       x="9.5"
        y="1044.8622"
        ry="1.7382812e-05" />
     <rect
@@ -125,13 +125,13 @@
        id="rect4269"
        width="1"
        height="1.0000174"
-       x="9.5"
+       x="4.5"
        y="1039.8622"
        ry="1.7382812e-05" />
     <rect
        ry="1.7382812e-05"
        y="1044.8622"
-       x="9.5"
+       x="4.5"
        height="1.0000174"
        width="1"
        id="rect4271"
@@ -141,13 +141,13 @@
        id="rect4273"
        width="1"
        height="1.0000174"
-       x="14.5"
+       x="9.5"
        y="1018.8622"
        ry="1.7382812e-05" />
     <rect
        ry="1.7382812e-05"
        y="1018.8622"
-       x="9.5"
+       x="4.5"
        height="1.0000174"
        width="1"
        id="rect4275"
@@ -157,13 +157,13 @@
        id="rect4277"
        width="1"
        height="1.0000174"
-       x="14.5"
+       x="9.5"
        y="1034.8622"
        ry="1.7382812e-05" />
     <rect
        ry="1.7382812e-05"
        y="1034.8622"
-       x="9.5"
+       x="4.5"
        height="1.0000174"
        width="1"
        id="rect4279"

app/styles/base.css

@@ -227,37 +227,59 @@ input[type=button]:active, select:active {
 :root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
   opacity: 0.8;
 }
+#noVNC_control_bar_anchor.noVNC_right {
+  left: auto;
+  right: 0;
+}
 
 #noVNC_control_bar {
   position: relative;
-  /* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
+  left: -100%;
-  left: -80px;
 
   transition: 0.5s ease-in-out;
 
   background-color: rgb(110, 132, 163);
   border-radius: 0 10px 10px 0;
 
-  /* The extra border is to get a proper shadow */
-  border-color: rgb(110, 132, 163);
-  border-style: solid;
-  border-width: 0 0 0 30px;
 }
 #noVNC_control_bar.noVNC_open {
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+  left: 0;
+}
+#noVNC_control_bar::before {
+  /* This extra element is to get a proper shadow */
+  content: "";
+  position: absolute;
+  z-index: -1;
+  height: 100%;
+  width: 30px;
   left: -30px;
+  transition: box-shadow 0.5s ease-in-out;
+}
+#noVNC_control_bar.noVNC_open::before {
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+}
+.noVNC_right #noVNC_control_bar {
+  left: 100%;
+  border-radius: 10px 0 0 10px;
+}
+.noVNC_right #noVNC_control_bar.noVNC_open {
+  left: 0;
+}
+.noVNC_right #noVNC_control_bar::before {
+  visibility: hidden;
 }
 
 #noVNC_control_bar_handle {
   position: absolute;
-  right: -15px;
+  left: -15px;
   top: 0;
   transform: translateY(35px);
-  width: 50px;
+  width: calc(100% + 30px);
   height: 50px;
   z-index: -2;
   cursor: pointer;
-  border-radius: 0 5px 5px 0;
+  border-radius: 5px;
   background-color: rgb(83, 99, 122);
   background-image: url("../images/handle_bg.svg");
   background-repeat: no-repeat;
@@ -266,7 +288,7 @@ input[type=button]:active, select:active {
 }
 #noVNC_control_bar_handle:after {
   content: "";
-  transition: 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out;
   background: url("../images/handle.svg");
   position: absolute;
   top: 22px; /* (50px-6px)/2 */
@@ -280,6 +302,17 @@ input[type=button]:active, select:active {
 :root:not(.noVNC_connected) #noVNC_control_bar_handle {
   display: none;
 }
+.noVNC_right #noVNC_control_bar_handle {
+  background-position: left;
+}
+.noVNC_right #noVNC_control_bar_handle:after {
+  left: 5px;
+  right: 0;
+  transform: translateX(1px) rotate(180deg);
+}
+.noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
+  transform: none;
+}
 #noVNC_control_bar_handle div {
   position: absolute;
   right: -35px;
@@ -290,6 +323,10 @@ input[type=button]:active, select:active {
 :root:not(.noVNC_touch) #noVNC_control_bar_handle div {
   display: none;
 }
+.noVNC_right #noVNC_control_bar_handle div {
+  left: -35px;
+  right: auto;
+}
 
 #noVNC_control_bar .noVNC_scroll {
   max-height: 100vh; /* Chrome is buggy with 100% */
@@ -297,6 +334,9 @@ input[type=button]:active, select:active {
   overflow-y: auto;
   padding: 0 10px 0 5px;
 }
+.noVNC_right #noVNC_control_bar .noVNC_scroll {
+  padding: 0 5px 0 10px;
+}
 
 /* General button style */
 .noVNC_button {
@@ -362,6 +402,16 @@ input[type=button]:active, select:active {
   opacity: 1;
   transform: translateX(75px);
 }
+.noVNC_right .noVNC_vcenter {
+  left: auto;
+  right: 0;
+}
+.noVNC_right .noVNC_panel {
+  transform: translateX(-25px);
+}
+.noVNC_right .noVNC_panel.noVNC_open {
+  transform: translateX(-75px);
+}
 
 .noVNC_panel hr {
   border: none;

app/ui.js

@@ -576,11 +576,35 @@ var UI;
             }
         },
 
+        toggleControlbarSide: function () {
+            // Temporarily disable animation to avoid weird movement
+            var bar = document.getElementById('noVNC_control_bar');
+            bar.style.transitionDuration = '0s';
+            bar.addEventListener('transitionend', function () { this.style.transitionDuration = ""; });
+
+            var anchor = document.getElementById('noVNC_control_bar_anchor');
+            anchor.classList.toggle("noVNC_right");
+
+            // Consider this a movement of the handle
+            UI.controlbarDrag = true;
+        },
+
         dragControlbarHandle: function (e) {
             if (!UI.controlbarGrabbed) return;
 
             var ptr = Util.getPointerEvent(e);
 
+            var anchor = document.getElementById('noVNC_control_bar_anchor');
+            if (ptr.clientX < (window.innerWidth * 0.1)) {
+                if (anchor.classList.contains("noVNC_right")) {
+                    UI.toggleControlbarSide();
+                }
+            } else if (ptr.clientX > (window.innerWidth * 0.9)) {
+                if (!anchor.classList.contains("noVNC_right")) {
+                    UI.toggleControlbarSide();
+                }
+            }
+
             if (!UI.controlbarDrag) {
                 // The goal is to trigger on a certain physical width, the
                 // devicePixelRatio brings us a bit closer but is not optimal.