feat: improve move dialog with folder navigation
- Remove 'Root' option from move dialog (users move within their home folder) - Show children of current folder instead of flat folder list - Add breadcrumb navigation for folder browsing - Add 'go to parent' navigation option - Add 'select this folder' option to choose current location - Add CSS styles for new navigation elements - Add dark mode support for move dialog - Add i18n translations for new strings (en, es)
This commit is contained in:
George Wu
@@ -341,6 +341,45 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Move dialog breadcrumb navigation */
|
||||
.move-dialog-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.move-breadcrumb-item {
|
||||
color: #4a5568;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.move-breadcrumb-item:hover {
|
||||
background: #e2e8f0;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.move-breadcrumb-item.current {
|
||||
color: #ff5e3a;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.move-breadcrumb-separator {
|
||||
color: #a0aec0;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* Folder select items in move dialog */
|
||||
.folder-select-item {
|
||||
display: flex;
|
||||
@@ -373,6 +412,70 @@
|
||||
color: #ff5e3a;
|
||||
}
|
||||
|
||||
/* "Select this folder" option */
|
||||
.folder-select-item.folder-select-current {
|
||||
background-color: rgba(72, 187, 120, 0.1);
|
||||
color: #2f855a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.folder-select-item.folder-select-current:hover {
|
||||
background-color: rgba(72, 187, 120, 0.15);
|
||||
}
|
||||
|
||||
.folder-select-item.folder-select-current i {
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
/* Navigate up option */
|
||||
.folder-select-item.folder-navigate-up {
|
||||
color: #718096;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.folder-select-item.folder-navigate-up:hover {
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.folder-select-item.folder-navigate-up i {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
/* Folder navigation item (click to enter) */
|
||||
.folder-select-item.folder-navigate {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.folder-select-item.folder-navigate .folder-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.folder-select-item.folder-navigate .folder-navigate-icon {
|
||||
color: #a0aec0;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.folder-select-item.folder-navigate:hover .folder-navigate-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Empty folder message */
|
||||
.folder-select-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 24px;
|
||||
color: #a0aec0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.folder-select-empty i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Custom confirm dialog */
|
||||
.confirm-dialog {
|
||||
position: fixed;
|
||||
@@ -747,3 +850,80 @@
|
||||
[data-theme="dark"] .share-item-info {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Dark mode for move dialog breadcrumb */
|
||||
[data-theme="dark"] .move-dialog-breadcrumb {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .move-breadcrumb-item {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .move-breadcrumb-item:hover {
|
||||
background: #334155;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .move-breadcrumb-item.current {
|
||||
color: #ff5e3a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .move-breadcrumb-separator {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* Dark mode for folder select items */
|
||||
[data-theme="dark"] .folder-select-item {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item:hover {
|
||||
background-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.selected {
|
||||
background-color: rgba(255,94,58,0.15);
|
||||
color: #ff5e3a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item i {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.selected i {
|
||||
color: #ff5e3a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.folder-select-current {
|
||||
background-color: rgba(74, 222, 128, 0.1);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.folder-select-current:hover {
|
||||
background-color: rgba(74, 222, 128, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.folder-select-current i {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.folder-navigate-up {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.folder-navigate-up:hover {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.folder-navigate-up i {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-item.folder-navigate .folder-navigate-icon {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .folder-select-empty {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
+2
-4
@@ -102,7 +102,7 @@ const ui = {
|
||||
document.body.appendChild(renameDialog);
|
||||
}
|
||||
|
||||
// Move dialog — modern
|
||||
// Move dialog — modern with navigation
|
||||
if (!document.getElementById('move-file-dialog')) {
|
||||
const moveDialog = document.createElement('div');
|
||||
moveDialog.className = 'rename-dialog';
|
||||
@@ -115,10 +115,8 @@ const ui = {
|
||||
</div>
|
||||
<div class="rename-dialog-body">
|
||||
<p style="margin:0 0 12px;color:#718096;font-size:14px" data-i18n="dialogs.select_destination">Select destination folder:</p>
|
||||
<div id="move-dialog-breadcrumb" class="move-dialog-breadcrumb"></div>
|
||||
<div id="folder-select-container" style="max-height:220px;overflow-y:auto;">
|
||||
<div class="folder-select-item selected" data-folder-id="">
|
||||
<i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Root</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rename-dialog-buttons">
|
||||
|
||||
@@ -395,6 +395,24 @@ const contextMenus = {
|
||||
// Reset selection
|
||||
window.app.selectedTargetFolderId = "";
|
||||
|
||||
// Initialize dialog navigation state
|
||||
// Start at the parent of the item being moved (so user sees siblings and can navigate)
|
||||
let startFolderId = null;
|
||||
if (mode === 'file' && item.folder_id) {
|
||||
startFolderId = item.folder_id;
|
||||
} else if (mode === 'folder' && item.parent_id) {
|
||||
startFolderId = item.parent_id;
|
||||
} else {
|
||||
// If item is at root level, start at user's home folder
|
||||
startFolderId = window.app.userHomeFolderId || null;
|
||||
}
|
||||
|
||||
// Store the item being moved and navigation state
|
||||
window.app.moveDialogItemId = item.id;
|
||||
window.app.moveDialogItemMode = mode;
|
||||
window.app.moveDialogCurrentFolderId = startFolderId;
|
||||
window.app.moveDialogBreadcrumb = [];
|
||||
|
||||
// Update dialog title (preserve icon)
|
||||
const dialogHeader = document.getElementById('move-file-dialog').querySelector('.rename-dialog-header');
|
||||
const titleText = mode === 'file' ?
|
||||
@@ -402,8 +420,8 @@ const contextMenus = {
|
||||
(window.i18n ? window.i18n.t('dialogs.move_folder') : 'Move folder');
|
||||
dialogHeader.innerHTML = `<i class="fas fa-arrows-alt" style="color:#ff5e3a"></i> <span>${titleText}</span>`;
|
||||
|
||||
// Load all available folders
|
||||
await this.loadAllFolders(item.id, mode);
|
||||
// Load folders for the starting location
|
||||
await this.loadMoveDialogFolders(startFolderId);
|
||||
|
||||
// Show dialog
|
||||
document.getElementById('move-file-dialog').style.display = 'flex';
|
||||
@@ -456,11 +474,220 @@ const contextMenus = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all folders for the move dialog
|
||||
* Load folders for the move dialog with navigation support
|
||||
* Shows subfolders of the specified parent folder and allows navigation
|
||||
* @param {string} parentFolderId - Parent folder ID to load children from (null for root)
|
||||
*/
|
||||
async loadMoveDialogFolders(parentFolderId) {
|
||||
try {
|
||||
const token = localStorage.getItem('oxicloud_token');
|
||||
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
|
||||
|
||||
// Build URL - use /api/folders/{id}/contents for subfolders, or /api/folders for root
|
||||
let url;
|
||||
if (parentFolderId) {
|
||||
url = `/api/folders/${parentFolderId}/contents`;
|
||||
} else {
|
||||
url = '/api/folders';
|
||||
}
|
||||
|
||||
const response = await fetch(url, { headers });
|
||||
if (!response.ok) {
|
||||
console.error('Failed to load folders:', response.status);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
// The contents endpoint returns { folders: [...], files: [...] }, but we only need folders
|
||||
const folders = Array.isArray(data) ? data : (data.folders || []);
|
||||
|
||||
const folderSelectContainer = document.getElementById('folder-select-container');
|
||||
const breadcrumbContainer = document.getElementById('move-dialog-breadcrumb');
|
||||
|
||||
// Clear container
|
||||
folderSelectContainer.innerHTML = '';
|
||||
|
||||
// Get current navigation state
|
||||
const itemId = window.app.moveDialogItemId;
|
||||
const mode = window.app.moveDialogItemMode;
|
||||
const breadcrumb = window.app.moveDialogBreadcrumb || [];
|
||||
|
||||
// Render breadcrumb navigation
|
||||
this._renderMoveDialogBreadcrumb(breadcrumbContainer, breadcrumb, parentFolderId);
|
||||
|
||||
// Option to select current folder as destination (if not at root and not the item being moved)
|
||||
if (parentFolderId && parentFolderId !== itemId) {
|
||||
const currentFolderOption = document.createElement('div');
|
||||
currentFolderOption.className = 'folder-select-item folder-select-current';
|
||||
currentFolderOption.innerHTML = `
|
||||
<i class="fas fa-check-circle" style="color: #48bb78;"></i>
|
||||
<span>${window.i18n ? window.i18n.t('dialogs.select_this_folder') : 'Select this folder'}</span>
|
||||
`;
|
||||
currentFolderOption.addEventListener('click', () => {
|
||||
document.querySelectorAll('.folder-select-item').forEach(item => {
|
||||
item.classList.remove('selected');
|
||||
});
|
||||
currentFolderOption.classList.add('selected');
|
||||
window.app.selectedTargetFolderId = parentFolderId;
|
||||
});
|
||||
folderSelectContainer.appendChild(currentFolderOption);
|
||||
}
|
||||
|
||||
// Add "Go to parent" option if not at root
|
||||
if (parentFolderId) {
|
||||
const parentOption = document.createElement('div');
|
||||
parentOption.className = 'folder-select-item folder-navigate-up';
|
||||
parentOption.innerHTML = `
|
||||
<i class="fas fa-level-up-alt"></i>
|
||||
<span>${window.i18n ? window.i18n.t('dialogs.go_to_parent') : '.. (parent folder)'}</span>
|
||||
`;
|
||||
parentOption.addEventListener('click', () => {
|
||||
// Navigate to parent folder
|
||||
const currentBreadcrumb = window.app.moveDialogBreadcrumb || [];
|
||||
if (currentBreadcrumb.length > 0) {
|
||||
// Remove current folder from breadcrumb
|
||||
currentBreadcrumb.pop();
|
||||
const parentFolder = currentBreadcrumb.length > 0
|
||||
? currentBreadcrumb[currentBreadcrumb.length - 1]
|
||||
: null;
|
||||
window.app.moveDialogBreadcrumb = currentBreadcrumb;
|
||||
window.app.moveDialogCurrentFolderId = parentFolder ? parentFolder.id : null;
|
||||
this.loadMoveDialogFolders(parentFolder ? parentFolder.id : null);
|
||||
} else {
|
||||
// Go to root (home folder)
|
||||
window.app.moveDialogCurrentFolderId = window.app.userHomeFolderId || null;
|
||||
this.loadMoveDialogFolders(window.app.userHomeFolderId || null);
|
||||
}
|
||||
});
|
||||
folderSelectContainer.appendChild(parentOption);
|
||||
}
|
||||
|
||||
// Add subfolders (clicking navigates INTO the folder)
|
||||
folders.forEach(folder => {
|
||||
// Skip the item being moved (to prevent moving a folder into itself)
|
||||
if (mode === 'folder' && folder.id === itemId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const folderItem = document.createElement('div');
|
||||
folderItem.className = 'folder-select-item folder-navigate';
|
||||
folderItem.dataset.folderId = folder.id;
|
||||
folderItem.innerHTML = `
|
||||
<i class="fas fa-folder"></i>
|
||||
<span class="folder-name">${escapeHtml(folder.name)}</span>
|
||||
<i class="fas fa-chevron-right folder-navigate-icon"></i>
|
||||
`;
|
||||
|
||||
// Click navigates INTO this folder
|
||||
folderItem.addEventListener('click', () => {
|
||||
// Add to breadcrumb
|
||||
const breadcrumb = window.app.moveDialogBreadcrumb || [];
|
||||
breadcrumb.push({ id: folder.id, name: folder.name });
|
||||
window.app.moveDialogBreadcrumb = breadcrumb;
|
||||
window.app.moveDialogCurrentFolderId = folder.id;
|
||||
this.loadMoveDialogFolders(folder.id);
|
||||
});
|
||||
|
||||
folderSelectContainer.appendChild(folderItem);
|
||||
});
|
||||
|
||||
// Show "no subfolders" message if empty
|
||||
if (folders.length === 0 && !parentFolderId) {
|
||||
const emptyMsg = document.createElement('div');
|
||||
emptyMsg.className = 'folder-select-empty';
|
||||
emptyMsg.innerHTML = `<i class="fas fa-folder-open"></i> <span>${window.i18n ? window.i18n.t('dialogs.no_subfolders') : 'No subfolders'}</span>`;
|
||||
folderSelectContainer.appendChild(emptyMsg);
|
||||
}
|
||||
|
||||
// Set default selection to current folder
|
||||
window.app.selectedTargetFolderId = parentFolderId || '';
|
||||
|
||||
// Translate new elements
|
||||
if (window.i18n && window.i18n.translateElement) {
|
||||
window.i18n.translateElement(folderSelectContainer);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading folders:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Render breadcrumb navigation for move dialog
|
||||
*/
|
||||
_renderMoveDialogBreadcrumb(container, breadcrumb, currentFolderId) {
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
const homeFolderId = window.app.userHomeFolderId;
|
||||
const homeFolderName = window.app.userHomeFolderName || 'Home';
|
||||
|
||||
// Home icon (click to go to home folder)
|
||||
const homeItem = document.createElement('span');
|
||||
homeItem.className = 'move-breadcrumb-item';
|
||||
homeItem.innerHTML = '<i class="fas fa-home"></i>';
|
||||
homeItem.addEventListener('click', () => {
|
||||
window.app.moveDialogBreadcrumb = [];
|
||||
window.app.moveDialogCurrentFolderId = homeFolderId || null;
|
||||
this.loadMoveDialogFolders(homeFolderId || null);
|
||||
});
|
||||
container.appendChild(homeItem);
|
||||
|
||||
// Home folder name
|
||||
if (homeFolderName) {
|
||||
const separator = document.createElement('span');
|
||||
separator.className = 'move-breadcrumb-separator';
|
||||
separator.textContent = '>';
|
||||
container.appendChild(separator);
|
||||
|
||||
const homeNameItem = document.createElement('span');
|
||||
homeNameItem.className = 'move-breadcrumb-item';
|
||||
if (breadcrumb.length === 0) {
|
||||
homeNameItem.classList.add('current');
|
||||
}
|
||||
homeNameItem.textContent = homeFolderName;
|
||||
if (breadcrumb.length > 0) {
|
||||
homeNameItem.addEventListener('click', () => {
|
||||
window.app.moveDialogBreadcrumb = [];
|
||||
window.app.moveDialogCurrentFolderId = homeFolderId || null;
|
||||
this.loadMoveDialogFolders(homeFolderId || null);
|
||||
});
|
||||
}
|
||||
container.appendChild(homeNameItem);
|
||||
}
|
||||
|
||||
// Breadcrumb path
|
||||
breadcrumb.forEach((segment, index) => {
|
||||
const separator = document.createElement('span');
|
||||
separator.className = 'move-breadcrumb-separator';
|
||||
separator.textContent = '>';
|
||||
container.appendChild(separator);
|
||||
|
||||
const item = document.createElement('span');
|
||||
item.className = 'move-breadcrumb-item';
|
||||
if (index === breadcrumb.length - 1) {
|
||||
item.classList.add('current');
|
||||
}
|
||||
item.textContent = segment.name;
|
||||
|
||||
// Click to navigate back to this level
|
||||
if (index < breadcrumb.length - 1) {
|
||||
item.addEventListener('click', () => {
|
||||
window.app.moveDialogBreadcrumb = breadcrumb.slice(0, index + 1);
|
||||
window.app.moveDialogCurrentFolderId = segment.id;
|
||||
this.loadMoveDialogFolders(segment.id);
|
||||
});
|
||||
}
|
||||
container.appendChild(item);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all folders for the move dialog (legacy - kept for batch operations)
|
||||
* @param {string} itemId - ID of the item being moved
|
||||
* @param {string} mode - 'file' or 'folder'
|
||||
*/
|
||||
async loadAllFolders(itemId, mode) {
|
||||
// For batch mode, use the old behavior but start from home folder
|
||||
try {
|
||||
const token = localStorage.getItem('oxicloud_token');
|
||||
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
|
||||
@@ -469,32 +696,15 @@ const contextMenus = {
|
||||
const folders = await response.json();
|
||||
const folderSelectContainer = document.getElementById('folder-select-container');
|
||||
|
||||
// Clear container except root option
|
||||
folderSelectContainer.innerHTML = `
|
||||
<div class="folder-select-item selected" data-folder-id="">
|
||||
<i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Root</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Select root by default
|
||||
window.app.selectedTargetFolderId = "";
|
||||
// Clear container
|
||||
folderSelectContainer.innerHTML = '';
|
||||
|
||||
// Add all available folders
|
||||
if (Array.isArray(folders)) {
|
||||
const excludeIds = itemId ? [itemId] : [];
|
||||
folders.forEach(folder => {
|
||||
// Skip folders that would create cycles
|
||||
if (mode === 'folder' && folder.id === itemId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip current folder of the item
|
||||
if (mode === 'file' && window.app.contextMenuTargetFile &&
|
||||
folder.id === window.app.contextMenuTargetFile.folder_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'folder' && window.app.contextMenuTargetFolder &&
|
||||
folder.id === window.app.contextMenuTargetFolder.parent_id) {
|
||||
if (excludeIds.includes(folder.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -518,15 +728,8 @@ const contextMenus = {
|
||||
});
|
||||
}
|
||||
|
||||
// Event for root option
|
||||
const rootOption = folderSelectContainer.querySelector('.folder-select-item');
|
||||
rootOption.addEventListener('click', () => {
|
||||
document.querySelectorAll('.folder-select-item').forEach(item => {
|
||||
item.classList.remove('selected');
|
||||
});
|
||||
rootOption.classList.add('selected');
|
||||
window.app.selectedTargetFolderId = "";
|
||||
});
|
||||
// Set default selection
|
||||
window.app.selectedTargetFolderId = "";
|
||||
|
||||
// Translate new elements (scoped to container)
|
||||
if (window.i18n && window.i18n.translateElement) {
|
||||
|
||||
@@ -202,6 +202,9 @@
|
||||
"move_file": "Move file",
|
||||
"move_folder": "Move folder",
|
||||
"select_destination": "Select destination folder:",
|
||||
"select_this_folder": "Select this folder",
|
||||
"go_to_parent": ".. (parent folder)",
|
||||
"no_subfolders": "No subfolders",
|
||||
"root": "Root",
|
||||
"delete_confirmation": "Are you sure you want to delete",
|
||||
"and_contents": "and all its contents",
|
||||
|
||||
@@ -202,6 +202,9 @@
|
||||
"move_file": "Mover archivo",
|
||||
"move_folder": "Mover carpeta",
|
||||
"select_destination": "Selecciona la carpeta destino:",
|
||||
"select_this_folder": "Seleccionar esta carpeta",
|
||||
"go_to_parent": ".. (carpeta superior)",
|
||||
"no_subfolders": "Sin subcarpetas",
|
||||
"root": "Raíz",
|
||||
"delete_confirmation": "¿Estás seguro de que quieres eliminar",
|
||||
"and_contents": "y todo su contenido",
|
||||
|
||||
Reference in New Issue
Block a user