added new features

public/plugins/vue/tt-components/css/tt-file-gallery.css

@@ -193,6 +193,26 @@
         margin: 20px 0; /* Add some vertical margin for spacing */
     }
 
+.tt-file-gallery-filename {
+    padding: 4px 8px 0;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tt-file-gallery-description {
+    padding: 0 8px 4px;
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #6c757d; /* Bootstrap's text-muted color */
+}
+
 
 .tt-fullscreen-nav-btn {
     position: absolute;

public/plugins/vue/tt-components/tt-file-gallery.js

@@ -40,7 +40,6 @@ Vue.component('tt-fullscreen-viewer', {
             return this.currentItem?.fileId ? `/File/download?id=${this.currentItem.fileId}` : '#';
         }
     },
-    // NEW: Watcher to trigger PDF.js rendering when item changes in standalone mode
     watch: {
         currentItem(newItem) {
             if (this.isPdf(newItem) && this.isStandalone) {
@@ -106,16 +105,12 @@ Vue.component('tt-fullscreen-viewer', {
         onTouchStart(e) {},
         onTouchMove(e) {},
         onTouchEnd(e) {},
-
-        // NEW: Method to dynamically load the PDF.js library
         loadPdfJsScript() {
             return new Promise((resolve, reject) => {
                 if (document.getElementById('pdfjs-script')) {
-                    // Script tag exists, check if library is loaded
                     if (window.pdfjsLib) {
                         resolve();
                     } else {
-                        // Tag exists but script not loaded yet, wait for it
                         document.getElementById('pdfjs-script').addEventListener('load', () => resolve());
                         document.getElementById('pdfjs-script').addEventListener('error', (e) => reject(e));
                     }
@@ -134,8 +129,6 @@ Vue.component('tt-fullscreen-viewer', {
                 document.head.appendChild(script);
             });
         },
-
-        // NEW: Method to render PDF onto a canvas using PDF.js
         async renderPdfWithJs(url) {
             if (!url) return;
             this.isLoading = true;
@@ -146,12 +139,11 @@ Vue.component('tt-fullscreen-viewer', {
                 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@5.4.54/build/pdf.worker.min.mjs';
 
                 const pdf = await pdfjsLib.getDocument(url).promise;
-                // For simplicity, we render the first page. Add pagination controls as needed.
                 const page = await pdf.getPage(1);
 
                 const canvas = this.$refs.pdfCanvas;
-                if (!canvas) return; // Exit if canvas is not available
-                const container = canvas.parentElement; // Get the container to calculate size from
+                if (!canvas) return;
+                const container = canvas.parentElement;
                 if (!container) return;
 
                 const context = canvas.getContext('2d');
@@ -170,17 +162,14 @@ Vue.component('tt-fullscreen-viewer', {
 
             } catch (error) {
                 console.error('Error rendering PDF with PDF.js:', error);
-                // Optionally show an error message to the user
             } finally {
-                this.onContentLoad(); // Use existing method to hide loader
+                this.onContentLoad();
             }
         },
     },
     created() {
         this.currentItem = this.item;
         this.currentImageIndex = this.initialIndex;
-
-        // NEW: Check for standalone mode on component creation
         if (typeof window !== 'undefined' && window.matchMedia) {
             this.isStandalone = window.matchMedia('(display-mode: standalone)').matches;
         }
@@ -189,8 +178,6 @@ Vue.component('tt-fullscreen-viewer', {
         document.body.style.overflow = 'hidden';
         this.$nextTick(() => {
             this.$refs.viewer?.focus();
-
-            // NEW: Trigger initial PDF render on mount if in standalone mode
             if (this.isPdf(this.currentItem) && this.isStandalone) {
                 this.renderPdfWithJs(this.contentSrc);
             }
@@ -199,7 +186,6 @@ Vue.component('tt-fullscreen-viewer', {
     beforeDestroy() {
         document.body.style.overflow = '';
     },
-    //language=Vue
     template: `
       <div class="tt-fullscreen-overlay" @click.self="closeViewer" @keydown="handleKeyDown" tabindex="-1" ref="viewer">
         <div class="tt-fullscreen-toolbar">
@@ -342,12 +328,13 @@ Vue.component('tt-file-gallery', {
                 </div>
               </div>
               <div class="tt-file-gallery-filename" :title="file.fileName">
-                <span>{{ file.fileName }}</span>
-                <i v-if="editMode" class="fas fa-edit text-primary ml-1 action-icon"
-                   @click="startEdit(file, $event)"></i>
-                <i v-if="deleteMode" class="fas fa-trash text-danger ml-1 action-icon"
-                   @click="deleteFile(file, $event)"></i>
+                <span style="overflow: hidden; text-overflow: ellipsis;">{{ file.fileName }}</span>
+                <div>
+                  <i v-if="editMode" class="fas fa-edit text-primary ml-1 action-icon" @click="startEdit(file, $event)"></i>
+                  <i v-if="deleteMode" class="fas fa-trash text-danger ml-1 action-icon" @click="deleteFile(file, $event)"></i>
+                </div>
               </div>
+              <div v-if="file.description" class="tt-file-gallery-description" :title="file.description">{{ file.description }}</div>
             </div>
           </div>
         </div>