From b0fdf1f63dedf5a8d060ee24d9d05ed6a9e204f4 Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 29 Jun 2025 14:21:40 -0700 Subject: [PATCH 1/9] Implement the basics of a dynamic toolbar Dynamic toolbar will hide and show automatically depending on user actions and state of the app. This is to save screen real estate. --- src/gui/src/UI/UIDesktop.js | 167 +++++++++++++++++++++++++++++++++++- src/gui/src/UI/UIWindow.js | 3 + src/gui/src/css/style.css | 41 +++++---- src/gui/src/globals.js | 2 +- src/gui/src/initgui.js | 5 ++ 5 files changed, 197 insertions(+), 21 deletions(-) diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index b07bf9c1..57a0446e 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1148,7 +1148,7 @@ async function UIDesktop(options) { // User options // ---------------------------------------------------- let ht = ''; - ht += `
`; + ht += `
`; // logo ht += ``; @@ -1467,6 +1467,171 @@ async function UIDesktop(options) { app: 'explorer', }); } + + window.hide_toolbar = () => { + if ($('.toolbar').hasClass('toolbar-hidden')) return; + + // attach hidden class to toolbar + $('.toolbar').addClass('toolbar-hidden'); + + // animate the toolbar to top = -20px; + // animate width to 40px; + $('.toolbar').animate({ + top: '-20px', + width: '40px', + }, 200); + + // animate hide toolbar-btn, toolbar-clock + $('.toolbar-btn, #clock').animate({ + opacity: 0, + }, 50); + } + + window.show_toolbar = () => { + if (!$('.toolbar').hasClass('toolbar-hidden')) return; + + // remove hidden class from toolbar + $('.toolbar').removeClass('toolbar-hidden'); + + $('.toolbar').animate({ + top: 0, + }, 100).css('width', 'fit-content'); + + // animate show toolbar-btn, toolbar-clock + $('.toolbar-btn, #clock').animate({ + opacity: 0.8, + }, 50); + } + + // Toolbar hide/show logic with improved UX + let toolbarHideTimeout = null; + let isMouseNearToolbar = false; + + // Define safe zone around toolbar (in pixels) + const TOOLBAR_SAFE_ZONE = 50; + const TOOLBAR_HIDE_DELAY = 100; // Base delay before hiding + const TOOLBAR_QUICK_HIDE_DELAY = 300; // Quicker hide when mouse moves far away + + // Function to check if mouse is in the safe zone around toolbar + window.isMouseInToolbarSafeZone = (mouseX, mouseY) => { + const toolbar = $('.toolbar')[0]; + if (!toolbar) return false; + + const rect = toolbar.getBoundingClientRect(); + + // Expand the toolbar bounds by the safe zone + const safeZone = { + top: rect.top - TOOLBAR_SAFE_ZONE, + bottom: rect.bottom + TOOLBAR_SAFE_ZONE, + left: rect.left - TOOLBAR_SAFE_ZONE, + right: rect.right + TOOLBAR_SAFE_ZONE + }; + + return mouseX >= safeZone.left && + mouseX <= safeZone.right && + mouseY >= safeZone.top && + mouseY <= safeZone.bottom; + }; + + // Function to handle toolbar hiding with improved logic + window.handleToolbarHiding = (mouseX, mouseY) => { + // Clear any existing timeout + if (toolbarHideTimeout) { + clearTimeout(toolbarHideTimeout); + toolbarHideTimeout = null; + } + + // Don't hide if toolbar is already hidden + if ($('.toolbar').hasClass('toolbar-hidden')) return; + + const wasNearToolbar = isMouseNearToolbar; + isMouseNearToolbar = window.isMouseInToolbarSafeZone(mouseX, mouseY); + + // If mouse is in safe zone, don't hide + if (isMouseNearToolbar) { + return; + } + + // Determine hide delay based on mouse movement pattern + let hideDelay = TOOLBAR_HIDE_DELAY; + + // If mouse was previously near toolbar and now moved far away, hide quicker + if (wasNearToolbar && !isMouseNearToolbar) { + // Check if mouse moved significantly away + const toolbar = $('.toolbar')[0]; + if (toolbar) { + const rect = toolbar.getBoundingClientRect(); + const distanceFromToolbar = Math.min( + Math.abs(mouseY - rect.bottom), + Math.abs(mouseY - rect.top) + ); + + // If mouse is far from toolbar, hide quicker + if (distanceFromToolbar > TOOLBAR_SAFE_ZONE * 2) { + hideDelay = TOOLBAR_QUICK_HIDE_DELAY; + } + } + } + + // Set timeout to hide toolbar + toolbarHideTimeout = setTimeout(() => { + // Double-check mouse position before hiding + if (!window.isMouseInToolbarSafeZone(window.mouseX, window.mouseY)) { + window.hide_toolbar(); + } + toolbarHideTimeout = null; + }, hideDelay); + }; + + // hovering over a hidden toolbar will show it + $(document).on('mouseenter', '.toolbar-hidden', function () { + window.show_toolbar(); + // Clear any pending hide timeout + if (toolbarHideTimeout) { + clearTimeout(toolbarHideTimeout); + toolbarHideTimeout = null; + } + }); + + // hovering over a visible toolbar will show it and cancel hiding + $(document).on('mouseenter', '.toolbar:not(.toolbar-hidden)', function () { + // Clear any pending hide timeout when entering toolbar + if (toolbarHideTimeout) { + clearTimeout(toolbarHideTimeout); + toolbarHideTimeout = null; + } + isMouseNearToolbar = true; + }); + + // Handle mouse leaving the toolbar + $(document).on('mouseleave', '.toolbar', function () { + // if there is not window visible, don't hide the toolbar + if ($('.window-active').length === 0) return; + + // Start the hiding logic with current mouse position + window.handleToolbarHiding(window.mouseX, window.mouseY); + }); + + // Track mouse movement globally to update toolbar hiding logic + $(document).on('mousemove', function(e) { + // if there is not window visible, don't hide the toolbar + if ($('.window-active').length === 0) return; + + // Update global mouse position (assuming this is done elsewhere in the code) + window.mouseX = e.clientX; + window.mouseY = e.clientY; + + // Only handle toolbar hiding if toolbar is visible and mouse moved significantly + if (!$('.toolbar').hasClass('toolbar-hidden')) { + // Use throttling to avoid excessive calls + if (!window.mouseMoveThrottle) { + window.mouseMoveThrottle = setTimeout(() => { + window.handleToolbarHiding(window.mouseX, window.mouseY); + window.mouseMoveThrottle = null; + }, 100); // Throttle to every 100ms + } + } + }); } $(document).on('contextmenu taphold', '.taskbar', function (event) { diff --git a/src/gui/src/UI/UIWindow.js b/src/gui/src/UI/UIWindow.js index 3119e4ee..e7495e0e 100644 --- a/src/gui/src/UI/UIWindow.js +++ b/src/gui/src/UI/UIWindow.js @@ -3305,6 +3305,9 @@ window.scale_window = (el_window)=>{ 'height': height, 'transform': 'none', }); + + // hide toolbar + window.hide_toolbar(); } //shrink else { diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index b4649c59..b3889263 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -1348,6 +1348,10 @@ span.header-sort-icon img { height: calc(100%); } +.fullpage-mode.device-desktop .window-body-app { + height: calc(100% ); +} + .window-filedialog-prompt { height: 60px; border-top: 1px solid #dbdee3; @@ -1742,9 +1746,11 @@ label { font-size: 14px; } +/*********************************** + * Toolbar + ***********************************/ + .toolbar { - float: right; - width: 100%; background-color: #00000040; height: 30px; position: relative; @@ -1755,7 +1761,18 @@ label { justify-content: flex-end; align-content: center; flex-wrap: wrap; - padding-right: 10px + padding-right: 10px; + left: 50%; + right: 50%; + left: 50%; + transform: translate(-50%); + top: 0px; + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + width: fit-content; + overflow: clip; } .show-desktop-btn { @@ -1807,7 +1824,7 @@ label { } .toolbar-btn:hover { - opacity: 1; + opacity: 1 !important; } .user-options-menu-btn.has-open-contextmenu { @@ -1837,21 +1854,7 @@ label { background-color: rgb(255 255 255 / 15%); border-radius: 3px; } - -.logout-btn { - position: absolute; - right: 7px; - top: 7px; - padding: 4px; - border-radius: 4px; - cursor: pointer; - border: 2px solid #CCC; -} - -.logout-btn img { - width: 20px; - margin-bottom: -5px; -} +/***************************************************/ .login-error-msg, .signup-error-msg, .publish-website-error-msg, .form-error-msg { display: none; diff --git a/src/gui/src/globals.js b/src/gui/src/globals.js index 0129432a..9a136a79 100644 --- a/src/gui/src/globals.js +++ b/src/gui/src/globals.js @@ -103,7 +103,7 @@ if (window.user_preferences === null) { } window.window_stack = [] -window.toolbar_height = 30; +window.toolbar_height = 0; window.default_taskbar_height = 50; window.taskbar_height = window.default_taskbar_height; window.upload_progress_hide_delay = 500; diff --git a/src/gui/src/initgui.js b/src/gui/src/initgui.js index dea49027..bff79f32 100644 --- a/src/gui/src/initgui.js +++ b/src/gui/src/initgui.js @@ -1409,6 +1409,11 @@ $(document).on('click', function(e){ if(!$(e.target).hasClass('window-search') && $(e.target).closest('.window-search').length === 0 && !$(e.target).is('.toolbar-btn.search-btn')){ $('.window-search').close(); } + + // any click that is not on .toolbar will hide the toolbar + if(!$(e.target).hasClass('toolbar')){ + window.hide_toolbar(); + } }) // Re-calculate desktop height and width on window resize and re-position the login and signup windows From 0895418f0cba4ae2e030759460542d9be70a1663 Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 29 Jun 2025 15:18:20 -0700 Subject: [PATCH 2/9] Improve the logic behind hiding the toolbar after clicks and other interactions --- src/gui/src/UI/UIDesktop.js | 60 ++++++++++++++++++++++++++++--------- src/gui/src/initgui.js | 5 ---- 2 files changed, 46 insertions(+), 19 deletions(-) diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 57a0446e..710585b4 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1468,7 +1468,7 @@ async function UIDesktop(options) { }); } - window.hide_toolbar = () => { + window.hide_toolbar = (animate = true) => { if ($('.toolbar').hasClass('toolbar-hidden')) return; // attach hidden class to toolbar @@ -1476,15 +1476,27 @@ async function UIDesktop(options) { // animate the toolbar to top = -20px; // animate width to 40px; - $('.toolbar').animate({ - top: '-20px', - width: '40px', - }, 200); - + if (animate) { + $('.toolbar').animate({ + top: '-20px', + width: '40px', + }, 200); + } else { + $('.toolbar').css({ + top: '-20px', + width: '40px', + }); + } // animate hide toolbar-btn, toolbar-clock - $('.toolbar-btn, #clock').animate({ - opacity: 0, - }, 50); + if (animate) { + $('.toolbar-btn, #clock').animate({ + opacity: 0, + }, 50); + } else { + $('.toolbar-btn, #clock').css({ + opacity: 0, + }); + } } window.show_toolbar = () => { @@ -1585,6 +1597,9 @@ async function UIDesktop(options) { // hovering over a hidden toolbar will show it $(document).on('mouseenter', '.toolbar-hidden', function () { + if(window.is_fullpage_mode) + $('.window-app-iframe').css('pointer-events', 'none'); + window.show_toolbar(); // Clear any pending hide timeout if (toolbarHideTimeout) { @@ -1603,19 +1618,36 @@ async function UIDesktop(options) { isMouseNearToolbar = true; }); + // any click will hide the toolbar, unless: + // - it's on the toolbar + // - it's the user options menu button + // - the user options menu is open + $(document).on('click', function(e){ + if( + !$(e.target).hasClass('toolbar') && + !$(e.target).hasClass('user-options-menu-btn') && + $('.context-menu[data-id="user-options-menu"]').length === 0 && + true + ){ + window.hide_toolbar(false); + } + }) + // Handle mouse leaving the toolbar $(document).on('mouseleave', '.toolbar', function () { - // if there is not window visible, don't hide the toolbar - if ($('.window-active').length === 0) return; - + // if the user options menu is open, don't hide the toolbar + if ($('.context-menu[data-id="user-options-menu"]').length > 0) + return; + // Start the hiding logic with current mouse position window.handleToolbarHiding(window.mouseX, window.mouseY); }); // Track mouse movement globally to update toolbar hiding logic $(document).on('mousemove', function(e) { - // if there is not window visible, don't hide the toolbar - if ($('.window-active').length === 0) return; + // if the user options menu is open, don't hide the toolbar + if ($('.context-menu[data-id="user-options-menu"]').length > 0) + return; // Update global mouse position (assuming this is done elsewhere in the code) window.mouseX = e.clientX; diff --git a/src/gui/src/initgui.js b/src/gui/src/initgui.js index bff79f32..dea49027 100644 --- a/src/gui/src/initgui.js +++ b/src/gui/src/initgui.js @@ -1409,11 +1409,6 @@ $(document).on('click', function(e){ if(!$(e.target).hasClass('window-search') && $(e.target).closest('.window-search').length === 0 && !$(e.target).is('.toolbar-btn.search-btn')){ $('.window-search').close(); } - - // any click that is not on .toolbar will hide the toolbar - if(!$(e.target).hasClass('toolbar')){ - window.hide_toolbar(); - } }) // Re-calculate desktop height and width on window resize and re-position the login and signup windows From 3db99aa67b5b4082c0d4ab3b28f40ce4dd2f7886 Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 29 Jun 2025 15:58:53 -0700 Subject: [PATCH 3/9] Puter will now support only one type of menubar, and that's the in-window type --- src/gui/src/IPC.js | 12 +-- .../src/UI/Settings/UITabPersonalization.js | 83 +------------------ src/gui/src/UI/UIDesktop.js | 29 ------- src/gui/src/UI/UIWindow.js | 6 +- src/gui/src/globals.js | 9 +- src/gui/src/i18n/translations/ar.js | 4 - src/gui/src/i18n/translations/bn.js | 4 - src/gui/src/i18n/translations/br.js | 4 - src/gui/src/i18n/translations/da.js | 4 - src/gui/src/i18n/translations/de.js | 4 - src/gui/src/i18n/translations/en.js | 4 - src/gui/src/i18n/translations/es.js | 4 - src/gui/src/i18n/translations/fa.js | 4 - src/gui/src/i18n/translations/fi.js | 4 - src/gui/src/i18n/translations/fr.js | 4 - src/gui/src/i18n/translations/he.js | 4 - src/gui/src/i18n/translations/hi.js | 4 - src/gui/src/i18n/translations/hu.js | 4 - src/gui/src/i18n/translations/hy.js | 4 - src/gui/src/i18n/translations/id.js | 4 - src/gui/src/i18n/translations/ig.js | 4 - src/gui/src/i18n/translations/it.js | 4 - src/gui/src/i18n/translations/ja.js | 4 - src/gui/src/i18n/translations/ko.js | 4 - src/gui/src/i18n/translations/ku.js | 4 - src/gui/src/i18n/translations/ml.js | 4 - src/gui/src/i18n/translations/nb.js | 4 - src/gui/src/i18n/translations/nl.js | 4 - src/gui/src/i18n/translations/nn.js | 4 - src/gui/src/i18n/translations/pl.js | 4 - src/gui/src/i18n/translations/pt.js | 4 - src/gui/src/i18n/translations/ro.js | 4 - src/gui/src/i18n/translations/ru.js | 4 - src/gui/src/i18n/translations/sv.js | 4 - src/gui/src/i18n/translations/ta.js | 4 - src/gui/src/i18n/translations/th.js | 4 - src/gui/src/i18n/translations/ua.js | 4 - src/gui/src/i18n/translations/ur.js | 4 - src/gui/src/i18n/translations/vi.js | 4 - src/gui/src/i18n/translations/zh.js | 4 - src/gui/src/i18n/translations/zhtw.js | 4 - 41 files changed, 6 insertions(+), 277 deletions(-) diff --git a/src/gui/src/IPC.js b/src/gui/src/IPC.js index f1b6833d..4ba4e484 100644 --- a/src/gui/src/IPC.js +++ b/src/gui/src/IPC.js @@ -600,15 +600,9 @@ const ipc_listener = async (event, handled) => { // Show menubar let $menubar; - if(window.menubar_style === 'window'){ - $menubar = $(el_window).find('.window-menubar') - // add window-with-menubar class to the window - $(el_window).addClass('window-with-menubar'); - }else{ - $menubar = $('.window-menubar-global[data-window-id="'+$(el_window).attr('data-id')+'"]'); - // hide all other menubars - $('.window-menubar-global').hide(); - } + $menubar = $(el_window).find('.window-menubar') + // add window-with-menubar class to the window + $(el_window).addClass('window-with-menubar'); $menubar.css('display', 'flex'); diff --git a/src/gui/src/UI/Settings/UITabPersonalization.js b/src/gui/src/UI/Settings/UITabPersonalization.js index 11fd8480..62d23629 100644 --- a/src/gui/src/UI/Settings/UITabPersonalization.js +++ b/src/gui/src/UI/Settings/UITabPersonalization.js @@ -48,33 +48,7 @@ export default {
-
- ${i18n('menubar_style')} -
-
- -
-
- -
- -
- -
-
-
`; + `; }, init: ($el_window) => { $el_window.find('.change-ui-colors').on('click', function (e) { @@ -101,60 +75,5 @@ export default { }); window.change_clock_visible(); - - puter.kv.get('menubar_style').then(async (val) => { - if(val === 'system' || !val){ - $el_window.find('#menubar_style_system').prop('checked', true); - }else if(val === 'desktop'){ - $el_window.find('#menubar_style_desktop').prop('checked', true); - } - else if(val === 'window'){ - $el_window.find('#menubar_style_window').prop('checked', true); - } - }) - - $el_window.find('.menubar_style').on('change', function (e) { - let value = $(this).val(); - if(value === 'system' || value === 'desktop' || value === 'window'){ - // save the new style to cloud kv - puter.kv.set('menubar_style', value); - - if(value === 'system'){ - if(window.detectHostOS() === 'macos') - value = 'desktop'; - else - value = 'window'; - } - // apply the new style - if(value === 'desktop'){ - $('body').addClass('menubar-style-desktop'); - $('.window-menubar').each((_, el) => { - $(el).insertAfter('.toolbar-puter-logo'); - // add window-menubar-global - $(el).addClass('window-menubar-global'); - // remove window-with-menubar from the window - let win_id = $(el).attr('data-window-id'); - $('.window[data-id="'+win_id+'"]').removeClass('window-with-menubar'); - // hide - $(el).hide(); - }) - }else{ - $('body').removeClass('menubar-style-desktop'); - $('.window-menubar-global').each((_, el) => { - let win_id = $(el).attr('data-window-id'); - $(el).insertAfter('.window[data-id="'+win_id+'"] .window-head'); - // remove window-menubar-global - $(el).removeClass('window-menubar-global'); - // add window-with-menubar to the window - $('.window[data-id="'+win_id+'"]').addClass('window-with-menubar'); - // show - $(el).css('display', 'flex'); - }) - } - window.menubar_style = value; - }else{ - console.error('Invalid menubar style value'); - } - }) }, }; diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 710585b4..a3b2c2b6 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -706,35 +706,6 @@ async function UIDesktop(options) { puter.kv.get("sidebar_items").then(async (val) => { window.sidebar_items = val; }) - // also update every 2 seconds - // setInterval(async () => { - // puter.kv.get("sidebar_items").then(async (val) => { - // window.sidebar_items = val; - // }) - // }, 2000); - - // Get menubar style - puter.kv.get('menubar_style').then(async (val) => { - let value = val; - if (value === 'system' || value === 'desktop' || value === 'window') { - window.menubar_style = value; - } else { - window.menubar_style = 'system'; - } - - if (window.menubar_style === 'system') { - if (window.detectHostOS() === 'macos') - window.menubar_style = 'desktop'; - else - window.menubar_style = 'window'; - } - - // set menubar style class to body - if (window.menubar_style === 'desktop') { - $('body').addClass('menubar-style-desktop'); - } - }) - // Remove `?ref=...` from navbar URL if (window.url_query_params.has('ref')) { diff --git a/src/gui/src/UI/UIWindow.js b/src/gui/src/UI/UIWindow.js index e7495e0e..f6df0d24 100644 --- a/src/gui/src/UI/UIWindow.js +++ b/src/gui/src/UI/UIWindow.js @@ -302,11 +302,7 @@ async function UIWindow(options) { } // Menubar - if(window.menubar_style === 'window'){ - h += `
`; - }else if(window.menubar_style === 'desktop'){ - $('.toolbar-puter-logo').after(`
`); - } + h += `
`; // Navbar if(options.is_dir){ diff --git a/src/gui/src/globals.js b/src/gui/src/globals.js index 9a136a79..86cef5c4 100644 --- a/src/gui/src/globals.js +++ b/src/gui/src/globals.js @@ -256,11 +256,4 @@ window.reset_item_positions = true; // The variable decides if the item position window.file_templates = [] // default language -window.locale = 'en'; - -/* Menubar style - * 'window' - menubar is part of the window - * 'desktop' - menubar is part of the desktop - * 'system' - menubar is determined by the system (e.g. Windows, macOS) - */ -// window.menubar_style = 'desktop'; \ No newline at end of file +window.locale = 'en'; \ No newline at end of file diff --git a/src/gui/src/i18n/translations/ar.js b/src/gui/src/i18n/translations/ar.js index 751bb995..3d4ad6e4 100644 --- a/src/gui/src/i18n/translations/ar.js +++ b/src/gui/src/i18n/translations/ar.js @@ -175,10 +175,6 @@ const ar = { log_out: "تسجيل الخروج", looks_good: "يبدو جيدًا!", manage_sessions: "إدارة الجلسات", - menubar_style: "نمط شريط القوائم", - menubar_style_desktop: "سطح المكتب", - menubar_style_system: "النظام", - menubar_style_window: "النافذة", modified: "تم التعديل", move: "نقل", moving_file: "جارٍ نقل %%", diff --git a/src/gui/src/i18n/translations/bn.js b/src/gui/src/i18n/translations/bn.js index 7255d28d..565767c2 100644 --- a/src/gui/src/i18n/translations/bn.js +++ b/src/gui/src/i18n/translations/bn.js @@ -161,10 +161,6 @@ const bn = { log_out: "লগ আউট", looks_good: "ভাল দেখা যাচ্ছে!", manage_sessions: "সেশন পরিচালনা করুন", - menubar_style: "মেনুবার স্টাইল", - menubar_style_desktop: "ডেস্কটপ মেনুবার স্টাইল", - menubar_style_system: "সিস্টেম", - menubar_style_window: "উইন্ডো", modified: "পরিবর্তিত", move: "চলুন", moving_file: "ফাইল চলার পথে %%", diff --git a/src/gui/src/i18n/translations/br.js b/src/gui/src/i18n/translations/br.js index 616f5397..acb53260 100644 --- a/src/gui/src/i18n/translations/br.js +++ b/src/gui/src/i18n/translations/br.js @@ -162,10 +162,6 @@ const br = { log_out: 'Sair', looks_good: "Parece bom!", manage_sessions: "Gerenciar Sessões", - menubar_style: "Estilo da Barra de Menus", - menubar_style_desktop: "Área de Trabalho", - menubar_style_system: "Sistema", - menubar_style_window: "Janela", modified: 'Modificado', move: 'Mover', moving_file: "Movendo %%", diff --git a/src/gui/src/i18n/translations/da.js b/src/gui/src/i18n/translations/da.js index c52f73e0..338fb96e 100644 --- a/src/gui/src/i18n/translations/da.js +++ b/src/gui/src/i18n/translations/da.js @@ -161,10 +161,6 @@ const da = { log_out: 'Log ud', looks_good: 'Ser godt ud!', manage_sessions: 'Administrer sessioner', - menubar_style: 'Menubjælke stil', - menubar_style_desktop: 'Skrivebord', - menubar_style_system: 'System', - menubar_style_window: 'Vindue', modified: 'Ændret', move: 'Flyt', moving_file: 'Flytter %%', diff --git a/src/gui/src/i18n/translations/de.js b/src/gui/src/i18n/translations/de.js index edb247fb..1235118b 100644 --- a/src/gui/src/i18n/translations/de.js +++ b/src/gui/src/i18n/translations/de.js @@ -161,10 +161,6 @@ const de = { log_out: 'Abmelden', looks_good: "Sieht gut aus!", manage_sessions: "Sitzungen verwalten", - menubar_style: "Menüleisten-Stil", - menubar_style_desktop: "Desktop", - menubar_style_system: "System", - menubar_style_window: "Fenster", modified: 'Geändert', move: 'Verschieben', moving_file: "Verschiebe %%", diff --git a/src/gui/src/i18n/translations/en.js b/src/gui/src/i18n/translations/en.js index 1bced8b4..49fb5f0b 100644 --- a/src/gui/src/i18n/translations/en.js +++ b/src/gui/src/i18n/translations/en.js @@ -167,10 +167,6 @@ const en = { log_out: 'Log Out', looks_good: "Looks good!", manage_sessions: "Manage Sessions", - menubar_style: "Menubar Style", - menubar_style_desktop: "Desktop", - menubar_style_system: "System", - menubar_style_window: "Window", modified: 'Modified', move: 'Move', moving_file: "Moving %%", diff --git a/src/gui/src/i18n/translations/es.js b/src/gui/src/i18n/translations/es.js index 98c87396..11e35d8a 100644 --- a/src/gui/src/i18n/translations/es.js +++ b/src/gui/src/i18n/translations/es.js @@ -185,10 +185,6 @@ const es = { log_out: 'Cerrar sesión', looks_good: 'Se ve bien!', manage_sessions: 'Administrar sesión', - menubar_style: 'Estilo de la barra de menú', - menubar_style_desktop: 'Escritorio', - menubar_style_system: 'Sistema', - menubar_style_window: 'Ventana', modified: 'Modified', move: 'Mover', moving_file: 'Moviendo %%', diff --git a/src/gui/src/i18n/translations/fa.js b/src/gui/src/i18n/translations/fa.js index 0c8342c9..a8c221b6 100644 --- a/src/gui/src/i18n/translations/fa.js +++ b/src/gui/src/i18n/translations/fa.js @@ -180,10 +180,6 @@ const fa = { log_out: "خروج", looks_good: "خوب به نظر می‌رسد!", manage_sessions: "مدیریت نشست‌ها", - menubar_style: "سبک نوار منو", - menubar_style_desktop: "دسکتاپ", - menubar_style_system: "سیستم", - menubar_style_window: "پنجره", modified: "تغییر داده شده", move: "انتقال", moving_file: "انتقال %%", diff --git a/src/gui/src/i18n/translations/fi.js b/src/gui/src/i18n/translations/fi.js index 22b1a90d..1ae5b62d 100644 --- a/src/gui/src/i18n/translations/fi.js +++ b/src/gui/src/i18n/translations/fi.js @@ -210,10 +210,6 @@ const fi = { log_out: "Kirjaudu ulos", looks_good: "Näyttää hyvältä!", manage_sessions: "Hallitse istuntoja", - menubar_style: "Valikkopalkin tyyli", - menubar_style_desktop: "Työpöytä", - menubar_style_system: "Järjestelmä", - menubar_style_window: "Ikkuna", modified: "Muokattu", move: "Siirrä", moving_file: "Siirretään %%", diff --git a/src/gui/src/i18n/translations/fr.js b/src/gui/src/i18n/translations/fr.js index 17a31fa0..4f64fde6 100644 --- a/src/gui/src/i18n/translations/fr.js +++ b/src/gui/src/i18n/translations/fr.js @@ -161,10 +161,6 @@ const fr = { log_out: 'Se déconnecter', looks_good: "Ça a l'air bien !", manage_sessions: "Gérer les sessions", - menubar_style: "Style barre de menu", - menubar_style_desktop: "Bureau", - menubar_style_system: "Système", - menubar_style_window: "Fenêtre", modified: 'Modifié', move: 'Déplacer', moving_file: "Déplacement de %%", diff --git a/src/gui/src/i18n/translations/he.js b/src/gui/src/i18n/translations/he.js index 940b8ca9..f98b4f1c 100644 --- a/src/gui/src/i18n/translations/he.js +++ b/src/gui/src/i18n/translations/he.js @@ -172,10 +172,6 @@ const en = { log_out: "התנתק", looks_good: "נראה טוב!", manage_sessions: "ניהול ישיבות", - menubar_style: "סגנון שורת התפריט", - menubar_style_desktop: "שולחן העבודה", - menubar_style_system: "מערכת", - menubar_style_window: "חַלוֹן", modified: "שונה", move: "לעבור", moving_file: "מעביר %%", diff --git a/src/gui/src/i18n/translations/hi.js b/src/gui/src/i18n/translations/hi.js index 83df08d4..4bc1f187 100644 --- a/src/gui/src/i18n/translations/hi.js +++ b/src/gui/src/i18n/translations/hi.js @@ -161,10 +161,6 @@ const hi = { log_out: 'लॉग आउट', looks_good: "अच्छा लग रहा है!", manage_sessions: "सत्र प्रबंधित करें", - menubar_style: "मेनूबार शैली", - menubar_style_desktop: "डेस्कटॉप", - menubar_style_system: "प्रणाली", - menubar_style_window: "खिड़की", modified: 'संशोधित', move: 'बदले', moving_file: "जा रहे हैं %%", diff --git a/src/gui/src/i18n/translations/hu.js b/src/gui/src/i18n/translations/hu.js index cf3635fb..17b3be26 100644 --- a/src/gui/src/i18n/translations/hu.js +++ b/src/gui/src/i18n/translations/hu.js @@ -157,10 +157,6 @@ const hu = { log_out: "Kijelentkezés", looks_good: "Jól néz ki!", manage_sessions: "Munkamenetek kezelése", - menubar_style: "Menü stílusa", - menubar_style_desktop: "Asztal", - menubar_style_system: "Rendszer", - menubar_style_window: "Ablak", modified: "Módosítva", move: "Mozgatás", moving_file: "Mozgatás: %%", diff --git a/src/gui/src/i18n/translations/hy.js b/src/gui/src/i18n/translations/hy.js index acb78bc3..e779a33e 100644 --- a/src/gui/src/i18n/translations/hy.js +++ b/src/gui/src/i18n/translations/hy.js @@ -161,10 +161,6 @@ const hy = { log_out: "Դուրս գալ", looks_good: "Լավ է նայվում!", manage_sessions: "Սեսիաների կառավարում", - menubar_style: "Մենյուբարի ոճը", - menubar_style_desktop: "Աշխատասեղան", - menubar_style_system: "Համակարգ", - menubar_style_window: "Պատուհան", modified: "Փոփոխված", move: "Տեղափոխել", moving_file: "Տեղափոխվում է %%", diff --git a/src/gui/src/i18n/translations/id.js b/src/gui/src/i18n/translations/id.js index 0f6f9005..1738f057 100644 --- a/src/gui/src/i18n/translations/id.js +++ b/src/gui/src/i18n/translations/id.js @@ -172,10 +172,6 @@ const id = { log_out: "Keluar", looks_good: "Tampak bagus!", manage_sessions: "Kelola Sesi", - menubar_style: "Gaya Menubar", - menubar_style_desktop: "Desktop", - menubar_style_system: "Sistem", - menubar_style_window: "Jendela", modified: "Dimodifikasi", move: "Pindahkan", moving_file: "Memindahkan %%", diff --git a/src/gui/src/i18n/translations/ig.js b/src/gui/src/i18n/translations/ig.js index 993e1a76..8dc91f64 100644 --- a/src/gui/src/i18n/translations/ig.js +++ b/src/gui/src/i18n/translations/ig.js @@ -175,10 +175,6 @@ const ig = { log_out: "pụọ", looks_good: "Ọ mara mma!", manage_sessions: "Jikwaa Oge", - menubar_style: "Ụdị Menubar", - menubar_style_desktop: "Desktọpụ", - menubar_style_system: "Sistemu", - menubar_style_window: "Window", modified: "gbanwee", move: "Bugharịa", moving_file: "Na Bugharịa %%", diff --git a/src/gui/src/i18n/translations/it.js b/src/gui/src/i18n/translations/it.js index 9ec42aee..810c0d59 100644 --- a/src/gui/src/i18n/translations/it.js +++ b/src/gui/src/i18n/translations/it.js @@ -177,10 +177,6 @@ const it = { log_out: "Disconnettiti", looks_good: "Sembra buono!", manage_sessions: "Gestisci le sessioni", - menubar_style: "Stile della barra dei menu", - menubar_style_desktop: "Scrivania", - menubar_style_system: "Sistema", - menubar_style_window: "Finestra", modified: "Modificato", move: "Sposta", moving_file: "Spostamento in corso %%", diff --git a/src/gui/src/i18n/translations/ja.js b/src/gui/src/i18n/translations/ja.js index debe44ed..dac3ca01 100644 --- a/src/gui/src/i18n/translations/ja.js +++ b/src/gui/src/i18n/translations/ja.js @@ -162,10 +162,6 @@ const ja = { log_out: 'ログアウト', looks_good: "ナイス！", manage_sessions: "セッションを管理", - menubar_style: "メニューバースタイル", - menubar_style_desktop: "デスクトップ", - menubar_style_system: "システム", - menubar_style_window: "ウィンドウ", modified: '変更日時', move: '移動', moving_file: "移動中 %%", diff --git a/src/gui/src/i18n/translations/ko.js b/src/gui/src/i18n/translations/ko.js index df94fa7e..404af347 100644 --- a/src/gui/src/i18n/translations/ko.js +++ b/src/gui/src/i18n/translations/ko.js @@ -174,10 +174,6 @@ const ko = { log_out: "로그아웃", looks_good: "좋아 보입니다!", manage_sessions: "세션 관리", - menubar_style: "메뉴 표시줄 스타일", - menubar_style_desktop: "바탕화면", - menubar_style_system: "시스템", - menubar_style_window: "윈도우", modified: "수정한 날짜", move: "이동", moving_file: "이동 중 %%", diff --git a/src/gui/src/i18n/translations/ku.js b/src/gui/src/i18n/translations/ku.js index 996e7688..08a1fe5f 100644 --- a/src/gui/src/i18n/translations/ku.js +++ b/src/gui/src/i18n/translations/ku.js @@ -178,10 +178,6 @@ const ku = { log_out: "چوونە دەرەوە", looks_good: "پەیوەندیدارە!", manage_sessions: "بەڕێوەبردنی دانیشتنەکان", - menubar_style: "شێوازی منوبار", - menubar_style_desktop: "سەروروومیزی", - menubar_style_system: "سیستەم", - menubar_style_window: "پەنجەرە", modified: "گۆڕاو", move: "جوڵاندن", moving_file: "جوڵاندنەوەی %%", diff --git a/src/gui/src/i18n/translations/ml.js b/src/gui/src/i18n/translations/ml.js index fead1802..6abb8220 100644 --- a/src/gui/src/i18n/translations/ml.js +++ b/src/gui/src/i18n/translations/ml.js @@ -163,10 +163,6 @@ const ml = { log_out: 'ലോഗ്ഔട്ട്', looks_good: "നന്നായിരിക്കുന്നു!", manage_sessions: "സെഷനുകൾ കൈകാര്യം ചെയ്യുക", - menubar_style: "മെനുബാർ ശൈലി", - menubar_style_desktop: "ഡെസ്ക്ടോപ്പ്", - menubar_style_system: "സിസ്റ്റം", - menubar_style_window: "വിൻഡോ", modified: 'പരിഷ്കരിച്ചത്', move: 'നീക്കുക', moving_file: "%% നീക്കുന്നു", diff --git a/src/gui/src/i18n/translations/nb.js b/src/gui/src/i18n/translations/nb.js index 0d59e617..0e2972ef 100644 --- a/src/gui/src/i18n/translations/nb.js +++ b/src/gui/src/i18n/translations/nb.js @@ -252,10 +252,6 @@ const nb = { link_copied: "Lenke kopiert", looks_good: "Ser bra ut!", manage_sessions: "Administrer økter", - menubar_style: "Menylinjesstil", - menubar_style_desktop: "Skrivebord", - menubar_style_system: "System", - menubar_style_window: "Vindu", modified: "Endret", new_email: "Ny e-post", original_name: "Opprinnelig navn", diff --git a/src/gui/src/i18n/translations/nl.js b/src/gui/src/i18n/translations/nl.js index fe4f743d..387ebcc6 100644 --- a/src/gui/src/i18n/translations/nl.js +++ b/src/gui/src/i18n/translations/nl.js @@ -161,10 +161,6 @@ const nl = { log_out: 'Uitloggen', looks_good: 'Ziet er goed uit!', manage_sessions: 'Sessies Beheren', - menubar_style: 'Menubalk Stijl', - menubar_style_desktop: 'Bureaublad', - menubar_style_system: 'Systeem', - menubar_style_window: 'Venster', mobile_device: 'Mobiel apparaat', modified: 'Gewijzigd', move: 'Verplaatsen', diff --git a/src/gui/src/i18n/translations/nn.js b/src/gui/src/i18n/translations/nn.js index ca60d29d..52dd4c30 100644 --- a/src/gui/src/i18n/translations/nn.js +++ b/src/gui/src/i18n/translations/nn.js @@ -246,10 +246,6 @@ const nn = { log_into_another_account_anyway: "Logg inn med ein annan konto likevel", looks_good: "Ser bra ut!", manage_sessions: "Handter økter", - menubar_style: "Stil på menylinje", - menubar_styledesktop: "Skrivbord", - menubar_style_system: "System", - menubar_style_window: "Vindauge", modified: "Endra", new_email: "Ny e-post", no: "Nei", diff --git a/src/gui/src/i18n/translations/pl.js b/src/gui/src/i18n/translations/pl.js index 5c48d17b..e5bbbf05 100644 --- a/src/gui/src/i18n/translations/pl.js +++ b/src/gui/src/i18n/translations/pl.js @@ -161,10 +161,6 @@ const pl = { log_out: 'Wyloguj się', looks_good: "W porządku!", manage_sessions: "Zarządzaj sesjami", - menubar_style: "Styl paska menu", - menubar_style_desktop: "Pulpit", - menubar_style_system: "Jak w systemie", - menubar_style_window: "Okno", modified: 'Zmodyfikowany', move: 'Przenieś', moving_file: "Przenoszenie %%", diff --git a/src/gui/src/i18n/translations/pt.js b/src/gui/src/i18n/translations/pt.js index 1888d251..02ac9fcb 100644 --- a/src/gui/src/i18n/translations/pt.js +++ b/src/gui/src/i18n/translations/pt.js @@ -163,10 +163,6 @@ const pt = { log_out: 'Sair', looks_good: "Looks good!", manage_sessions: "Gerir Sessões", - menubar_style: "Estilo da Barra de Menu", - menubar_style_desktop: "Desktop", - menubar_style_system: "Sistema", - menubar_style_window: "Window", modified: 'Modificado', move: 'Mover', moving_file: "Movendo %%", diff --git a/src/gui/src/i18n/translations/ro.js b/src/gui/src/i18n/translations/ro.js index afa0212e..fcf573e1 100644 --- a/src/gui/src/i18n/translations/ro.js +++ b/src/gui/src/i18n/translations/ro.js @@ -162,10 +162,6 @@ const ro = { log_out: 'Deconectează-te', looks_good: "Arată bine!", manage_sessions: "Administrează sesiuni", - menubar_style: "Stil bară de meniu", - menubar_style_desktop: "Desktop", - menubar_style_system: "Sistem", - menubar_style_window: "Fereastră", modified: "Modificat", move: 'Mută', moving_file: "Se mută %%", diff --git a/src/gui/src/i18n/translations/ru.js b/src/gui/src/i18n/translations/ru.js index 47dc41da..751e171c 100644 --- a/src/gui/src/i18n/translations/ru.js +++ b/src/gui/src/i18n/translations/ru.js @@ -178,10 +178,6 @@ const ru = { log_out: 'Выйти', looks_good: 'Выглядит здорово!', manage_sessions: 'Управление Сеансами', - menubar_style: 'Стиль меню', - menubar_style_desktop: 'Рабочий стол', - menubar_style_system: 'Система', - menubar_style_window: 'Окно', modified: 'Изменено', move: 'Переместить', moving_file: 'Перемещаю %%', diff --git a/src/gui/src/i18n/translations/sv.js b/src/gui/src/i18n/translations/sv.js index 58866a80..9b7e9b25 100644 --- a/src/gui/src/i18n/translations/sv.js +++ b/src/gui/src/i18n/translations/sv.js @@ -162,10 +162,6 @@ const sv = { log_out: "Logga ut", looks_good: "Ser bra ut!", manage_sessions: "Hantera sessioner", - menubar_style: "Stil för menyraden", - menubar_style_desktop: "Skrivbord", - menubar_style_system: "System", - menubar_style_window: "Fönster", modified: "Ändrad", move: "Flytta", moving_file: "Flyttar %%", diff --git a/src/gui/src/i18n/translations/ta.js b/src/gui/src/i18n/translations/ta.js index 24d39624..0c2d6170 100644 --- a/src/gui/src/i18n/translations/ta.js +++ b/src/gui/src/i18n/translations/ta.js @@ -160,10 +160,6 @@ const ta = { log_out: 'வெளியேறு', looks_good: "நன்றாக இருக்கிறது!", manage_sessions: "அமர்வுகளை நிர்வகிக்கவும்", - menubar_style: "மெனுபார் உடை", - menubar_style_desktop: "டெஸ்க்டாப்", - menubar_style_system: "அமைப்பு", - menubar_style_window: "ஜன்னல்", modified: 'மாற்றியமைக்கப்பட்டது', move: 'நகர்வு', moving_file: "நகரும் %%", diff --git a/src/gui/src/i18n/translations/th.js b/src/gui/src/i18n/translations/th.js index beb1efaa..6b5abdad 100644 --- a/src/gui/src/i18n/translations/th.js +++ b/src/gui/src/i18n/translations/th.js @@ -160,10 +160,6 @@ const th = { log_out: "ออกจากระบบ", looks_good: "ดูดีเลย!", manage_sessions: "จัดการเซสชั่น", - menubar_style: "ไตล์เมนูบาร์", - menubar_style_desktop: "เดสก์ท็อป", - menubar_style_system: "ระบบ", - menubar_style_window: "หน้าต่าง", modified: 'แก้ไขเเมื่อ', move: "ย้าย", moving_file: "กำลังย้าย %%", diff --git a/src/gui/src/i18n/translations/ua.js b/src/gui/src/i18n/translations/ua.js index fc4efd28..0138bd7a 100644 --- a/src/gui/src/i18n/translations/ua.js +++ b/src/gui/src/i18n/translations/ua.js @@ -164,10 +164,6 @@ const ua = { log_out: "Вийти", looks_good: "Гарно виглядає!", manage_sessions: "Управління Сеансами", - menubar_style: "Стиль Меню", - menubar_style_desktop: "Робочого стола", - menubar_style_system: "Системи", - menubar_style_window: "Вікна", modified: "Змінено", move: "Перемістити", moving_file: "Переміщується %%", diff --git a/src/gui/src/i18n/translations/ur.js b/src/gui/src/i18n/translations/ur.js index 1a428b0f..313ea14e 100644 --- a/src/gui/src/i18n/translations/ur.js +++ b/src/gui/src/i18n/translations/ur.js @@ -167,10 +167,6 @@ const ur = { log_out: "لاگ آؤٹ", looks_good: "اچھا لگ رہا ہے!", manage_sessions: "سیشنز کا نظم کریں۔", - menubar_style: "مینو بار اسٹائل", - menubar_style_desktop: "ڈیسک ٹاپ", - menubar_style_system: "سسٹم", - menubar_style_window: "ونڈو", move: "منتقل کریں", moving_file: "منتقل ہو رہا ہے %%", my_websites: "میری ویب سائٹیں ", diff --git a/src/gui/src/i18n/translations/vi.js b/src/gui/src/i18n/translations/vi.js index 95297703..9e58ad35 100644 --- a/src/gui/src/i18n/translations/vi.js +++ b/src/gui/src/i18n/translations/vi.js @@ -162,10 +162,6 @@ const vi = { log_out: 'Đăng xuất', looks_good: "Trông tốt!", manage_sessions: "Quản lý phiên", - menubar_style: "Kiểu thanh menu", - menubar_style_desktop: "Màn hình chính", - menubar_style_system: "Hệ thống", - menubar_style_window: "Cửa sổ", modified: 'Đã sửa đổi', move: 'Di chuyển', moving_file: "Đang di chuyển %%", diff --git a/src/gui/src/i18n/translations/zh.js b/src/gui/src/i18n/translations/zh.js index 6063ba4d..49d8cae7 100644 --- a/src/gui/src/i18n/translations/zh.js +++ b/src/gui/src/i18n/translations/zh.js @@ -162,10 +162,6 @@ const zh = { log_out: '退出', looks_good: "看起来不错！", manage_sessions: "会话管理", - menubar_style: "菜单条样式", - menubar_style_desktop: "桌面", - menubar_style_system: "系统", - menubar_style_window: "窗口", modified: '已修改', move: '移动', moving_file: "移动 %%", diff --git a/src/gui/src/i18n/translations/zhtw.js b/src/gui/src/i18n/translations/zhtw.js index d7f38ffb..7f9fdc50 100644 --- a/src/gui/src/i18n/translations/zhtw.js +++ b/src/gui/src/i18n/translations/zhtw.js @@ -161,10 +161,6 @@ const zhtw = { log_out: '登出', looks_good: "看起來不錯！", manage_sessions: "管理工作階段", - menubar_style: "選單列樣式", - menubar_style_desktop: "桌面", - menubar_style_system: "系統", - menubar_style_window: "視窗", modified: '已修改', move: '移動', moving_file: "正在移動 %%", From b1de89e1ecb04c54e26497f69fa488aea69eb5a8 Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 29 Jun 2025 16:03:41 -0700 Subject: [PATCH 4/9] Update tr.js --- src/gui/src/i18n/translations/tr.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/gui/src/i18n/translations/tr.js b/src/gui/src/i18n/translations/tr.js index 34e88fa0..acd4c934 100644 --- a/src/gui/src/i18n/translations/tr.js +++ b/src/gui/src/i18n/translations/tr.js @@ -161,10 +161,6 @@ const tr = { log_out: "Çıkış Yap", looks_good: "İyi görünüyor!", manage_sessions: "Oturumları Yönet", - menubar_style: "Menü Çubuğu Stili", - menubar_style_desktop: "Masaüstü", - menubar_style_system: "Sistem", - menubar_style_window: "Pencere", modified: "Değiştirilmiş", move: "Taşı", moving_file: "%% Taşınıyor", From 54ae9c1ca91486a7e580598b1b46321138be752c Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 29 Jun 2025 16:57:24 -0700 Subject: [PATCH 5/9] the first time toolbar is shown, keep it open until user hovers over it at least once --- src/gui/src/UI/UIDesktop.js | 33 +++++++++++++++++++++++++++++++-- src/gui/src/css/style.css | 4 ++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index a3b2c2b6..a69c1be9 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1116,10 +1116,21 @@ async function UIDesktop(options) { }); } // ---------------------------------------------------- - // User options + // Toolbar // ---------------------------------------------------- + // Has user seen the toolbar animation? + window.has_seen_toolbar_animation = await puter.kv.get('has_seen_toolbar_animation') ?? false; + let ht = ''; - ht += `
`; + let style = ''; + let class_name = ''; + if(window.has_seen_toolbar_animation){ + style = 'top: -20px; width: 40px;'; + class_name = 'toolbar-hidden'; + }else + style= 'height:30px; min-height:30px; max-height:30px;'; + + ht += `
`; // logo ht += ``; @@ -1468,6 +1479,15 @@ async function UIDesktop(options) { opacity: 0, }); } + + if(!window.has_seen_toolbar_animation){ + puter.kv.set({ + key: "has_seen_toolbar_animation", + value: true, + }) + + window.has_seen_toolbar_animation = true; + } } window.show_toolbar = () => { @@ -1594,6 +1614,10 @@ async function UIDesktop(options) { // - it's the user options menu button // - the user options menu is open $(document).on('click', function(e){ + // if the user has not seen the toolbar animation, don't hide the toolbar + if(!window.has_seen_toolbar_animation) + return; + if( !$(e.target).hasClass('toolbar') && !$(e.target).hasClass('user-options-menu-btn') && @@ -1606,6 +1630,7 @@ async function UIDesktop(options) { // Handle mouse leaving the toolbar $(document).on('mouseleave', '.toolbar', function () { + 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) return; @@ -1616,6 +1641,10 @@ async function UIDesktop(options) { // Track mouse movement globally to update toolbar hiding logic $(document).on('mousemove', function(e) { + // 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; + // if the user options menu is open, don't hide the toolbar if ($('.context-menu[data-id="user-options-menu"]').length > 0) return; diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index b3889263..2bbacc0f 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -1827,6 +1827,10 @@ label { opacity: 1 !important; } +.toolbar-hidden .toolbar-btn { + opacity: 0; +} + .user-options-menu-btn.has-open-contextmenu { background-color: rgb(255 255 255 / 35%); border-radius: 3px; From 40260a9fb2026ff3837b1406551b17e636264a9b Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 29 Jun 2025 19:17:58 -0700 Subject: [PATCH 6/9] full support for fullpage mode --- src/gui/src/UI/UIDesktop.js | 14 +++++++------- src/gui/src/initgui.js | 8 ++++++-- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index a69c1be9..52e31561 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1374,7 +1374,6 @@ async function UIDesktop(options) { } const stat = await puter.fs.stat(item_path); - console.log('stat result', stat); // TODO: DRY everything here with open_item. Unfortunately we can't // use open_item here because it's coupled with UI logic; @@ -1511,7 +1510,7 @@ async function UIDesktop(options) { let isMouseNearToolbar = false; // Define safe zone around toolbar (in pixels) - const TOOLBAR_SAFE_ZONE = 50; + const TOOLBAR_SAFE_ZONE = 30; const TOOLBAR_HIDE_DELAY = 100; // Base delay before hiding const TOOLBAR_QUICK_HIDE_DELAY = 300; // Quicker hide when mouse moves far away @@ -1609,6 +1608,11 @@ async function UIDesktop(options) { isMouseNearToolbar = true; }); + $(document).on('mouseenter', '.toolbar', function () { + if(window.is_fullpage_mode) + $('.toolbar').focus(); + }); + // any click will hide the toolbar, unless: // - it's on the toolbar // - it's the user options menu button @@ -1627,7 +1631,7 @@ async function UIDesktop(options) { window.hide_toolbar(false); } }) - + // Handle mouse leaving the toolbar $(document).on('mouseleave', '.toolbar', function () { window.has_left_toolbar_at_least_once = true; @@ -1649,10 +1653,6 @@ async function UIDesktop(options) { if ($('.context-menu[data-id="user-options-menu"]').length > 0) return; - // Update global mouse position (assuming this is done elsewhere in the code) - window.mouseX = e.clientX; - window.mouseY = e.clientY; - // Only handle toolbar hiding if toolbar is visible and mouse moved significantly if (!$('.toolbar').hasClass('toolbar-hidden')) { // Use throttling to avoid excessive calls diff --git a/src/gui/src/initgui.js b/src/gui/src/initgui.js index dea49027..5146cc10 100644 --- a/src/gui/src/initgui.js +++ b/src/gui/src/initgui.js @@ -1232,9 +1232,13 @@ window.initgui = async function(options){ //-------------------------------------------------------- $(document).on('mousedown', function(e){ // if taskbar or any parts of it is clicked, drop the event - if($(e.target).hasClass('taskbar') || $(e.target).closest('.taskbar').length > 0) + if($(e.target).hasClass('taskbar') || $(e.target).closest('.taskbar').length > 0){ return; - + } + // if toolbar or any parts of it is clicked, drop the event + if($(e.target).hasClass('toolbar') || $(e.target).closest('.toolbar').length > 0){ + return; + } // if mouse is clicked on a window, activate it if(window.mouseover_window !== undefined){ // if popover clicked on, don't activate window. This is because if an app From 0864be054cb29522fe7dfe536c1a5ff1c96714df Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 29 Jun 2025 19:36:03 -0700 Subject: [PATCH 7/9] When a window is being dragged don't activate toolbar (duh!) --- src/gui/src/UI/UIDesktop.js | 8 ++++++++ src/gui/src/UI/UIWindow.js | 2 ++ 2 files changed, 10 insertions(+) diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 52e31561..116b0306 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1587,6 +1587,10 @@ async function UIDesktop(options) { // hovering over a hidden toolbar will show it $(document).on('mouseenter', '.toolbar-hidden', function () { + // if a window is being dragged, don't show the toolbar + if(window.a_window_is_being_dragged) + return; + if(window.is_fullpage_mode) $('.window-app-iframe').css('pointer-events', 'none'); @@ -1600,6 +1604,10 @@ async function UIDesktop(options) { // hovering over a visible toolbar will show it and cancel hiding $(document).on('mouseenter', '.toolbar:not(.toolbar-hidden)', function () { + // if a window is being dragged, don't show the toolbar + if(window.a_window_is_being_dragged) + return; + // Clear any pending hide timeout when entering toolbar if (toolbarHideTimeout) { clearTimeout(toolbarHideTimeout); diff --git a/src/gui/src/UI/UIWindow.js b/src/gui/src/UI/UIWindow.js index f6df0d24..4283124e 100644 --- a/src/gui/src/UI/UIWindow.js +++ b/src/gui/src/UI/UIWindow.js @@ -1636,6 +1636,7 @@ async function UIWindow(options) { $(el_window).draggable({ start: function(e, ui){ + window.a_window_is_being_dragged = true; // if window is snapped, unsnap it and reset its position to where it was before snapping if(options.is_resizable && window_is_snapped){ window_is_snapped = false; @@ -1798,6 +1799,7 @@ async function UIWindow(options) { } }, stop: function () { + window.a_window_is_being_dragged = false; let window_will_snap = false; $( el_window ).draggable( "option", "cursorAt", false ); From 278bb29ee50f361f9352f539cac1aff0836e10ed Mon Sep 17 00:00:00 2001 From: jelveh Date: Mon, 30 Jun 2025 07:01:16 -0700 Subject: [PATCH 8/9] better coloring and delay --- src/gui/src/UI/UIDesktop.js | 12 ++++++------ src/gui/src/css/style.css | 1 + 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 116b0306..ed69c40e 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -1461,7 +1461,7 @@ async function UIDesktop(options) { $('.toolbar').animate({ top: '-20px', width: '40px', - }, 200); + }, 100); } else { $('.toolbar').css({ top: '-20px', @@ -1470,11 +1470,11 @@ async function UIDesktop(options) { } // animate hide toolbar-btn, toolbar-clock if (animate) { - $('.toolbar-btn, #clock').animate({ + $('.toolbar-btn, #clock, .user-options-menu-btn').animate({ opacity: 0, - }, 50); + }, 10); } else { - $('.toolbar-btn, #clock').css({ + $('.toolbar-btn, #clock, .user-options-menu-btn').css({ opacity: 0, }); } @@ -1500,7 +1500,7 @@ async function UIDesktop(options) { }, 100).css('width', 'fit-content'); // animate show toolbar-btn, toolbar-clock - $('.toolbar-btn, #clock').animate({ + $('.toolbar-btn, #clock, .user-options-menu-btn').animate({ opacity: 0.8, }, 50); } @@ -1512,7 +1512,7 @@ async function UIDesktop(options) { // Define safe zone around toolbar (in pixels) const TOOLBAR_SAFE_ZONE = 30; const TOOLBAR_HIDE_DELAY = 100; // Base delay before hiding - const TOOLBAR_QUICK_HIDE_DELAY = 300; // Quicker hide when mouse moves far away + const TOOLBAR_QUICK_HIDE_DELAY = 200; // Quicker hide when mouse moves far away // Function to check if mouse is in the safe zone around toolbar window.isMouseInToolbarSafeZone = (mouseX, mouseY) => { diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 2bbacc0f..bf9d6d59 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -1773,6 +1773,7 @@ label { border-bottom-right-radius: 10px; width: fit-content; overflow: clip; + box-shadow: 0 0 10px rgb(0 0 0 / 26%); } .show-desktop-btn { From edf00a5fd4bc7d3191e55147e96bc811b8bdef59 Mon Sep 17 00:00:00 2001 From: jelveh Date: Mon, 30 Jun 2025 10:24:24 -0700 Subject: [PATCH 9/9] Update style.css --- src/gui/src/css/style.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index bf9d6d59..d856dc3d 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -1773,7 +1773,12 @@ label { border-bottom-right-radius: 10px; width: fit-content; overflow: clip; - box-shadow: 0 0 10px rgb(0 0 0 / 26%); + box-shadow: rgb(255 255 255 / 14%) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.2) 0px 2px 14px; + +} + +.toolbar-hidden { + box-shadow: rgb(255 255 255 / 44%) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.2) 0px 2px 14px; } .show-desktop-btn {