Merge pull request #255 from EdouardVanbelle/feat/list-more

static/css/components/fileList.css

@@ -1,6 +1,6 @@
 /* File list - Improved style */
 .files-list-view {
-	--files-list-columns: 36px minmax(200px, 2fr) 100px 110px 160px;
+	--files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 36px;
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -73,6 +73,10 @@
 	overflow: hidden;
 }
 
+.file-item .action-cell {
+	align-items: center;
+}
+
 .file-item .name-cell span {
 	white-space: nowrap;
 	overflow: hidden;
@@ -307,6 +311,11 @@
 	display: none;
 }
 
+.list-header > div:nth-child(5),
+.file-item .date-cell {
+	justify-self: center;
+	text-align: center;
+}
 .file-item .date-cell {
 	color: #718096;
 	font-size: 14px;
@@ -335,6 +344,25 @@
 	border: 2px dashed #ffc107;
 }
 
+/* More actions button (three dots) */
+.file-more {
+	width: 30px;
+	height: 30px;
+	border-radius: 8px;
+	border: none;
+	background: transparent;
+	align-items: center;
+	justify-content: center;
+	transition: opacity 0.15s, background 0.15s;
+	cursor: pointer;
+	color: #64748b;
+	font-size: 16px;
+}
+
+.file-more:hover {
+	background: #e0e5e8;
+	color: #334155;
+}
 
 [data-theme="dark"] .files-list-view {
 	background-color: #1e293b;
@@ -385,3 +413,12 @@
 	background-color: rgba(255, 193, 7, 0.05);
 }
 
+[data-theme="dark"] .file-more {
+	color: #94a3b8;
+}
+
+[data-theme="dark"] .file-more:hover {
+	background: #334155;
+	color: #e2e8f0;
+}
+

static/index.html

@@ -270,6 +270,7 @@
                         <div data-i18n="files.type">Type</div>
                         <div data-i18n="files.size">Size</div>
                         <div data-i18n="files.modified">Modified</div>
+                        <div></div><!-- actions -->
                     </div>
                     <!-- Files will be populated here in list view -->
                 </div>

static/js/app/ui.js

@@ -890,6 +890,19 @@ const ui = {
             const card = e.target.closest('.file-item');
             if (!card) return;
 
+            if (e.target.closest('.file-more')) {
+                e.stopPropagation();
+                e.preventDefault();
+                const info = itemInfo(card);
+                if (!info) return;
+                setContextTarget(card, info);
+                const menuId = info.type === 'folder'
+                    ? 'folder-context-menu' : 'file-context-menu';
+                showContextMenuAtElement(
+                    e.target.closest('.file-more'), menuId);
+                return;
+            }
+
             if (e.target.closest('.list-item-checkbox') ||
                 e.target.closest('.item-checkbox')) {
                 toggleCardSelection(card, e);
@@ -1115,7 +1128,7 @@ const ui = {
                 <i class="fas fa-folder"></i>
             </div>
             <div class="file-name">${escapeHtml(folder.name)}</div>
-            <div class="file-info">Folder</div>
+            <div class="file-info">${window.i18n ? window.i18n.t('files.file_types.folder') : 'Folder'}</div>
         `;
 
         if (window.app.currentPath !== "") {
@@ -1153,6 +1166,7 @@ const ui = {
             <div class="type-cell">${window.i18n ? window.i18n.t('files.file_types.folder') : 'Folder'}</div>
             <div class="size-cell">--</div>
             <div class="date-cell">${formattedDate}</div>
+            <div class="action-cell"><button class="file-more"><i class="fas fa-ellipsis-v"></i></button></div>
         `;
         return el;
     },
@@ -1228,6 +1242,7 @@ const ui = {
             <div class="type-cell">${typeLabel}</div>
             <div class="size-cell">${fileSize}</div>
             <div class="date-cell">${formattedDate}</div>
+            <div class="action-cell"><button class="file-more"><i class="fas fa-ellipsis-v"></i></button></div>
         `;
         var thumb = el.querySelector('.file-thumb');
         if (thumb) thumb.addEventListener('error', function() { this.style.display = 'none'; });