Skip to content

Commit 75fc436

Browse files
jelvehjelveh
committed
add dividers in the taskbar
1 parent 0257c14 commit 75fc436

File tree

4 files changed

+125
-7
lines changed

4 files changed

+125
-7
lines changed

‎src/gui/src/UI/UITaskbar.js‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,25 @@ async function UITaskbar(options){
212212
}
213213
})
214214

215+
//---------------------------------------------
216+
// add separator before trash
217+
//---------------------------------------------
218+
UITaskbarItem({
219+
icon: '', // No icon for separator
220+
name: 'separator',
221+
app: 'separator',
222+
sortable: false,
223+
keep_in_taskbar: true,
224+
lock_keep_in_taskbar: true,
225+
disable_context_menu: true,
226+
style: 'pointer-events: none;', // Make it non-interactive
227+
onClick: function(){
228+
// Separator is non-interactive
229+
return false;
230+
}
231+
});
232+
233+
215234
//---------------------------------------------
216235
// Add other useful apps to the taskbar
217236
//---------------------------------------------
@@ -266,6 +285,24 @@ async function UITaskbar(options){
266285
}
267286
})
268287

288+
//---------------------------------------------
289+
// add separator before trash
290+
//---------------------------------------------
291+
UITaskbarItem({
292+
icon: '', // No icon for separator
293+
name: 'separator',
294+
app: 'separator',
295+
sortable: false,
296+
keep_in_taskbar: true,
297+
lock_keep_in_taskbar: true,
298+
disable_context_menu: true,
299+
style: 'pointer-events: none;', // Make it non-interactive
300+
onClick: function(){
301+
// Separator is non-interactive
302+
return false;
303+
}
304+
});
305+
269306
window.make_taskbar_sortable();
270307
}
271308

@@ -278,7 +315,7 @@ window.make_taskbar_sortable = function(){
278315

279316
$('.taskbar-sortable').sortable({
280317
axis: axis,
281-
items: '.taskbar-item-sortable:not(.has-open-contextmenu)',
318+
items: '.taskbar-item-sortable:not(.has-open-contextmenu):not([data-app="separator"])',
282319
cancel: '.has-open-contextmenu',
283320
placeholder: "taskbar-item-sortable-placeholder",
284321
helper : 'clone',
@@ -422,7 +459,7 @@ window.update_taskbar_position = async function(new_position) {
422459

423460
// Reinitialize tooltip with new position
424461
$item.tooltip({
425-
items: ".taskbar:not(.children-have-open-contextmenu) .taskbar-item",
462+
items: ".taskbar:not(.children-have-open-contextmenu) .taskbar-item:not([data-app='separator'])",
426463
position: {
427464
my: tooltipPosition.my,
428465
at: tooltipPosition.at,

‎src/gui/src/UI/UITaskbarItem.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,10 @@ function UITaskbarItem(options){
5151

5252
// taskbar icon
5353
h += `<div class="taskbar-icon">`;
54-
h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
54+
// Don't add img tag for separator
55+
if(options.app !== 'separator') {
56+
h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
57+
}
5558
h += `</div>`;
5659

5760
// active indicator
@@ -93,6 +96,11 @@ function UITaskbarItem(options){
9396
e.preventDefault();
9497
e.stopPropagation();
9598

99+
// Don't handle clicks for separators
100+
if(options.app === 'separator') {
101+
return;
102+
}
103+
96104
// if this is for the launcher popover, and it's mobile, and has-open-popover, close the popover
97105
if( $(el_taskbar_item).attr('data-name') === 'Start'
98106
&& (isMobile.phone || isMobile.tablet) && $(el_taskbar_item).hasClass('has-open-popover')){
@@ -131,6 +139,11 @@ function UITaskbarItem(options){
131139
e.preventDefault();
132140
e.stopPropagation();
133141

142+
// Don't show context menu for separators
143+
if(options.app === 'separator') {
144+
return;
145+
}
146+
134147
// If context menu is disabled on this item, return
135148
if(options.disable_context_menu)
136149
return;
@@ -348,7 +361,7 @@ function UITaskbarItem(options){
348361

349362
$( el_taskbar_item ).tooltip({
350363
// only show tooltip if desktop is not selectable active
351-
items: ".desktop:not(.desktop-selectable-active) .taskbar:not(.children-have-open-contextmenu) .taskbar-item",
364+
items: ".desktop:not(.desktop-selectable-active) .taskbar:not(.children-have-open-contextmenu) .taskbar-item:not([data-app='separator'])",
352365
position: {
353366
my: tooltipPosition.my,
354367
at: tooltipPosition.at,
@@ -366,7 +379,9 @@ function UITaskbarItem(options){
366379
// --------------------------------------------------------
367380
// Droppable
368381
// --------------------------------------------------------
369-
$(el_taskbar_item).droppable({
382+
// Don't make separators droppable
383+
if(options.app !== 'separator') {
384+
$(el_taskbar_item).droppable({
370385
accept: '.item',
371386
// 'pointer' is very important because of active window tracking is based on the position of cursor.
372387
tolerance: 'pointer',
@@ -483,6 +498,7 @@ function UITaskbarItem(options){
483498
$('.item-container').droppable( 'enable' )
484499
}
485500
});
501+
}
486502

487503
return el_taskbar_item;
488504
}

‎src/gui/src/css/style.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2536,6 +2536,71 @@ label {
25362536
height: 40px;
25372537
}
25382538

2539+
/* Taskbar separator styling */
2540+
.taskbar-item[data-app="separator"] {
2541+
pointer-events: none !important;
2542+
background: none !important;
2543+
border: none !important;
2544+
box-shadow: none !important;
2545+
}
2546+
2547+
.taskbar-item[data-app="separator"] .taskbar-icon {
2548+
background: none !important;
2549+
border: none !important;
2550+
box-shadow: none !important;
2551+
display: flex !important;
2552+
align-items: center !important;
2553+
justify-content: center !important;
2554+
}
2555+
2556+
/* Vertical separator for bottom taskbar */
2557+
.taskbar.taskbar-position-bottom .taskbar-item[data-app="separator"] .taskbar-icon::after {
2558+
content: '';
2559+
width: 1px;
2560+
height: 35px;
2561+
max-height: 35px;
2562+
background-color: rgba(0, 0, 0, 0.3);
2563+
border-radius: 0.5px;
2564+
}
2565+
2566+
/* Horizontal separator for left/right taskbar */
2567+
.taskbar.taskbar-position-left .taskbar-item[data-app="separator"] .taskbar-icon::after,
2568+
.taskbar.taskbar-position-right .taskbar-item[data-app="separator"] .taskbar-icon::after {
2569+
content: '';
2570+
width: 35px;
2571+
height: 1px;
2572+
background-color: rgba(0, 0, 0, 0.3);
2573+
border-radius: 0.5px;
2574+
}
2575+
2576+
/* Hide separator on mobile devices */
2577+
.device-phone .taskbar-item[data-app="separator"],
2578+
.device-tablet .taskbar-item[data-app="separator"] {
2579+
display: none !important;
2580+
}
2581+
2582+
.taskbar.taskbar-position-bottom .taskbar-item[data-app="separator"]{
2583+
max-width: 10px;
2584+
min-width: 10px !important;
2585+
}
2586+
2587+
.taskbar.taskbar-position-bottom .taskbar-item[data-app="separator"] .taskbar-icon{
2588+
width: 100% !important;
2589+
}
2590+
2591+
.taskbar.taskbar-position-left .taskbar-item[data-app="separator"],
2592+
.taskbar.taskbar-position-right .taskbar-item[data-app="separator"]{
2593+
max-height: 10px;
2594+
min-height: 10px !important;
2595+
padding: 5px !important;
2596+
}
2597+
.taskbar.taskbar-position-left .taskbar-item[data-app="separator"] .taskbar-icon,
2598+
.taskbar.taskbar-position-right .taskbar-item[data-app="separator"] .taskbar-icon{
2599+
max-height: 10px;
2600+
min-height: 10px !important;
2601+
padding-bottom: 5px !important;
2602+
}
2603+
25392604
/*****************************************************
25402605
* Task Manager
25412606
*****************************************************/

‎src/gui/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@ window.gui = async (options) => {
5050
options = options ?? {};
5151
// app_origin is deprecated, use gui_origin instead
5252
window.gui_params = options;
53-
window.gui_origin = options.gui_origin ?? options.app_origin ?? `https://puter.com`;
53+
window.gui_origin = `https://puter.com`;
5454
window.app_domain = options.app_domain ?? new URL(window.gui_origin).hostname;
5555
window.hosting_domain = options.hosting_domain ?? 'puter.site';
56-
window.api_origin = options.api_origin ?? "https://api.puter.com";
56+
window.api_origin = "https://api.puter.com";
5757
window.max_item_name_length = options.max_item_name_length ?? 500;
5858
window.require_email_verification_to_publish_website = options.require_email_verification_to_publish_website ?? true;
5959
window.disable_temp_users = options.disable_temp_users ?? false;

0 commit comments

Comments
 (0)