From 1d8da579cc5493893a9c4edcaf6f5472e61e9d44 Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Mon, 20 Apr 2026 22:19:17 +0200 Subject: [PATCH 01/10] refactor(ui): keep badges order (favorite, shared) --- static/js/app/ui.js | 45 +++++++++++++++++++++++---------------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/static/js/app/ui.js b/static/js/app/ui.js index 53d18e88..f341166e 100644 --- a/static/js/app/ui.js +++ b/static/js/app/ui.js @@ -7,7 +7,7 @@ import { escapeHtml, formatDateTime, formatFileSize } from '../core/formatters.js'; import { i18n } from '../core/i18n.js'; -import { OxiIcons, replaceIconsInElement } from '../core/icons.js'; +import { OxiIcons } from '../core/icons.js'; import { contextMenus } from '../features/files/contextMenus.js'; import { fileOps } from '../features/files/fileOperations.js'; import { inlineViewer } from '../features/files/inlineViewer.js'; @@ -1155,9 +1155,10 @@ const ui = { setFavoriteVisualState(itemId, itemType, isFavorite) { const selector = itemType === 'folder' ? `#files-list .file-item[data-folder-id="${itemId}"]` : `#files-list .file-item[data-file-id="${itemId}"]`; - const card = document.querySelector(selector); - const starBtn = card ? card.querySelector('.favorite-star') : null; + const item = document.querySelector(selector); + const starBtn = item?.querySelector('.favorite-star'); + // chzn if (starBtn) { starBtn.classList.toggle('active', !!isFavorite); @@ -1180,20 +1181,21 @@ const ui = { } } - const listItem = document.querySelector(selector); - if (listItem) { - const nameCell = listItem.querySelector('.name-cell'); - if (nameCell) { - let inlineStar = nameCell.querySelector('.favorite-star-inline'); - if (isFavorite && !inlineStar) { - inlineStar = document.createElement('i'); - inlineStar.className = 'fas fa-star favorite-star-inline'; - nameCell.appendChild(inlineStar); - replaceIconsInElement(nameCell); - } else if (!isFavorite && inlineStar) { - inlineStar.remove(); - } - } + // toggle favorite's badge + if (item) { + const badgeFavorite = item.querySelector('.file-badge-favorite'); + badgeFavorite?.classList.toggle('hidden', !isFavorite); + } + }, + + setSharedVisualState(itemId, itemType, isShared) { + console.log(`setSharedVisual call for ${itemId} ${itemType} to ${isShared}`); + const selector = itemType === 'folder' ? `#files-list .file-item[data-folder-id="${itemId}"]` : `#files-list .file-item[data-file-id="${itemId}"]`; + // toggle favorite's badge + const item = document.querySelector(selector); + if (item) { + const badgeShared = item.querySelector('.file-badge-shared'); + badgeShared?.classList.toggle('hidden', !isShared); } }, @@ -1220,8 +1222,8 @@ const ui = { ${escapeHtml(folder.name)} - ${isFav ? '' : ''} - ${isShared ? '
' : ''} +
+
${i18n ? i18n.t('files.file_types.folder') : 'Folder'}
--
@@ -1268,9 +1270,8 @@ const ui = { ${escapeHtml(file.name)} - ${isFav ? '' : ''} - ${isShared ? '
' : ''} - +
+
${typeLabel}
${fileSize}
From 1fd92f9efa2c54d61c5f5d041db88f6dbf4c7f3d Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Mon, 20 Apr 2026 23:40:22 +0200 Subject: [PATCH 02/10] fix(ui): update shared badge on change --- static/js/features/files/contextMenus.js | 4 ++++ static/js/views/shared/sharedView.js | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/static/js/features/files/contextMenus.js b/static/js/features/files/contextMenus.js index e73e28fa..54618a19 100644 --- a/static/js/features/files/contextMenus.js +++ b/static/js/features/files/contextMenus.js @@ -909,6 +909,7 @@ const contextMenus = { btn.closest('.existing-share-item').remove(); if (existingSharesContainer.children.length === 0) { document.getElementById('existing-shares-section').classList.add('hidden'); + ui.setSharedVisualState(item.id, item.type, false); } } }); @@ -992,6 +993,9 @@ const contextMenus = { shareUrl.select(); } + // Update Item's shared badge + ui.setSharedVisualState(item.id, item.type, true); + // Show success message ui.showNotification( i18n ? i18n.t('notifications.link_created') : 'Link created', diff --git a/static/js/views/shared/sharedView.js b/static/js/views/shared/sharedView.js index 3b2d9c52..8c04b008 100644 --- a/static/js/views/shared/sharedView.js +++ b/static/js/views/shared/sharedView.js @@ -575,6 +575,7 @@ const sharedView = { }; try { + // FIXME: redundance with fileSharing const res = await fetch(`/api/shares/${this.currentItem.id}`, { method: 'PUT', headers: this._headers(true), @@ -589,7 +590,8 @@ const sharedView = { console.error('Error updating share:', err); this.showNotification(err.message || 'Error updating share', 'error'); } - + // update UI + ui.setSharedVisualState(this.currentItem.item_id, this.currentItem.item_type, true); this.closeShareDialog(); await this.loadItems(true); this.filterAndSortItems(); @@ -600,6 +602,7 @@ const sharedView = { if (!this.currentItem) return; try { + // FIXME: redundance with fileSharing const res = await fetch(`/api/shares/${this.currentItem.id}`, { method: 'DELETE', headers: this._headers() @@ -614,6 +617,8 @@ const sharedView = { this.closeShareDialog(); await this.loadItems(true); this.filterAndSortItems(); + // update UI + ui.setSharedVisualState(this.currentItem.item_id, this.currentItem.item_type, this.isShared(this.currentItem.item_id, this.currentItem.item_type)); }, // Send notification (stub) From bdb5a6c7a9d58c038449e5fb1bf4a64fb08cf394 Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Mon, 20 Apr 2026 23:49:41 +0200 Subject: [PATCH 03/10] fix(ui): correct close button on shared dialog - close is more appropriate rather cancel - translate shared dialog --- static/js/app/ui.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/static/js/app/ui.js b/static/js/app/ui.js index f341166e..80520a77 100644 --- a/static/js/app/ui.js +++ b/static/js/app/ui.js @@ -208,6 +208,7 @@ const ui = { + `; + i18n.translateElement(shareDialog); document.body.appendChild(shareDialog); // Add event listeners for share dialog - document.getElementById('share-cancel-btn').addEventListener('click', () => { + document.getElementById('share-close-btn').addEventListener('click', () => { contextMenus.closeShareDialog(); }); From 24967489e17813c1d83649c8280c5f04d0bc962f Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Tue, 21 Apr 2026 00:31:32 +0200 Subject: [PATCH 04/10] improve(ui) favorite star: remove duplicate information on item + badge-shared: click on it to open share dialog --- static/js/app/ui.js | 41 +++++++++++++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 8 deletions(-) diff --git a/static/js/app/ui.js b/static/js/app/ui.js index 80520a77..d5323d38 100644 --- a/static/js/app/ui.js +++ b/static/js/app/ui.js @@ -1120,18 +1120,19 @@ const ui = { * ================================================================ */ _bindStarClick(el) { const star = el.querySelector('.favorite-star'); - if (!star) return; - - star.addEventListener('click', (e) => { + star?.addEventListener('click', (e) => { e.stopPropagation(); e.stopImmediatePropagation(); e.preventDefault(); if (!favorites) return; - const itemId = star.dataset.itemId; - const itemType = star.dataset.itemType; - const itemName = star.dataset.itemName; + // FIXME: make a function + const itemElement = shared?.closest('.file-item'); + + const itemId = itemElement.dataset.fileId ? itemElement.dataset.fileId : itemElement.dataset.folderId; + const itemType = itemElement.dataset.fileId ? 'file' : 'folder'; + const itemName = itemElement.dataset.fileId ? itemElement.dataset.fileName : itemElement.dataset.folderName; const isActive = star.classList.contains('active'); @@ -1148,6 +1149,30 @@ const ui = { contextMenus.syncFavoriteOptionLabels(); } }); + + const shared = el.querySelector('.file-badge-shared'); + shared?.addEventListener('click', (e) => { + e.stopPropagation(); + e.stopImmediatePropagation(); + e.preventDefault(); + + // FIXME: make a function + const itemElement = shared?.closest('.file-item'); + + const itemId = itemElement.dataset.fileId ? itemElement.dataset.fileId : itemElement.dataset.folderId; + const itemType = itemElement.dataset.fileId ? 'file' : 'folder'; + const itemName = itemElement.dataset.fileId ? itemElement.dataset.fileName : itemElement.dataset.folderName; + + // TODO corrently dirty + const item = { + id: itemId, + item_id: itemId, + item_type: itemType, + item_name: itemName + }; + + contextMenus.showShareDialog(item, itemType); + }); }, /** @@ -1230,7 +1255,7 @@ const ui = {
--
${formattedDate}
- @@ -1278,7 +1303,7 @@ const ui = {
${fileSize}
${formattedDate}
- From 832c9ab5773ad6026a2bd29a5dea7b2415cc4af3 Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Fri, 24 Apr 2026 23:07:04 +0200 Subject: [PATCH 05/10] improve(ui): dialog: add escape key on shared dialog + perfer hidden class --- static/css/components/dialogs.css | 10 ++++----- static/js/app/ui.js | 18 +++++++++++----- static/js/features/files/contextMenus.js | 26 ++++++++++++------------ 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/static/css/components/dialogs.css b/static/css/components/dialogs.css index 691677bd..a6a5f771 100644 --- a/static/css/components/dialogs.css +++ b/static/css/components/dialogs.css @@ -27,7 +27,7 @@ width: 100%; height: 100%; background-color: var(--color-overlay-light); - display: none; + display: flex; align-items: center; justify-content: center; z-index: 3000; @@ -106,7 +106,7 @@ width: 100%; height: 100%; background-color: var(--color-overlay-light); - display: none; + display: flex; justify-content: center; align-items: center; z-index: 3000; @@ -205,7 +205,7 @@ width: 100%; height: 100%; background-color: var(--color-overlay-light); - display: none; + display: flex; justify-content: center; align-items: center; z-index: 3000; @@ -512,7 +512,7 @@ width: 100%; height: 100%; background-color: var(--color-overlay-light); - display: none; + display: flex; align-items: center; justify-content: center; z-index: 4000; @@ -593,7 +593,7 @@ width: 100%; height: 100%; background-color: var(--color-overlay); - display: none; + display: flex; align-items: center; justify-content: center; z-index: 1000; diff --git a/static/js/app/ui.js b/static/js/app/ui.js index d5323d38..0c806f9e 100644 --- a/static/js/app/ui.js +++ b/static/js/app/ui.js @@ -111,7 +111,7 @@ const ui = { // Rename dialog — modern if (!document.getElementById('rename-dialog')) { const renameDialog = document.createElement('div'); - renameDialog.className = 'rename-dialog'; + renameDialog.classList.add('rename-dialog', 'hidden'); renameDialog.id = 'rename-dialog'; renameDialog.innerHTML = `
@@ -134,7 +134,7 @@ const ui = { // Move dialog — modern with navigation if (!document.getElementById('move-file-dialog')) { const moveDialog = document.createElement('div'); - moveDialog.className = 'rename-dialog'; + moveDialog.classList.add('rename-dialog', 'hidden'); moveDialog.id = 'move-file-dialog'; moveDialog.innerHTML = `
@@ -161,7 +161,7 @@ const ui = { // Share dialog if (!document.getElementById('share-dialog')) { const shareDialog = document.createElement('div'); - shareDialog.className = 'share-dialog'; + shareDialog.classList.add('share-dialog', 'hidden'); shareDialog.id = 'share-dialog'; shareDialog.innerHTML = `