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

refactor(ui): keep badges order (favorite, shared)

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-04-20 22:19:17 +02:00
parent 9095a80da2
commit 1d8da579cc
1 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app/ui.js
+23 -22
View File
@@ -7,7 +7,7 @@
import { escapeHtml, formatDateTime, formatFileSize } from '../core/formatters.js'; import { escapeHtml, formatDateTime, formatFileSize } from '../core/formatters.js';
import { i18n } from '../core/i18n.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 { contextMenus } from '../features/files/contextMenus.js';
import { fileOps } from '../features/files/fileOperations.js'; import { fileOps } from '../features/files/fileOperations.js';
import { inlineViewer } from '../features/files/inlineViewer.js'; import { inlineViewer } from '../features/files/inlineViewer.js';
@@ -1155,9 +1155,10 @@ const ui = {
setFavoriteVisualState(itemId, itemType, isFavorite) { 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 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 item = document.querySelector(selector);
const starBtn = card ? card.querySelector('.favorite-star') : null; const starBtn = item?.querySelector('.favorite-star');
// chzn
if (starBtn) { if (starBtn) {
starBtn.classList.toggle('active', !!isFavorite); starBtn.classList.toggle('active', !!isFavorite);
@@ -1180,20 +1181,21 @@ const ui = {
} }
} }
const listItem = document.querySelector(selector); // toggle favorite's badge
if (listItem) { if (item) {
const nameCell = listItem.querySelector('.name-cell'); const badgeFavorite = item.querySelector('.file-badge-favorite');
if (nameCell) { badgeFavorite?.classList.toggle('hidden', !isFavorite);
let inlineStar = nameCell.querySelector('.favorite-star-inline'); }
if (isFavorite && !inlineStar) { },
inlineStar = document.createElement('i');
inlineStar.className = 'fas fa-star favorite-star-inline'; setSharedVisualState(itemId, itemType, isShared) {
nameCell.appendChild(inlineStar); console.log(`setSharedVisual call for ${itemId} ${itemType} to ${isShared}`);
replaceIconsInElement(nameCell); const selector = itemType === 'folder' ? `#files-list .file-item[data-folder-id="${itemId}"]` : `#files-list .file-item[data-file-id="${itemId}"]`;
} else if (!isFavorite && inlineStar) { // toggle favorite's badge
inlineStar.remove(); 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 = {
<i class="fas fa-folder"></i> <i class="fas fa-folder"></i>
</div> </div>
<span>${escapeHtml(folder.name)}</span> <span>${escapeHtml(folder.name)}</span>
${isFav ? '<i class="fas fa-star favorite-star-inline"></i>' : ''} <div class="file-badge file-badge-favorite ${isFav ? '' : 'hidden'}"><i class="fas fa-star favorite-star-inline"></i></div>
${isShared ? '<div class="file-badge-shared"><i class="fas fa-share-alt"></i></div>' : ''} <div class="file-badge file-badge-shared ${isShared ? '' : 'hidden'}"><i class="fas fa-share-alt"></i></div>
</div> </div>
<div class="type-cell">${i18n ? i18n.t('files.file_types.folder') : 'Folder'}</div> <div class="type-cell">${i18n ? i18n.t('files.file_types.folder') : 'Folder'}</div>
<div class="size-cell">--</div> <div class="size-cell">--</div>
@@ -1268,9 +1270,8 @@ const ui = {
<i class="${iconClass}"></i> <i class="${iconClass}"></i>
</div> </div>
<span>${escapeHtml(file.name)}</span> <span>${escapeHtml(file.name)}</span>
${isFav ? '<i class="fas fa-star favorite-star-inline"></i>' : ''} <div class="file-badge file-badge-favorite ${isFav ? '' : 'hidden'}"><i class="fas fa-star favorite-star-inline"></i></div>
${isShared ? '<div class="file-badge-shared"><i class="fas fa-share-alt"></i></div>' : ''} <div class="file-badge file-badge-shared ${isShared ? '' : 'hidden'}"><i class="fas fa-share-alt"></i></div>
</div> </div>
<div class="type-cell">${typeLabel}</div> <div class="type-cell">${typeLabel}</div>
<div class="size-cell">${fileSize}</div> <div class="size-cell">${fileSize}</div>