lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-05-04 08:30:39 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

add dividers in the taskbar

Browse Source
This commit is contained in:
Nariman Jelveh
2025-07-28 16:17:23 -07:00
parent 0257c1475e
commit 75fc436b54
4 changed files with 125 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/UITaskbar.js
+39 -2
View File
@@ -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,
src/gui/src/UI/UITaskbarItem.js
+19 -3
View File
@@ -51,7 +51,10 @@ function UITaskbarItem(options){
// taskbar icon
h += `<div class="taskbar-icon">`;
h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
// Don't add img tag for separator
if(options.app !== 'separator') {
h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
}
h += `</div>`;
// 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;
}
src/gui/src/css/style.css
+65
View File
@@ -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
*****************************************************/
src/gui/src/index.js
+2 -2
View File
@@ -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;