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

adding ability to customise desktop by arranging items

Browse Source
This commit is contained in:
vineethvk11 2024-03-15 20:32:47 +05:30
parent e1c44d91c5
commit fddda77523
5 changed files with 96 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/UI/UIDesktop.js
View File

@ -623,8 +623,28 @@ async function UIDesktop(options){
{ {
html: "Sort by", html: "Sort by",
items: [ items: [
{
html: `Auto Arrange`,
icon: is_auto_arrange_enabled ? '✓' : '',
onClick: async function(){
is_auto_arrange_enabled = !is_auto_arrange_enabled;
store_auto_arrange_preference(is_auto_arrange_enabled);
if(is_auto_arrange_enabled){
sort_items(el_desktop, $(el_desktop).attr('data-sort_by'), $(el_desktop).attr('data-sort_order'));
set_sort_by(options.desktop_fsentry.uid, $(el_desktop).attr('data-sort_by'), $(el_desktop).attr('data-sort_order'))
clear_desktop_item_positions(el_desktop);
}else{
set_desktop_item_positions(el_desktop)
}
}
},
// -------------------------------------------
// -
// -------------------------------------------
'-',
{ {
html: `Name`, html: `Name`,
disabled: !is_auto_arrange_enabled,
icon: $(el_desktop).attr('data-sort_by') === 'name' ? '✓' : '', icon: $(el_desktop).attr('data-sort_by') === 'name' ? '✓' : '',
onClick: async function(){ onClick: async function(){
sort_items(el_desktop, 'name', $(el_desktop).attr('data-sort_order')); sort_items(el_desktop, 'name', $(el_desktop).attr('data-sort_order'));
@ -633,6 +653,7 @@ async function UIDesktop(options){
}, },
{ {
html: `Date modified`, html: `Date modified`,
disabled: !is_auto_arrange_enabled,
icon: $(el_desktop).attr('data-sort_by') === 'modified' ? '✓' : '', icon: $(el_desktop).attr('data-sort_by') === 'modified' ? '✓' : '',
onClick: async function(){ onClick: async function(){
sort_items(el_desktop, 'modified', $(el_desktop).attr('data-sort_order')); sort_items(el_desktop, 'modified', $(el_desktop).attr('data-sort_order'));
@ -641,6 +662,7 @@ async function UIDesktop(options){
}, },
{ {
html: `Type`, html: `Type`,
disabled: !is_auto_arrange_enabled,
icon: $(el_desktop).attr('data-sort_by') === 'type' ? '✓' : '', icon: $(el_desktop).attr('data-sort_by') === 'type' ? '✓' : '',
onClick: async function(){ onClick: async function(){
sort_items(el_desktop, 'type', $(el_desktop).attr('data-sort_order')); sort_items(el_desktop, 'type', $(el_desktop).attr('data-sort_order'));
@ -649,6 +671,7 @@ async function UIDesktop(options){
}, },
{ {
html: `Size`, html: `Size`,
disabled: !is_auto_arrange_enabled,
icon: $(el_desktop).attr('data-sort_by') === 'size' ? '✓' : '', icon: $(el_desktop).attr('data-sort_by') === 'size' ? '✓' : '',
onClick: async function(){ onClick: async function(){
sort_items(el_desktop, 'size', $(el_desktop).attr('data-sort_order')); sort_items(el_desktop, 'size', $(el_desktop).attr('data-sort_order'));
@ -661,6 +684,7 @@ async function UIDesktop(options){
'-', '-',
{ {
html: `Ascending`, html: `Ascending`,
disabled: !is_auto_arrange_enabled,
icon: $(el_desktop).attr('data-sort_order') === 'asc' ? '✓' : '', icon: $(el_desktop).attr('data-sort_order') === 'asc' ? '✓' : '',
onClick: async function(){ onClick: async function(){
const sort_by = $(el_desktop).attr('data-sort_by') const sort_by = $(el_desktop).attr('data-sort_by')
@ -670,6 +694,7 @@ async function UIDesktop(options){
}, },
{ {
html: `Descending`, html: `Descending`,
disabled: !is_auto_arrange_enabled,
icon: $(el_desktop).attr('data-sort_order') === 'desc' ? '✓' : '', icon: $(el_desktop).attr('data-sort_order') === 'desc' ? '✓' : '',
onClick: async function(){ onClick: async function(){
const sort_by = $(el_desktop).attr('data-sort_by') const sort_by = $(el_desktop).attr('data-sort_by')

14
src/UI/UIItem.js
View File

@ -187,6 +187,13 @@ function UIItem(options){
update_explorer_footer_item_count(el_window); update_explorer_footer_item_count(el_window);
} }
// position
if(!is_auto_arrange_enabled && options.position && $(el_item).attr('data-path') !== trash_path){
el_item.style.position = 'absolute';
el_item.style.left = options.position.left + 'px';
el_item.style.top = options.position.top + 'px';
}
// -------------------------------------------------------- // --------------------------------------------------------
// Dragster // Dragster
// allow dragging of local files on this window, if it's is_dir // allow dragging of local files on this window, if it's is_dir
@ -335,6 +342,13 @@ function UIItem(options){
} }
}, },
stop: function(event, ui){ stop: function(event, ui){
if(!is_auto_arrange_enabled && $(el_item).attr('data-path') !== trash_path){
el_item.style.position = 'absolute';
el_item.style.left = ui.position.left + 'px';
el_item.style.top = ui.position.top + 'px';
$('.ui-draggable-dragging').remove();
save_item_position($(el_item).attr('data-uid'), ui.position)
}
$('.item-selected-clone').remove(); $('.item-selected-clone').remove();
$('.draggable-count-badge').remove(); $('.draggable-count-badge').remove();
// re-enable all droppable UIItems that are not a dir // re-enable all droppable UIItems that are not a dir

2
src/globals.js
View File

@ -174,3 +174,5 @@ window.feature_flags = {
// if true, the user will be able to zip and download directories // if true, the user will be able to zip and download directories
download_directory: true, download_directory: true,
} }
window.is_auto_arrange_enabled = true;

52
src/helpers.js
View File

@ -1295,6 +1295,9 @@ window.refresh_item_container = function(el_item_container, options){
if(item_path !== trash_path && item_path !== appdata_path){ if(item_path !== trash_path && item_path !== appdata_path){
// if this is trash, get original name from item metadata // if this is trash, get original name from item metadata
fsentry.name = (metadata && metadata.original_name !== undefined) ? metadata.original_name : fsentry.name; fsentry.name = (metadata && metadata.original_name !== undefined) ? metadata.original_name : fsentry.name;
let position;
if($(el_item_container).hasClass('desktop') && !is_auto_arrange_enabled)
position = await get_item_position(fsentry.uid);
UIItem({ UIItem({
appendTo: el_item_container, appendTo: el_item_container,
uid: fsentry.uid, uid: fsentry.uid,
@ -1317,6 +1320,7 @@ window.refresh_item_container = function(el_item_container, options){
suggested_apps: fsentry.suggested_apps, suggested_apps: fsentry.suggested_apps,
disabled: is_disabled, disabled: is_disabled,
visible: visible, visible: visible,
position: position,
}); });
} }
} }
@ -3696,3 +3700,51 @@ window.get_html_element_from_options = async function(options){
return h; return h;
} }
window.store_auto_arrange_preference = (preference)=>{
puter.kv.set(`user_preferences.auto_arrange_desktop`, preference);
localStorage.setItem('auto_arrange', preference);
}
window.get_auto_arrange_preference = async()=>{
const preferenceValue = await puter.kv.get(`user_preferences.auto_arrange_desktop`);
if (preferenceValue === null) {
console.log("E")
return true;
} else {
return preferenceValue;
}
}
window.clear_desktop_item_positions = async(el_desktop)=>{
$(el_desktop).find('.item').each(function(){
const el_item = $(this)[0];
$(el_item).css('position', '');
$(el_item).css('left', '');
$(el_item).css('top', '');
});
}
window.set_desktop_item_positions = async(el_desktop)=>{
$(el_desktop).find('.item').each(async function(){
const position = await get_item_position($(this).attr('data-uid'));
const el_item = $(this)[0];
if(position){
$(el_item).css('position', 'absolute');
$(el_item).css('left', position.left + 'px');
$(el_item).css('top', position.top + 'px');
}
});
}
window.save_item_position = (itemId, position)=>{
puter.kv.set(`desktop_item_position_${itemId}`, position);
}
window.get_item_position = (itemId)=>{
return puter.kv.get(`desktop_item_position_${itemId}`);
}
window.delete_item_position = (itemId)=>{
return puter.kv.del(`desktop_item_position_${itemId}`);
}

2
src/initgui.js
View File

@ -318,6 +318,7 @@ window.initgui = async function(){
// Load desktop, only if we're not embedded in a popup // Load desktop, only if we're not embedded in a popup
// ------------------------------------------------------------------------------------- // -------------------------------------------------------------------------------------
if(!window.embedded_in_popup){ if(!window.embedded_in_popup){
window.is_auto_arrange_enabled = await get_auto_arrange_preference();
puter.fs.stat(desktop_path, async function(desktop_fsentry){ puter.fs.stat(desktop_path, async function(desktop_fsentry){
UIDesktop({desktop_fsentry: desktop_fsentry}); UIDesktop({desktop_fsentry: desktop_fsentry});
}) })
@ -669,6 +670,7 @@ window.initgui = async function(){
// Load desktop, if not embedded in a popup // Load desktop, if not embedded in a popup
// ------------------------------------------------------------------------------------- // -------------------------------------------------------------------------------------
if(!window.embedded_in_popup){ if(!window.embedded_in_popup){
window.is_auto_arrange_enabled = await get_auto_arrange_preference();
puter.fs.stat(desktop_path, function (desktop_fsentry) { puter.fs.stat(desktop_path, function (desktop_fsentry) {
UIDesktop({ desktop_fsentry: desktop_fsentry }); UIDesktop({ desktop_fsentry: desktop_fsentry });
}) })