From 210337485440b4011ddc004e30eba7baa35bdc32 Mon Sep 17 00:00:00 2001 From: Nariman Jelveh Date: Tue, 1 Jul 2025 18:37:36 -0700 Subject: [PATCH] Dynamic toolbar: allow users to customize toolbar sticky (#1330) * close #1329 --- src/gui/src/UI/UIDesktop.js | 117 +++++++++++++++++++++++++++++---- src/puter-js/src/modules/KV.js | 1 + 2 files changed, 106 insertions(+), 12 deletions(-) diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 765320055..f74b7631b 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -65,6 +65,26 @@ async function UIDesktop(options) { } }); + // Initialize toolbar auto-hide preference + window.toolbar_auto_hide_enabled = true; // Set default value + + // Load the toolbar auto-hide preference + let toolbar_auto_hide_enabled_val = await puter.kv.get('toolbar_auto_hide_enabled'); + console.log('toolbar_auto_hide_enabled_val', toolbar_auto_hide_enabled_val); + if(toolbar_auto_hide_enabled_val === 'false' || toolbar_auto_hide_enabled_val === false){ + window.toolbar_auto_hide_enabled = false; + } + + // If auto-hide is disabled, ensure toolbar is visible on load + if (!window.toolbar_auto_hide_enabled) { + // Make sure toolbar is visible when auto-hide is disabled + setTimeout(() => { + if ($('.toolbar').hasClass('toolbar-hidden')) { + window.show_toolbar(); + } + }, 100); // Small delay to ensure DOM is ready + } + // Modify the hide/show functions to use CSS rules that will apply to all icons, including future ones window.hideDesktopIcons = function () { // Add a CSS class to the desktop container that will hide all child icons @@ -1456,6 +1476,11 @@ async function UIDesktop(options) { return; } + // Don't hide toolbar if auto-hide is disabled + if (!window.toolbar_auto_hide_enabled) { + return; + } + if ($('.toolbar').hasClass('toolbar-hidden')) return; // attach hidden class to toolbar @@ -1512,7 +1537,7 @@ async function UIDesktop(options) { } // Toolbar hide/show logic with improved UX - let toolbarHideTimeout = null; + window.toolbarHideTimeout = null; let isMouseNearToolbar = false; // Define safe zone around toolbar (in pixels) @@ -1548,10 +1573,15 @@ async function UIDesktop(options) { return; } + // Don't hide toolbar if auto-hide is disabled + if (!window.toolbar_auto_hide_enabled) { + return; + } + // Clear any existing timeout - if (toolbarHideTimeout) { - clearTimeout(toolbarHideTimeout); - toolbarHideTimeout = null; + if (window.toolbarHideTimeout) { + clearTimeout(window.toolbarHideTimeout); + window.toolbarHideTimeout = null; } // Don't hide if toolbar is already hidden @@ -1587,12 +1617,12 @@ async function UIDesktop(options) { } // Set timeout to hide toolbar - toolbarHideTimeout = setTimeout(() => { + window.toolbarHideTimeout = setTimeout(() => { // Double-check mouse position before hiding if (!window.isMouseInToolbarSafeZone(window.mouseX, window.mouseY)) { window.hide_toolbar(); } - toolbarHideTimeout = null; + window.toolbarHideTimeout = null; }, hideDelay); }; @@ -1607,9 +1637,9 @@ async function UIDesktop(options) { window.show_toolbar(); // Clear any pending hide timeout - if (toolbarHideTimeout) { - clearTimeout(toolbarHideTimeout); - toolbarHideTimeout = null; + if (window.toolbarHideTimeout) { + clearTimeout(window.toolbarHideTimeout); + window.toolbarHideTimeout = null; } }); @@ -1620,9 +1650,9 @@ async function UIDesktop(options) { return; // Clear any pending hide timeout when entering toolbar - if (toolbarHideTimeout) { - clearTimeout(toolbarHideTimeout); - toolbarHideTimeout = null; + if (window.toolbarHideTimeout) { + clearTimeout(window.toolbarHideTimeout); + window.toolbarHideTimeout = null; } isMouseNearToolbar = true; }); @@ -1642,6 +1672,11 @@ async function UIDesktop(options) { return; } + // Don't hide toolbar if auto-hide is disabled + if (!window.toolbar_auto_hide_enabled) { + return; + } + // if the user has not seen the toolbar animation, don't hide the toolbar if(!window.has_seen_toolbar_animation) return; @@ -1663,6 +1698,11 @@ async function UIDesktop(options) { return; } + // Don't hide toolbar if auto-hide is disabled + if (!window.toolbar_auto_hide_enabled) { + return; + } + window.has_left_toolbar_at_least_once = true; // if the user options menu is open, don't hide the toolbar if ($('.context-menu[data-id="user-options-menu"]').length > 0) @@ -1679,6 +1719,11 @@ async function UIDesktop(options) { return; } + // Don't hide toolbar if auto-hide is disabled + if (!window.toolbar_auto_hide_enabled) { + return; + } + // if the user has not seen the toolbar animation, don't hide the toolbar if(!window.has_seen_toolbar_animation && !window.has_left_toolbar_at_least_once) return; @@ -1733,6 +1778,54 @@ $(document).on('contextmenu taphold', '.taskbar', function (event) { return false; }) +// Toolbar context menu +$(document).on('contextmenu taphold', '.toolbar', function (event) { + // dismiss taphold on regular devices + if (event.type === 'taphold' && !isMobile.phone && !isMobile.tablet) + return; + + // Don't show context menu on mobile devices since toolbar auto-hide is disabled there + if (isMobile.phone || isMobile.tablet) + return; + + event.preventDefault(); + event.stopPropagation(); + + UIContextMenu({ + parent_element: $('.toolbar'), + items: [ + //-------------------------------------------------- + // Enable/Disable Auto-hide + //-------------------------------------------------- + { + html: window.toolbar_auto_hide_enabled ? i18n('Disable Auto-hide') : i18n('Enable Auto-hide'), + onClick: function () { + // Toggle the preference + window.toolbar_auto_hide_enabled = !window.toolbar_auto_hide_enabled; + + // Save the preference + puter.kv.set('toolbar_auto_hide_enabled', window.toolbar_auto_hide_enabled.toString()); + + // If auto-hide was just disabled and toolbar is currently hidden, show it + if (!window.toolbar_auto_hide_enabled && $('.toolbar').hasClass('toolbar-hidden')) { + window.show_toolbar(); + } + + // Clear any pending hide timeout + if (window.toolbarHideTimeout) { + clearTimeout(window.toolbarHideTimeout); + window.toolbarHideTimeout = null; + } + + // hide toolbar + window.hide_toolbar(); + } + } + ] + }); + return false; +}); + $(document).on('click', '.qr-btn', async function (e) { UIWindowQR({ message_i18n_key: 'scan_qr_c2a', diff --git a/src/puter-js/src/modules/KV.js b/src/puter-js/src/modules/KV.js index d49def1bb..a2c2c2f00 100644 --- a/src/puter-js/src/modules/KV.js +++ b/src/puter-js/src/modules/KV.js @@ -10,6 +10,7 @@ const gui_cache_keys = [ 'user_preferences.show_hidden_files', 'user_preferences.language', 'user_preferences.clock_visible', + 'toolbar_auto_hide_enabled', 'has_seen_welcome_window', ];