From 0bd0eaf89026a7c8e35d54fd681e0d8c983ce165 Mon Sep 17 00:00:00 2001 From: Nariman Jelveh Date: Sat, 22 Jun 2024 19:51:29 -0700 Subject: [PATCH] add the ability to pick between desktop and winow menubars --- src/IPC.js | 9 ++++- src/UI/Settings/UITabPersonalization.js | 53 +++++++++++++++++++++++-- src/UI/UIDesktop.js | 19 +++++++++ src/UI/UIWindow.js | 16 +++++++- src/css/style.css | 26 +++++++++++- src/globals.js | 9 ++++- src/helpers.js | 2 +- 7 files changed, 123 insertions(+), 11 deletions(-) diff --git a/src/IPC.js b/src/IPC.js index 745b2057..05eb424b 100644 --- a/src/IPC.js +++ b/src/IPC.js @@ -475,7 +475,14 @@ window.addEventListener('message', async (event) => { const value = hydrator.hydrate(event.data.value); // Show menubar - const $menubar = $(el_window).find('.window-menubar') + 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.show(); // disable system context menu diff --git a/src/UI/Settings/UITabPersonalization.js b/src/UI/Settings/UITabPersonalization.js index 036ddd42..225d4d6a 100644 --- a/src/UI/Settings/UITabPersonalization.js +++ b/src/UI/Settings/UITabPersonalization.js @@ -27,18 +27,39 @@ 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 +80,29 @@ export default { } }); }); + + if(window.menubar_style === 'system' || !window.menubar_style){ + $el_window.find('#menubar_style_system').prop('checked', true); + }else if(window.menubar_style === 'desktop'){ + $el_window.find('#menubar_style_desktop').prop('checked', true); + } + else if(window.menubar_style === 'window'){ + $el_window.find('#menubar_style_window').prop('checked', true); + } + + $el_window.find('.menubar_style').on('change', function (e) { + const value = $(this).val(); + if(value === 'system' || value === 'desktop' || value === 'window'){ + // apply the new style + if(value === 'desktop') + $('body').addClass('menubar-style-desktop'); + else + $('body').removeClass('menubar-style-desktop'); + puter.kv.set('menubar_style', value); + 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..a205474f 100644 --- a/src/UI/UIDesktop.js +++ b/src/UI/UIDesktop.js @@ -562,6 +562,22 @@ 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'; + } + + // 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 +971,7 @@ async function UIDesktop(options){ ht += `
`; // logo ht += ``; + // create account button ht += `