mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-14 22:06:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Close #480

Browse Source
This commit is contained in:
Nariman Jelveh 2024-06-22 22:09:19 -07:00
parent 0bd0eaf890
commit a58aa3f2e6
7 changed files with 86 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/IPC.js
View File

@ -483,7 +483,8 @@ window.addEventListener('message', async (event) => {
// hide all other menubars
$('.window-menubar-global').hide();
}
$menubar.show();
$menubar.css('display', 'flex');
// disable system context menu
$menubar.on('contextmenu', (e) => {

71
src/UI/Settings/UITabPersonalization.js
View File

@ -41,20 +41,29 @@ export default {
</div>
<div class="settings-card" style="display: block; height: auto;">
<strong>${i18n('menubar_style')}</strong>
<div style="flex-grow:1;">
<div style="flex-grow:1; margin-top: 10px;">
<div>
<label style="display:inline;" for="menubar_style_system">
<input type="radio" name="menubar_style" class="menubar_style" value="system" id="menubar_style_system">
<label style="display:inline;" for="menubar_style_system">${i18n('menubar_style_system')}</label>
<strong>${i18n('menubar_style_system')}</strong>
<p style="margin-left: 17px; margin-top: 5px; margin-bottom: 20px;">Set the menubar based on the host system settings</p>
</label>
</div>
<div>
<label style="display:inline;" for="menubar_style_desktop">
<input type="radio" name="menubar_style" class="menubar_style" value="desktop" id="menubar_style_desktop">
<label style="display:inline;" for="menubar_style_desktop">${i18n('menubar_style_desktop')}</label>
<strong>${i18n('menubar_style_desktop')}</strong>
<p style="margin-left: 17px; margin-top: 5px; margin-bottom: 20px;">Show app menubar on in the desktop toolbar</p>
</label>
</div>
<div>
<label style="display:inline;" for="menubar_style_window">
<input type="radio" name="menubar_style" class="menubar_style" value="window" id="menubar_style_window">
<label style="display:inline;" for="menubar_style_window">${i18n('menubar_style_window')}</label>
<strong>${i18n('menubar_style_window')}</strong>
<p style="margin-left: 17px; margin-top: 5px; margin-bottom: 20px;">Show app menubar on top of the app window</p>
</label>
</div>
</div>
</div>
@ -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');

7
src/UI/UIDesktop.js
View File

@ -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');

4
src/UI/UIWindow.js
View File

@ -276,10 +276,8 @@ async function UIWindow(options) {
// Menubar
if(window.menubar_style === 'window'){
h += `<div class="window-menubar">`;
h += `</div>`;
h += `<div class="window-menubar" data-window-id="${win_id}"></div>`;
}else if(window.menubar_style === 'desktop'){
console.log('global menubar');
$('.toolbar-puter-logo').after(`<div class="window-menubar window-menubar-global" data-window-id="${win_id}"></div>`);
}

3
src/css/style.css
View File

@ -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;

18
src/helpers.js
View File

@ -2396,4 +2396,20 @@ window.countSubstr = (str, substring)=>{
}
return count;
}
}
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';
}
}

3
src/i18n/translations/en.js
View File

@ -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",