Merge pull request #330 from CorbinWunderlich/master

noVNC-style vertical menu

html5/connect.html

@@ -501,6 +501,7 @@ <h4 class="panel-title">Advanced options</h4>
                     <option value="top-left">Top Left</option>
                     <option value="top">Top</option>
                     <option value="top-right">Top Right</option>
+                    <option value="novnc">noVNC (vertical left)</option>
                   </select>
                 </li>
                 <li class="list-group-item">

html5/css/icon.css

@@ -15,6 +15,8 @@
   font-size: 24px;
   text-align: center;
 
+  color: black;
+
   content: attr(data-icon);
 
   /* This is important for IE, which has it off by default */

html5/css/menu-skin.css

@@ -23,6 +23,26 @@ SOFTWARE.
 
 */
 
+#float_menu_button {
+  background: white;
+  height: 50px;
+  width: 12px;
+  border-radius: 0px 10px 10px 0px;
+
+  position: relative;
+  left: 30px;
+  top: -125px;
+}
+
+#float_menu_arrow {
+  color: black;
+  border-color: black;
+
+  position: relative;
+  right: 14px;
+  top: 5px;
+}
+
 #float_menu {
   display: none;
   height: 30px;
@@ -55,7 +75,7 @@ SOFTWARE.
 .menu-content-left {
   white-space: nowrap;
   float: left;
-  width: 24px;
+  width: 0px;
   height: 24px;
   padding: 3px 2px;
   vertical-align: middle;
@@ -66,7 +86,7 @@ SOFTWARE.
 .menu-content-right {
   white-space: nowrap;
   float: right;
-  width: 16px;
+  width: 0px;
   height: 16px;
   padding: 7px 2px;
   vertical-align: middle;
@@ -81,6 +101,11 @@ SOFTWARE.
 .Menu {
   color: black;
 }
+
+.Menu.-vertical {
+  border-radius: 0px 3px 3px 0px;
+}
+
 /* Foreground */
 .Menu,
 .Menu li.-hasSubmenu > a:after {

html5/index.html

@@ -241,6 +241,14 @@
             ></a>
           </li>
         </ul>
+        <div id="float_menu_button">
+          <a
+            href="#"
+            id="float_menu_arrow"
+            title="Expand Menu"
+            data-icon="chevron_right"
+          ></a>
+        </div>
         <div id="float_tray" class="menu-divright"></div>
       </div>
       <img id="shadow_pointer" alt="shadow pointer" />
@@ -1388,27 +1396,69 @@ <h2>Xpra Bug Report</h2>
         }
       }
 
+      let float_menu_expanded = true;
+
       function expand_float_menu() {
         const expanded_width = float_menu_item_size * float_menu_item_count;
         const float_menu = document.getElementById("float_menu");
         float_menu.style.display = "inline-block";
         float_menu.style.width = expanded_width + "px";
-        $("#float_menu").children().show();
+        $("#float_menu").children(".Menu").show();
         if (client) {
           client.reconfigure_all_trays();
         }
+
+        $("#float_menu_arrow").attr("data-icon", "chevron_left");
+
+        $("#float_menu_button").css({ left: "30px", top: "-125px" });
+
+        float_menu_expanded = true;
       }
 
       function retract_float_menu() {
         document.getElementById("float_menu").style.width = "0px";
-        $("#float_menu").children().hide();
+        $("#float_menu").children(".Menu").hide();
+
+        $("#float_menu_arrow").attr("data-icon", "chevron_right");
+
+        $("#float_menu_button").css({ left: "0px", top: "70px" });
+
+        float_menu_expanded = false;
+      }
+
+      function toggle_float_menu() {
+        if (float_menu_expanded) {
+          retract_float_menu();
+          return;
+        }
+
+        expand_float_menu();
       }
 
       function init_float_menu() {
         const toolbar_position = getparam("toolbar_position");
         const floating_menu = getboolparam("floating_menu", true);
         const autohide = getboolparam("autohide", false);
         const float_menu_element = $("#float_menu");
+        if (toolbar_position === "novnc") {
+          float_menu_element
+            .children(".Menu.-horizontal")
+            .removeClass("-horizontal")
+            .addClass("-vertical");
+          float_menu_element
+            .children(".Menu.-vertical")
+            .removeClass("ui-draggable ui-draggable-handle");
+          float_menu_element.css({
+            background: "none",
+            border: "none",
+            border: "none",
+            "box-shadow": "none",
+            padding: "0px",
+          });
+        } else {
+          $("#float_menu_button").hide();
+          float_menu_element.css({ "max-width": "202px" });
+        }
         if (!floating_menu) {
           //nothing to do, it starts hidden
           return;
@@ -1427,6 +1477,9 @@ <h2>Xpra Bug Report</h2>
         } else {
           expand_float_menu();
         }
+
+        const float_menu_button_element = $("#float_menu_button");
+        float_menu_button_element.on("click", toggle_float_menu);
       }
 
       function init_auth_autosubmit() {

html5/js/Client.js

@@ -2967,18 +2967,25 @@ class XpraClient {
 
   position_float_menu() {
     const float_menu_element = $(FLOAT_MENU_SELECTOR);
+    const toolbar_height = float_menu_element.height();
     const toolbar_width = float_menu_element.width();
     let left = float_menu_element.offset().left || 0;
-    const top = float_menu_element.offset().top || 0;
+    let top = float_menu_element.offset().top || 0;
     const screen_width = $("#screen").width();
+    const screen_height = $("#screen").height();
+
     if (this.toolbar_position == "custom") {
       //no calculations needed
     } else if (this.toolbar_position == "top-left") {
-      //no calculations needed
+      left = 0;
+      top = 0;
     } else if (this.toolbar_position == "top") {
       left = screen_width / 2 - toolbar_width / 2;
     } else if (this.toolbar_position == "top-right") {
       left = screen_width - toolbar_width - 100;
+    } else if (this.toolbar_position == "novnc") {
+      left = 0;
+      top = screen_height / 2 - toolbar_height / 2 - 100;
     }
     float_menu_element.offset({ top, left });
   }