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

Merge pull request #105 from vineeth-vk11/#10

Browse Source 
adding ability to customise desktop by arranging items
This commit is contained in:
Nariman Jelveh 2024-03-18 18:34:16 -07:00 committed by GitHub
commit 6011257c4b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 106 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

@ -625,8 +625,28 @@ async function UIDesktop(options){
{ {
html: i18n('sort_by'), html: i18n('sort_by'),
items: [ items: [
{
html: i18n('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: i18n('name'), html: i18n('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'));
@ -635,6 +655,7 @@ async function UIDesktop(options){
}, },
{ {
html: i18n('date_modified'), html: i18n('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'));
@ -643,6 +664,7 @@ async function UIDesktop(options){
}, },
{ {
html: i18n('type'), html: i18n('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'));
@ -651,6 +673,7 @@ async function UIDesktop(options){
}, },
{ {
html: i18n('size'), html: i18n('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'));
@ -663,6 +686,7 @@ async function UIDesktop(options){
'-', '-',
{ {
html: i18n('ascending'), html: i18n('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')
@ -672,6 +696,7 @@ async function UIDesktop(options){
}, },
{ {
html: i18n('descending'), html: i18n('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')

27
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).closest('.item-container').attr('data-path') === window.desktop_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,19 @@ function UIItem(options){
} }
}, },
stop: function(event, ui){ stop: function(event, ui){
// Allow rearranging only if item is on desktop, not trash container, auto arrange is disabled and item is not dropped into another item
if($(el_item).closest('.item-container').attr('data-path') === window.desktop_path &&
!is_auto_arrange_enabled && $(el_item).attr('data-path') !== trash_path && !ui.helper.data('dropped') &&
// Item must be dropped on the Desktop
mouseover_window === undefined){
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();
desktop_item_positions[$(el_item).attr('data-uid')] = ui.position;
save_desktop_item_positions()
}
$('.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
@ -363,6 +383,9 @@ function UIItem(options){
if(event.ctrlKey && path.dirname($(ui.draggable).attr('data-path')) === window.trash_path) if(event.ctrlKey && path.dirname($(ui.draggable).attr('data-path')) === window.trash_path)
return; return;
// Adding a flag to know whether item is rearraged or dropped
ui.helper.data('dropped', true);
const items_to_move = [] const items_to_move = []
// First item // First item
@ -437,6 +460,10 @@ function UIItem(options){
} }
// Otherwise, move items // Otherwise, move items
else if(options.is_dir){ else if(options.is_dir){
if($(el_item).closest('.item-container').attr('data-path') === window.desktop_path){
delete desktop_item_positions[$(el_item).attr('data-uid')];
save_desktop_item_positions()
}
move_items(items_to_move, $(el_item).attr('data-shortcut_to_path') !== '' ? $(el_item).attr('data-shortcut_to_path') : $(el_item).attr('data-path')); move_items(items_to_move, $(el_item).attr('data-shortcut_to_path') !== '' ? $(el_item).attr('data-shortcut_to_path') : $(el_item).attr('data-path'));
} }
} }

4
src/globals.js
View File

@ -169,3 +169,7 @@ 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;
window.desktop_item_positions = {};
window.reset_item_positions = true; // The variable decides if the item positions should be reset when the user enabled auto arrange

47
src/helpers.js
View File

@ -1295,6 +1295,7 @@ 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;
const position = desktop_item_positions[fsentry.uid] ?? undefined;
UIItem({ UIItem({
appendTo: el_item_container, appendTo: el_item_container,
uid: fsentry.uid, uid: fsentry.uid,
@ -1317,6 +1318,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,
}); });
} }
} }
@ -3610,4 +3612,49 @@ window.get_html_element_from_options = async function(options){
h += `</div>`; h += `</div>`;
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_data = async()=>{
const preferenceValue = await puter.kv.get('user_preferences.auto_arrange_desktop');
is_auto_arrange_enabled = preferenceValue === null ? true : preferenceValue;
const positions = await puter.kv.get('desktop_item_positions')
desktop_item_positions = (!positions || typeof positions !== 'object' || Array.isArray(positions)) ? {} : positions;
}
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', '');
});
if(reset_item_positions){
delete_desktop_item_positions()
}
}
window.set_desktop_item_positions = async(el_desktop)=>{
$(el_desktop).find('.item').each(async function(){
const position = desktop_item_positions[$(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_desktop_item_positions = ()=>{
puter.kv.set('desktop_item_positions', desktop_item_positions);
}
window.delete_desktop_item_positions = ()=>{
desktop_item_positions = {}
puter.kv.del('desktop_item_positions');
} }

2
src/i18n/i18n.js
View File

@ -49,4 +49,4 @@ window.i18n = function (key, replacements = [], encode_html = true) {
return str; return str;
} }
export default {}; export default {};

2
src/initgui.js
View File

@ -329,6 +329,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){
await get_auto_arrange_data()
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});
}) })
@ -680,6 +681,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){
await get_auto_arrange_data();
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 });
}) })