diff --git a/src/views/LibraryView.vue b/src/views/LibraryView.vue index ce274ee..e351a19 100644 --- a/src/views/LibraryView.vue +++ b/src/views/LibraryView.vue @@ -64,7 +64,8 @@
{{ isVideo(f) ? 'VIDEO' : (isPhoto(f) ? 'PHOTO' : 'DOC') }}
- + +
📄 {{ getFileExt(f.file_name) }} @@ -278,6 +279,8 @@ function resetFilters() { .mp-file-card { border-radius: 14px; cursor: pointer; position: relative; } .mp-thumb-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #eef2f7; aspect-ratio: 4 / 3; border: 1px solid #e6ebf1; box-shadow: 0 0 0 2px #d9dde3 inset; } .lt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } +.mp-thumb-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #9aa0a6; animation: spin 1s linear infinite; } +@keyframes spin { to { transform: rotate(360deg); } } .mp-doc-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #f7f9fc, #eef2f7); color: #6b7280; text-align: center; padding: 14px; } .mp-doc-icon { font-size: 38px; line-height: 1; } .mp-doc-ext { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #7a818c; text-transform: uppercase; } diff --git a/src/views/PeopleView.vue b/src/views/PeopleView.vue index 447ca7a..547f201 100644 --- a/src/views/PeopleView.vue +++ b/src/views/PeopleView.vue @@ -14,7 +14,7 @@
No results
-
+
@@ -104,12 +104,19 @@
+
+
✎ Rename
+
⇄ Merge
+
+
✕ Delete
+
+
@@ -278,4 +317,9 @@ h1 { margin: 0; } .ms-modal-actions { display: flex; justify-content: flex-end; } h2 { margin: 0 0 16px; font-size: 1rem; } .ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; max-height: 50vh; overflow-y: auto; } +.ctx-menu { position: fixed; z-index: 9999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 140px; } +.ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; font-size: 0.85rem; color: #222; } +.ctx-item:hover { background: #f3f4f6; } +.ctx-item.danger { color: #d93025; } +.ctx-divider { height: 1px; background: #eee; margin: 4px 8px; }