From 0bd0eaf89026a7c8e35d54fd681e0d8c983ce165 Mon Sep 17 00:00:00 2001 From: Nariman Jelveh Date: Sat, 22 Jun 2024 19:51:29 -0700 Subject: [PATCH 1/2] 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 += `
${i18n('menubar_style')} -
+
+
+
+
@@ -81,24 +90,50 @@ 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); - } + 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) { - const value = $(this).val(); + let 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'); + // 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 a205474f..ce68a838 100644 --- a/src/UI/UIDesktop.js +++ b/src/UI/UIDesktop.js @@ -571,6 +571,13 @@ async function UIDesktop(options){ 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'); diff --git a/src/UI/UIWindow.js b/src/UI/UIWindow.js index b242d92d..eda9925b 100644 --- a/src/UI/UIWindow.js +++ b/src/UI/UIWindow.js @@ -276,10 +276,8 @@ async function UIWindow(options) { // Menubar if(window.menubar_style === 'window'){ - h += `
`; - h += `
`; + h += `
`; }else if(window.menubar_style === 'desktop'){ - console.log('global menubar'); $('.toolbar-puter-logo').after(`
`); } diff --git a/src/css/style.css b/src/css/style.css index 08de3c3d..fd1e3eee 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -802,6 +802,9 @@ span.header-sort-icon img { text-shadow: none; } +.window-menubar:not(.window-menubar-global):empty { + display: none !important; +} .window-menubar { display: flex; box-sizing: border-box; diff --git a/src/helpers.js b/src/helpers.js index 8e16cd14..394bcc65 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -2396,4 +2396,20 @@ window.countSubstr = (str, substring)=>{ } return count; -} \ No newline at end of file +} + +window.detectHostOS = function(){ + var userAgent = window.navigator.userAgent; + var platform = window.navigator.platform; + var macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']; + var windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']; + + if (macosPlatforms.indexOf(platform) !== -1) { + return 'macos'; + } else if (windowsPlatforms.indexOf(platform) !== -1) { + return 'windows'; + } else { + return 'other'; + } +} + diff --git a/src/i18n/translations/en.js b/src/i18n/translations/en.js index 350dd863..6f8db6c7 100644 --- a/src/i18n/translations/en.js +++ b/src/i18n/translations/en.js @@ -147,6 +147,9 @@ const en = { log_out: 'Log Out', looks_good: "Looks good!", manage_sessions: "Manage Sessions", + menubar_style_desktop: "Desktop", + menubar_style_system: "System", + menubar_style_window: "Window", move: 'Move', moving_file: "Moving %%", my_websites: "My Websites",