diff --git a/static/css/components/filesView.css b/static/css/components/filesView.css index 523dc6b8..5ac0c7ee 100644 --- a/static/css/components/filesView.css +++ b/static/css/components/filesView.css @@ -61,6 +61,10 @@ background-color: var(--color-warning-ring); } +.file-badge-shared { + color: var(--color-badge-blue-text); +} + /* ------------------File list View --------------------- */ .list-header { @@ -95,7 +99,7 @@ } .files-list-view { - --files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 64px; + --files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 72px; display: flex; flex-direction: column; width: 100%; @@ -174,7 +178,8 @@ text-align: right; } -.files-list-view .file-item .action-cell button { +.files-list-view .file-item .action-cell button, +.files-list-view .file-item .action-cell div { display: inline; width: 28px; height: 28px; @@ -327,6 +332,25 @@ border: 2px dashed var(--color-warning-border); } +.files-grid-view .file-item .file-badge-shared { + position: absolute; + top: 38px; + right: 38px; + width: 30px; + height: 30px; + border-radius: 8px; + border: none; + background: transparent; + display: flex; + align-items: center; + justify-content: center; + + z-index: 12; + font-size: 15px; + padding: 0; + line-height: 1; +} + /* Favorite star (mirrors file-actions button pattern) */ .files-grid-view .file-item button.favorite-star { position: absolute; diff --git a/static/js/app/main.js b/static/js/app/main.js index 229138d9..47801b90 100644 --- a/static/js/app/main.js +++ b/static/js/app/main.js @@ -376,7 +376,7 @@ function initApp() { multiSelect.init(); } - window.addEventListener('authenticationDone', () => { + window.addEventListener('authenticationDone', async () => { // Check if a context was provided in the URL const hashContext = deserializeHash(); switchSectionTo(hashContext.section); @@ -389,6 +389,7 @@ function initApp() { if (hashContext.file !== null) { app.viewFile = hashContext.file; } + loadFiles(); } }); @@ -604,6 +605,7 @@ function setupEventListeners() { let _updateHistory = true; const itemI18nKey = item.querySelector('span').getAttribute('data-i18n'); + switch (itemI18nKey) { case 'nav.shared': // Switch to shared view diff --git a/static/js/app/navigation.js b/static/js/app/navigation.js index 00b3c066..5db90cdb 100644 --- a/static/js/app/navigation.js +++ b/static/js/app/navigation.js @@ -190,10 +190,10 @@ function switchToSharedSection() { toggleFileContainer(false); // Show shared view - if (sharedView) { - sharedView.init(); + sharedView.init().then(() => { sharedView.show(); - } + }); + if (multiSelect) multiSelect.clear(); } @@ -222,7 +222,10 @@ function switchToFilesSection() { ui.updateBreadcrumb(); if (multiSelect) multiSelect.clear(); - loadFiles(); + // temp solution + sharedView.loadItems().then(() => { + loadFiles(); + }); } function switchToFavoritesSection() { @@ -245,7 +248,10 @@ function switchToFavoritesSection() { ui.resetFilesList(); if (favorites) { - favorites.displayFavorites(); + // temp solution + sharedView.loadItems().then(() => { + favorites.displayFavorites(); + }); } else { console.error('Favorites module not loaded or initialized'); ui.showError(` @@ -277,7 +283,9 @@ function switchToRecentFilesSection() { ui.resetFilesList(); if (recent) { - recent.displayRecentFiles(); + sharedView.loadItems().then(() => { + favorites.displayFavorites(); + }); } else { console.error('Recent files module not loaded or initialized'); ui.showError(` diff --git a/static/js/app/ui.js b/static/js/app/ui.js index 1c3e7f83..53d18e88 100644 --- a/static/js/app/ui.js +++ b/static/js/app/ui.js @@ -16,6 +16,7 @@ import { wopiEditor } from '../features/files/wopiEditor.js'; import { favorites } from '../features/library/favorites.js'; import { recent } from '../features/library/recent.js'; import { fileSharing } from '../features/sharing/fileSharing.js'; +import { sharedView } from '../views/shared/sharedView.js'; import { loadFiles } from './filesView.js'; import { updateHistory } from './main.js'; import { syncViewContainers } from './navigation.js'; @@ -1209,6 +1210,7 @@ const ui = { el.dataset.parentId = folder.parent_id || ''; const isFav = favorites?.isFavorite(folder.id, 'folder'); + const isShared = sharedView.isShared(folder.id, 'folder'); const formattedDate = formatDateTime(folder.modified_at); el.innerHTML = ` @@ -1219,15 +1221,16 @@ const ui = { ${escapeHtml(folder.name)} ${isFav ? '' : ''} + ${isShared ? '