Skip to content

Customized and draggable favorites view(#626) #1262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Customized and draggable favorites view(#626) #1262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
44841be
Customized and draggable favorites view
kristavlastou May 7, 2025
9026fdc
Merge branch 'main' into main
kristavlastou May 14, 2025
3e7687b
Merge branch 'main' into main
kristavlastou May 16, 2025
4e9e436
Merge branch 'HeyPuter:main' into main
kristavlastou Jun 3, 2025
e9d0687
Fixed some file - errors
kristavlastou Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
260 changes: 260 additions & 0 deletions src/gui/src/UI/UIItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,6 +513,94 @@ function UIItem(options){
$('.item-container').droppable( 'enable' )
}
});
// --------------------------------------------------------
// Droppable/sidebar
// --------------------------------------------------------
function initializeSidebarDroppable() {
$('.window-sidebar').droppable({
accept: '.item',
tolerance: 'pointer',
hoverClass: 'window-sidebar-drop-hover',
drop: function(event, ui) {
const $draggedItem = $(ui.draggable);

if (!$draggedItem.attr('data-path')) {
return false;
}

let favorites = [];
try {

favorites = JSON.parse(window.sidebar_items || "[]");
} catch (e) {
console.error('Error parsing sidebar_items:', e);
favorites = [];
}

let path = $draggedItem.attr('data-path');
if (path) {
path = path.replace(/\\/g, '/');
if (path.charAt(0) !== '/') {
path = '/' + path;
}
}

// Create the favorite's object
let item = {
name: $draggedItem.attr('data-name'),
path: path,
label: $draggedItem.attr('data-name'),
type: $draggedItem.attr('data-is_dir') === 'true' || $draggedItem.attr('data-is_dir') === '1' ? 'folder' : 'file',
file_uid: $draggedItem.attr('data-uid')
};

// Check if already in favorites
let is_favorite = favorites.some(fav => fav.path === item.path);

if (!is_favorite) {

favorites.push(item);
window.sidebar_items = JSON.stringify(favorites);
localStorage.setItem("sidebar_items", window.sidebar_items);

if (typeof rebuild_all_sidebars === 'function') {
rebuild_all_sidebars();
} else {

setTimeout(() => {
if (typeof load_dir === 'function') {
load_dir(window.current_path);
}
}, 200);
}
}

$draggedItem.removeClass('item-selected');

return false;
}
});

// CSS for the hover effect
const style = document.createElement('style');
style.textContent = `
.window-sidebar-drop-hover {
border: 2px solid #2196F3;
border-radius: 4px;
}
`;
document.head.appendChild(style);
}

$(document).ready(function() {
setTimeout(initializeSidebarDroppable, 1000);
});

$(document).on('window-opened window-focused', function() {
setTimeout(initializeSidebarDroppable, 300);
});



// --------------------------------------------------------
// Double Click/Single Tap on Item
Expand Down Expand Up @@ -875,6 +963,60 @@ function UIItem(options){
}
});
}


// -------------------------------------------
// Add all to favorites
// -------------------------------------------
menu_items.push({
html: i18n('Add all to Favorites'),
onClick: function(){
// Get current favorites

let favorites = JSON.parse(window.sidebar_items || "[]");
let addedCount = 0;

//loop through selected items
$selected_items.each(function() {
// Skip trash items
if ($(this).attr('data-trashed') === '1' || $(this).attr('data-trash') === '1') {
return;
}

// Get path and ensure consistency
let path = $(this).attr('data-path');
if (path) {
path = path.replace(/\\/g, '/');
if (path.charAt(0) !== '/') {
path = '/' + path;
}
} else {
return; // Skip items without a path
}

let item = {
name: $(this).attr('data-name'),
path: path,
label: $(this).attr('data-name'),
type: $(this).attr('data-type') || ($(this).attr('data-is_dir') === '1' ? 'folder' : 'file'),
file_uid: $(this).attr('data-uid')
};

// Only add if it's not already in favorites
if (!favorites.some(fav => fav.path === item.path)) {
favorites.push(item);
addedCount++;
}
});

// Save back to window.sidebar_items
window.sidebar_items = JSON.stringify(favorites);
localStorage.setItem("sidebar_items", JSON.stringify(favorites));
rebuild_all_sidebars();

}
});

// -------------------------------------------
// -
// -------------------------------------------
Expand Down Expand Up @@ -924,15 +1066,19 @@ function UIItem(options){
if(!are_trashed && window.feature_flags.create_shortcut){
menu_items.push({
html: i18n('create_shortcut'),

html: is_shared_with_me ? i18n('create_desktop_shortcut_s') : i18n('create_shortcut_s'),

onClick: async function(){
$selected_items.each(function() {
let base_dir = path.dirname($(this).attr('data-path'));
// Trash on Desktop is a special case
if($(this).attr('data-path') && $(this).closest('.item-container').attr('data-path') === window.desktop_path){
base_dir = window.desktop_path;
}

if ( is_shared_with_me ) base_dir = window.desktop_path;

// create shortcut
window.create_shortcut(
path.basename($(this).attr('data-path')),
Expand Down Expand Up @@ -1385,6 +1531,54 @@ function UIItem(options){
);
}
});


// -------------------------------------------
// Add or Remove from Favorites
// -------------------------------------------

if ($(el_item).attr('data-immutable') === '0' && !is_trashed && !is_trash) {

let favorites = JSON.parse(window.sidebar_items || "[]");

let path = $(el_item).attr('data-path');
if (path) {
path = path.replace(/\\/g, '/');
if (path.charAt(0) !== '/') {
path = '/' + path;
}
}

let item = {
name: $(el_item).attr('data-name'),
path: path,
label: $(el_item).attr('data-name'),
type: $(el_item).attr('data-type'), // Add file type
file_uid: $(el_item).attr('data-uid')
};

let is_favorite = favorites.some(fav => fav.path === item.path);

menu_items.push({
html: is_favorite ? i18n('Remove from favorites') : i18n('Add to favorites'),
onClick: function() {
if (is_favorite) {

favorites = favorites.filter(fav => fav.path !== item.path);
// alert("Removed from favorites: " + item.path);
} else {

favorites.push(item);
// alert("Added to favorites: " + item.path);
}

window.sidebar_items = JSON.stringify(favorites);
localStorage.setItem("sidebar_items", JSON.stringify(favorites));
rebuild_all_sidebars();
}
});
}

}

// Create ContextMenu
Expand Down Expand Up @@ -1418,6 +1612,72 @@ function UIItem(options){
}
}

//Rebuilds all sidebar favorites lists in all windows
function rebuild_all_sidebars() {
$('.window-sidebar').each(function() {

// Generate new sidebar HTML
let h = '';
h += `<h2 class="window-sidebar-title disable-user-select">${i18n('favorites')}</h2>`;

// Parse all items
let items = JSON.parse(window.sidebar_items);
for(let item of items) {
let icon;
var filename = item.name;

if(!window.sidebar_items){
h += `<div draggable="false" title="${i18n('home')}" class="window-sidebar-item disable-user-select ${options.path === window.home_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.home_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-home.svg'])}">${i18n('home')}</div>`;
h += `<div draggable="false" title="${i18n('documents')}" class="window-sidebar-item disable-user-select ${options.path === window.docs_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.docs_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-documents.svg'])}">${i18n('documents')}</div>`;
h += `<div draggable="false" title="${i18n('public')}" class="window-sidebar-item disable-user-select ${options.path === window.public_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.public_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-public.svg'])}">${i18n('public')}</div>`;
h += `<div draggable="false" title="${i18n('pictures')}" class="window-sidebar-item disable-user-select ${options.path === window.pictures_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.pictures_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-pictures.svg'])}">${i18n('pictures')}</div>`;
h += `<div draggable="false" title="${i18n('desktop')}" class="window-sidebar-item disable-user-select ${options.path === window.desktop_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.desktop_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-desktop.svg'])}">${i18n('desktop')}</div>`;
h += `<div draggable="false" title="${i18n('videos')}" class="window-sidebar-item disable-user-select ${options.path === window.videos_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.videos_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['sidebar-folder-videos.svg'])}">${i18n('videos')}</div>`;
}else{
if(item.path === window.home_path)
icon = window.icons['sidebar-folder-home.svg'];
else if(item.path === window.docs_path)
icon = window.icons['sidebar-folder-documents.svg'];
else if(item.path === window.public_path)
icon = window.icons['sidebar-folder-public.svg'];
else if(item.path === window.pictures_path)
icon = window.icons['sidebar-folder-pictures.svg'];
else if(item.path === window.desktop_path)
icon = window.icons['sidebar-folder-desktop.svg'];
else if(item.path === window.videos_path)
icon = window.icons['sidebar-folder-videos.svg'];
else if (item.type === 'folder') {
icon = window.icons['sidebar-folder.svg'];
} else if(filename && filename.includes('.')) {
// Get the extension type
var extension = filename.split('.').pop().toLowerCase();
if(extension == 'txt') {
iconName = 'file.svg';
} else {
// Create the SVG icon name string
var iconName = `file-${extension}.svg`;
}
icon = window.icons[iconName];
} else {
//default folder icon
icon = window.icons['sidebar-folder.svg'];
}

// Get the current window's path
const current_window = $(this).closest('.ui-window');
const current_path = current_window.data('path') || '';

h += `<div title="${html_encode(item.label)}" class="window-sidebar-item disable-user-select ${current_path === item.path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(item.path)}" data-is_dir="${item.type === 'folder' ? 'true' : 'false'}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(icon)}">${html_encode(item.name)}</div>`;
}

// Replace the sidebar content
$(this).html(h);
}

});
}


// Create item-name-shadow
// This element has the exact styling as item name editor and allows us
// to measure the width and height of the item name editor and automatically
Expand Down
Loading