cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

show item path on Recent + Favorites, add go to parent folder, fix Folder browsing in Favorites

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-05-06 17:43:30 +02:00
parent 405721c679
commit 8e1e9fe201
28 changed files with 217 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app/ui.js
+20 -1
View File
@@ -20,7 +20,7 @@ import { thumbnail } from '../features/thumbnail.js';
import { sharedView } from '../views/shared/sharedView.js';
import { loadFiles } from './filesView.js';
import { updateHistory } from './main.js';
import { syncViewContainers } from './navigation.js';
import { switchToFilesSection, syncViewContainers } from './navigation.js';
import { app } from './state.js';
import { uiFileTypes } from './uiFileTypes.js';
import { uiNotifications } from './uiNotifications.js';
@@ -62,6 +62,7 @@ const ui = {
</div>
`;
document.body.appendChild(folderMenu);
i18n.translateElement(folderMenu);
}
// File context menu
@@ -82,6 +83,9 @@ const ui = {
<div class="context-menu-item" id="download-file-option">
<i class="fas fa-download"></i> <span data-i18n="actions.download">Download</span>
</div>
<div class="context-menu-item hidden" id="open-parent-folder-option">
<i class="fas fa-folder-open"></i> <span data-i18n="actions.open_parent_folder">Go to parent folder</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" id="favorite-file-option">
<i class="fas fa-star"></i> <span data-i18n="actions.favorite">Add to favorites</span>
@@ -105,6 +109,7 @@ const ui = {
</div>
`;
document.body.appendChild(fileMenu);
i18n.translateElement(fileMenu);
}
// Rename dialog — modern
@@ -912,6 +917,12 @@ const ui = {
const navigateFolder = (card) => {
const folderId = card.dataset.folderId;
const folderName = card.dataset.folderName;
if (app.currentSection === 'favorites' || app.currentSection === 'recent') {
switchToFilesSection();
app.currentPath = folderId;
loadFiles();
return;
}
app.breadcrumbPath.push({ id: folderId, name: folderName });
app.currentPath = folderId;
this.updateBreadcrumb();
@@ -1012,6 +1023,9 @@ const ui = {
if (contextMenus && typeof contextMenus.syncAddToPlaylistOption === 'function') {
contextMenus.syncAddToPlaylistOption();
}
if (contextMenus && typeof contextMenus.syncOpenParentFolderOption === 'function') {
contextMenus.syncOpenParentFolderOption();
}
if (menu) {
menu.style.left = `${e.pageX}px`;
menu.style.top = `${e.pageY}px`;
@@ -1295,6 +1309,7 @@ const ui = {
el.dataset.folderId = folder.id;
el.dataset.folderName = folder.name;
el.dataset.parentId = folder.parent_id || '';
if (folder.path) el.dataset.path = folder.path;
const isFav = favorites?.isFavorite(folder.id, 'folder');
const isShared = sharedView.isShared(folder.id, 'folder');
@@ -1345,6 +1360,7 @@ const ui = {
el.dataset.fileId = file.id;
el.dataset.fileName = file.name;
el.dataset.folderId = file.folder_id || '';
if (file.path) el.dataset.path = file.path;
el.setAttribute('draggable', 'true');
el.innerHTML = `
@@ -1557,6 +1573,9 @@ function showContextMenuAtElement(triggerElement, menuId) {
if (contextMenus && typeof contextMenus.syncAddToPlaylistOption === 'function') {
contextMenus.syncAddToPlaylistOption();
}
if (contextMenus && typeof contextMenus.syncOpenParentFolderOption === 'function') {
contextMenus.syncOpenParentFolderOption();
}
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
static/js/features/files/contextMenus.js
+18
View File
@@ -5,6 +5,7 @@
import { resolveHomeFolder } from '../../app/authSession.js';
import { loadFiles } from '../../app/filesView.js';
import { switchToFilesSection } from '../../app/navigation.js';
import { app } from '../../app/state.js';
import { showConfirmDialog, ui } from '../../app/ui.js';
import { getCsrfHeaders } from '../../core/csrf.js';
@@ -64,6 +65,13 @@ const contextMenus = {
}
},
syncOpenParentFolderOption() {
const option = document.getElementById('open-parent-folder-option');
if (!option) return;
const folderId = app?.contextMenuTargetFile?.folder_id;
option.classList.toggle('hidden', !folderId);
},
syncAddToPlaylistOption() {
const option = document.getElementById('add-to-playlist-option');
if (!option) return;
@@ -198,6 +206,16 @@ const contextMenus = {
ui.closeFileContextMenu();
});
document.getElementById('open-parent-folder-option').addEventListener('click', () => {
const folderId = app.contextMenuTargetFile?.folder_id;
ui.closeFileContextMenu();
if (folderId) {
switchToFilesSection();
app.currentPath = folderId;
loadFiles();
}
});
document.getElementById('favorite-file-option').addEventListener('click', async () => {
if (app.contextMenuTargetFile) {
const file = app.contextMenuTargetFile;
static/js/features/library/favorites.js
+8 -2
View File
@@ -10,6 +10,7 @@ import { ui } from '../../app/ui.js';
import { getCsrfHeaders } from '../../core/csrf.js';
import { i18n } from '../../core/i18n.js';
import { multiSelect } from '../files/multiSelect.js';
import * as pathTooltip from '../pathTooltip.js';
const favorites = {
/** @type {Map<string, object>} key = "file:<id>" | "folder:<id>" */
@@ -190,7 +191,8 @@ const favorites = {
id: item.item_id,
name: item.item_name || item.item_id,
parent_id: item.parent_id || '',
modified_at: item.modified_at || item.created_at
modified_at: item.modified_at || item.created_at,
path: item.item_path || ''
});
} else {
files.push({
@@ -203,12 +205,16 @@ const favorites = {
category: item.category,
size: item.item_size || 0,
size_formatted: item.size_formatted,
modified_at: item.modified_at || item.created_at
modified_at: item.modified_at || item.created_at,
path: item.item_path || ''
});
}
}
if (folders.length) ui.renderFolders(folders);
if (files.length) ui.renderFiles(files);
const filesList = document.getElementById('files-list');
if (filesList) pathTooltip.init(filesList);
} catch (error) {
console.error('Error displaying favorites:', error);
if (ui?.showNotification) {
static/js/features/library/recent.js
+6 -2
View File
@@ -10,6 +10,7 @@ import { ui } from '../../app/ui.js';
import { getCsrfHeaders } from '../../core/csrf.js';
import { i18n } from '../../core/i18n.js';
import { multiSelect } from '../files/multiSelect.js';
import * as pathTooltip from '../pathTooltip.js';
const recent = {
/** Maximum items to request from the server */
@@ -128,7 +129,8 @@ const recent = {
id: item.item_id,
name: item.item_name || item.item_id,
parent_id: item.parent_id || '',
modified_at: item.accessed_at
modified_at: item.accessed_at,
path: item.item_path || ''
});
} else {
files.push({
@@ -141,12 +143,14 @@ const recent = {
category: item.category,
size: item.item_size || 0,
size_formatted: item.size_formatted,
modified_at: item.accessed_at
modified_at: item.accessed_at,
path: item.item_path || ''
});
}
}
if (folders.length) ui.renderFolders(folders);
if (files.length) ui.renderFiles(files);
if (filesList) pathTooltip.init(filesList);
} catch (error) {
console.error('Error displaying recent files:', error);
if (ui?.showNotification) {
static/js/features/pathTooltip.js
+78
View File
@@ -0,0 +1,78 @@
/**
* Path tooltip — shows the full path of a hovered file/folder item
* in an overlay at the bottom-left of the content area.
*
* Usage: call init(container) after rendering items, destroy(container) on teardown.
* Only file-item elements with a data-path attribute trigger the tooltip.
*/
/** @type {HTMLElement|null} */
let _tooltip = null;
function _getOrCreateTooltip() {
if (_tooltip) return _tooltip;
_tooltip = document.getElementById('path-tooltip');
if (!_tooltip) {
_tooltip = document.createElement('div');
_tooltip.id = 'path-tooltip';
_tooltip.className = 'path-tooltip hidden';
document.querySelector('.main-content')?.appendChild(_tooltip);
}
return _tooltip;
}
/**
* @param {MouseEvent} e
*/
function _onEnter(e) {
const item = /** @type {HTMLElement} */ (e.currentTarget);
const path = item.dataset.path;
if (!path) return;
const tooltip = _getOrCreateTooltip();
tooltip.textContent = path;
tooltip.classList.remove('hidden');
}
function _onLeave() {
_tooltip?.classList.add('hidden');
}
/** @type {WeakMap<HTMLElement, {enter: Function, leave: Function}>} */
const _listeners = new WeakMap();
/**
* Attach path tooltip listeners to all file-item elements inside container.
* @param {HTMLElement} container
*/
function init(container) {
const items = container.querySelectorAll('.file-item[data-path]');
items.forEach((item) => {
const el = /** @type {HTMLElement} */ (item);
const enter = (e) => _onEnter(e);
const leave = () => _onLeave();
el.addEventListener('mouseenter', enter);
el.addEventListener('mouseleave', leave);
_listeners.set(el, { enter, leave });
});
}
/**
* Remove path tooltip listeners from all file-item elements inside container.
* @param {HTMLElement} container
*/
function destroy(container) {
const items = container.querySelectorAll('.file-item');
items.forEach((item) => {
const el = /** @type {HTMLElement} */ (item);
const fns = _listeners.get(el);
if (fns) {
el.removeEventListener('mouseenter', fns.enter);
el.removeEventListener('mouseleave', fns.leave);
_listeners.delete(el);
}
});
_onLeave();
}
export { destroy, init };