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 @@
>
+
@@ -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 });
}