diff --git a/src/gui/src/UI/UITaskbar.js b/src/gui/src/UI/UITaskbar.js index 082b77762..a2bdea65a 100644 --- a/src/gui/src/UI/UITaskbar.js +++ b/src/gui/src/UI/UITaskbar.js @@ -212,6 +212,25 @@ async function UITaskbar(options){ } }) + //--------------------------------------------- + // add separator before trash + //--------------------------------------------- + UITaskbarItem({ + icon: '', // No icon for separator + name: 'separator', + app: 'separator', + sortable: false, + keep_in_taskbar: true, + lock_keep_in_taskbar: true, + disable_context_menu: true, + style: 'pointer-events: none;', // Make it non-interactive + onClick: function(){ + // Separator is non-interactive + return false; + } + }); + + //--------------------------------------------- // Add other useful apps to the taskbar //--------------------------------------------- @@ -266,6 +285,24 @@ async function UITaskbar(options){ } }) + //--------------------------------------------- + // add separator before trash + //--------------------------------------------- + UITaskbarItem({ + icon: '', // No icon for separator + name: 'separator', + app: 'separator', + sortable: false, + keep_in_taskbar: true, + lock_keep_in_taskbar: true, + disable_context_menu: true, + style: 'pointer-events: none;', // Make it non-interactive + onClick: function(){ + // Separator is non-interactive + return false; + } + }); + window.make_taskbar_sortable(); } @@ -278,7 +315,7 @@ window.make_taskbar_sortable = function(){ $('.taskbar-sortable').sortable({ axis: axis, - items: '.taskbar-item-sortable:not(.has-open-contextmenu)', + items: '.taskbar-item-sortable:not(.has-open-contextmenu):not([data-app="separator"])', cancel: '.has-open-contextmenu', placeholder: "taskbar-item-sortable-placeholder", helper : 'clone', @@ -422,7 +459,7 @@ window.update_taskbar_position = async function(new_position) { // Reinitialize tooltip with new position $item.tooltip({ - items: ".taskbar:not(.children-have-open-contextmenu) .taskbar-item", + items: ".taskbar:not(.children-have-open-contextmenu) .taskbar-item:not([data-app='separator'])", position: { my: tooltipPosition.my, at: tooltipPosition.at, diff --git a/src/gui/src/UI/UITaskbarItem.js b/src/gui/src/UI/UITaskbarItem.js index 32fe30449..ccb3978aa 100644 --- a/src/gui/src/UI/UITaskbarItem.js +++ b/src/gui/src/UI/UITaskbarItem.js @@ -51,7 +51,10 @@ function UITaskbarItem(options){ // taskbar icon h += `
`; // active indicator @@ -93,6 +96,11 @@ function UITaskbarItem(options){ e.preventDefault(); e.stopPropagation(); + // Don't handle clicks for separators + if(options.app === 'separator') { + return; + } + // if this is for the launcher popover, and it's mobile, and has-open-popover, close the popover if( $(el_taskbar_item).attr('data-name') === 'Start' && (isMobile.phone || isMobile.tablet) && $(el_taskbar_item).hasClass('has-open-popover')){ @@ -131,6 +139,11 @@ function UITaskbarItem(options){ e.preventDefault(); e.stopPropagation(); + // Don't show context menu for separators + if(options.app === 'separator') { + return; + } + // If context menu is disabled on this item, return if(options.disable_context_menu) return; @@ -348,7 +361,7 @@ function UITaskbarItem(options){ $( el_taskbar_item ).tooltip({ // only show tooltip if desktop is not selectable active - items: ".desktop:not(.desktop-selectable-active) .taskbar:not(.children-have-open-contextmenu) .taskbar-item", + items: ".desktop:not(.desktop-selectable-active) .taskbar:not(.children-have-open-contextmenu) .taskbar-item:not([data-app='separator'])", position: { my: tooltipPosition.my, at: tooltipPosition.at, @@ -366,7 +379,9 @@ function UITaskbarItem(options){ // -------------------------------------------------------- // Droppable // -------------------------------------------------------- - $(el_taskbar_item).droppable({ + // Don't make separators droppable + if(options.app !== 'separator') { + $(el_taskbar_item).droppable({ accept: '.item', // 'pointer' is very important because of active window tracking is based on the position of cursor. tolerance: 'pointer', @@ -483,6 +498,7 @@ function UITaskbarItem(options){ $('.item-container').droppable( 'enable' ) } }); + } return el_taskbar_item; } diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 8c0dc502e..f1aa234a2 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -2536,6 +2536,71 @@ label { height: 40px; } +/* Taskbar separator styling */ +.taskbar-item[data-app="separator"] { + pointer-events: none !important; + background: none !important; + border: none !important; + box-shadow: none !important; +} + +.taskbar-item[data-app="separator"] .taskbar-icon { + background: none !important; + border: none !important; + box-shadow: none !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; +} + +/* Vertical separator for bottom taskbar */ +.taskbar.taskbar-position-bottom .taskbar-item[data-app="separator"] .taskbar-icon::after { + content: ''; + width: 1px; + height: 35px; + max-height: 35px; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 0.5px; +} + +/* Horizontal separator for left/right taskbar */ +.taskbar.taskbar-position-left .taskbar-item[data-app="separator"] .taskbar-icon::after, +.taskbar.taskbar-position-right .taskbar-item[data-app="separator"] .taskbar-icon::after { + content: ''; + width: 35px; + height: 1px; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 0.5px; +} + +/* Hide separator on mobile devices */ +.device-phone .taskbar-item[data-app="separator"], +.device-tablet .taskbar-item[data-app="separator"] { + display: none !important; +} + +.taskbar.taskbar-position-bottom .taskbar-item[data-app="separator"]{ + max-width: 10px; + min-width: 10px !important; +} + +.taskbar.taskbar-position-bottom .taskbar-item[data-app="separator"] .taskbar-icon{ + width: 100% !important; +} + +.taskbar.taskbar-position-left .taskbar-item[data-app="separator"], +.taskbar.taskbar-position-right .taskbar-item[data-app="separator"]{ + max-height: 10px; + min-height: 10px !important; + padding: 5px !important; +} +.taskbar.taskbar-position-left .taskbar-item[data-app="separator"] .taskbar-icon, +.taskbar.taskbar-position-right .taskbar-item[data-app="separator"] .taskbar-icon{ + max-height: 10px; + min-height: 10px !important; + padding-bottom: 5px !important; +} + /***************************************************** * Task Manager *****************************************************/ diff --git a/src/gui/src/index.js b/src/gui/src/index.js index c08cb4bd7..6b9f59ae5 100644 --- a/src/gui/src/index.js +++ b/src/gui/src/index.js @@ -50,10 +50,10 @@ window.gui = async (options) => { options = options ?? {}; // app_origin is deprecated, use gui_origin instead window.gui_params = options; - window.gui_origin = options.gui_origin ?? options.app_origin ?? `https://puter.com`; + window.gui_origin = `https://puter.com`; window.app_domain = options.app_domain ?? new URL(window.gui_origin).hostname; window.hosting_domain = options.hosting_domain ?? 'puter.site'; - window.api_origin = options.api_origin ?? "https://api.puter.com"; + window.api_origin = "https://api.puter.com"; window.max_item_name_length = options.max_item_name_length ?? 500; window.require_email_verification_to_publish_website = options.require_email_verification_to_publish_website ?? true; window.disable_temp_users = options.disable_temp_users ?? false;