diff --git a/html5/connect.html b/html5/connect.html index 45c3cb06..b7cc8a0c 100644 --- a/html5/connect.html +++ b/html5/connect.html @@ -501,6 +501,7 @@

Advanced options

+
  • diff --git a/html5/css/icon.css b/html5/css/icon.css index bc561c8f..61ece39d 100644 --- a/html5/css/icon.css +++ b/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 */ diff --git a/html5/css/menu-skin.css b/html5/css/menu-skin.css index 4736f7c4..f70da4fa 100644 --- a/html5/css/menu-skin.css +++ b/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 { diff --git a/html5/index.html b/html5/index.html index a18bc7ad..00caebc0 100644 --- a/html5/index.html +++ b/html5/index.html @@ -241,6 +241,14 @@ >
  • +
    + +
    shadow pointer @@ -1388,20 +1396,43 @@

    Xpra Bug Report

    } } + 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() { @@ -1409,6 +1440,25 @@

    Xpra Bug Report

    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 @@

    Xpra Bug Report

    } 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() { diff --git a/html5/js/Client.js b/html5/js/Client.js index 5a38ff6b..dc4393b1 100644 --- a/html5/js/Client.js +++ b/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 }); }