diff --git a/src/IPC.js b/src/IPC.js index 745b2057..1010601b 100644 --- a/src/IPC.js +++ b/src/IPC.js @@ -475,8 +475,16 @@ window.addEventListener('message', async (event) => { const value = hydrator.hydrate(event.data.value); // Show menubar - const $menubar = $(el_window).find('.window-menubar') - $menubar.show(); + let $menubar; + if(window.menubar_style === 'window') + $menubar = $(el_window).find('.window-menubar') + else{ + $menubar = $('.window-menubar-global[data-window-id="'+$(el_window).attr('data-id')+'"]'); + // hide all other menubars + $('.window-menubar-global').hide(); + } + + $menubar.css('display', 'flex'); // disable system context menu $menubar.on('contextmenu', (e) => { diff --git a/src/UI/Settings/UITabPersonalization.js b/src/UI/Settings/UITabPersonalization.js index 036ddd42..4c997a67 100644 --- a/src/UI/Settings/UITabPersonalization.js +++ b/src/UI/Settings/UITabPersonalization.js @@ -27,18 +27,48 @@ export default { html: () => { return `

${i18n('personalization')}

+
+ ${i18n('background')} +
+ +
+
${i18n('ui_colors')}
-
- ${i18n('background')} -
- +
+ ${i18n('menubar_style')} +
+
+ +
+ +
+ +
+ +
+ +
-
`; +
+ + `; }, init: ($el_window) => { $el_window.find('.change-ui-colors').on('click', function (e) { @@ -59,5 +89,55 @@ export default { } }); }); + + 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(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'); + // 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'); + // show + $(el).css('display', 'flex'); + }) + } + window.menubar_style = value; + }else{ + console.error('Invalid menubar style value'); + } + }) }, }; diff --git a/src/UI/UIDesktop.js b/src/UI/UIDesktop.js index 2a46a052..ce68a838 100644 --- a/src/UI/UIDesktop.js +++ b/src/UI/UIDesktop.js @@ -562,6 +562,29 @@ async function UIDesktop(options){ } }) + // 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(menubar_style === 'system'){ + if(window.detectHostOS() === 'macos') + menubar_style = 'desktop'; + else + 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')){ window.history.pushState(null, document.title, '/'); @@ -955,6 +978,7 @@ async function UIDesktop(options){ ht += `
`; // logo ht += ``; + // create account button ht += `