diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 6b9d619fb6..5cc5deb7de 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1151,6 +1151,98 @@ async function UIDesktop(options){ // adjust window container to take into account the toolbar height $('.window-container').css('top', window.toolbar_height); + // ============================================ + // Toolbar auto-hide functionality (respect user setting) + // ============================================ + (function() { + let toolbarHideTimeout; + const HIDE_DELAY = 2000; // 2 seconds + const SHOW_TRIGGER_ZONE = 50; // top 50px of screen + + const toolbar = $('.toolbar'); + let isToolbarHidden = false; + let autoHideEnabled = true; // default + + // Expose runtime updater so settings UI can toggle behavior immediately + window.updateToolbarAutoHideSetting = function(enabled){ + autoHideEnabled = !!enabled; + if(!autoHideEnabled){ + // ensure toolbar visible and cancel timers + clearTimeout(toolbarHideTimeout); + toolbar.removeClass('hidden'); + isToolbarHidden = false; + }else{ + // start hide timer + resetHideTimer(); + } + } + + function hideToolbar() { + if (!isToolbarHidden && autoHideEnabled) { + toolbar.addClass('hidden'); + isToolbarHidden = true; + } + } + + function showToolbar() { + if (isToolbarHidden) { + toolbar.removeClass('hidden'); + isToolbarHidden = false; + } + resetHideTimer(); + } + + function resetHideTimer() { + clearTimeout(toolbarHideTimeout); + if(autoHideEnabled) + toolbarHideTimeout = setTimeout(hideToolbar, HIDE_DELAY); + } + + // Show toolbar when mouse moves near the top of the screen + $(document).on('mousemove', function(e) { + if (!autoHideEnabled) return; + if (e.clientY <= SHOW_TRIGGER_ZONE) { + showToolbar(); + } else if (!isToolbarHidden) { + resetHideTimer(); + } + }); + + // Keep toolbar visible when hovering over it + toolbar.on('mouseenter', function() { + clearTimeout(toolbarHideTimeout); + showToolbar(); + }); + + // Reset timer when leaving the toolbar + toolbar.on('mouseleave', function() { + resetHideTimer(); + }); + + // Don't hide toolbar when it has open context menus or popovers + toolbar.on('mousedown', function(e) { + if ($(e.target).closest('.has-open-contextmenu, .has-open-popover').length > 0) { + clearTimeout(toolbarHideTimeout); + } + }); + + // Initialize autoHideEnabled from persisted setting + try{ + puter.kv.get('ui:toolbar:auto_hide').then((val) => { + // default to true when unset + const enabled = (val === undefined || val === null) ? true : (String(val) === 'true'); + window.updateToolbarAutoHideSetting(enabled); + }).catch(() => { + window.updateToolbarAutoHideSetting(true); + }); + }catch(err){ + window.updateToolbarAutoHideSetting(true); + } + + // Start the initial hide timer (only if enabled) + resetHideTimer(); + })(); + // track: checkpoint //----------------------------- // GUI is ready to launch apps! diff --git a/src/gui/src/UI/UIWindowDesktopBGSettings.js b/src/gui/src/UI/UIWindowDesktopBGSettings.js index 45a253f518..65d7f69fff 100644 --- a/src/gui/src/UI/UIWindowDesktopBGSettings.js +++ b/src/gui/src/UI/UIWindowDesktopBGSettings.js @@ -70,6 +70,11 @@ async function UIWindowDesktopBGSettings(options){ background-position: center;">`; h += ``; h += ``; + // Toolbar auto-hide toggle + h += `
`; + h += ``; + h += ``; + h += `
`; h += `
` h += ``; @@ -183,6 +188,20 @@ async function UIWindowDesktopBGSettings(options){ }, }, }) + // Save toolbar auto-hide preference + const autoHide = $(el_window).find('.toolbar-autohide-checkbox').is(':checked'); + try{ + await puter.kv.set('ui:toolbar:auto_hide', autoHide === true ? 'true' : 'false'); + }catch(err){ + console.error('Failed to save toolbar auto-hide setting', err); + } + + // Notify running UI to update behavior if UIDesktop is present + try{ + if(window.updateToolbarAutoHideSetting) + window.updateToolbarAutoHideSetting(autoHide === true); + }catch(err){} + $(el_window).close(); resolve(true); }catch(err){ @@ -190,6 +209,16 @@ async function UIWindowDesktopBGSettings(options){ } }) + // Initialize checkbox from persisted value + try{ + puter.kv.get('ui:toolbar:auto_hide').then((val) => { + const checked = (val === undefined || val === null) ? true : (String(val) === 'true'); + $(el_window).find('.toolbar-autohide-checkbox').prop('checked', checked); + }) + }catch(err){ + // ignore + } + $(el_window).find('.browse').on('click', function(){ // open dialog UIWindow({ diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 4c7d1637e2..2ef76f1aab 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -17,7 +17,7 @@ * along with this program. If not, see . */ -@font-face { + @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Thin.ttf') format('truetype'); font-weight: 100; @@ -1748,7 +1748,16 @@ label { justify-content: flex-end; align-content: center; flex-wrap: wrap; - padding-right: 10px + padding-right: 10px; + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; + transform: translateY(0); + opacity: 1; +} + +.toolbar.hidden { + transform: translateY(-100%); + opacity: 0; + pointer-events: none; } .show-desktop-btn {