diff --git a/static/css/views/inlineViewer.css b/static/css/views/inlineViewer.css index b22d1915..a1803b1d 100755 --- a/static/css/views/inlineViewer.css +++ b/static/css/views/inlineViewer.css @@ -171,6 +171,56 @@ color: #64748b; } +/* Download progress container */ +.inline-viewer-progress { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 20px; + background: rgba(255, 255, 255, 0.95); + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +/* Progress bar track */ +.inline-viewer-progress-bar { + width: 200px; + height: 8px; + background: #e2e8f0; + border-radius: 4px; + overflow: hidden; +} + +/* Progress bar fill */ +.inline-viewer-progress-fill { + height: 100%; + background: linear-gradient(90deg, #3b82f6, #60a5fa); + border-radius: 4px; + transition: width 0.2s ease; +} + +/* Progress percentage text */ +.inline-viewer-progress-text { + font-size: 14px; + font-weight: 600; + color: #475569; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +/* Dark theme support */ +[data-theme="dark"] .inline-viewer-progress { + background: rgba(30, 41, 59, 0.95); +} + +[data-theme="dark"] .inline-viewer-progress-bar { + background: #334155; +} + +[data-theme="dark"] .inline-viewer-progress-text { + color: #cbd5e1; +} + /* Error and unsupported message */ .inline-viewer-message { padding: 32px; diff --git a/static/js/features/files/inlineViewer.js b/static/js/features/files/inlineViewer.js index ad4a0187..9a451cc1 100755 --- a/static/js/features/files/inlineViewer.js +++ b/static/js/features/files/inlineViewer.js @@ -251,13 +251,42 @@ class InlineViewer { async createBlobUrlViewer(file, type, container, loader) { try { console.log('Creating blob URL viewer for:', file.name, 'type:', type); - + + // Update loader to show progress bar for large files + let progressBar = null; + let progressText = null; + if (loader && file.size > 10 * 1024 * 1024) { // Show progress for files > 10MB + loader.innerHTML = ` +