diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index afb1bfedb..bc6ccf3c9 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -241,12 +241,12 @@ export default class DesktopLayout { .class("horizontal") .child(new LeftPaneToggleWidget()) .child(new LauncherContainer(isHorizontal)) - .child(new GlobalMenuWidget()) + .child(new GlobalMenuWidget(true)) } else { launcherPane = new FlexContainer("column") .css("width", "53px") .class("vertical") - .child(new GlobalMenuWidget()) + .child(new GlobalMenuWidget(false)) .child(new LauncherContainer(isHorizontal)) .child(new LeftPaneToggleWidget()); } diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js index c93dd4c2a..63026db68 100644 --- a/src/public/app/widgets/buttons/global_menu.js +++ b/src/public/app/widgets/buttons/global_menu.js @@ -107,22 +107,6 @@ const TPL = ` @@ -265,18 +249,40 @@ const TPL = ` `; export default class GlobalMenuWidget extends BasicWidget { - constructor() { + constructor(isHorizontalLayout) { super(); this.updateAvailableWidget = new UpdateAvailableWidget(); + this.isHorizontalLayout = isHorizontalLayout; } doRender() { this.$widget = $(TPL); - this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")); + const $globalMenuButton = this.$widget.find(".global-menu-button") + if (!this.isHorizontalLayout) { + $globalMenuButton.prepend($(`\ + + + + + + + + + + + + + + + `)); + this.tooltip = new bootstrap.Tooltip(this.$widget.find("[data-bs-toggle='tooltip']"), { trigger: "hover" }); + } else { + $globalMenuButton.toggleClass("bx bx-menu"); + } - this.tooltip = new bootstrap.Tooltip(this.$widget.find("[data-bs-toggle='tooltip']"), { trigger: "hover" }); + this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")); this.$widget.find(".show-about-dialog-button").on('click', () => this.triggerCommand("openAboutDialog")); @@ -300,7 +306,7 @@ export default class GlobalMenuWidget extends BasicWidget { if ($(e.target).children(".dropdown-menu").length === 1 || $(e.target).hasClass('dropdown-toggle')) { e.stopPropagation(); } - }) + }) this.$widget.find(".global-menu-button-update-available").append( this.updateAvailableWidget.render() @@ -316,10 +322,14 @@ export default class GlobalMenuWidget extends BasicWidget { this.$zoomState = this.$widget.find(".zoom-state"); this.$widget.on('show.bs.dropdown', () => { this.updateZoomState(); - this.tooltip.hide(); - this.tooltip.disable(); + if (this.tooltip) { + this.tooltip.hide(); + this.tooltip.disable(); + } }); - this.$widget.on('hide.bs.dropdown', () => this.tooltip.enable()); + if (this.tooltip) { + this.$widget.on('hide.bs.dropdown', () => this.tooltip.enable()); + } this.$widget.find(".zoom-buttons").on("click", // delay to wait for the actual zoom change