diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 89337e7c9e..e81dfa1c37 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -674,14 +674,58 @@ RED.palette = (function() { RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette"); sidebarControls.on("click", function() { + // On mobile, don't hide the button after clicking + if (!RED.utils.isMobileDevice()) { + sidebarControls.hide(); + } RED.menu.toggleSelected("menu-item-palette"); }) - $("#red-ui-palette").on("mouseenter", function() { - sidebarControls.toggle("slide", { direction: "left" }, 200); - }) - $("#red-ui-palette").on("mouseleave", function() { - sidebarControls.stop(false,true); - sidebarControls.hide(); + + // Check if mobile device + var isMobile = RED.utils.isMobileDevice(); + + if (isMobile) { + // On mobile devices, always show the toggle button + sidebarControls.show(); + // Update the icon based on palette state + if (RED.menu.isSelected("menu-item-palette")) { + sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); + } else { + sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); + } + } else { + // On desktop, use hover behavior + $("#red-ui-palette").on("mouseenter", function() { + sidebarControls.toggle("slide", { direction: "left" }, 200); + }) + $("#red-ui-palette").on("mouseleave", function() { + sidebarControls.stop(false,true); + sidebarControls.hide(); + }) + } + + // Handle window resize to update mobile state + $(window).on("resize", function() { + var wasMobile = isMobile; + isMobile = RED.utils.isMobileDevice(); + + if (wasMobile !== isMobile) { + if (isMobile) { + // Switching to mobile - show button and remove hover events + $("#red-ui-palette").off("mouseenter mouseleave"); + sidebarControls.show(); + } else { + // Switching to desktop - hide button and add hover events + sidebarControls.hide(); + $("#red-ui-palette").on("mouseenter", function() { + sidebarControls.toggle("slide", { direction: "left" }, 200); + }) + $("#red-ui-palette").on("mouseleave", function() { + sidebarControls.stop(false,true); + sidebarControls.hide(); + }) + } + } }) var userCategories = []; if (RED.settings.paletteCategories) { @@ -754,12 +798,21 @@ RED.palette = (function() { function togglePalette(state) { if (!state) { $("#red-ui-main-container").addClass("red-ui-palette-closed"); - sidebarControls.hide(); + // Only hide on desktop + if (!RED.utils.isMobileDevice()) { + sidebarControls.hide(); + } sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); } else { $("#red-ui-main-container").removeClass("red-ui-palette-closed"); sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); } + + // On mobile, always keep the button visible + if (RED.utils.isMobileDevice()) { + sidebarControls.show(); + } + setTimeout(function() { $(window).trigger("resize"); } ,200); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index eb10fe043d..23300f26d3 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -172,23 +172,75 @@ RED.sidebar = (function() { var sidebarControls = $('