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

refactor(files): merge grid and list builder, use CSS only to switch between views

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-04-03 17:58:14 +02:00
parent 3157d6ef64
commit a466a6473d
19 changed files with 640 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/features/files/multiSelect.js
+7 -7
View File
@@ -55,15 +55,14 @@ const multiSelect = {
clear() {
this._selected.clear();
this._lastClickedIndex = -1;
document.querySelectorAll('.file-card.selected, .file-item.selected')
document.querySelectorAll('.file-item.selected')
.forEach(el => el.classList.remove('selected'));
document.querySelectorAll('.item-checkbox').forEach(cb => cb.checked = false);
this._syncUI();
},
selectAll() {
this._selectAllInContainer('files-grid', '.file-card');
this._selectAllInContainer('files-list-view', '.file-item');
this._selectAllInContainer('files-list', '.file-item');
this._syncUI();
},
@@ -148,7 +147,7 @@ const multiSelect = {
},
_getAllVisibleItems() {
return [...document.querySelectorAll('.file-item, .file-card')];
return [...document.querySelectorAll('.file-item')];
},
_extractInfo(el) {
@@ -482,9 +481,10 @@ const multiSelect = {
document.addEventListener('keydown', (e) => {
if (e.target.closest('input, textarea, [contenteditable], .rename-dialog, .share-dialog, .confirm-dialog')) return;
// ctrl+a cmd+a
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
const grid = document.getElementById('files-grid');
if (grid && grid.closest('.files-container')) {
const filesList = document.getElementById('files-list');
if (filesList && filesList.closest('.files-container')) {
e.preventDefault();
this.selectAll();
}
@@ -512,4 +512,4 @@ const multiSelect = {
};
// Expose globally
window.multiSelect = multiSelect;
window.multiSelect = multiSelect;
static/js/features/files/search.js
+8 -10
View File
@@ -103,17 +103,18 @@ const search = {
* @param {Object} results - Enriched search results from backend
*/
displaySearchResults(results) {
const filesGrid = document.getElementById('files-grid');
const filesListView = document.getElementById('files-list-view');
window.ui.resetFilesList(); // ensure also list visible & error hidden
const filesList = document.getElementById('files-list');
filesGrid.innerHTML = '';
filesListView.innerHTML = `
// reset list
filesList.innerHTML = `
<div class="list-header">
<div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
<div data-i18n="files.name">Name</div>
<div data-i18n="files.type">Type</div>
<div data-i18n="files.size">Size</div>
<div data-i18n="files.modified">Modified</div>
<div></div>
</div>
`;
@@ -142,7 +143,7 @@ const search = {
</button>
</div>
`;
filesGrid.appendChild(searchHeader);
filesList.appendChild(searchHeader);
// Sort dropdown — re-searches with new sort order (server-side)
const sortSelect = document.getElementById('search-sort-select');
@@ -172,13 +173,10 @@ const search = {
// Empty state
if (results.files.length === 0 && results.folders.length === 0) {
const emptyState = document.createElement('div');
emptyState.className = 'empty-state';
emptyState.innerHTML = `
window.ui.showError(`
<i class="fas fa-search empty-state-icon"></i>
<p class="search-empty-text">No results found for this search</p>
`;
filesGrid.appendChild(emptyState);
`);
return;
}
static/js/features/library/favorites.js
+5 -9
View File
@@ -167,11 +167,10 @@ const favorites = {
await this._fetchFromServer();
}
const filesGrid = document.getElementById('files-grid');
const filesListView = document.getElementById('files-list-view');
window.ui.resetFilesList(); // ensure also list visible & error hidden
const filesList = document.getElementById('files-list');
filesGrid.innerHTML = '';
filesListView.innerHTML = `
filesList.innerHTML = `
<div class="list-header">
<div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
<div data-i18n="files.name">Name</div>
@@ -184,14 +183,11 @@ const favorites = {
window.ui.updateBreadcrumb('');
if (this._cache.size === 0) {
const emptyState = document.createElement('div');
emptyState.className = 'empty-state';
emptyState.innerHTML = `
window.ui.showError( `
<i class="fas fa-star empty-state-icon"></i>
<p>${window.i18n ? window.i18n.t('favorites.empty_state') : 'No favorite items'}</p>
<p>${window.i18n ? window.i18n.t('favorites.empty_hint') : 'To mark as favorite, right-click on any file or folder'}</p>
`;
filesGrid.appendChild(emptyState);
`);
return;
}
static/js/features/library/recent.js
+6 -10
View File
@@ -86,32 +86,28 @@ const recent = {
const recentItems = await response.json();
const filesGrid = document.getElementById('files-grid');
const filesListView = document.getElementById('files-list-view');
window.ui.resetFilesList(); // ensure also list visible & error hidden
const filesList = document.getElementById('files-list');
filesGrid.innerHTML = '';
filesListView.innerHTML = `
filesList.innerHTML = `
<div class="list-header">
<div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
<div data-i18n="files.name">Name</div>
<div data-i18n="files.type">Type</div>
<div data-i18n="files.size">Size</div>
<div data-i18n="recent.accessed">Accessed</div>
<div></div>
</div>
`;
window.ui.updateBreadcrumb('');
if (recentItems.length === 0) {
const emptyState = document.createElement('div');
emptyState.className = 'empty-state';
emptyState.innerHTML = `
window.ui.showError(`
<i class="fas fa-clock empty-state-icon"></i>
<p>${window.i18n ? window.i18n.t('recent.empty_state') : 'No recent files'}</p>
<p>${window.i18n ? window.i18n.t('recent.empty_hint') : 'Files you open will appear here'}</p>
`;
filesGrid.appendChild(emptyState);
return;
`);
}
const folders = [];